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 { 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 AddLeadStatus from "../../modals/settings/lead_status/AddLeadStatus";
import EditLeadStatus from "../../modals/settings/lead_status/EditLeadStatus";
import api from '../../api/axios';
import { toast } from 'react-toastify';

interface LeadStatusType {
    id: number;
    name: string;
    description: string;
    bg_color: string;
    text_color: string;
    status: number;
}

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

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

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

    const handleToggle = async (rowId: number, checked: boolean) => {
        try {
            const newStatus = checked ? 0 : 1;
            await api.put(`/lead-status/status/${rowId}`, { status: newStatus });

            setRows((prev) =>
                prev.map((row) =>
                    row.id === rowId ? { ...row, status: newStatus } : row
                )
            );
            toast.success('Status updated successfully');
        } catch (error) {
            console.error('Error updating status:', error);
            toast.error('Failed to update status');
        }
    };

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

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

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

    const deptColumns = [
        {
            accessor: 'name',
            title: 'Lead Status',
            render: (row: LeadStatusType) => (
                <div className="flex items-center gap-3">
                    <span
                        className="px-3 py-1 rounded-full text-sm font-semibold"
                        style={{
                            backgroundColor: row.bg_color || '#E5E7EB',
                            color: row.text_color || '#000000'
                        }}
                    >
                        {row.name}
                    </span>
                </div>
            ),
        },
        {
            accessor: 'description',
            title: 'Description',
            render: (row: LeadStatusType) => (
                <div className="text-sm text-gray-600">
                    {row.description || '-'}
                </div>
            ),
        },
        {
            accessor: 'Background Color',
            title: 'Background Color',
            render: (row: LeadStatusType) => (
                <div className="flex items-center gap-2">
                    <span
                        className="inline-block w-6 h-6 rounded-full border border-gray-300"
                        style={{ backgroundColor: row.bg_color || '#FFFFFF' }}
                    />
                    <span className="text-xs text-gray-500">{row.bg_color || '#FFFFFF'}</span>
                </div>
            ),
        },
        {
            accessor: 'Text Color',
            title: 'Text Color',
            render: (row: LeadStatusType) => (
                <div className="flex items-center gap-2">
                    <span
                        className="inline-block w-6 h-6 rounded-full border border-gray-300"
                        style={{ backgroundColor: row.text_color || '#000000' }}
                    />
                    <span className="text-xs text-gray-500">{row.text_color || '#000000'}</span>
                </div>
            ),
        },
        {
            accessor: "status",
            title: "Status",
            render: (row: LeadStatusType) => (
                <CustomSwitch
                    key={row.id}
                    id={`switch-${row.id}`}
                    checked={row.status === 0}
                    onChange={(checked) => handleToggle(row.id, checked)}
                />
            ),
        },
        {
            accessor: 'actions',
            title: 'Actions',
            render: (row: LeadStatusType) => (
                <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-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 className="text-base fw-semibold">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 className="text-base fw-semibold">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="/lead_status_settings" className="text-primary text-lg hover:underline">
                            Lead Status
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Settings</span>
                    </li>
                </ul>
                <Button
                    icon={<IconPlus />}
                    iconPosition="left"
                    onClick={() => setOpen(true)}
                >
                    Add Lead Status
                </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">
                            <DataTables
                                data={rows}
                                columns={deptColumns}
                            />
                        </div>
                    </div>
                </div>
            </div>

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

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

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

export default LeadStatus;