import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useEffect, useState, useCallback } from 'react';
import { setPageTitle } from '../../store/themeConfigSlice';
import Button from '../../components/Buttons';
import IconPlus from '../../components/Icon/IconPlus';
import IconMapPin from '../../components/Icon/IconMapPin';
import StatusBadge from '../../components/StatusBadge';
import IconUsersGroup from '../../components/Icon/IconUsersGroup';
import IconMenuCalendar from '../../components/Icon/Menu/IconMenuCalendar';
import IconPencil from '../../components/Icon/IconPencil';
import IconEye from '../../components/Icon/IconEye';
import IconCalendar from '../../components/Icon/IconCalendar';
import Tooltip from '../../components/Tooltip';
import SearchBar from '../../components/SearchBar';
import IconSearch from '../../components/Icon/IconSearch';
import IconRefresh from '../../components/Icon/IconRefresh';
import IconChevronLeft from '../../components/Icon/IconChevronLeft';
import IconChevronRight from '../../components/Icon/IconChevronRight';
import AddBatch from '../../modals/manage_batch/AddBatch';
import EditBatch from '../../modals/manage_batch/EditBatch';
import api from '../../api/axios';
import { toast } from 'react-toastify';
import { encodeId } from '../../utils/hashId';
// Interface for Batch data
interface BatchData {
    id: number;
    batch_name: string;
    batch_code: string;
    course_id: number;
    course_name?: string;
    batch_mode: string;
    room_id: number;
    name?: string;
    room_no?: string;
    start_date: string;
    end_date: string;
    start_time: string;
    end_time: string;
    capacity: number;
    trainer_id: number;
    trainer_name?: string;
    co_trainer?: number;
    co_trainer_name?: string;
    support_staff?: number;
    support_staff_name?: string;
    status: number | string;
    enrolled_count?: number;
    course?: {
        id: number;
        course_name: string;
    };
    trainer?: {
        id: number;
        staff_name: string;
    };
    room?: {
        id: number;
        room_name: string;
        name: string;
        room_no: string;
    };
}

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

// Skeleton Card Component
const SkeletonCard = () => (
    <div className="rounded-md p-5 border animate-pulse">
        <div className="flex justify-between items-start mb-4">
            <div className="flex items-center gap-3">
                <div className="bg-gray-200 p-3 rounded-lg w-12 h-12"></div>
                <div>
                    <div className="h-5 w-40 bg-gray-200 rounded mb-2"></div>
                    <div className="h-3 w-24 bg-gray-200 rounded"></div>
                </div>
            </div>
            <div className="flex items-center gap-3">
                <div className="h-6 w-20 bg-gray-200 rounded-full"></div>
                <div className="h-8 w-8 bg-gray-200 rounded"></div>
            </div>
        </div>
        <div className="flex items-center gap-2 border-b py-2 mb-2">
            <div className="h-4 w-32 bg-gray-200 rounded"></div>
        </div>
        <div className="space-y-2 mb-4">
            <div className="flex items-center gap-2">
                <div className="h-4 w-4 bg-gray-200 rounded"></div>
                <div className="h-4 w-20 bg-gray-200 rounded"></div>
            </div>
            <div className="flex items-center gap-2">
                <div className="h-4 w-4 bg-gray-200 rounded"></div>
                <div className="h-4 w-40 bg-gray-200 rounded"></div>
            </div>
        </div>
        <div className="h-10 w-full bg-gray-200 rounded-md"></div>
    </div>
);

