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

// Create/Edit Modal Component - 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 || '',
    });

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

    // Reset form when modal opens
    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) {
            // Toast will be shown from parent
            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="Skill Level Name"
                            value={formData.name}
                            onChange={(value) => handleInputChange('name', value)}
                            placeholder="Enter skill level name"
                            required
                            icon={<TrendingUp 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 SkillLevel = () => {
    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 [selectedLevel, setSelectedLevel] = useState<SkillLevel | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [levelToDelete, setLevelToDelete] = useState<SkillLevel | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Mock data for skill levels
    const [skillLevels, setSkillLevels] = useState<SkillLevel[]>([
        {
            id: '1',
            name: 'Beginner',
            description: 'Entry level - Basic understanding of concepts',
            status: 'Active',
            createdAt: '2024-01-15',
        },
        {
            id: '2',
            name: 'Intermediate',
            description: 'Mid level - Good understanding with practical experience',
            status: 'Active',
            createdAt: '2024-02-10',
        },
        {
            id: '3',
            name: 'Advanced',
            description: 'Senior level - Deep understanding and extensive experience',
            status: 'Active',
            createdAt: '2024-03-05',
        },
        {
            id: '4',
            name: 'Expert',
            description: 'Specialist level - Mastery of concepts and industry recognition',
            status: 'Active',
            createdAt: '2024-04-20',
        },
        {
            id: '5',
            name: 'Master',
            description: 'Highest level - Thought leader and industry influencer',
            status: 'Inactive',
            createdAt: '2024-05-15',
        },
    ]);

    const handleAddLevel = () => {
        setSelectedLevel(null);
        setShowCreateModal(true);
    };

    const handleEditLevel = (level: SkillLevel) => {
        setSelectedLevel(level);
        setShowEditModal(true);
    };

    const handleDeleteLevel = (level: SkillLevel) => {
        setLevelToDelete(level);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!levelToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setSkillLevels(skillLevels.filter((l) => l.id !== levelToDelete.id));
            setShowDeleteModal(false);
            setLevelToDelete(null);
            setIsDeleting(false);
            toast.success(`Skill level "${levelToDelete.name}" deleted successfully!`);
        }, 1000);
    };

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

        if (selectedLevel) {
            // Edit existing
            setSkillLevels(
                skillLevels.map((l) =>
                    l.id === selectedLevel.id
                        ? {
                              ...l,
                              name: formData.name,
                              description: formData.description,
                              updatedAt: new Date().toISOString().split('T')[0],
                          }
                        : l,
                ),
            );
            toast.success('Skill level updated successfully!');
            setShowEditModal(false);
            setSelectedLevel(null);
        } else {
            // Add new
            const newLevel: SkillLevel = {
                id: String(skillLevels.length + 1),
                name: formData.name,
                description: formData.description,
                status: 'Active',
                createdAt: new Date().toISOString().split('T')[0],
            };
            setSkillLevels([...skillLevels, newLevel]);
            toast.success('Skill level created successfully!');
            setShowCreateModal(false);
        }
    };

    const handleToggleStatus = (id: string) => {
        setSkillLevels(skillLevels.map((l) => (l.id === id ? { ...l, status: l.status === 'Active' ? 'Inactive' : 'Active' } : l)));
        const level = skillLevels.find((l) => l.id === id);
        toast.info(`Skill level "${level?.name}" status changed to ${level?.status === 'Active' ? 'Inactive' : 'Active'}`);
    };

    // Filter skill levels
    const filteredLevels = skillLevels.filter((level) => {
        const searchLower = searchTerm.toLowerCase();
        return level.name.toLowerCase().includes(searchLower) || level.description.toLowerCase().includes(searchLower);
    });

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

    // Define columns
    const columns: Column<SkillLevel>[] = [
        {
            key: 'sno',
            header: 'S.No',
            align: 'center',
            accessor: (_row: SkillLevel, 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: 'SKILL LEVEL',
            accessor: (row: SkillLevel) => (
                <div>
                    <div className="flex items-center gap-2">
                        <TrendingUp 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: SkillLevel) => <div className="text-sm text-gray-700">{row.description || '—'}</div>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row: SkillLevel) => <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: SkillLevel) => (
                <ActionButtons
                    onEdit={() => handleEditLevel(row)}
                    onDelete={() => handleDeleteLevel(row)}
                    showView={false}
                    editTooltip="Edit Skill Level"
                    deleteTooltip="Delete Skill Level"
                    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">Skill Levels</h2>
                        <p className="text-sm text-gray-500 mt-1">Manage skill levels for HRM</p>
                    </div>
                    <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={handleAddLevel}>
                        Add Skill Level
                    </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 Levels</p>
                                <p className="text-2xl font-bold text-primary">{skillLevels.length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <TrendingUp 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">{skillLevels.filter((l) => l.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">{skillLevels.filter((l) => l.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 skill levels..."
                                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={currentLevels} columns={columns} emptyMessage="No skill levels found" />

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

            {/* Create Modal */}
            <Modal
                isOpen={showCreateModal}
                onClose={() => {
                    setShowCreateModal(false);
                    setSelectedLevel(null);
                }}
                onSave={handleSaveLevel}
                title="Add Skill Level"
                initialData={null}
            />

            {/* Edit Modal */}
            <Modal
                isOpen={showEditModal}
                onClose={() => {
                    setShowEditModal(false);
                    setSelectedLevel(null);
                }}
                onSave={handleSaveLevel}
                title="Edit Skill Level"
                initialData={
                    selectedLevel
                        ? {
                              name: selectedLevel.name,
                              description: selectedLevel.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 Skill Level</h3>
                        <p className="text-sm text-gray-600">Are you sure you want to delete "{levelToDelete?.name}"? This action cannot be undone.</p>
                        <div className="flex justify-end gap-3 mt-6">
                            <ButtonUI
                                variant="outline"
                                size="md"
                                onClick={() => {
                                    setShowDeleteModal(false);
                                    setLevelToDelete(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 SkillLevel;