"use client";
import React, { useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Select,
  SelectGroup,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import {
  Calendar as CalendarIcon,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import { format } from "date-fns";
import { ar, enUS } from "date-fns/locale";
import { t } from "@/lib/i18n";
import profileIcon from "@/src/assets/images/license/profileIcon.svg";
import Image from "next/image";
import { cn } from "@/lib/utils";
import locationIcon from "@/src/assets/images/license/locationIcon.svg";
import usersIcon from "@/src/assets/images/license/usersIcon.svg";
import phoneIcon from "@/src/assets/images/license/phoneIcon.svg";
import calenderIcon from "@/src/assets/images/license/calender.svg";
import "flag-icons/css/flag-icons.min.css";

import { getCountries, getCountryCallingCode } from "react-phone-number-input";
import { useGetActivClubs } from "../Requests/useGetActivClubs";

// Zod validation schema with translations
const makeFormSchema = (lang) =>
  z
    .object({
      fullName: z
        .string()
        .min(1, { message: t(lang, "full_name_required") })
        .transform((v) => v.trim().replace(/\s+/g, " "))
        .refine(
          (v) => {
            const parts = v.split(" ");
            return parts.length === 3 && parts.every((p) => p.length >= 2);
          },
          { message: t(lang, "name_must_be_three_words") },
        ),

      nationalId: z
        .string()
        .min(1, { message: t(lang, "national_id_required") })
        .regex(/^[0-9]+$/, { message: t(lang, "national_id_numbers_only") })
        .length(10, { message: t(lang, "national_id_must_be_10_digits") }),

      nationality: z
        .string()
        .min(1, { message: t(lang, "nationality_required") }),
      birthDate: z.string().min(1, { message: t(lang, "birth_date_required") }),

      phone: z
        .string()
        .min(1, { message: t(lang, "phone_required") })
        .regex(/^[0-9]+$/, { message: t(lang, "phone_numbers_only") })
        .min(8, { message: t(lang, "phone_min_length") }),

      country: z.string().min(1, { message: t(lang, "country_required") }),

      clubAffiliated: z
        .string()
        .min(1, { message: t(lang, "club_affiliated_required") }),

      licenseType: z
        .string()
        .min(1, { message: t(lang, "license_type_required") }),

      detailedAddress: z
        .string()
        .min(1, { message: t(lang, "detailed_address_required") })
        .min(5, { message: t(lang, "address_min_length") }),
    })
    .superRefine(({ nationality, nationalId }, ctx) => {
      const isSaudi = nationality === "SAUDI";
      if (isSaudi && !nationalId.startsWith("1")) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: ["nationalId"],
          message: t(lang, "national_id_saudi_must_start_1"),
        });
      }
      if (!isSaudi && !nationalId.startsWith("2")) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: ["nationalId"],
          message: t(lang, "national_id_non_saudi_must_start_2"),
        });
      }
    });