const ManageSchedule = () => {
    const dispatch = useDispatch();

    // State management
    const [batches, setBatches] = useState<BatchData[]>([]);
    const [pagination, setPagination] = useState<PaginationData>({
        current_page: 1,
        last_page: 1,
        per_page: 25,
        total: 0,
        from: 1,
        to: 1,
    });
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);

    // Modal states
    const [open, setOpen] = useState(false);
    const [editOpen, setEditOpen] = useState(false);
    const [editData, setEditData] = useState<any>(null);

    useEffect(() => {
        dispatch(setPageTitle('Manage Schedule'));
    }, [dispatch]);

    // Fetch batches from API
     const fetchBatches = useCallback(async (page = 1, search = searchTerm, perPage?: number) => {
        setLoading(true);
        try {
            const params: any = {
                page,
                 per_page: perPage || pagination.per_page,
            };

            if (search) params.search = search;

            const response = await api.get('/batch/lists', { params });

            if (response.data.status === 200 || response.data.status === true) {
                const responseData = response.data.data;
                setBatches(responseData.data || []);
                setPagination({
                    current_page: responseData.current_page,
                    last_page: responseData.last_page,
                    per_page: responseData.per_page,
                    total: responseData.total,
                    from: responseData.from,
                    to: responseData.to,
                });
            }
        } catch (error: any) {
            toast.error(error.response?.data?.message || 'Failed to fetch batches');
        } finally {
            setLoading(false);
        }
    }, [pagination.per_page]);

