"use client";

import Image from "next/image";
import { FiEdit, FiEye } from "react-icons/fi";

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

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

  if (!profile) return null;
  if (loading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error?.message}</div>;

  return (
    <section className="p-4 lg:p-10">
      <h1 className="mb-5 text-xl xl:text-28 xl:leading-9.5 font-semibold text-heading">
        Profile
      </h1>
      <div className="rounded-2xl glass-card-v2 p-4 xl:p-6 max-w-6xl">
        <div className="mb-6 xl:mb-10 flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <div className="relative h-16 w-16 xl:h-36 xl:w-36 overflow-hidden rounded-full border-2 xl:border-8 border-badge">
              <Image
                src="/images/user.png"
                alt="Profile"
                fill
                sizes="112px"
                className="object-cover"
              />
            </div>

            <h2 className="mt-4 text-lg xl:text-2xl font-semibold text-heading">
              {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 xl:text-xl font-semibold text-heading">
              Email
            </h3>
            <p className="text-sm xl:text-lg text-heading">{profile.email}</p>
          </div>

          <div className="border-b border-link-1/20 pb-5">
            <h3 className="mb-2 text-base xl:text-xl font-semibold text-heading">
              Phone Number
            </h3>
            <p className="text-sm xl:text-lg text-heading">
              {profile.dialCode} {profile.mobileNumber}
            </p>
          </div>

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

              <div className="flex items-center gap-4">
                <p className="tracking-widest text-sm xl:text-lg text-heading">
                  ***************
                </p>
              </div>
            </div>
            <Button
              type="button"
              variant="white"
              onClick={() => openModal("CHANGE_PASSWORD", {})}
              BtnInnerclassName="!py-3.5 !px-4.5"
            >
              Change Password
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}