export default function PersonalDataForm({
  lang,
  formData,
  setFormData,
  setStep,
  progress,
  setProgress,
  setMaxProgress,
}) {
  const [loading, setLoading] = useState(false);
  const [clubPage, setClubPage] = useState(1);
  const [countrySearch, setCountrySearch] = useState("");
  const { data: clubsData, isLoading: clubsLoading } = useGetActivClubs(
    lang,
    clubPage,
  );
  const formSchema = useMemo(() => makeFormSchema(lang), [lang]);
  const countries = getCountries();

  // Filter countries based on search term
  const filteredCountries = useMemo(() => {
    if (countrySearch.length < 2) {
      return countries;
    }
    const searchLower = countrySearch.toLowerCase();
    return countries.filter((iso2) => {
      const countryCode = getCountryCallingCode(iso2);
      return (
        countryCode.includes(searchLower) ||
        iso2.toLowerCase().includes(searchLower)
      );
    });
  }, [countrySearch, countries]);

  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: formData?.fullName || "",
      nationalId: formData?.nationalId || "",
      birthDate: formData?.birthDate || "",
      nationality: formData?.nationality || "",
      phone: formData?.phone || "",
      country: formData?.country || "+966 SA",
      clubAffiliated: formData?.clubAffiliated || "",
      licenseType: formData?.licenseType || "",
      detailedAddress: formData?.detailedAddress || "",
    },
  });

  useEffect(() => {
    const subscription = form.watch((value) => {
      let filledInputs = 0;
      const totalInputs = 9; // Updated total

      if (value.fullName && value.fullName.trim() !== "") filledInputs++;
      if (value.nationalId && value.nationalId.trim() !== "") filledInputs++;
      if (value.birthDate && value.birthDate.trim() !== "") filledInputs++;
      if (value.nationality && value.nationality.trim() !== "") filledInputs++;
      if (value.phone && value.phone.trim() !== "") filledInputs++;
      if (value.country && value.country.trim() !== "") filledInputs++;
      if (value.clubAffiliated && value.clubAffiliated.trim() !== "")
        filledInputs++;
      if (value.licenseType && value.licenseType.trim() !== "") filledInputs++;
      if (value.detailedAddress && value.detailedAddress.trim() !== "")
        filledInputs++;

      setProgress(filledInputs);
      setMaxProgress(totalInputs);
    });

    return () => subscription.unsubscribe();
  }, [form, setProgress, setMaxProgress]);

  const onSubmit = (data) => {
    setFormData({ ...formData, ...data });
    setProgress(0); // Reset progress for next step
    setStep(2); // Move to next step
  };
  const nationalities = useMemo(
    () => [
      { id: 1, name: "Saudi", value: "SAUDI" },
      { id: 2, name: "Not_Saudi", value: "NOT_SAUDI" },
    ],
    [],
  );

  const licenseTypes = [
    { id: 1, name: t(lang, "Professional"), value: "professional" },
    { id: 2, name: t(lang, "Amateur"), value: "amateur" },
  ];

  return (
    <div className="personal-data-form">
      <div className="container">
        <div className="personal-data-form-content">
          <div className="form-header">
            <h2 className="form-title">{t(lang, "license_request_data")}</h2>
            <p className="form-subtitle">
              {t(lang, "license_request_subtitle")}
            </p>
          </div>

          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="license-form"
            >
              <div className="section-header">
                <div className="section-icon">
                  <Image src={profileIcon} alt="Profile Icon" />
                </div>
                <h3 className="section-title">{t(lang, "personal_data")}</h3>
              </div>
              <div className="form-grid">
                {/* Full Name Field */}
                <FormField
                  control={form.control}
                  name="fullName"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "full_name")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                          placeholder={t(lang, "full_name")}
                          className={`field-input ${form.formState.errors.fullName ? "error-input" : field.value ? "success-input" : ""}`}
                        />
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />

                {/* Birth Date Field */}
                <FormField
                  control={form.control}
                  name="birthDate"
                  className="date-input-wrapper"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "birth_date")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <div className="relative">
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  "field-input w-full justify-start text-left font-normal",
                                  !field.value && "text-muted-foreground",
                                  form.formState.errors.birthDate
                                    ? "error-input"
                                    : field.value
                                      ? "success-input"
                                      : "",
                                )}
                              >
                                <CalendarIcon
                                  className="date-icon-picker"
                                  size={20}
                                />
                                {field.value ? (
                                  format(new Date(field.value), "PPP", {
                                    locale: lang === "ar" ? ar : enUS,
                                  })
                                ) : (
                                  <span>
                                    {t(lang, "birth_date_placeholder")}
                                  </span>
                                )}
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                              mode="single"
                              selected={
                                field.value ? new Date(field.value) : undefined
                              }
                              onSelect={(date) => {
                                field.onChange(
                                  date ? format(date, "yyyy-MM-dd") : "",
                                );
                              }}
                              disabled={(date) =>
                                date > new Date() ||
                                date < new Date("1900-01-01")
                              }
                              initialFocus
                              locale={lang === "ar" ? ar : enUS}
                              captionLayout="dropdown"
                              fromYear={1900}
                              toYear={new Date().getFullYear()}
                              dir={lang === "ar" ? "rtl" : "ltr"}
                            />
                          </PopoverContent>
                        </Popover>
                        <Image
                          src={calenderIcon}
                          alt="Calender Icon"
                          className="date-icon"
                        />
                      </div>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />

                {/* Nationality */}
                <FormField
                  control={form.control}
                  name="nationality"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "nationality")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger
                            className={`field-input select-trigger disabled:opacity-1 ${
                              lang === "ar"
                                ? "ar-select-trigger"
                                : "en-select-trigger"
                            } ${form.formState.errors.nationality ? "error-input" : field.value ? "success-input" : ""}`}
                          >
                            <SelectValue
                              placeholder={t(lang, "nationality_placeholder")}
                            />
                          </SelectTrigger>
                          <SelectContent>
                            {nationalities.map((item) => (
                              <SelectItem
                                key={item.id}
                                value={item.value}
                                dir={lang == "ar" ? "rtl" : "ltr"}
                              >
                                {t(lang, item.name)}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />

                {/* National ID Field */}
                <FormField
                  control={form.control}
                  name="nationalId"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "national_id_number")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                          placeholder={t(lang, "national_id_placeholder")}
                          className={`field-input ${form.formState.errors.nationalId ? "error-input" : field.value ? "success-input" : ""}`}
                        />
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />
              </div>
              <div className="section-header">
                <div className="section-icon">
                  <Image src={phoneIcon} alt="Profile Icon" />
                </div>
                <h3 className="section-title">{t(lang, "contact_data")}</h3>
              </div>
              <div className="form-grid-single">
                {/* Phone Number Field */}
                <FormField
                  control={form.control}
                  name="phone"
                  render={({ field }) => (
                    <FormItem className="from-input-wrapper-mobile">
                      <FormLabel className="password-label">
                        {t(lang, "phone_label")}
                      </FormLabel>
                      <FormControl>
                        <div
                          className={`input-of-mobile-num ${
                            form.formState.errors.phone ||
                            form.formState.errors.country
                              ? "error-mob-input"
                              : form.formState.isDirty &&
                                  field.value &&
                                  !form.formState.errors.phone &&
                                  !form.formState.errors.country
                                ? "success-mob-input"
                                : ""
                          }`}
                        >
                          <div className="country-select">
                            <FormField
                              control={form.control}
                              name="country"
                              render={({ field }) => (
                                <FormItem>
                                  <FormControl>
                                    <Select
                                      value={field.value}
                                      onValueChange={(value) => {
                                        field.onChange(value);
                                      }}
                                      onOpenChange={(open) => {
                                        if (!open) {
                                          setCountrySearch("");
                                        }
                                      }}
                                    >
                                      <SelectTrigger className="country-select-trigger ">
                                        <SelectValue
                                          placeholder={t(lang, "Country")}
                                        />
                                      </SelectTrigger>
                                      <SelectContent
                                        dir={lang === "ar" ? "rtl" : "ltr"}
                                        className="min-w-[250px]"
                                      >
                                        <div className="px-2 py-1.5 sticky top-0 bg-white dark:bg-gray-950 z-10">
                                          <Input
                                            placeholder={
                                              t(lang, "search_country") +
                                              " " +
                                              t(lang, "example") +
                                              " SA"
                                            }
                                            value={countrySearch}
                                            onChange={(e) =>
                                              setCountrySearch(e.target.value)
                                            }
                                            className="h-8"
                                            onClick={(e) => e.stopPropagation()}
                                            dir={lang === "ar" ? "rtl" : "ltr"}
                                          />
                                        </div>
                                        {filteredCountries?.map(
                                          (iso2, index) => (
                                            <SelectItem
                                              value={`+${getCountryCallingCode(iso2)} ${iso2}`}
                                              key={index}
                                              dir={lang == "ar" ? "rtl" : "ltr"}
                                            >
                                              <div className="code-country-slug-cont">
                                                <div className="select-country-item-cont">
                                                  <span>
                                                    <span
                                                      className={`fi fi-${iso2.toLowerCase()}`}
                                                    />{" "}
                                                    +
                                                    {getCountryCallingCode(
                                                      iso2,
                                                    )}
                                                  </span>
                                                </div>
                                              </div>
                                            </SelectItem>
                                          ),
                                        )}
                                        {filteredCountries?.length === 0 && (
                                          <div className="px-2 py-6 text-center text-sm text-gray-500">
                                            {t(lang, "no_countries_found")}
                                          </div>
                                        )}
                                      </SelectContent>
                                    </Select>
                                  </FormControl>
                                  <FormMessage
                                    className="hidden"
                                    id="country-error"
                                  />
                                </FormItem>
                              )}
                            />
                          </div>
                          <Input
                            type="tel"
                            className="phone-input"
                            onKeyPress={(e) => {
                              if (!/[0-9]/.test(e.key)) {
                                e.preventDefault();
                              }
                            }}
                            style={{ direction: lang === "ar" ? "rtl" : "ltr" }}
                            placeholder={t(lang, "phone_placeholder")}
                            {...field}
                          />
                        </div>
                      </FormControl>
                      <div className="flex items-center justify-between">
                        <FormMessage id="phone-error" />
                        {form.formState.errors.country && (
                          <p className="country-error">
                            {form.formState.errors.country?.message}
                          </p>
                        )}
                      </div>
                    </FormItem>
                  )}
                />
              </div>
              {/* Club Selection Section */}
              <div className="section-header">
                <div className="section-icon">
                  <Image src={usersIcon} alt="Users Icon" />
                </div>
                <h3 className="section-title">{t(lang, "club_selection")}</h3>
              </div>
              <div className="form-grid-single">
                {/* Club Affiliated Field */}
                <FormField
                  control={form.control}
                  name="clubAffiliated"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "club_affiliated")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                          disabled={clubsLoading}
                        >
                          <SelectTrigger
                            className={`field-input select-trigger disabled:opacity-1 ${lang === "ar" ? "ar-select-trigger" : "en-select-trigger"} ${form.formState.errors.clubAffiliated ? "error-input" : field.value ? "success-input" : ""}`}
                          >
                            <SelectValue
                              placeholder={
                                clubsLoading
                                  ? t(lang, "loading")
                                  : t(lang, "club_affiliated_placeholder")
                              }
                            />
                          </SelectTrigger>
                          <SelectContent>
                            <div className="p-2">
                              {clubsData?.data?.map((club) => (
                                <SelectItem
                                  key={club.id}
                                  value={club.id.toString()}
                                  dir={lang == "ar" ? "rtl" : "ltr"}
                                >
                                  {club.name}
                                </SelectItem>
                              ))}
                            </div>
                            {/* Pagination Controls */}
                            {clubsData?.paginate?.lastPage > 1 && (
                              <div className="flex items-center justify-between border-t p-2 gap-2">
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  onClick={() =>
                                    setClubPage((prev) => Math.max(1, prev - 1))
                                  }
                                  disabled={clubPage === 1}
                                  className="h-8"
                                >
                                  {lang === "ar" ? (
                                    <ChevronLeft className="h-4 w-4" />
                                  ) : (
                                    <ChevronRight className="h-4 w-4" />
                                  )}
                                </Button>
                                <span className="text-sm text-muted-foreground">
                                  {t(lang, "page")} {clubPage} /{" "}
                                  {clubsData.paginate.lastPage}
                                </span>
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  onClick={() =>
                                    setClubPage((prev) =>
                                      Math.min(
                                        clubsData.paginate.lastPage,
                                        prev + 1,
                                      ),
                                    )
                                  }
                                  disabled={
                                    clubPage >= clubsData.paginate.lastPage
                                  }
                                  className="h-8"
                                >
                                  {lang === "ar" ? (
                                    <ChevronRight className="h-4 w-4" />
                                  ) : (
                                    <ChevronLeft className="h-4 w-4" />
                                  )}
                                </Button>
                              </div>
                            )}
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />

                {/* License Type Field */}
                <FormField
                  control={form.control}
                  name="licenseType"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "license_type")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger
                            className={`field-input select-trigger disabled:opacity-1 ${lang == "ar" ? "ar-select-trigger" : "en-select-trigger"} ${form.formState.errors.licenseType ? "error-input" : field.value ? "success-input" : ""}`}
                          >
                            <SelectValue
                              placeholder={t(lang, "license_type_placeholder")}
                            />
                          </SelectTrigger>
                          <SelectContent>
                            {licenseTypes.map((item) => (
                              <SelectItem
                                key={item.id}
                                value={item.value}
                                dir={lang == "ar" ? "rtl" : "ltr"}
                              >
                                {item.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />
              </div>

              {/* Detailed Address Section */}
              <div className="section-header">
                <div className="section-icon">
                  <Image src={locationIcon} alt="Location Icon" />
                </div>
                <h3 className="section-title">{t(lang, "detailed_address")}</h3>
              </div>
              <div className="form--single">
                {/* Detailed Address Field */}
                <FormField
                  control={form.control}
                  name="detailedAddress"
                  render={({ field }) => (
                    <FormItem className="form-field">
                      <FormLabel className="field-label">
                        {t(lang, "detailed_address")}{" "}
                        <span className="required">*</span>
                      </FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                          placeholder={t(lang, "detailed_address_placeholder")}
                          className={`field-input ${form.formState.errors.detailedAddress ? "error-input" : field.value ? "success-input" : ""}`}
                        />
                      </FormControl>
                      <FormMessage className="field-error" />
                    </FormItem>
                  )}
                />
              </div>

              {/* Submit Button */}
              <div className="form-actions">
                <Button
                  type="submit"
                  className="submit-license-btn"
                  disabled={loading}
                >
                  {loading ? (
                    <span className="loader-btn"></span>
                  ) : (
                    <span>{t(lang, "next")}</span>
                  )}
                </Button>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}