"use client";

import Image from "next/image";
import { FiCopy, FiEdit } from "react-icons/fi";
import Button from "../../../../components/ui/Button";
import { useAppSelector } from "../../../../hooks/useAppRedux";
import useRegenerateKey from "../../../../hooks/features/api-keys/useRegenerateKey";
import { useState } from "react";

export default function ProfilePage() {
  const [copied, setCopied] = useState(false);
  const profile = useAppSelector((state) => state.user.user);
  const { handleRegenerateKey, loading } = useRegenerateKey();

  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 (!profile) return null;

  return (
    <div className="mx-auto max-w-229 space-y-6">
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <h2 className="font-heading text-xl font-semibold leading-8.5 text-heading md:text-2xl mb-6 md:mb-8">
            My Profile
          </h2>
          <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start justify-between">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
              <div className="relative h-22.5 w-22.5 overflow-hidden rounded-full border-3 border-badge">
                <Image
                  src="/images/user.png"
                  alt="Profile"
                  fill
                  className="object-cover"
                />
              </div>

              <div>
                <h2 className="font-body text-xl font-bold leading-8.5 text-heading md:text-2xl mb-2.5">
                  {profile.firstName} {profile.lastName}
                </h2>

                <div className="mt-2 flex flex-wrap items-center gap-3">
                  <span className="font-body rounded-full flex items-center gap-2 border border-badge bg-white p-2.5 leading-5.5 text-lg font-medium text-link">
                    <Image
                      src="/images/credits-icon.svg"
                      alt="Credits Icon"
                      width={20}
                      height={20}
                      className="h-5 w-5 object-contain"
                    />{" "}
                    200 Credits left!
                  </span>

                  <button className="text-base font-body font-medium text-link-1 cursor-pointer">
                    {" "}
                    Upgrade Now{" "}
                  </button>
                </div>
              </div>
            </div>
            <Button
              icon={<FiEdit size={18} />}
              BtnInnerclassName="!py-3 px-4.5 !leading-5.5"
              href="/edit-profile"
            >
              Edit Profile
            </Button>
          </div>
          <div className="divide-y divide-[#DDD7F0]">
            <InfoRow label="Email" value={profile.email} />
            <InfoRow
              label="Phone Number"
              value={`${profile.dialCode} ${profile.mobileNumber}`}
            />

            <div className="flex flex-col gap-3 py-5 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="font-semibold text-heading font-body text-xl">
                  Password
                </p>
                <p className="mt-2 text-lg text-text">****************</p>
              </div>

              <Button
                variant="white"
                buttonClassName="!shadow-none"
                BtnInnerclassName="!py-3 px-4 !leading-5.5 !text-link"
                href="/change-password"
              >
                Change Password
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* License Key */}
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <h2 className="font-heading text-xl font-semibold leading-8.5 text-heading md:text-2xl mb-6 md:mb-8">
            License Key
          </h2>
          <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="font-semibold text-heading font-body text-xl">
                Key Generated
              </p>

              <div className="mt-2 flex items-center gap-3">
                <p className="text-lg text-text font-medium">
                  {profile.apiKey?.slice(0, 20)}
                  {"..."}
                </p>

                <div className="relative">
                  <button
                    onClick={handleCopy}
                    className="flex h-7 w-7 items-center justify-center rounded-lg gradient1 cursor-pointer text-white"
                  >
                    <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>
            <Button
              variant="white"
              onClick={handleGenerateKey}
              buttonClassName="!shadow-none"
              BtnInnerclassName="!py-3 px-4 !leading-5.5 !text-link"
            >
              {loading ? "Generating..." : "Generate New Key"}
            </Button>
          </div>
        </div>
      </div>

      {/* Account Management */}
      <div className="glass-card-v2 rounded-2xl p-6 md:p-7.5">
        <div className="relative z-10">
          <h2 className="font-heading text-xl font-semibold leading-8.5 text-heading md:text-2xl mb-6 md:mb-8">
            Account Management
          </h2>

          <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="font-semibold text-danger font-body text-xl">
                Delete Account
              </p>
              <p className="mt-2 text-lg text-text font-medium">
                Delete your Klebo AI Account. All your data will be permanently
                deleted.
              </p>
            </div>
            <Button
              variant="white"
              buttonClassName="!shadow-none !p-0 "
              BtnInnerclassName="!py-3 px-4 !leading-5.5 !text-danger border-1 border-danger-400 "
            >
              Delete Account
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="py-5 first:pt-0">
      <p className="font-semibold text-heading font-body text-xl">{label}</p>
      <p className="mt-2 text-lg text-text">{value}</p>
    </div>
  );
}