import React, { useState, useEffect } from 'react';
import IconBook from '../../components/Icon/IconBook';
import Button from '../../components/Buttons';
import { Link } from 'react-router-dom';
import IconPlus from '../../components/Icon/IconPlus';
import IconChevronLeft from '../../components/Icon/IconChevronLeft';
import IconChevronRight from '../../components/Icon/IconChevronRight';
import Tooltip from '../../components/Tooltip';
import AddCourse from '../../modals/manage_course/AddCourse';
import Curriculum from '../../modals/manage_course/Curriculum';
import EditCourse from '../../modals/manage_course/EditCourse';
import DeleteModal from '../../modals/settings/DeleteModal';
import api from '../../api/axios';
import { toast } from 'react-toastify';
import { encodeId } from '../../utils/hashId';

interface ModulePreview {
    id: number;
    module_title: string;
    duration: string;
}

interface Course {
    id: number;
    course_name: string;
    course_category_id: number;
    category_name?: string;
    fees: number;
    leave_limit: number;
    course_code: string;
    skills: string[];
    duration: string;
    description: string;
    status: number;
    created_at: string;
    modules?: ModulePreview[];
    modules_count?: number;
    active_students_count?: number;
    total_students_count?: number;
}

interface PaginationData {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    from: number;
    to: number;
}

