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 } from "react";
import { useDispatch } from "react-redux";
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "../../components/Buttons";
import IconPlus from "../../components/Icon/IconPlus";
import DeleteModal from "../../modals/settings/DeleteModal";
import CustomSwitch from "../../components/CustomSwitch";
import AddLeadSource from "../../modals/settings/lead_source/AddLeadSource";
import EditLeadSource from "../../modals/settings/lead_source/EditLeadSource";
import api from '../../api/axios';
import { toast } from 'react-toastify';


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

    const [room, setLeadSource] = useState<LeadSource[]>([]);
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [editData, setEditData] = useState<LeadSource | null>(null);
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [deleteRow, setDeleteRow] = useState<LeadSource | null>(null);

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

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

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

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

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

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

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

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

            if (response.data.status === true) {
                toast.success('Lead source deleted successfully');
                fetchRoom(); // Refresh list
                setDeleteOpen(false);
                setDeleteRow(null);
            }
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to delete source';
            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(`/source/status/${id}`, {
                status: newStatus
            });



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


   const eventColumns = [
        {
            accessor: 'name',
            title: 'Name',
            render: (row: LeadSource) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.name}</div>
                </div>
            ),
        },
        {
            accessor: 'description',
            title: 'Description',
            render: (row: LeadSource) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.description || '-'}</div>
                </div>
            ),
        },
        {
            accessor: "status",
            title: "Status",
            render: (row: LeadSource) => {
                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: LeadSource) => (
                <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="/room" className="text-primary text-lg hover:underline">
                            Lead Source
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Settings</span>
                    </li>
                </ul>
                <Button
                    icon={<IconPlus />}
                    iconPosition="left"
                    onClick={() => setOpen(true)}
                >
                  Add Lead Source
                </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={room}
                                    columns={eventColumns}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>


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

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

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


        </>
    )
}

export default LeadSource;