import { memo, useEffect, useState } from "react";
import { FiCopy } from "react-icons/fi";
import useRegenerateKey from "../../../hooks/features/api-keys/useRegenerateKey";
import { useAppSelector } from "../../../hooks/useAppRedux";
import RegenerateKeyTooltip from "../../ui/CustomTooltip";
import CustomTooltip from "../../ui/CustomTooltip";

const LicenseKeyCard = memo(function LicenseKeyCard() {
  const [copied, setCopied] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const { handleRegenerateKey, loading } = useRegenerateKey();
  const profile = useAppSelector((state) => state.user.user);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(profile?.apiKey || "");

      setCopied(true);

      setTimeout(() => {
        setCopied(false);
      }, 2000);
    } catch (error) {
      console.error(error);
    }
  };

  const handleGenerateKey = async () => {
    try {
      await handleRegenerateKey();
    } catch (error) {
      console.log(error);
    }
  };

  if (!mounted) {
    return (
      <div className="rounded-2xl p-4 glass-card-v2 sm:p-5 xl:p-7.5">
        <div className="relative z-10">
          <div className="mb-4 xl:mb-6 2xl:mb-8 h-7 w-36 animate-pulse rounded-md bg-gray-200" />

          <div className="flex flex-col gap-6 sm:flex-row sm:flex-wrap sm:items-center">
            <div className="flex w-full items-center justify-between gap-3 rounded-full border border-badge bg-white/60 px-4 py-2.5 sm:w-auto">
              <div className="h-5 w-64 animate-pulse rounded bg-gray-200" />

              <div className="h-7 w-7 animate-pulse rounded-lg bg-gray-200" />
            </div>

            <div className="h-5 w-32 animate-pulse rounded bg-gray-200" />
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="rounded-2xl p-4 glass-card-v2 sm:p-5 xl:p-7.5">
      <div className="relative z-10">
        <h2 className="mb-4 xl:mb-6 2xl:mb-8 font-body text-lg md:text-xl font-bold text-heading 2xl:text-2xl">
          License Key
        </h2>

        <div className="flex flex-col gap-6 sm:flex-row sm:flex-wrap sm:items-center">
          <div className="flex w-full items-center justify-between gap-3 rounded-full border border-badge bg-white/60 px-4 py-2.5 text-link sm:w-auto">
            <span className="truncate font-body text-sm xl:text-lg font-medium">
              {profile?.apiKey
                ? profile?.apiKey.length > 20
                  ? `${profile?.apiKey.slice(0, 20)}...`
                  : profile.apiKey
                : "There is no API key. Please generate one."}
            </span>

            <div className="relative">
              {profile?.apiKey && (
                <button
                  type="button"
                  onClick={handleCopy}
                  className="cursor-pointer flex h-5.5 w-5.5 xl:h-7 xl:w-7 shrink-0 items-center justify-center rounded-lg text-white gradient1"
                >
                  <FiCopy size={14} />
                </button>
              )}

              {copied && (
                <div className="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-black px-3 py-1 text-xs text-white shadow-lg animate-in fade-in duration-200">
                  Copied!
                </div>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              type="button"
              disabled={loading}
              onClick={handleGenerateKey}
              className="w-fit cursor-pointer font-body text-base font-medium text-link-1 underline transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-60"
            >
              {loading ? "Regenerating..." : "Regenerate Key"}
            </button>

            <CustomTooltip forWhat="regenerate-key" />
          </div>
        </div>
      </div>
    </div>
  );
});

LicenseKeyCard.displayName = "LicenseKeyCard";

export default LicenseKeyCard;
