import { useState, useEffect } from 'react';
import { Clock, Plus, Search, Edit, Trash2, CheckCircle, XCircle, X } from 'lucide-react';
import { ToastContainer, useToast } from '../../UI/Toast';
import Table, { Column } from '../../UI/Table';
import ActionButtons from '../../UI/ActionButtons';
import ButtonUI from '../../UI/ButtonUI';
import Pagination from '../../UI/Pagination';
import ToggleSwitch from '../../UI/ToggleSwitch';
import CustomInput from '../../UI/CustomInput';

interface AttendanceStatus {
    id: string;
    name: string;
    description: string;
    status: 'Active' | 'Inactive';
    createdAt: string;
    updatedAt?: string;
}

// Create/Edit Modal Component
interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSave: (data: { name: string; description: string }) => void;
    title: string;
    initialData?: { name: string; description: string } | null;
}

const Modal = ({ isOpen, onClose, onSave, title, initialData }: ModalProps) => {
    const [formData, setFormData] = useState({
        name: initialData?.name || '',
        description: initialData?.description || '',
    });

    useEffect(() => {
        if (initialData) {
            setFormData({
                name: initialData.name || '',
                description: initialData.description || '',
            });
        }
    }, [initialData]);

    useEffect(() => {
        if (isOpen && !initialData) {
            setFormData({
                name: '',
                description: '',
            });
        }
    }, [isOpen, initialData]);

    if (!isOpen) return null;

    const handleInputChange = (field: string, value: any) => {
        setFormData((prev) => ({ ...prev, [field]: value }));
    };

    const handleSubmit = () => {
        if (!formData.name) {
            return;
        }
        onSave(formData);
    };

    return (
        <>
            <div className="fixed inset-0 bg-black/50 z-[100]" onClick={onClose} />
            <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none px-4">
                <div className="pointer-events-auto bg-white rounded-xl shadow-2xl w-full max-w-md">
                    <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                        <h3 className="text-lg font-semibold text-primary">{title}</h3>
                        <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition-colors">
                            <X className="w-5 h-5 text-gray-500" />
                        </button>
                    </div>
                    <div className="px-6 py-4 space-y-4">
                        <CustomInput
                            label="Attendance Status Name"
                            value={formData.name}
                            onChange={(value) => setFormData({ ...formData, name: value })}
                            placeholder="Enter attendance status name"
                            required
                            icon={<Clock className="w-4 h-4" />}
                        />
                        <CustomInput
                            label="Description"
                            type="textarea"
                            value={formData.description}
                            onChange={(value) => setFormData({ ...formData, description: value })}
                            placeholder="Enter description"
                            rows={3}
                        />
                    </div>
                    <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200">
                        <ButtonUI variant="outline" size="md" onClick={onClose}>
                            Cancel
                        </ButtonUI>
                        <ButtonUI variant="secondary" size="md" onClick={handleSubmit}>
                            {initialData ? 'Update' : 'Create'}
                        </ButtonUI>
                    </div>
                </div>
            </div>
        </>
    );
};

