"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import ToastMessage from "@/components/common/ToastMessage";
import { Trash } from "lucide-react";
import Tiptap from "@/components/TipTap/tiptap";
import axios from "axios";

interface DeliveryCostFormProps {
    initialData?: DeliveryCostType | null;
}

const bangladeshDivisions = [
    "Dhaka",
    "Chattogram",
    "Rajshahi",
    "Khulna",
    "Barisal",
    "Sylhet",
    "Rangpur",
    "Mymensingh"
]

const bangladeshDistricts = [
    {
        division: "Dhaka",
        districts: [
            "Dhaka", "Faridpur", "Gazipur", "Gopalganj", "Kishoreganj",
            "Madaripur", "Manikganj", "Munshiganj", "Narayanganj", "Narsingdi",
            "Rajbari", "Shariatpur", "Tangail"
        ]
    },
    {
        division: "Chattogram",
        districts: [
            "Brahmanbaria", "Chandpur", "Chattogram", "Cumilla", "Cox's Bazar",
            "Feni", "Khagrachhari", "Lakshmipur", "Noakhali", "Rangamati"
        ]
    },
    {
        division: "Rajshahi",
        districts: [
            "Bogura", "Chapainawabganj", "Joypurhat", "Naogaon", "Natore",
            "Pabna", "Rajshahi", "Sirajganj"
        ]
    },
    {
        division: "Khulna",
        districts: [
            "Bagerhat", "Chuadanga", "Jashore", "Jhenaidah", "Khulna",
            "Kushtia", "Magura", "Meherpur", "Narail", "Satkhira"
        ]
    },
    {
        division: "Barisal",
        districts: [
            "Barguna", "Barisal", "Bhola", "Jhalokati", "Patuakhali", "Pirojpur"
        ]
    },
    {
        division: "Sylhet",
        districts: [
            "Habiganj", "Moulvibazar", "Sunamganj", "Sylhet"
        ]
    },
    {
        division: "Rangpur",
        districts: [
            "Dinajpur", "Gaibandha", "Kurigram", "Lalmonirhat", "Nilphamari",
            "Panchagarh", "Rangpur", "Thakurgaon"
        ]
    },
    {
        division: "Mymensingh",
        districts: [
            "Jamalpur", "Mymensingh", "Netrokona", "Sherpur"
        ]
    }
]

