import React, { useState } from 'react';
import { FileText, 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 DocumentType {
    id: string;
    name: string;
    description: string;
    status: 'Active' | 'Inactive';
    createdAt: string;
    updatedAt?: string;
}

// Create/Edit Modal Component - Moved outside and manages its own state
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 || '',
    });

    // Reset form when modal opens with new data
    useState(() => {
        if (isOpen) {
            setFormData({
                name: initialData?.name || '',
                description: initialData?.description || '',
            });
        }
    });

    // Update form when initialData changes
    React.useEffect(() => {
        if (initialData) {
            setFormData({
                name: initialData.name || '',
                description: initialData.description || '',
            });
        }
    }, [initialData]);

    if (!isOpen) return null;

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

    const handleSubmit = () => {
        if (!formData.name) {
            // You can add toast here if needed
            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="Document Type Name"
                            value={formData.name}
                            onChange={(value) => handleInputChange('name', value)}
                            placeholder="Enter document type name"
                            required
                            icon={<FileText className="w-4 h-4" />}
                        />
                        <CustomInput
                            label="Description"
                            type="textarea"
                            value={formData.description}
                            onChange={(value) => handleInputChange('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 DocumentType = () => {
    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 [selectedType, setSelectedType] = useState<DocumentType | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [typeToDelete, setTypeToDelete] = useState<DocumentType | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Mock data for document types
    const [documentTypes, setDocumentTypes] = useState<DocumentType[]>([
        {
            id: '1',
            name: 'Aadhaar Card',
            description: 'Government issued identity proof',
            status: 'Active',
            createdAt: '2024-01-15',
        },
        {
            id: '2',
            name: 'PAN Card',
            description: 'Permanent Account Number card',
            status: 'Active',
            createdAt: '2024-02-10',
        },
        {
            id: '3',
            name: 'Passport',
            description: 'International travel document',
            status: 'Active',
            createdAt: '2024-03-05',
        },
        {
            id: '4',
            name: 'Driving License',
            description: 'Government issued driving license',
            status: 'Inactive',
            createdAt: '2024-04-20',
        },
        {
            id: '5',
            name: 'Voter ID',
            description: 'Government issued voter identification',
            status: 'Active',
            createdAt: '2024-05-15',
        },
    ]);

    const handleAddType = () => {
        setSelectedType(null);
        setShowCreateModal(true);
    };

    const handleEditType = (type: DocumentType) => {
        setSelectedType(type);
        setShowEditModal(true);
    };

    const handleDeleteType = (type: DocumentType) => {
        setTypeToDelete(type);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!typeToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setDocumentTypes(documentTypes.filter((d) => d.id !== typeToDelete.id));
            setShowDeleteModal(false);
            setTypeToDelete(null);
            setIsDeleting(false);
            toast.success(`Document type "${typeToDelete.name}" deleted successfully!`);
        }, 1000);
    };

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

        if (selectedType) {
            // Edit existing
            setDocumentTypes(
                documentTypes.map((d) =>
                    d.id === selectedType.id
                        ? {
                              ...d,
                              name: formData.name,
                              description: formData.description,
                              updatedAt: new Date().toISOString().split('T')[0],
                          }
                        : d,
                ),
            );
            toast.success('Document type updated successfully!');
            setShowEditModal(false);
            setSelectedType(null);
        } else {
            // Add new
            const newType: DocumentType = {
                id: String(documentTypes.length + 1),
                name: formData.name,
                description: formData.description,
                status: 'Active',
                createdAt: new Date().toISOString().split('T')[0],
            };
            setDocumentTypes([...documentTypes, newType]);
            toast.success('Document type created successfully!');
            setShowCreateModal(false);
        }
    };

    const handleToggleStatus = (id: string) => {
        setDocumentTypes(documentTypes.map((d) => (d.id === id ? { ...d, status: d.status === 'Active' ? 'Inactive' : 'Active' } : d)));
        const type = documentTypes.find((d) => d.id === id);
        toast.info(`Document type "${type?.name}" status changed to ${type?.status === 'Active' ? 'Inactive' : 'Active'}`);
    };

    // Filter document types
    const filteredTypes = documentTypes.filter((type) => {
        const searchLower = searchTerm.toLowerCase();
        return type.name.toLowerCase().includes(searchLower) || type.description.toLowerCase().includes(searchLower);
    });

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

    // Define columns
    const columns: Column<DocumentType>[] = [
        {
            key: 'sno',
            header: 'S.No',
            align: 'center',
            accessor: (_row: DocumentType, 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: 'DOCUMENT TYPE',
            accessor: (row: DocumentType) => (
                <div>
                    <div className="flex items-center gap-2">
                        <FileText 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: DocumentType) => <div className="text-sm text-gray-700">{row.description || '—'}</div>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row: DocumentType) => <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: DocumentType) => (
                <ActionButtons
                    onEdit={() => handleEditType(row)}
                    onDelete={() => handleDeleteType(row)}
                    showView={false}
                    editTooltip="Edit Document Type"
                    deleteTooltip="Delete Document Type"
                    size="sm"
                />
            ),
        },
    ];

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

            <div className="p-6">
                {/* Header */}
                <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">Document Types</h2>
                        <p className="text-sm text-gray-500 mt-1">Manage document types for HRM</p>
                    </div>
                    <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={handleAddType}>
                        Add Document Type
                    </ButtonUI>
                </div>

                {/* Stats Cards */}
                <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 Types</p>
                                <p className="text-2xl font-bold text-primary">{documentTypes.length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <FileText 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">{documentTypes.filter((d) => d.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">{documentTypes.filter((d) => d.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>

                {/* Filters */}
                <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 document types..."
                                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 */}
                <Table data={currentTypes} columns={columns} emptyMessage="No document types found" />

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

            {/* Create Modal */}
            <Modal
                isOpen={showCreateModal}
                onClose={() => {
                    setShowCreateModal(false);
                    setSelectedType(null);
                }}
                onSave={handleSaveType}
                title="Add Document Type"
                initialData={null}
            />

            {/* Edit Modal */}
            <Modal
                isOpen={showEditModal}
                onClose={() => {
                    setShowEditModal(false);
                    setSelectedType(null);
                }}
                onSave={handleSaveType}
                title="Edit Document Type"
                initialData={
                    selectedType
                        ? {
                              name: selectedType.name,
                              description: selectedType.description,
                          }
                        : null
                }
            />

            {/* Delete Confirmation Modal */}
            {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 Document Type</h3>
                        <p className="text-sm text-gray-600">Are you sure you want to delete "{typeToDelete?.name}"? This action cannot be undone.</p>
                        <div className="flex justify-end gap-3 mt-6">
                            <ButtonUI
                                variant="outline"
                                size="md"
                                onClick={() => {
                                    setShowDeleteModal(false);
                                    setTypeToDelete(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 DocumentType;