function CourseList() {
    const [courses, setCourses] = useState<Course[]>([]);
    const [loading, setLoading] = useState(false);
    const [search, setSearch] = useState('');
    const [debouncedSearch, setDebouncedSearch] = useState('');
    const [perPage, setPerPage] = useState(12);
    const [pagination, setPagination] = useState<PaginationData>({
        current_page: 1,
        last_page: 1,
        per_page: 25,
        total: 0,
        from: 0,
        to: 0
    });
    const [open, setOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [editData, setEditData] = useState<Course | null>(null);
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [deleteRow, setDeleteRow] = useState<Course | null>(null);
    const [curriculumModal, setCurriculumModal] = useState(false);
    const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);

    // Debounce search
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedSearch(search);
        }, 500);
        return () => clearTimeout(timer);
    }, [search]);

    // Fetch courses from API with pagination
    const fetchCourses = async (page = 1) => {
        setLoading(true);
        try {
            const response = await api.get('/course/list', {
                params: {
                    page: page,
                    per_page: perPage,
                    search: debouncedSearch || undefined
                }
            });
            console.log('Courses API Response:', response.data);

            if (response.data.status === true) {
                const coursesData = response.data.data.data;
                const formattedCourses = coursesData.map((course: any) => ({
                    id: course.id,
                    course_name: course.course_name,
                    course_category_id: course.course_category_id,
                    category_name: course.course_categeory?.name || 'Uncategorized',
                    fees: course.fees,
                    course_code: course.course_code || '',
                    skills: course.skills || [],
                    leave_limit: course.leave_limit,
                    duration: course.duration,
                    description: course.description,
                    status: course.status,
                    created_at: course.created_at,
                    modules: course.modules || [],
                    modules_count: course.modules?.length || 0,
                    active_students_count: course.active_students_count || 0,
                    total_students_count: course.total_students_count || 0
                }));

                setCourses(formattedCourses);
                setPagination({
                    current_page: response.data.data.current_page,
                    last_page: response.data.data.last_page,
                    per_page: response.data.data.per_page,
                    total: response.data.data.total,
                    from: response.data.data.from || 0,
                    to: response.data.data.to || 0
                });
            }
        } catch (error) {
            console.error('Error fetching courses:', error);
            toast.error('Failed to fetch courses');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchCourses(1);
    }, [perPage, debouncedSearch]);

    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSearch(e.target.value);
    };

    const handlePageChange = (newPage: number) => {
        if (newPage >= 1 && newPage <= pagination.last_page) {
            fetchCourses(newPage);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    };

    const handlePerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const newPerPage = parseInt(e.target.value);
        setPerPage(newPerPage);
    };

    const handleSave = async (data: any) => {
        try {
            const response = await api.post('/course/add', {
                course_name: data.course_name,
                course_category_id: data.course_category_id,
                fees: data.fees,
                leave_limit: data.leave_limit,
                course_code: data.course_code,
                skills: JSON.stringify(data.skills),
                duration: data.duration,
                description: data.description
            });

            if (response.data.status === true) {
                toast.success('Course created successfully');
                fetchCourses(1);
                return true;
            }
            return false;
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to create course';
            toast.error(errorMsg);
            return false;
        }
    };

    const handleUpdate = async (id: number, data: any) => {
        try {
            const response = await api.put(`/course/update/${id}`, {
                course_name: data.course_name,
                course_category_id: data.course_category_id,
                fees: data.fees,
                course_code: data.course_code,
                skills: JSON.stringify(data.skills),
                leave_limit: data.leave_limit,
                duration: data.duration,
                description: data.description
            });

            if (response.data.status === true) {
                toast.success('Course updated successfully');
                fetchCourses(pagination.current_page);
                return true;
            }
            return false;
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to update course';
            toast.error(errorMsg);
            return false;
        }
    };

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

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

            if (response.data.status === true) {
                toast.success('Course deleted successfully');
                if (courses.length === 1 && pagination.current_page > 1) {
                    fetchCourses(pagination.current_page - 1);
                } else {
                    fetchCourses(pagination.current_page);
                }
                setDeleteOpen(false);
                setDeleteRow(null);
            }
        } catch (error: any) {
            const errorMsg = error.response?.data?.message || 'Failed to delete course';
            toast.error(errorMsg);
        }
    };

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

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

            if (response.data.status === true) {
                toast.success('Status updated successfully');
                fetchCourses(pagination.current_page);
            }
        } catch (error: any) {
            console.error('Error updating status:', error);
            const errorMsg = error.response?.data?.message || 'Failed to update status';
            toast.error(errorMsg);
            fetchCourses(pagination.current_page);
        }
    };

    // Skeleton Loader Component
    const SkeletonCard = () => (
        <div className='col-span-12 sm:col-span-6 lg:col-span-4'>
            <div className='border p-4 rounded flex flex-col h-full animate-pulse'>
                <div className='grid grid-cols-12'>
                    <div className='col-span-10'>
                        <div className='flex items-center gap-4'>
                            <div className='p-4 rounded-xl bg-gray-200 w-16 h-16'></div>
                            <div className='flex flex-col flex-1'>
                                <div className='h-5 bg-gray-200 rounded w-3/4 mb-2'></div>
                                <div className='h-4 bg-gray-200 rounded w-1/2'></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='grid grid-cols-12 mt-3 gap-4'>
                    {[1, 2, 3, 4].map((i) => (
                        <div key={i} className='col-span-6'>
                            <div className='flex flex-col'>
                                <div className='h-3 bg-gray-200 rounded w-1/2 mb-1'></div>
                                <div className='h-4 bg-gray-200 rounded w-3/4'></div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className='grid grid-cols-12 mt-3 gap-1'>
                    <div className='col-span-12'>
                        <div className='h-3 bg-gray-200 rounded w-1/3 mb-2'></div>
                        {[1, 2].map((i) => (
                            <div key={i} className='bg-gray-100 p-2 rounded mb-2'>
                                <div className='h-4 bg-gray-200 rounded w-full'></div>
                            </div>
                        ))}
                    </div>
                </div>
                <div className='grid grid-cols-12 mt-3 gap-2'>
                    <div className='col-span-12'>
                        <div className='h-8 bg-gray-200 rounded w-full'></div>
                    </div>
                </div>
            </div>
        </div>
    );

    // Pagination Component
    const Pagination = () => {
        // Don't show pagination if only 1 page
        // if (pagination.last_page <= 1) return null;

        const pages = [];
        const maxVisible = 5;
        let startPage = Math.max(1, pagination.current_page - Math.floor(maxVisible / 2));
        let endPage = Math.min(pagination.last_page, startPage + maxVisible - 1);

        if (endPage - startPage + 1 < maxVisible) {
            startPage = Math.max(1, endPage - maxVisible + 1);
        }

        for (let i = startPage; i <= endPage; i++) {
            pages.push(i);
        }

        return (
            <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6 pt-4 border-t">
                <div className="text-sm text-gray-600 flex items-center gap-3">
                    <span>
                        Showing {pagination.from || ((pagination.current_page - 1) * perPage) + 1} to{' '}
                        {pagination.to || Math.min(pagination.current_page * perPage, pagination.total)} of{' '}
                        {pagination.total} entries
                    </span>
                    <select
                        value={perPage}
                        onChange={handlePerPageChange}
                        className="px-2 py-1 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                        <option value={10}>10</option>
                        <option value={25}>25</option>
                        <option value={50}>50</option>
                        <option value={100}>100</option>
                    </select>
                </div>
                <div className="flex gap-2">
                    <button
                        onClick={() => handlePageChange(pagination.current_page - 1)}
                        disabled={pagination.current_page === 1}
                        className="w-8 h-8 flex items-center justify-center border rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 transition-colors"
                    >
                        <IconChevronLeft className="w-4 h-4" />
                    </button>

                    {/* First page + ellipsis */}
                    {startPage > 1 && (
                        <>
                            <button
                                onClick={() => handlePageChange(1)}
                                className="w-8 h-8 flex items-center justify-center border rounded-full hover:bg-gray-50 transition-colors"
                            >
                                1
                            </button>
                            {startPage > 2 && (
                                <span className="w-8 h-8 flex items-center justify-center">...</span>
                            )}
                        </>
                    )}

                    {/* Page numbers */}
                    <div className="flex gap-1">
                        {pages.map((pageNum) => (
                            <button
                                key={pageNum}
                                onClick={() => handlePageChange(pageNum)}
                                className={`w-8 h-8 flex items-center justify-center border rounded-full transition-colors ${
                                    pagination.current_page === pageNum
                                        ? 'bg-primary text-white border-primary'
                                        : 'hover:bg-gray-50'
                                }`}
                            >
                                {pageNum}
                            </button>
                        ))}
                    </div>

                    {/* Last page + ellipsis */}
                    {endPage < pagination.last_page && (
                        <>
                            {endPage < pagination.last_page - 1 && (
                                <span className="w-8 h-8 flex items-center justify-center">...</span>
                            )}
                            <button
                                onClick={() => handlePageChange(pagination.last_page)}
                                className="w-8 h-8 flex items-center justify-center border rounded-full hover:bg-gray-50 transition-colors"
                            >
                                {pagination.last_page}
                            </button>
                        </>
                    )}

                    <button
                        onClick={() => handlePageChange(pagination.current_page + 1)}
                        disabled={pagination.current_page === pagination.last_page}
                        className="w-8 h-8 flex items-center justify-center border rounded-full hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <IconChevronRight className="w-4 h-4" />
                    </button>
                </div>
            </div>
        );
    };

    // Clear search
    const handleClearSearch = () => {
        setSearch('');
    };

    return (
        <>
            <div className="flex items-center justify-between gap-2 mb-2 flex-wrap">
                <ul className="flex space-x-2 items-center">
                    <li>
                        <Link to="/course_list" className="text-primary text-lg hover:underline">
                            Course
                        </Link>
                    </li>
                    <li className="before:content-['/'] ml-2">
                        <span>Manage Training</span>
                    </li>
                </ul>
                <Button icon={<IconPlus />} iconPosition="left" onClick={() => setOpen(true)}>
                    Add Course
                </Button>
            </div>

            <div className="pt-4">
                <div className="gap-5 p-4 rounded-xl shadow-md bg-white w-full max-w-full overflow-hidden">

                    {/* Filters */}
                    <div className="mb-4">
                        <div className="flex flex-wrap gap-4 items-center justify-between">


                            <div className="relative w-full max-w-full">
                                <input
                                    type="text"
                                    placeholder="Search courses..."
                                    value={search}
                                    onChange={handleSearch}
                                    className="w-full pl-10 pr-10 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-gray-100"
                                />
                                <svg
                                    className="absolute left-3 top-2.5 w-4 h-4 text-gray-400"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                                    />
                                </svg>
                                {search && (
                                    <button
                                        onClick={handleClearSearch}
                                        className="absolute right-3 top-2.5 text-gray-400 hover:text-gray-600"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>

                    {loading ? (
                        <div className='grid grid-cols-12 gap-4'>
                            {[1, 2, 3, 4, 5, 6].map((i) => (
                                <SkeletonCard key={i} />
                            ))}
                        </div>
                    ) : courses.length === 0 ? (
                        <div className="text-center py-12">
                            <div className="text-gray-400 mb-3">
                                <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                </svg>
                            </div>
                            <div className="text-gray-500 text-lg font-medium">No courses found</div>
                            {debouncedSearch && (
                                <p className="text-gray-400 text-sm mt-1">
                                    No results for "{debouncedSearch}". Try a different search term.
                                </p>
                            )}
                        </div>
                    ) : (
                        <>
                            <div className='grid grid-cols-12 gap-4'>
                                {courses.map((course) => (
                                    <div key={course.id} className='col-span-12 sm:col-span-6 lg:col-span-4'>
                                        <div className='border p-4 rounded flex flex-col h-full hover:shadow-md transition-shadow'>
                                            <div className='grid grid-cols-12'>
                                                <div className='col-span-12'>
                                                    <div className='flex items-center gap-4'>
                                                        <div className='p-4 rounded-xl bg-[#FCE7F3] text-primary flex-shrink-0'>
                                                            <IconBook />
                                                        </div>
                                                        <div className='flex flex-col min-w-0'>
                                                            <Tooltip content={course.course_name}>
                                                                <label className='font-semibold text-lg mb-0 truncate'>
                                                                    {course.course_name}
                                                                </label>
                                                            </Tooltip>
                                                            <label className='text-gray-500 text-sm'>
                                                                {course.duration} Month Course
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div className='grid grid-cols-12 mt-3 gap-4'>
                                                <div className='col-span-6'>
                                                    <div className='flex flex-col'>
                                                        <label className='text-gray-500 text-sm'>Fees</label>
                                                        <label className='font-semibold'>₹ {course.fees?.toLocaleString()}</label>
                                                    </div>
                                                </div>
                                                <div className='col-span-6'>
                                                    <div className='flex flex-col'>
                                                        <label className='text-gray-500 text-sm'>Category</label>
                                                        <Tooltip content={course.category_name || ''}>
                                                            <label className='font-semibold truncate block'>
                                                                {course.category_name}
                                                            </label>
                                                        </Tooltip>
                                                    </div>
                                                </div>
                                                <div className='col-span-6'>
                                                    <div className='flex flex-col'>
                                                        <label className='text-gray-500 text-sm'>Active Students</label>
                                                        <label className='font-semibold text-green-600'>
                                                            {course.active_students_count || 0}
                                                        </label>
                                                    </div>
                                                </div>
                                                <div className='col-span-6'>
                                                    <div className='flex flex-col'>
                                                        <label className='text-gray-500 text-sm'>Module</label>
                                                        <label className='font-semibold'>{course.modules_count || 0} Modules</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div className='grid grid-cols-12 mt-3 gap-1'>
                                                <div className='col-span-12'>
                                                    <label className='text-gray-500 text-sm'>Syllabus Preview</label>
                                                </div>
                                                {course.modules && course.modules.length > 0 ? (
                                                    course.modules.slice(0, 2).map((module, idx) => (
                                                        <div key={module.id || idx} className='col-span-12'>
                                                            <div className='bg-gray-50 p-2 rounded'>
                                                                <div className='flex justify-between items-center'>
                                                                    <label className="text-sm truncate flex-1 mr-2">
                                                                        {module.module_title}
                                                                    </label>
                                                                    <label className='text-xs text-gray-600 whitespace-nowrap'>
                                                                        {module.duration} hrs
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    ))
                                                ) : (
                                                    <div className='col-span-12'>
                                                        <div className='bg-gray-50 p-2 rounded text-center text-sm text-gray-500'>
                                                            No modules added yet
                                                        </div>
                                                    </div>
                                                )}

                                                {course.modules && course.modules.length > 1 && (
                                                    <div className='col-span-12 flex items-center justify-center mt-2'>
                                                        <Link to={`/view_course_details/${encodeId(course.id)}`}>
                                                            <label className='text-xs text-primary cursor-pointer hover:underline'>
                                                                View More ({course.modules.length - 2} more)
                                                            </label>
                                                        </Link>
                                                    </div>
                                                )}
                                            </div>

                                            <div className='grid grid-cols-12 mt-3 gap-2 mt-auto'>
                                                <div className='col-span-12'>
                                                    <button
                                                        className="w-full bg-secondary hover:bg-gray-300 hover:text-black rounded-md py-2 text-sm font-medium text-white transition-colors"
                                                        onClick={() => {
                                                            setSelectedCourse(course);
                                                            setCurriculumModal(true);
                                                        }}
                                                    >
                                                        Manage Curriculum
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>

                            {/* Pagination */}
                            <Pagination />
                        </>
                    )}
                </div>
            </div>

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

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

            <Curriculum
                open={curriculumModal}
                onClose={() => {
                    setCurriculumModal(false);
                    setSelectedCourse(null);
                    fetchCourses(pagination.current_page);
                }}
                courseData={selectedCourse}
            />

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

export default CourseList;