"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Banknote, Save, X } from "lucide-react";
import {
    useGetBankDetailsQuery,
    useCreateBankDetailsMutation,
    useUpdateBankDetailsMutation,
} from "@/redux/apis/bankApi";

export default function BankDetailsForm({ onClose }: { onClose?: () => void }) {
    const router = useRouter();
    const { data, isLoading } = useGetBankDetailsQuery();
    const [createBankDetails] = useCreateBankDetailsMutation();
    const [updateBankDetails] = useUpdateBankDetailsMutation();

    const [formData, setFormData] = useState({
        accountHolderName: "",
        accountNumber: "",
        bankName: "",
        ifscCode: "",
        city: "",
        pinCode: "",
    });

    const [isSubmitting, setIsSubmitting] = useState(false);

    useEffect(() => {
        if (data?.success && data.data) {
            setFormData({
                accountHolderName: data.data.accountHolderName || "",
                accountNumber: data.data.accountNumber || "",
                bankName: data.data.bankName || "",
                ifscCode: data.data.ifscCode || "",
                city: data.data.city || "",
                pinCode: data.data.pinCode || "",
            });
        }
    }, [data]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);

        try {
            if (data?.success && data.data?.id) {
                await updateBankDetails(formData).unwrap();
            } else {
                await createBankDetails(formData).unwrap();
            }
            if (onClose) onClose();
            router.refresh();
        } catch (error) {
            console.error("Error saving bank details:", error);
            alert("Failed to save bank details");
        } finally {
            setIsSubmitting(false);
        }
    };

    if (isLoading) {
        return <div className="text-center py-4">Loading...</div>;
    }

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <div>
                <label className="block text-sm font-medium text-theme-secondary mb-1">
                    Account Holder Name
                </label>
                <input
                    type="text"
                    name="accountHolderName"
                    value={formData.accountHolderName}
                    onChange={handleChange}
                    required
                    placeholder="As per bank records"
                    className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                />
            </div>

            <div>
                <label className="block text-sm font-medium text-theme-secondary mb-1">
                    Account Number
                </label>
                <input
                    type="text"
                    name="accountNumber"
                    value={formData.accountNumber}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                />
            </div>

            <div>
                <label className="block text-sm font-medium text-theme-secondary mb-1">
                    Bank Name
                </label>
                <input
                    type="text"
                    name="bankName"
                    value={formData.bankName}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                />
            </div>

            <div>
                <label className="block text-sm font-medium text-theme-secondary mb-1">
                    IFSC Code
                </label>
                <input
                    type="text"
                    name="ifscCode"
                    value={formData.ifscCode}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                />
            </div>

            <div className="grid md:grid-cols-2 gap-4">
                <div>
                    <label className="block text-sm font-medium text-theme-secondary mb-1">
                        City
                    </label>
                    <input
                        type="text"
                        name="city"
                        value={formData.city}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-theme-secondary mb-1">
                        Pin Code
                    </label>
                    <input
                        type="text"
                        name="pinCode"
                        value={formData.pinCode}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 rounded-xl bg-theme-input border border-primary-500/20 text-theme-primary focus:border-primary-500 focus:outline-none"
                    />
                </div>
            </div>

            <div className="flex gap-3 pt-4">
                <button
                    type="submit"
                    disabled={isSubmitting}
                    className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors disabled:opacity-50"
                >
                    <Save className="w-4 h-4" />
                    {isSubmitting ? "Saving..." : "Save"}
                </button>
                {onClose && (
                    <button
                        type="button"
                        onClick={onClose}
                        className="px-4 py-2 bg-theme-input border border-primary-500/20 text-theme-secondary rounded-xl hover:bg-primary-500/10 transition-colors"
                    >
                        <X className="w-4 h-4" />
                    </button>
                )}
            </div>
        </form>
    );
}