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 AddCourseCategory from "../../modals/settings/course_category/AddCourseCategory";
import EditCourseCategory from "../../modals/settings/course_category/EditCourseCategory";
import DeleteModal from "../../modals/settings/DeleteModal";
import CustomSwitch from "../../components/CustomSwitch";
import api from '../../api/axios';
import { toast } from 'react-toastify';

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

function CourseCategory() {
    const [courseCategory, setCourseCategory] = useState<CourseCategory[]>([]);
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [editData, setEditData] = useState<CourseCategory | null>(null);
    // Remove editId - you don't need it since you have editData
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [deleteRow, setDeleteRow] = useState<CourseCategory | null>(null);

    // Fetch course categories from API
    const fetchCourseCategory = async () => {
        setLoading(true);
        try {
            const response = await api.get('/category/list');
            if (response.data.status === 200) {
                setCourseCategory(response.data.data);
            }
        } catch (error) {

            toast.error('Failed to fetch course categories');
        } finally {
            setLoading(false);
        }
    };

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

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

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

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

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

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

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

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

    // Fixed: Status toggle logic
    const handleToggleStatus = async (id: number, checked: boolean) => {
        const newStatus = checked ? 0 : 1;


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

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

    const courseColumns = [
        {
            accessor: 'name',
            title: 'Course Category',
            render: (row: CourseCategory) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.name}</div>
                </div>
            ),
        },
        {
            accessor: 'description',
            title: 'Description',
            render: (row: CourseCategory) => (
                <div className="flex items-center gap-3">
                    <div className="font-semibold text-sm">{row.description || '-'}</div>
                </div>
            ),
        },
        {
            accessor: "status",
            title: "Status",
            render: (row: CourseCategory) => {
                // Fixed: status 1 = active (checked true), status 0 = inactive (checked false)
                const isActive = row.status === 0;

                return (
                    <CustomSwitch
                        key={row.id}
                        id={`switch-${row.id}`}
                        checked={isActive}
                        onChange={(checked) => handleToggleStatus(row.id, checked)}
                    />
                );
            },
        },
        {
            accessor: 'actions',
            title: 'Actions',
            render: (row: CourseCategory) => (
                <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="/course_category" className="text-primary text-lg hover:underline">
                            Course Category
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Settings</span>
                    </li>
                </ul>
                <Button
                    icon={<IconPlus />}
                    iconPosition="left"
                    onClick={() => setOpen(true)}
                >
                    Add Course Category
                </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={courseCategory}
                                    columns={courseColumns}
                                />
                            )}
                        </div>
                    </div>
                </div>
            </div>

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

            <EditCourseCategory
                open={editOpen}
                onClose={() => {
                    setEditOpen(false);
                    setEditData(null);
                }}
                onSave={handleUpdate}
                data={editData}
                // Remove the 'id' prop - it's not needed if your EditCourseCategory uses data.id
            />

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

export default CourseCategory;