"use client";

import React, { useMemo, useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "@/store/store";
import { getCurrentUser } from "@/store/slices/auth-slice";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import toast from "react-hot-toast";
import { BeatLoader } from "react-spinners";
import { authenticatedFetch } from "@/lib/authenticated-fetch";
import { useTranslations } from "next-intl";

export default function ProfileInfoForm() {
    const t = useTranslations("account-settings");
    const tProfile = useTranslations("user-profile");
    const tValidation = useTranslations("validation");
    const dispatch = useDispatch<AppDispatch>();
    const { user } = useSelector((state: RootState) => state.auth);

    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [dob, setDob] = useState("");
    const [gender, setGender] = useState("");
    const [isSaving, setIsSaving] = useState(false);

    const userAny = useMemo<Record<string, unknown>>(
        () => ((user ?? {}) as unknown as Record<string, unknown>),
        [user]
    );

    // Pre-populate form with user data from Redux store
    useEffect(() => {
        if (user) {
            setFirstName(String(userAny.firstName || userAny.firstname || ""));
            setLastName(String(userAny.lastName || userAny.lastname || ""));
            setEmail(user.email || "");
            setPhone(String(user.phone || userAny.mobile || ""));
            setDob(String(userAny.dob || userAny.dateOfBirth || ""));
            setGender(String(userAny.gender || ""));
        }
    }, [user, userAny]);

    const handleSave = async () => {
        // --- Validation Logic ---
        if (!firstName.trim() || !lastName.trim()) {
            toast.error(tValidation("name-required"));
            return;
        }

        // Email regex
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!email.trim() || !emailRegex.test(email)) {
            toast.error(tValidation("invalid-email"));
            return;
        }

        // Phone is optional: only validate if provided
        if (phone.trim()) {
            const phoneDigits = phone.replace(/\D/g, "");
            if (phoneDigits.length !== 9) {
                toast.error(tValidation("invalid-phone-length"));
                return;
            }
        }

        setIsSaving(true);

        try {
            if (!user) {
                toast.error(tProfile("update-failed"));
                return;
            }

            // Backend requires required keys even if unchanged
            const normalizeGender = (value: string) => {
                const trimmed = value.trim();
                if (!trimmed) return "0";
                if (trimmed === "male") return "1";
                if (trimmed === "female") return "0";
                // Allow sending numeric strings directly (e.g. "0", "1", "2")
                const n = Number(trimmed);
                return Number.isFinite(n) ? String(Math.trunc(n)) : "0";
            };

            const body: Record<string, string> = {
                first_name: firstName.trim(),
                last_name: lastName.trim(),
                email: email.trim(),
                mobile: phone.trim(),
                gender: normalizeGender(gender),
                doChangeEmail: "0",
                doChangePassword: "0",
            };

            if (dob.trim()) body.dob = dob.trim();

            const response = await authenticatedFetch("/api/customer/profile", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(body),
            });

            const data = await response.json();

            if (!response.ok) {
                const msg = data?.message;
                if (msg && typeof msg === "object") {
                    const firstField = Object.keys(msg)[0];
                    const firstErr =
                        firstField && Array.isArray(msg[firstField]) ? msg[firstField][0] : undefined;
                    toast.error(firstErr || tProfile("update-failed"));
                } else {
                    toast.error(msg || tProfile("update-failed"));
                }
                return;
            }

            toast.success(data.message || tProfile("update-success"));

            // Refresh user data in Redux store
            dispatch(getCurrentUser());
        } catch (error: unknown) {
            console.error('[PROFILE] Error:', error);
            const message =
                typeof (error as { message?: unknown } | null)?.message === "string"
                    ? String((error as { message: string }).message)
                    : typeof error === "string"
                        ? error
                        : undefined;
            toast.error(message || tProfile("update-error"));
        } finally {
            setIsSaving(false);
        }
    };

    const inputClassName = "w-full px-4 py-3 h-auto rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-surface-dark dark:text-white focus:outline-none focus:ring-1 focus:ring-primary dark:focus:ring-white focus:border-primary dark:focus:border-white transition-colors text-start placeholder:text-gray-400";

    return (
        <div className="space-y-6">
            <div className="gap-6 grid grid-cols-1 md:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="firstName" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("first-name")}
                    </Label>
                    <Input
                        id="firstName"
                        type="text"
                        placeholder={t("first-name")}
                        value={firstName}
                        onChange={(e) => setFirstName(e.target.value)}
                        className={inputClassName}
                    />
                </div>
                <div className="space-y-2">
                    <Label htmlFor="lastName" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("last-name")}
                    </Label>
                    <Input
                        id="lastName"
                        type="text"
                        placeholder={t("last-name")}
                        value={lastName}
                        onChange={(e) => setLastName(e.target.value)}
                        className={inputClassName}
                    />
                </div>
            </div>

            <div className="gap-6 grid grid-cols-1 md:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="dob" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("date-of-birth")}
                    </Label>
                    <Input
                        id="dob"
                        type="date"
                        placeholder={t("date-placeholder")}
                        value={dob}
                        onChange={(e) => setDob(e.target.value)}
                        className={`${inputClassName} block`}
                    />
                </div>
                <div className="space-y-2 relative">
                    <Label htmlFor="gender" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("gender")}
                    </Label>
                    <Select value={gender} onValueChange={setGender}>
                        <SelectTrigger className="w-full px-4 py-3 h-auto rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-surface-dark dark:text-white focus:outline-none focus:ring-1 focus:ring-primary dark:focus:ring-white focus:border-primary dark:focus:border-white transition-colors text-gray-500 dark:text-gray-300 bg-transparent cursor-pointer flex justify-between items-center">
                            <SelectValue placeholder={t("gender-placeholder")} className="text-start" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="male">{t("gender-male")}</SelectItem>
                            <SelectItem value="female">{t("gender-female")}</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
            </div>

            <div className="gap-6 grid grid-cols-1 md:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="email" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("email")}
                    </Label>
                    <Input
                        id="email"
                        type="email"
                        placeholder={t("email")}
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className={inputClassName}
                    />
                </div>
                <div className="space-y-2">
                    <Label htmlFor="mobile" className="block text-sm font-bold text-gray-700 dark:text-gray-300 text-start">
                        {t("phone")}
                    </Label>
                    <div className="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden dark:bg-surface-dark focus-within:ring-1 focus-within:ring-primary dark:focus-within:ring-white focus-within:border-primary dark:focus-within:border-white transition-colors h-[48px]">
                        <Input
                            id="mobile"
                            type="tel"
                            placeholder={t("phone-placeholder")}
                            value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                            className="w-full px-4 py-3 h-full border-none focus:ring-0 dark:bg-surface-dark dark:text-white text-start placeholder:text-gray-400 ltr-placeholder shadow-none focus-visible:ring-0"
                        />
                        <div className="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-r border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 text-sm font-medium h-full flex items-center">
                            +966
                        </div>
                    </div>
                </div>
            </div>

            <div className="pt-6">
                <Button
                    type="button"
                    onClick={handleSave}
                    disabled={isSaving}
                    className="w-full bg-primary hover:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-black font-bold py-3.5 px-6 rounded-lg transition duration-300 shadow-md h-auto"
                >
                    {isSaving ? (
                        <BeatLoader color="#fff" size={8} />
                    ) : (
                        t("save")
                    )}
                </Button>
            </div>
        </div>
    );
}