const DeliveryCostForm: React.FC<DeliveryCostFormProps> = ({ initialData }) => {
    const router = useRouter();
    const [loading, setLoading] = useState(false);

    const [city, setCity] = useState("");
    const [district, setDistrict] = useState("");
    const [division, setDivision] = useState("");
    const [post_code, setPostCode] = useState("");
    const [shipping_zone, setShippingZone] = useState("")
    const [courier_company_name, setCourierCompanyName] = useState("")
    const [delivery_cost, setDeliveryCost] = useState("")
    const [per_kg_cost, setPerKgCost] = useState("")

    const [districtArrays, setDistrictArrays] = useState<string[]>([])




    const handleDivision = (e: React.ChangeEvent<HTMLSelectElement>) => {

        setDivision(e.target.value)

        const districts = bangladeshDistricts.find((item) => item.division === e.target.value)?.districts

        setDistrictArrays(districts ?? [])
    }


    useEffect(() => {
        if (initialData) {
            // SET INITIAL DATA HERE
            setCity(initialData.city)
            setDivision(initialData.division)
            const districts = bangladeshDistricts.find((item) => item.division === initialData.division)?.districts
            setDistrictArrays(districts ?? [])

            setDistrict(initialData.district)
            setPostCode(initialData.post_code)
            setShippingZone(initialData.shipping_zone)
            setCourierCompanyName(initialData.courier_company_name ?? "")
            setDeliveryCost(String(initialData.delivery_cost))

            //   setDescription(initialData.description || "");
            //   setCategoryType(initialData.category_type);



        }
    }, [initialData,]); // Added categoriesArray to dependencies

    const onSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setLoading(true);
        const apiUrl = initialData
            ? `/api/admin/deliveryCost/${initialData.uuid}`
            : "/api/admin/deliveryCost";

        // SET DATA BEFORE SUBMIT
        if (
            city === "" ||
            district === "" ||
            division === "" ||
            post_code === "" ||
            shipping_zone === ""

        ) {
            ToastMessage("Missing fields", "error");
            setLoading(false);
            return;
        }

        const formData = new FormData();
        formData.append("city", city);
        formData.append("district", district);
        formData.append("division", division);
        formData.append("post_code", post_code)
        formData.append('shipping_zone', shipping_zone)
        formData.append('courier_company_name', courier_company_name)
        formData.append('delivery_cost', delivery_cost)
        formData.append('per_kg_cost', per_kg_cost)


        var response;

        if (initialData) {
            response = await axios.put(apiUrl, formData);
        } else {
            response = await axios.post(apiUrl, formData);
        }

        if (response.status === 200) {
            initialData
                ? ToastMessage("Delivery Cost updated successfully", "success")
                : ToastMessage("Delivery Cost created successfully", "success");
            router.push("/admin/deliveryCost");
        } else {
            initialData
                ? ToastMessage("Delivery Cost update failed", "error")
                : ToastMessage("Delivery Cost creation failed", "error");
        }

        setLoading(false);
    };


    return (
        <div className="space-y-2 px-2 py-3">
            <h1 className="text-2xl pb-2 font-bold text-gray-900">
                {initialData ? "Edit DeliveryCost" : "Add New DeliveryCost"}
            </h1>
            {/* delete button */}
            {initialData && (
                <Button
                    onClick={() => {
                        if (confirm("Are you sure you want to delete this deliveryCost?")) {
                            axios
                                .delete(`/api/admin/deliveryCost/${initialData?.uuid}`)
                                .then((response) => {
                                    if (response.status === 200) {
                                        ToastMessage("Delivery Cost deleted successfully", "success");
                                        router.push("/admin/deliveryCost");
                                    } else {
                                        ToastMessage("Delivery Cost deletion failed", "error");
                                    }
                                });
                        }
                    }}
                    className="flex items-center justify-center p-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition duration-300 shadow-md active:scale-95"
                >
                    <Trash size={25} />
                </Button>
            )}

            <form action="" className="space-y-8 ">

                <div>
                    <label htmlFor="name" className="text-[18px] font-medium pb-4">City</label>
                    <input
                        value={city} type="text" name="name" placeholder="City name" onChange={(e) => setCity(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>

                <div>
                    <label htmlFor="division" className="text-[18px] pb-1 pt-2">Division</label>
                    <select value={division} onChange={(e) => handleDivision(e)}
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    >
                        <option value="">Select a division</option>
                        {bangladeshDivisions && bangladeshDivisions.map((div) => (
                            <option key={div} value={div}>{div}</option>
                        ))}
                    </select>

                </div>

                <div>
                    <label htmlFor="district" className="text-[18px] pb-1 pt-2">District</label>
                    <select value={district} onChange={(e) => setDistrict(e.target.value)}
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    >
                        <option value="">Select a district</option>
                        {districtArrays && districtArrays.map((district) => (
                            <option key={district} value={district}>{district}</option>
                        ))}
                    </select>

                </div>

                <div>
                    <label htmlFor="shipping_zone" className="text-[18px] font-medium pb-4">Post Code</label>
                    <input
                        value={post_code} type="text" name="name" placeholder="Post Code" onChange={(e) => setPostCode(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>

                <div>
                    <label htmlFor="shipping_zone" className="text-[18px] font-medium pb-4">Shipping Zone</label>
                    <input
                        value={shipping_zone} type="text" name="name" placeholder="Shipping Zone" onChange={(e) => setShippingZone(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>

                <div>
                    <label htmlFor="shipping_zone" className="text-[18px] font-medium pb-4">Courier Company Name</label>
                    <input
                        value={courier_company_name} type="text" name="name" placeholder="Courier Company Name" onChange={(e) => setCourierCompanyName(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>

                <div>
                    <label htmlFor="delivery_cost" className="text-[18px] font-medium pb-4">Delivery Cost</label>
                    <input
                        value={delivery_cost} type="text" name="name" placeholder="Delivery Cost" onChange={(e) => setDeliveryCost(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>

                <div>
                    <label htmlFor="per_kg_cost" className="text-[18px] font-medium pb-4">Per Kg Cost</label>
                    <input
                        value={per_kg_cost} type="text" name="name" placeholder="Per Kg Cost" onChange={(e) => setPerKgCost(e.target.value)} required
                        className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
                    />
                </div>


                <div className="my-5">
                    <button
                        onClick={(e) => onSubmit(e)}
                        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 mr-5 rounded-lg shadow-md transition duration-300 ease-in-out"
                    >
                        Submit
                    </button>

                    <button
                        type="button"
                        className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-6 rounded-lg shadow-md transition duration-300 ease-in-out"
                    >
                        Discard
                    </button>
                </div>
            </form>
        </div>
    );
};

export default DeliveryCostForm;