import Dropdown from "../../components/Dropdown";
import IconHorizontalDots from "../../components/Icon/IconHorizontalDots";
import IconPencil from "../../components/Icon/IconPencil";
import IconTrashLines from "../../components/Icon/IconTrashLines";
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "../../components/Buttons";
import IconPlus from "../../components/Icon/IconPlus";
import AddMaterials from "../../modals/settings/materials/AddMaterials";
import EditMaterials from "../../modals/settings/materials/EditMaterials";
import DeleteModal from "../../modals/settings/DeleteModal";
import CustomSwitch from "../../components/CustomSwitch";
import DataTables from "../../components/DataTables";
import api from '../../api/axios';
import { toast } from 'react-toastify';

interface MaterialKit {
    id: number;
    name: string;
    description: string;
    items: Array<{ name: string; qty: number }>;
    total_qty: number;
    item_types: number;
    status: number;
}

function Materials() {
    const [rows, setRows] = useState<MaterialKit[]>([]);
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [editData, setEditData] = useState<MaterialKit | null>(null);
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [deleteRow, setDeleteRow] = useState<MaterialKit | null>(null);

    // Fetch data from API
    const fetchMaterialKits = async () => {
        setLoading(true);
        try {
            const response = await api.get('/material-kit/list');
            if (response.data.status === 200) {
                setRows(response.data.data);
            }
        } catch (error) {
            console.error('Error fetching material kits:', error);
            toast.error('Failed to fetch material kits');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchMaterialKits();
    }, []);

    const getTotalQty = (items: any[]) =>
        items?.reduce((sum, item) => sum + (item.qty || 0), 0) || 0;


    const handleToggle = async (id: number, checked: boolean) => {
        const newStatus = checked ? 0 : 1;

        try {
            const response = await api.put(`/material-kit/status/${id}`, {
                status: newStatus
            });

            if (response.data.status === true) {
                toast.success('Status updated successfully');
                fetchMaterialKits(); // Refresh list
            }
        } catch (error: any) {
            console.error('Error updating status:', error);
            const errorMsg = error.response?.data?.message || 'Failed to update status';
            toast.error(errorMsg);
            fetchMaterialKits(); // Refresh to revert the optimistic update
        }
    };
    const handleSaveAdd = async (data: any) => {


        fetchMaterialKits(); // Refresh list
        return true;


    };

    const handleSave = async (data: any, isEdit: boolean = false) => {
        try {
            if (isEdit) {
                // Update existing kit
                const response = await api.put('/material-kit/update', {
                    id: data.id,
                    name: data.name, // Changed from kitName to name
                    description: data.description,
                    items: data.items
                });
                if (response.data.status === 200) {
                    toast.success('Material kit updated successfully');
                    fetchMaterialKits();
                    return true;
                }
            } else {
                // Create new kit
                const response = await api.post('/material-kit/add', {
                    name: data.name, // Changed from kitName to name
                    description: data.description,
                    items: data.items
                });
                if (response.data.status === 200) {
                    toast.success('Material kit created successfully');
                    fetchMaterialKits();
                    return true;
                }
            }
        } catch (error: any) {
            console.error('Error saving material kit:', error);
            toast.error(error.response?.data?.message || 'Failed to save material kit');
            return false;
        }
    };

    const handleDelete = async () => {
        if (!deleteRow) return;

        try {
            const response = await api.delete(`/material-kit/delete/${deleteRow.id}`);
            if (response.data.status) {
                toast.success('Material kit deleted successfully');
                fetchMaterialKits();
                setDeleteOpen(false);
                setDeleteRow(null);
            }
        } catch (error) {
            console.error('Error deleting material kit:', error);
            toast.error('Failed to delete material kit');
        }
    };

    const materialColumn = [
        {
            accessor: "name",
            title: "Kit Name",
        },
        {
            accessor: "items",
            title: "Items",
            render: (row: MaterialKit) => (
                <div className="flex flex-wrap gap-1">
                    {row.items?.map((item, i) => (
                        <span
                            key={i}
                            className="bg-gray-200 px-2 py-1 rounded text-xs"
                        >
                            {item.name} x {item.qty}
                        </span>
                    ))}
                </div>
            ),
        },
        {
            accessor: "item_types",
            title: "Item Types",
            render: (row: MaterialKit) => (
                <span className="bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full text-xs font-semibold">
                    {row.item_types || 0}
                </span>
            ),
        },
        {
            accessor: "total_qty",
            title: "Total Qty",
            render: (row: MaterialKit) => (
                <span className="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs font-semibold">
                    {row.total_qty || getTotalQty(row.items)}
                </span>
            ),
        },
        {
            accessor: "status",
            title: "Status",
            render: (row: MaterialKit) => (
                <CustomSwitch
                    id={`switch-${row.id}`}
                    checked={row.status === 0}
                    onChange={(checked) => handleToggle(row.id, checked)}
                />
            ),
        },
        {
            accessor: 'actions',
            title: 'Actions',
            render: (row: MaterialKit) => (
                <Dropdown
                    btnClassName="cursor-pointer"
                    placement="bottom-end"
                    button={<IconHorizontalDots />}
                >
                    <ul className="text-dark dark:text-white-dark !py-0 font-semibold dark:text-white-light/90">
                        <li
                            className="hover:bg-rose-700 hover:text-white cursor-pointer"
                            onMouseDown={(e) => {
                                e.preventDefault();
                                setEditData(row);
                                setEditOpen(true);
                            }}
                        >
                            <div className="flex gap-4 items-center px-3 py-2">
                                <IconPencil />
                                <span>Edit</span>
                            </div>
                        </li>
                        <li
                            className="hover:bg-rose-700 hover:text-white cursor-pointer"
                            onMouseDown={(e) => {
                                e.preventDefault();
                                setDeleteRow(row);
                                setDeleteOpen(true);
                            }}
                        >
                            <div className="flex gap-4 items-center px-3 py-2">
                                <IconTrashLines />
                                <span>Delete</span>
                            </div>
                        </li>
                    </ul>
                </Dropdown>
            ),
        }
    ];

    if (loading) {
        return <div className="flex justify-center items-center h-64">Loading...</div>;
    }

    return (
        <>
            <div className="flex items-center justify-between">
                <ul className="flex space-x-2 items-center">
                    <li>
                        <Link to="/materials" className="text-primary text-lg hover:underline">
                            Materials
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Settings</span>
                    </li>
                </ul>

                <Button
                    icon={<IconPlus />}
                    iconPosition="left"
                    onClick={() => setOpen(true)}
                >
                    Add Kit
                </Button>
            </div>

            <div className="pt-4">
                <div className="p-4 rounded-xl shadow-md bg-white">
                    <DataTables
                        data={rows}
                        columns={materialColumn}
                    />
                </div>
            </div>

            <AddMaterials
                open={open}
                onClose={() => setOpen(false)}
                onSave={handleSaveAdd}
            />

            <EditMaterials
                open={editOpen}
                onClose={() => {
                    setEditOpen(false);
                    setEditData(null);
                }}
                onSave={handleSave}
                data={editData}
            />

            <DeleteModal
                open={deleteOpen}
                title="Delete Material Kit"
                message={`Are you sure you want to delete ${deleteRow?.name}?`}
                onClose={() => {
                    setDeleteOpen(false);
                    setDeleteRow(null);
                }}
                onConfirm={handleDelete}
            />
        </>
    );
}

export default Materials;