"use client";

import { useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { FiCamera, FiMail, FiPhone, FiUser } from "react-icons/fi";

import Button from "../../../../components/ui/Button";
import Input from "../../../../components/ui/CustomInput";
import { useAppForm } from "../../../../hooks/useAppForm";
import {
  editProfileSchema,
  EditProfileSchema,
} from "../../../../hooks/features/profile/edit-profile/schema";
import { useAppSelector } from "../../../../hooks/useAppRedux";
import CustomPhoneInput from "../../../../components/ui/CustomPhoneInput";
import useEditProfile from "../../../../hooks/features/profile/edit-profile/useEditProfile";
import { useRouter } from "next/navigation";

export default function EditProfilePage() {
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const profile = useAppSelector((state) => state.user.user);
  const router = useRouter();

  const { handleEditProfile, loading } = useEditProfile();

  const { register, errors, reset, handleSubmit, control } =
    useAppForm<EditProfileSchema>({
      defaultValues: {
        firstName: profile?.firstName,
        lastName: profile?.lastName,
        mobileNumber: {
          dialCode: profile?.dialCode,
          number: profile?.mobileNumber,
        },
        email: profile?.email,
      },
      schema: editProfileSchema,
      onSubmit: async (data) => {
        try {
          await handleEditProfile(data);

          reset();
          router.back();
        } catch (error) {
          console.log(error);
        }
      },
    });

    if(!profile) return null;

  return (
    <section className="p-4 lg:p-10">
      <div className="mb-2.5 flex flex-wrap items-center gap-4 text-sm xl:text-lg">
        <Link href="/admin/profile" className="text-heading">
          Profile
        </Link>
        <span className="text-text">/</span>
        <span className="font-semibold text-link-1">Edit</span>
      </div>

      <h1 className="mb-5 text-xl xl:text-28 xl:leading-9.5 font-semibold text-heading">
        Edit Profile
      </h1>

      <div className="rounded-2xl glass-card-v2 p-4 xl:p-6 max-w-6xl">
        <div className="mb-6 grid grid-cols-1 items-start gap-6 sm:mb-10 lg:grid-cols-3">
          <div className="hidden lg:block" />
          <div className="flex justify-center">
            <div className="relative">
              <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="(max-width: 640px) 112px, 128px"
                  className="object-cover"
                />
              </div>

              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                className="hidden"
              />

              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className="gradient1 absolute -bottom-2.5 cursor-pointer left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full text-white shadow-md transition hover:scale-105"
                aria-label="Upload profile image"
              >
                <FiCamera size={18} />
              </button>
            </div>
          </div>
          <div className="flex justify-center lg:justify-end">
            <Button
              type="button"
              variant="white"
              onClick={handleSubmit}
              BtnInnerclassName="!px-4.5 !py-3.5"
              className="w-full sm:w-auto"
              buttonClassName="w-full shadow-none!"
            >
              Save
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:gap-5">
          <Input
            label="First Name"
            required
            icon={<FiUser size={18} />}
            register={register("firstName")}
            error={errors.firstName?.message}
          />

          <Input
            label="Last Name"
            required
            icon={<FiUser size={18} />}
            register={register("lastName")}
            error={errors.lastName?.message}
          />

          <CustomPhoneInput
            label="Mobile Number"
            name="mobileNumber"
            control={control}
            error={errors.mobileNumber?.message}
          />

          <Input
            label="Email"
            required
            icon={<FiMail size={18} />}
            register={register("email")}
            error={errors.email?.message}
          />
        </div>
      </div>
    </section>
  );
}