"use client";

import { useEffect, useState } from "react";
import { FiEdit } from "react-icons/fi";

import Button from "../../../components/ui/Button";
import { useModal } from "../../../lib/modal-system/ModalContext";
import useProfileFetch from "../../../hooks/features/profile/useProfileFetch";
import { UserImage } from "../../../components/ui/CustomImage";
import ClientWrapper from "../../../components/ClientWrapper";
import SomethingWentWrong from "../../../components/SomethingWentWrong";

export default function AdminProfilePage() {
  const { openModal } = useModal();
  const { profile, loading, error, isError } = useProfileFetch();

  const [mounted, setMounted] = useState(false);

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

  if (!mounted) {
    return null;
  }

  if (loading) {
    return <ProfilePageSkeleton />;
  }

  if (isError || !profile) {
    return <SomethingWentWrong />;
  }

  return (
    <ClientWrapper fallback={<ProfilePageSkeleton />}>
      <section className="p-4 md:p-6 pt-6 2xl:pt-10 2xl:p-10">
        <h1 className="mb-5 text-base lg:text-lg xl:text-xl 2xl:text-28 font-semibold text-heading 2xl:leading-9.5">
          Profile
        </h1>

        <div className="glass-card-v2 max-w-6xl rounded-2xl p-4 xl:p-6">
          <div className="mb-6 flex flex-col justify-center items-center gap-6 sm:flex-row sm:items-start sm:justify-between xl:mb-10">
            <div>
              <div className="relative h-25 w-25 overflow-hidden rounded-full border-2 border-badge xl:h-36 xl:w-36 xl:border-8">
                <UserImage
                  src={profile.profilePicture}
                  alt="Profile"
                  className="h-full w-full rounded-full object-cover"
                  loading="lazy"
                />
              </div>

              <h2 className="mt-2 md:mt-4 text-lg font-semibold text-heading xl:text-2xl">
                {profile.firstName} {profile.lastName}
              </h2>
            </div>

            <Button
              href="/admin/profile/edit"
              icon={<FiEdit />}
              BtnInnerclassName="!py-3.5 !px-5"
            >
              Edit Profile
            </Button>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            <div className="border-b border-link-1/20 pb-5">
              <h3 className="mb-2 text-base font-semibold text-heading xl:text-xl">
                Email
              </h3>

              <p className="text-sm text-heading xl:text-lg">{profile.email}</p>
            </div>

            <div className="border-b border-link-1/20 pb-5">
              <h3 className="mb-2 text-base font-semibold text-heading xl:text-xl">
                Phone Number
              </h3>

              <p className="text-sm text-heading xl:text-lg">
                {profile.dialCode} {profile.mobileNumber}
              </p>
            </div>

            <div className="md:col-span-2 flex flex-wrap gap-4 items-center justify-between">
              <div>
                <h3 className="mb-2 text-base font-semibold text-heading xl:text-xl">
                  Password
                </h3>

                <p className="tracking-widest text-sm text-heading xl:text-lg">
                  ***************
                </p>
              </div>

              <Button
                type="button"
                variant="white"
                onClick={() => openModal("CHANGE_PASSWORD", {})}
                BtnInnerclassName="!py-3.5 !px-4.5"
              >
                Change Password
              </Button>
            </div>
          </div>
        </div>
      </section>
    </ClientWrapper>
  );
}

function ProfilePageSkeleton() {
  return (
    <section className="animate-pulse p-4 md:p-6 pt-6 2xl:pt-10 2xl:p-10">
      <div className="mb-5 h-8 w-32 rounded bg-gray-200" />

      <div className="glass-card-v2 max-w-6xl rounded-2xl p-4 xl:p-6">
        <div className="mb-6 flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between xl:mb-10">
          <div>
            <div className="h-25 w-25 rounded-full border-2 border-gray-200 bg-gray-200 xl:h-36 xl:w-36 xl:border-8" />

            <div className="mt-4 h-7 w-44 rounded bg-gray-200" />
          </div>

          <div className="h-12 w-full rounded-xl bg-gray-200 sm:w-40" />
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          <div className="border-b border-link-1/20 pb-5">
            <div className="mb-2 h-5 w-20 rounded bg-gray-200" />
            <div className="h-4 w-3/4 rounded bg-gray-200" />
          </div>

          <div className="border-b border-link-1/20 pb-5">
            <div className="mb-2 h-5 w-32 rounded bg-gray-200" />
            <div className="h-4 w-2/3 rounded bg-gray-200" />
          </div>

          <div className="flex items-center justify-between md:col-span-2">
            <div>
              <div className="mb-2 h-5 w-24 rounded bg-gray-200" />
              <div className="h-4 w-36 rounded bg-gray-200" />
            </div>

            <div className="h-12 w-44 rounded-xl bg-gray-200" />
          </div>
        </div>
      </div>
    </section>
  );
}