// Initial fetch
    useEffect(() => {
        fetchBatches();
    }, []);

    // Search with debounce
    const handleSearch = (value: string) => {
        setSearchTerm(value);

        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }

        const timeout = setTimeout(() => {
            fetchBatches(1, value);
        }, 500);

        setSearchTimeout(timeout);
    };



    // Status change handler
    const handleStatusChange = async (batchId: number, newStatus: string) => {
        try {
            // Map the status to your backend expected values
            const statusMap: Record<string, number> = {
                'active': 0,
                'inactive': 1,
                'completed': 2,
            };

            const statusValue = statusMap[newStatus.toLowerCase()] ?? 0;

            const response = await api.put(`/batch/update-status/${batchId}`, {
                status: statusValue
            });

            if (response.data.status) {
                toast.success('Status updated successfully');
                // Refresh your list
                fetchBatches();
            }
        } catch (error: any) {
            console.error('Error updating status:', error);
            toast.error(error.response?.data?.message || 'Failed to update status');
        }
    };

    // Pagination
    const handlePageChange = (page: number) => {
        if (page < 1 || page > pagination.last_page) return;
        fetchBatches(page, searchTerm);
    };
    // Per page change - Fixed
    const handlePerPageChange = (newPerPage: number) => {
        setPagination(prev => ({ ...prev, per_page: newPerPage }));
        fetchBatches(1, searchTerm, newPerPage); // Pass perPage directly
    };

    // Format date
    const formatDate = (dateStr: string) => {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        const day = String(date.getDate()).padStart(2, '0');
        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        const month = monthNames[date.getMonth()];
        const year = date.getFullYear();
        return `${day}-${month}-${year}`;
    };

    // Get status label
    const getStatusLabel = (status: number | string): string => {
        const statusMap: Record<string, string> = {
            '0': 'Active',
            '1': 'Inactive',
            '2': 'Completed',
            'active': 'Active',
            'inactive': 'Inactive',
            'completed': 'Completed',
        };
        return statusMap[status?.toString()] || 'Unknown';
    };

    // Get batch mode color
    const getBatchModeColor = (mode: string): string => {
        if (!mode) return 'bg-gray-100 text-gray-700';
        const lower = mode.toLowerCase();
        if (lower === 'online') return 'bg-blue-100 text-blue-700';
        if (lower === 'offline') return 'bg-green-100 text-green-700';
        if (lower === 'hybrid') return 'bg-purple-100 text-purple-700';
        return 'bg-gray-100 text-gray-700';
    };

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

            <div className="pt-2">
                <div className="p-4 rounded-xl shadow-md bg-white w-full max-w-full overflow-hidden">
                    {/* Search Bar */}
                    <div className="flex justify-between items-center gap-4 mb-4">
                        <div className="w-full max-w-full">
                            <SearchBar
                                placeholder="Search by Batch name, Course..."
                                onSearch={(val: string) => {
                                    setSearchTerm(val);
                                    handleSearch(val);
                                }}
                            />
                        </div>
                    </div>
                    {/* Batch Cards Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                        {/* Skeleton Loading */}
                        {loading && Array.from({ length: 6 }).map((_, index) => (
                            <SkeletonCard key={`skeleton-${index}`} />
                        ))}

                        {/* Batch Cards */}
                        {!loading && batches.map((batch) => (
                            <div
                                key={batch.id}
                                className="rounded-md p-5 border relative hover:shadow-md transition-shadow duration-300"
                            >
                                {/* Card Header */}
                                <div className="flex justify-between items-start mb-4">
                                    <div className="flex items-center gap-3">
                                        <div className="bg-pink-100 text-primary p-3 rounded-lg">
                                            <IconMenuCalendar />
                                        </div>
                                        <div>
                                            <h3 className="font-semibold text-lg text-gray-900">
                                                {batch.batch_name}
                                            </h3>
                                            <span className="text-xs text-gray-500">
                                                {batch.course?.course_name || 'N/A'}
                                            </span>
                                            {batch.batch_code && (
                                                <span className="text-xs text-gray-400 ml-2">
                                                    ({batch.batch_code})
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                    <div className="flex items-center justify-end gap-3">
                                        {/* In your batch list table */}
                                        {/* In your batch list table column */}
                                        <StatusBadge
                                            initialStatus={getStatusLabel(batch.status).toUpperCase()}
                                            onChange={(newStatus: string) => {
                                                handleStatusChange(batch.id, newStatus.toLowerCase());
                                            }}
                                        />
                                        {batch.start_date && new Date(batch.start_date) >= new Date(new Date().toDateString()) && (
                                            <Button
                                                variant='secondary'
                                                onClick={() => {
                                                    setEditData(batch);
                                                    setEditOpen(true);
                                                }}
                                                className="!p-2"
                                            >
                                                <IconPencil className="w-4 h-4" />
                                            </Button>
                                        )}
                                    </div>
                                </div>

                                {/* Batch Mode Badge */}
                                {/* {batch.batch_mode && (
                                    <div className="mb-3">
                                        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${getBatchModeColor(batch.batch_mode)}`}>
                                            {batch.batch_mode}
                                        </span>
                                    </div>
                                )} */}

                                {/* Enrollment Count */}
                                <div className="flex items-center gap-2 border-b py-2 mb-3">
                                    <IconUsersGroup className="w-5 h-5 text-gray-900" />
                                    <span className="text-black text-sm">
                                        Enrollment:
                                        <span className='text-success font-bold ml-1'>
                                            {batch.enrolled_count ?? 0}/{batch.capacity}
                                        </span>
                                    </span>
                                </div>

                                {/* Details */}
                                <div className="space-y-2 text-sm text-gray-600 mb-4">
                                    {/* Room */}
                                    <div className="flex items-center gap-2">
                                        <IconMapPin className="w-5 h-5 text-gray-900" />
                                        <span className="text-black">
                                            Room:
                                            <span className='font-semibold ml-1'>
                                                {batch.room?.name || batch.room?.room_name || batch.room_no || 'N/A'}
                                            </span>
                                        </span>
                                    </div>

                                    {/* Dates */}
                                    <div className="flex items-center gap-2">
                                        <IconCalendar className="w-5 h-5 text-gray-900" />
                                        <div className="text-black text-sm">
                                            Date:
                                            <Tooltip content="Start Date" placement='bottom'>
                                                <span className='font-semibold ml-1'>
                                                    {batch.start_date && formatDate(batch.start_date)}
                                                </span>
                                            </Tooltip>
                                            <span className="mx-1">-</span>
                                            <Tooltip content="End Date" placement='bottom'>
                                                <span className='text-danger font-semibold'>
                                                    {batch.end_date && formatDate(batch.end_date)}
                                                </span>
                                            </Tooltip>
                                        </div>
                                    </div>

                                    {/* Trainer */}
                                    {batch.trainer && (
                                        <div className="flex items-center gap-2">
                                            <IconUsersGroup className="w-5 h-5 text-gray-900" />
                                            <span className="text-black text-sm">
                                                Trainer:
                                                <span className='font-semibold ml-1'>
                                                    {batch.trainer.staff_name || batch.trainer_name || 'N/A'}
                                                </span>
                                            </span>
                                        </div>
                                    )}
                                </div>

                                {/* View Button */}
                                <Link
                                    to={`/schedule_view/${encodeId(batch.id)}`}
                                    className="w-full bg-secondary hover:bg-gray-300 hover:text-black rounded-md py-2 text-sm font-medium text-white flex justify-center items-center gap-2 transition-colors"
                                >
                                    <IconEye className="w-5 h-5" />
                                    View
                                </Link>
                            </div>
                        ))}
                    </div>

                    {/* Empty State */}
                    {!loading && batches.length === 0 && (
                        <div className="text-center py-16">
                            <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <IconMenuCalendar className="w-10 h-10 text-gray-400" />
                            </div>
                            <h3 className="text-lg font-medium text-gray-600 mb-2">No Batches Found</h3>
                            <p className="text-gray-400 mb-6">
                                {searchTerm
                                    ? 'No batches match your search criteria.'
                                    : 'Start by adding your first batch schedule.'}
                            </p>
                        </div>
                    )}
                </div>
            </div>

            {/* Pagination */}
            {!loading && batches.length > 0 && (
                <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6 pt-4 border-t">

                    {/* Left side */}
                    <div className="text-sm text-gray-600">
                        Showing <strong>{pagination.from}</strong> to <strong>{pagination.to}</strong> of{' '}
                        <strong>{pagination.total}</strong> entries
                    </div>

                    {/* Right side (GROUPED) */}
                    <div className="flex items-center gap-4">

                        {/* Per Page Selector */}
                         <div className="flex items-center gap-2">
                            <select
                                value={pagination.per_page}
                                onChange={(e) => handlePerPageChange(Number(e.target.value))}
                                className="border rounded-lg px-3 py-1.5 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>

                        {/* Pagination */}
                        <div className="flex gap-2 items-center">
                            <button
                                onClick={() => handlePageChange(pagination.current_page - 1)}
                                disabled={pagination.current_page === 1}
                                className="w-9 h-9 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>

                            {/* Page Numbers */}
                            <div className="flex gap-1">
                                {(() => {
                                    const pages: number[] = [];
                                    const totalPages = pagination.last_page;
                                    const currentPage = pagination.current_page;

                                    if (totalPages <= 7) {
                                        for (let i = 1; i <= totalPages; i++) {
                                            pages.push(i);
                                        }
                                    } else {
                                        pages.push(1);

                                        if (currentPage > 4) {
                                            pages.push(-1);
                                        }

                                        const start = Math.max(2, currentPage - 1);
                                        const end = Math.min(totalPages - 1, currentPage + 1);

                                        for (let i = start; i <= end; i++) {
                                            pages.push(i);
                                        }

                                        if (currentPage < totalPages - 3) {
                                            pages.push(-1);
                                        }

                                        pages.push(totalPages);
                                    }

                                    return pages.map((page, index) => {
                                        if (page === -1) {
                                            return (
                                                <span
                                                    key={`ellipsis-${index}`}
                                                    className="w-9 h-9 flex items-center border rounded-full justify-center text-gray-400"
                                                >
                                                    ...
                                                </span>
                                            );
                                        }

                                        return (
                                            <button
                                                key={page}
                                                onClick={() => handlePageChange(page)}
                                                className={`w-9 h-9 flex items-center justify-center border rounded-full text-sm font-medium transition-colors ${
                                                    pagination.current_page === page
                                                        ? 'bg-primary text-white shadow-md shadow-primary/30'
                                                        : 'border hover:bg-gray-50 hover:border-primary/50'
                                                }`}
                                            >
                                                {page}
                                            </button>
                                        );
                                    });
                                })()}
                            </div>

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

                    </div>
                </div>
            )}

            {/* Loading Indicator */}
            {loading && batches.length > 0 && (
                <div className="flex justify-center mt-4">
                    <div className="flex items-center gap-2 text-gray-500">
                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
                        <span className="text-sm">Loading...</span>
                    </div>
                </div>
            )}

            {/* Modals */}
            <AddBatch
                open={open}
                onClose={() => setOpen(false)}
                onSave={(data: any) => {
                    setOpen(false);
                    fetchBatches(1, searchTerm);
                }}
            />

            <EditBatch
                open={editOpen}
                onClose={() => {
                    setEditOpen(false);
                    setEditData(null);
                }}
                onSave={(data: any) => {
                    setEditOpen(false);
                    setEditData(null);
                    fetchBatches(pagination.current_page, searchTerm);
                }}
                data={editData}
            />
        </>
    );
};

export default ManageSchedule;