import DataTables from "../../components/DataTables";
import Dropdown from "../../components/Dropdown";
import IconHorizontalDots from "../../components/Icon/IconHorizontalDots";
import IconPencil from "../../components/Icon/IconPencil";
import IconTrashLines from "../../components/Icon/IconTrashLines";
import { useRef, useEffect } from "react";
import { useDispatch } from "react-redux";
import { useState } from "react";
import { Link } from "react-router-dom";
import Button from "../../components/Buttons";
import IconPlus from "../../components/Icon/IconPlus";
import AddDepartment from "../../modals/settings/department/AddDepartment";
import EditDepartment from "../../modals/settings/department/EditDepartment";
import DeleteModal from "../../modals/settings/DeleteModal";
import CustomSwitch from "../../components/CustomSwitch";
import api from '../../api/axios';
import { toast } from 'react-toastify';

interface Department {
    id: number;
    name: string;
    description: string;
    status: number; // 1=active, 0=inactive, 2=deleted
}

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

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

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

    const handleSave = async (data: any) => {
        try {
            const response = await api.post('/departments/add', {
                name: data.name,
                description: data.description
            });

            if (response.data.status === 200) {
                toast.success('Department created successfully');
                fetchDepartments(); // Refresh list
                return true;
            }
            return false;
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to create department';
            toast.error(errorMsg);
            return false;
        }
    };

    const handleUpdate = async (id: number, data: any) => {
        try {
            const response = await api.put('/departments/update', {
                id: id,
                name: data.name,
                description: data.description
            });

            if (response.data.status === 200) {
                toast.success('Department updated successfully');
                fetchDepartments(); // Refresh list
                return true;
            }
            return false;
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to update department';
            toast.error(errorMsg);
            return false;
        }
    };

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

        try {
            const response = await api.delete(`/departments/delete/${deleteRow.id}`);

            if (response.data.status === true) {
                toast.success('Department deleted successfully');
                fetchDepartments(); // Refresh list
                setDeleteOpen(false);
                setDeleteRow(null);
            }
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to delete department';
            toast.error(errorMsg);
        }
    };

    // In your Department.tsx, add console logs to debug
    const handleToggleStatus = async (id: number, checked: boolean) => {
        const newStatus = checked ? 0 : 1;

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



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

    const deptColumns = [
        {
            accessor: 'name',
            title: 'Department',
            render: (row: Department) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.name}</div>
                </div>
            ),
        },
        {
            accessor: 'description',
            title: 'Description',
            render: (row: Department) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.description || '-'}</div>
                </div>
            ),
        },
        {
            accessor: "status",
            title: "Status",
            render: (row: Department) => {
                return (
                    <CustomSwitch
                        key={row.id}
                        id={`switch-${row.id}`}
                        checked={row.status === 0} // Make sure this is boolean
                        onChange={(checked) => handleToggleStatus(row.id, checked)}
                    />
                );
            },
        },
        {
            accessor: 'actions',
            title: 'Actions',
            render: (row: Department) => (
                <Dropdown
                    btnClassName="cursor-pointer"
                    placement="bottom-start"
                    button={<IconHorizontalDots />}
                >
                    <ul className="text-dark dark:text-white-dark !py-0 font-semibold dark:text-white-light/90">
                        <li
                            className="hover:bg-primary 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 className="text-base fw-semibold">Edit</span>
                            </div>
                        </li>
                        <li
                            className="hover:bg-danger 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 className="text-base fw-semibold">Delete</span>
                            </div>
                        </li>
                    </ul>
                </Dropdown>
            ),
        }
    ];

    return (
        <>
            <div className="flex items-center justify-between">
                <ul className="flex space-x-2 items-center">
                    <li>
                        <Link to="/department_settings" className="text-primary text-lg hover:underline">
                            Department
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Settings</span>
                    </li>
                </ul>
                <Button
                    icon={<IconPlus />}
                    iconPosition="left"
                    onClick={() => setOpen(true)}
                >
                    Add Department
                </Button>
            </div>
            <div className="pt-4">
                <div className="p-4 rounded-xl shadow-md bg-white w-full max-w-full overflow-hidden">
                    <div className="grid grid-cols-12">
                        <div className="col-span-12">
                            {loading ? (
                                <div className="text-center py-4">Loading...</div>
                            ) : (
                                <DataTables
                                    data={departments}
                                    columns={deptColumns}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>

            <AddDepartment
                open={open}
                onClose={() => setOpen(false)}
                onSave={handleSave}
            />

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

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

export default Department;