"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"
import { useGetCities } from "../Requests/useGetCities"

// 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") }),

        city: 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 || "",
            city: formData?.city || "",
            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 { data: cities, isLoading } = useGetCities(lang);

    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, "membership_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 Field */}
                                <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"
                                                        style={{ direction: lang === 'ar' ? 'rtl' : 'ltr' }}
                                                        placeholder={t(lang, "phone_placeholder")}
                                                        {...field}
                                                            onKeyPress={(e) => {
                                              if (!/[0-9]/.test(e.key)) {
                                                e.preventDefault();
                                              }
                                            }}
                                                    />
                                                </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>
                                    )}
                                />
                            </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-grid-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>
                                    )}
                                />
                                {/* License Type Field */}
                                <FormField
                                    control={form.control}
                                    name="city"
                                    render={({ field }) => (
                                        <FormItem className="form-field">
                                            <FormLabel className="field-label">
                                                {t(lang, "city")} <span className="required">*</span>
                                            </FormLabel>
                                            <FormControl>
                                                <Select
                                                    value={field.value}
                                                    onValueChange={field.onChange}
                                                    disabled={isLoading}
                                                >
                                                    <SelectTrigger className={`field-input select-trigger disabled:opacity-1 ${lang === "ar" ? "ar-select-trigger" : "en-select-trigger"} ${form.formState.errors.city ? 'error-input' : field.value ? 'success-input' : ''}`}>
                                                        <SelectValue placeholder={isLoading ? t(lang, "loading") : t(lang, "city_placeholder")} />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        <div className="p-2">
                                                            {cities?.map((city) => (
                                                                <SelectItem key={city.id} value={city.id.toString()} dir={lang == "ar" ? "rtl" : "ltr"}>
                                                                    {city.name}
                                                                </SelectItem>
                                                            ))}
                                                        </div>
                                                    </SelectContent>
                                                </Select>
                                            </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>
    );
}