const AttendanceStatus = () => {
    const toast = useToast();
    const [searchTerm, setSearchTerm] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [showEntries, setShowEntries] = useState(10);
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [selectedStatus, setSelectedStatus] = useState<AttendanceStatus | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [statusToDelete, setStatusToDelete] = useState<AttendanceStatus | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Mock data for attendance status
    const [attendanceStatuses, setAttendanceStatuses] = useState<AttendanceStatus[]>([
        {
            id: '1',
            name: 'Present',
            description: 'Employee is present and on time',
            status: 'Active',
            createdAt: '2024-01-15',
        },
        {
            id: '2',
            name: 'Absent',
            description: 'Employee is absent without prior notice',
            status: 'Active',
            createdAt: '2024-02-10',
        },
        {
            id: '3',
            name: 'Late',
            description: 'Employee arrived after the scheduled time',
            status: 'Active',
            createdAt: '2024-03-05',
        },
        {
            id: '4',
            name: 'Half Day',
            description: 'Employee worked for half of the scheduled hours',
            status: 'Active',
            createdAt: '2024-04-20',
        },
        {
            id: '5',
            name: 'On Leave',
            description: 'Employee is on approved leave',
            status: 'Active',
            createdAt: '2024-05-15',
        },
        {
            id: '6',
            name: 'Permission',
            description: 'Employee is on permission for personal work',
            status: 'Inactive',
            createdAt: '2024-06-10',
        },
    ]);

    const handleAddStatus = () => {
        setSelectedStatus(null);
        setShowCreateModal(true);
    };

    const handleEditStatus = (status: AttendanceStatus) => {
        setSelectedStatus(status);
        setShowEditModal(true);
    };

    const handleDeleteStatus = (status: AttendanceStatus) => {
        setStatusToDelete(status);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!statusToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setAttendanceStatuses(attendanceStatuses.filter((s) => s.id !== statusToDelete.id));
            setShowDeleteModal(false);
            setStatusToDelete(null);
            setIsDeleting(false);
            toast.success(`Attendance status "${statusToDelete.name}" deleted successfully!`);
        }, 1000);
    };

    const handleSaveStatus = (formData: { name: string; description: string }) => {
        if (!formData.name) {
            toast.error('Please fill in all required fields');
            return;
        }

        if (selectedStatus) {
            setAttendanceStatuses(
                attendanceStatuses.map((s) =>
                    s.id === selectedStatus.id
                        ? {
                              ...s,
                              name: formData.name,
                              description: formData.description,
                              updatedAt: new Date().toISOString().split('T')[0],
                          }
                        : s,
                ),
            );
            toast.success('Attendance status updated successfully!');
            setShowEditModal(false);
            setSelectedStatus(null);
        } else {
            const newStatus: AttendanceStatus = {
                id: String(attendanceStatuses.length + 1),
                name: formData.name,
                description: formData.description,
                status: 'Active',
                createdAt: new Date().toISOString().split('T')[0],
            };
            setAttendanceStatuses([...attendanceStatuses, newStatus]);
            toast.success('Attendance status created successfully!');
            setShowCreateModal(false);
        }
    };

    const handleToggleStatus = (id: string) => {
        setAttendanceStatuses(attendanceStatuses.map((s) => (s.id === id ? { ...s, status: s.status === 'Active' ? 'Inactive' : 'Active' } : s)));
        const status = attendanceStatuses.find((s) => s.id === id);
        toast.info(`Attendance status "${status?.name}" status changed to ${status?.status === 'Active' ? 'Inactive' : 'Active'}`);
    };

    const filteredStatuses = attendanceStatuses.filter((status) => {
        const searchLower = searchTerm.toLowerCase();
        return status.name.toLowerCase().includes(searchLower) || status.description.toLowerCase().includes(searchLower);
    });

    const totalPages = Math.ceil(filteredStatuses.length / showEntries);
    const startIndex = (currentPage - 1) * showEntries;
    const currentStatuses = filteredStatuses.slice(startIndex, startIndex + showEntries);

    const columns: Column<AttendanceStatus>[] = [
        {
            key: 'sno',
            header: 'S.No',
            align: 'center',
            accessor: (_row: AttendanceStatus, index: number) => {
                const page = currentPage || 1;
                const entries = showEntries || 10;
                const calculatedIndex = (page - 1) * entries + (index || 0) + 1;
                return <span className="text-sm text-gray-600">{calculatedIndex}</span>;
            },
        },
        {
            key: 'name',
            header: 'ATTENDANCE STATUS',
            accessor: (row: AttendanceStatus) => (
                <div>
                    <div className="flex items-center gap-2">
                        <Clock className="w-4 h-4 text-primary" />
                        <span className="text-sm font-medium text-gray-900">{row.name}</span>
                    </div>
                </div>
            ),
        },
        {
            key: 'description',
            header: 'DESCRIPTION',
            accessor: (row: AttendanceStatus) => <div className="text-sm text-gray-700">{row.description || '—'}</div>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row: AttendanceStatus) => <ToggleSwitch checked={row.status === 'Active'} onChange={() => handleToggleStatus(row.id)} activeColor="bg-green-600" inactiveColor="bg-gray-300" />,
        },
        {
            key: 'actions',
            header: 'ACTION',
            align: 'center',
            accessor: (row: AttendanceStatus) => (
                <ActionButtons onEdit={() => handleEditStatus(row)} onDelete={() => handleDeleteStatus(row)} showView={false} editTooltip="Edit Status" deleteTooltip="Delete Status" size="sm" />
            ),
        },
    ];

    return (
        <>
            <ToastContainer toasts={toast.toasts} onRemove={toast.removeToast} />

            <div className="p-6">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
                    <div>
                        <h2 className="text-lg font-semibold text-primary">Attendance Status</h2>
                        <p className="text-sm text-gray-500 mt-1">Manage attendance status types</p>
                    </div>
                    <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={handleAddStatus}>
                        Add Attendance Status
                    </ButtonUI>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Total Statuses</p>
                                <p className="text-2xl font-bold text-primary">{attendanceStatuses.length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <Clock className="w-5 h-5 text-primary" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Active</p>
                                <p className="text-2xl font-bold text-green-600">{attendanceStatuses.filter((s) => s.status === 'Active').length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
                                <CheckCircle className="w-5 h-5 text-green-600" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Inactive</p>
                                <p className="text-2xl font-bold text-red-600">{attendanceStatuses.filter((s) => s.status === 'Inactive').length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
                                <XCircle className="w-5 h-5 text-red-600" />
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex flex-wrap items-center justify-between gap-4 mb-6 bg-white p-4 rounded-lg border border-gray-200">
                    <div className="flex flex-wrap items-center gap-4">
                        <div className="flex items-center gap-2">
                            <span className="text-sm text-gray-600">Show</span>
                            <select
                                value={showEntries}
                                onChange={(e) => setShowEntries(Number(e.target.value))}
                                className="px-2 py-1 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
                            >
                                <option value={10}>10</option>
                                <option value={25}>25</option>
                                <option value={50}>50</option>
                                <option value={100}>100</option>
                            </select>
                        </div>

                        <div className="relative min-w-[200px]">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                            <input
                                type="text"
                                placeholder="Search statuses..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
                            />
                        </div>
                    </div>
                </div>

                <Table data={currentStatuses} columns={columns} emptyMessage="No attendance statuses found" />

                {filteredStatuses.length > 0 && (
                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        totalItems={filteredStatuses.length}
                        startIndex={startIndex}
                        itemsPerPage={showEntries}
                        onPageChange={setCurrentPage}
                    />
                )}
            </div>

            <Modal
                isOpen={showCreateModal}
                onClose={() => {
                    setShowCreateModal(false);
                    setSelectedStatus(null);
                }}
                onSave={handleSaveStatus}
                title="Add Attendance Status"
                initialData={null}
            />

            <Modal
                isOpen={showEditModal}
                onClose={() => {
                    setShowEditModal(false);
                    setSelectedStatus(null);
                }}
                onSave={handleSaveStatus}
                title="Edit Attendance Status"
                initialData={
                    selectedStatus
                        ? {
                              name: selectedStatus.name,
                              description: selectedStatus.description,
                          }
                        : null
                }
            />

            {showDeleteModal && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-4">
                    <div className="w-full max-w-md bg-white rounded-xl shadow-2xl p-6">
                        <h3 className="text-lg font-semibold text-gray-900 mb-2">Delete Attendance Status</h3>
                        <p className="text-sm text-gray-600">Are you sure you want to delete "{statusToDelete?.name}"? This action cannot be undone.</p>
                        <div className="flex justify-end gap-3 mt-6">
                            <ButtonUI
                                variant="outline"
                                size="md"
                                onClick={() => {
                                    setShowDeleteModal(false);
                                    setStatusToDelete(null);
                                }}
                            >
                                Cancel
                            </ButtonUI>
                            <ButtonUI variant="secondary" size="md" onClick={handleConfirmDelete} isLoading={isDeleting} className="bg-red-600 hover:bg-red-700 text-white">
                                {isDeleting ? 'Deleting...' : 'Delete'}
                            </ButtonUI>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default AttendanceStatus;