import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { useFieldArray, useForm } from "react-hook-form";
import { Form } from "@/components/ui/form";
import { router } from "@inertiajs/react";
import { Loader2 } from "lucide-react";
import { useState } from "react";
import { ToastMessage } from "../Toast/ToastMixin";
import ReuseForm from "@/components/Reuseable/ReuseForm";
import { CustomDatePicker } from "@/components/Date/CustomDatePicker";

export default function AddFileModal({ modalProps }) {
    const {
        buttonName,
        modalTitle,
        agents,
        visaTypes,
        visa_statuses,
        conditions,
        embassyMember,
    } = modalProps;
    const [open, setOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const today = (() => {
        const d = new Date();
        return `${String(d.getDate()).padStart(2, "0")}-${String(
            d.getMonth() + 1,
        ).padStart(2, "0")}-${d.getFullYear()}`;
    })();

    const form = useForm({
        defaultValues: {
            entry_date: today,
            file_name: "",
            web_file_number: "",
            passport_no: "",
            dob: today,
            agent_id: "",
            visa_type_id: "",
            visa_status_id: "",
            file_condition_id: "",
            payable_amount: "",
            remarks: "",
            embassy_id: "",
            embassy_amount: "",
            ivac: { phone: "", email: "", epass: "", ipass: "" },
            family_members: [],
        },
    });
    const { fields, append, remove } = useFieldArray({
        control: form.control,
        name: "family_members",
    });
    const onSubmit = async (data) => {
        setLoading(true);
        router.post("/files", data, {
            onError: (errors) => {
                Object.entries(errors).forEach(([field, message]) => {
                    form.setError(field, {
                        type: "server",
                        message: Array.isArray(message) ? message[0] : message,
                    });
                });

                ToastMessage("error", "Please fix the highlighted errors");
            },
            onSuccess: () => {
                ToastMessage("success", "File Added Successfully");
                setOpen(false);
                form.reset();
                form.clearErrors();
            },
            onFinish: () => {
                setLoading(false);
            },
        });
    };
    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button
                    variant="outline"
                    className="bg-[#006362] text-white hover:bg-[#00bcd4] hover:text-white"
                >
                    {buttonName}
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[950px] max-h-[95vh] overflow-hidden">
                <DialogHeader>
                    <DialogTitle className="text-center">
                        {modalTitle}
                    </DialogTitle>
                    <DialogDescription></DialogDescription>
                </DialogHeader>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)}>
                        <div className="overflow-y-auto max-h-[70vh] pr-2">
                            <div className="grid grid-cols-3 gap-4 pb-4">
                                <CustomDatePicker
                                    name="entry_date"
                                    control={form.control}
                                    label="Entry Date (DD-MM-YYYY)"
                                    required="true"
                                />

                                <ReuseForm
                                    control={form.control}
                                    name="file_name"
                                    label="File Name"
                                    placeholder="File Name"
                                    type="text"
                                    required="true"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="web_file_number"
                                    label="Web File Number"
                                    placeholder="Web File Number"
                                    type="text"
                                    required="true"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="passport_no"
                                    label="Passport No"
                                    placeholder="Passport No"
                                    type="text"
                                    required="true"
                                />
                                <CustomDatePicker
                                    name="dob"
                                    control={form.control}
                                    label="Date of Birth (DD-MM-YYYY)"
                                    required="true"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="agent_id"
                                    label="	Agent"
                                    placeholder="Select Agent"
                                    type="select"
                                    required="true"
                                    options={agents.map((agent) => ({
                                        id: agent.id,
                                        label: agent.name,
                                    }))}
                                    valueKey="id"
                                    labelKey="label"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="visa_type_id"
                                    label="	Type Of Visa"
                                    placeholder="Select Visa Type"
                                    type="select"
                                    required="true"
                                    options={visaTypes?.map((d) => ({
                                        id: d.id,
                                        label: d.visa_type,
                                    }))}
                                    valueKey="id"
                                    labelKey="label"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="visa_status_id"
                                    label="	Visa Status"
                                    placeholder="Select Visa Status"
                                    type="select"
                                    required="true"
                                    options={visa_statuses?.map((d) => ({
                                        id: d.id,
                                        label: d.visa_status,
                                    }))}
                                    valueKey="id"
                                    labelKey="label"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="file_condition_id"
                                    label="File Condition"
                                    placeholder="Select File Condition"
                                    type="select"
                                    required="true"
                                    options={conditions?.map((d) => ({
                                        id: d.id,
                                        label: d.condition,
                                    }))}
                                    valueKey="id"
                                    labelKey="label"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="payable_amount"
                                    label="Payable Amount"
                                    placeholder="Payable Amount"
                                    type="text"
                                    required="true"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="embassy_id"
                                    label="	Embassy Member"
                                    placeholder="Select Embassy Member"
                                    type="select"
                                    options={embassyMember?.map((em) => ({
                                        id: em.id,
                                        label: em.name,
                                    }))}
                                    valueKey="id"
                                    labelKey="label"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="embassy_amount"
                                    label="Embassy Amount"
                                    placeholder="Embassy Amount"
                                    type="text"
                                />
                            </div>
                            <div className="grid grid-cols-4 gap-4 pb-4">
                                <ReuseForm
                                    control={form.control}
                                    name="ivac.phone"
                                    label="Phone"
                                    placeholder="Ivac Phone Number"
                                    type="text"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="ivac.email"
                                    label="Email"
                                    placeholder="Ivac email"
                                    type="text"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="ivac.epass"
                                    label="Email Password"
                                    placeholder="Ivac email password"
                                    type="text"
                                />
                                <ReuseForm
                                    control={form.control}
                                    name="ivac.ipass"
                                    label="Ivac Password"
                                    placeholder="Ivac password"
                                    type="text"
                                />
                            </div>
                            <div className="space-y-4 col-span-1 md:col-span-2 pb-4">
                                {fields.map((field, index) => (
                                    <div
                                        key={field.id}
                                        className="border rounded-lg px-4 pb-4 relative"
                                    >
                                        <p className="py-2 text-[#006362] font-bold">
                                            Family Member {index + 1}
                                        </p>

                                        {/* Remove button */}
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            onClick={() => remove(index)}
                                            className="absolute top-2 right-2 text-red-500"
                                        >
                                            ✕
                                        </Button>

                                        <div className="grid grid-cols-2 gap-4">
                                            <ReuseForm
                                                control={form.control}
                                                name={`family_members.${index}.name`}
                                                label="Name"
                                                type="text"
                                                required="true"
                                            />

                                            <ReuseForm
                                                control={form.control}
                                                name={`family_members.${index}.web_file_number`}
                                                label="Web File No"
                                                type="text"
                                            />

                                            <ReuseForm
                                                control={form.control}
                                                name={`family_members.${index}.passport_no`}
                                                label="Passport No"
                                                type="text"
                                                required="true"
                                            />

                                            <CustomDatePicker
                                                name={`family_members.${index}.dob`}
                                                control={form.control}
                                                label="Date of Birth"
                                                required="true"
                                            />
                                        </div>
                                    </div>
                                ))}

                                {/* + Add Family Member Button */}
                                {fields.length < 4 && (
                                    <div className="flex justify-end">
                                        <Button
                                            type="button"
                                            className="bg-[#006362]"
                                            onClick={() =>
                                                append({
                                                    name: "",
                                                    web_file_number: "",
                                                    passport_no: "",
                                                    dob: today,
                                                })
                                            }
                                        >
                                            + Add Family Member
                                        </Button>
                                    </div>
                                )}
                            </div>

                            <div className="pb-4">
                                <ReuseForm
                                    control={form.control}
                                    name="remarks"
                                    label="Remarks"
                                    placeholder="File Remarks...."
                                    type="textarea"
                                />
                            </div>
                        </div>
                        <DialogFooter className="mt-4">
                            <DialogClose asChild>
                                <Button
                                    variant="modalCancel"
                                    className="bg-red-600 text-white hover:bg-red-500 hover:text-white cursor-pointer"
                                >
                                    Cancel
                                </Button>
                            </DialogClose>
                            <Button
                                type="submit"
                                className="bg-[#006362] text-white hover:bg-[#00bcd4] hover:text-white"
                            >
                                {loading ? (
                                    <span className="flex items-center gap-2">
                                        <Loader2 className="h-4 w-4 animate-spin" />
                                        Submitting...
                                    </span>
                                ) : (
                                    "Submit"
                                )}
                            </Button>
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}