import { useState, useEffect } from 'react';
import { Tag, Plus, Search, Edit, Trash2, CheckCircle, XCircle, TrendingUp, 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';
import CustomSelect from '../../UI/CustomSelect';

interface SkillTag {
    id: string;
    name: string;
    skillLevel: 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; skillLevel: string; description: string }) => void;
    title: string;
    initialData?: { name: string; skillLevel: string; description: string } | null;
    skillLevelOptions: string[];
}

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

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

    // Reset form when modal opens
    useEffect(() => {
        if (isOpen && !initialData) {
            setFormData({
                name: '',
                skillLevel: '',
                description: '',
            });
        }
    }, [isOpen, initialData]);

    if (!isOpen) return null;

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

    const handleSubmit = () => {
        if (!formData.name || !formData.skillLevel) {
            // 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-lg">
                    <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="Knowledge Tag Name"
                            value={formData.name}
                            onChange={(value) => handleInputChange('name', value)}
                            placeholder="Enter Knowledge Tag Name"
                            required
                            icon={<Tag className="w-4 h-4" />}
                        />
                        <CustomSelect
                            label="Knowledge Level"
                            value={formData.skillLevel}
                            onChange={(value) => handleInputChange('skillLevel', value)}
                            options={skillLevelOptions}
                            placeholder="Select Knowledge Level"
                            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 Knowledge Tag' : 'Create Knowledge Tag'}
                        </ButtonUI>
                    </div>
                </div>
            </div>
        </>
    );
};

const SkillTag = () => {
    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 [selectedTag, setSelectedTag] = useState<SkillTag | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [tagToDelete, setTagToDelete] = useState<SkillTag | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Mock data for skill levels
    const skillLevelOptions = ['Beginner', 'Intermediate', 'Advanced', 'Expert', 'Master'];

    // Mock data for skill tags
    const [skillTags, setSkillTags] = useState<SkillTag[]>([
        {
            id: '1',
            name: 'JavaScript',
            skillLevel: 'Advanced',
            description: 'Advanced JavaScript programming skills',
            status: 'Active',
            createdAt: '2024-01-15',
        },
        {
            id: '2',
            name: 'Python',
            skillLevel: 'Intermediate',
            description: 'Python programming language',
            status: 'Active',
            createdAt: '2024-02-10',
        },
        {
            id: '3',
            name: 'React',
            skillLevel: 'Expert',
            description: 'React.js frontend framework',
            status: 'Active',
            createdAt: '2024-03-05',
        },
        {
            id: '4',
            name: 'Node.js',
            skillLevel: 'Intermediate',
            description: 'Node.js backend development',
            status: 'Inactive',
            createdAt: '2024-04-20',
        },
        {
            id: '5',
            name: 'SQL',
            skillLevel: 'Beginner',
            description: 'SQL database management',
            status: 'Active',
            createdAt: '2024-05-15',
        },
    ]);

    const handleAddTag = () => {
        setSelectedTag(null);
        setShowCreateModal(true);
    };

    const handleEditTag = (tag: SkillTag) => {
        setSelectedTag(tag);
        setShowEditModal(true);
    };

    const handleDeleteTag = (tag: SkillTag) => {
        setTagToDelete(tag);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!tagToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setSkillTags(skillTags.filter((t) => t.id !== tagToDelete.id));
            setShowDeleteModal(false);
            setTagToDelete(null);
            setIsDeleting(false);
            toast.success(`Skill tag "${tagToDelete.name}" deleted successfully!`);
        }, 1000);
    };

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

        if (selectedTag) {
            // Edit existing
            setSkillTags(
                skillTags.map((t) =>
                    t.id === selectedTag.id
                        ? {
                              ...t,
                              name: formData.name,
                              skillLevel: formData.skillLevel,
                              description: formData.description,
                              updatedAt: new Date().toISOString().split('T')[0],
                          }
                        : t,
                ),
            );
            toast.success('Skill tag updated successfully!');
            setShowEditModal(false);
            setSelectedTag(null);
        } else {
            // Add new
            const newTag: SkillTag = {
                id: String(skillTags.length + 1),
                name: formData.name,
                skillLevel: formData.skillLevel,
                description: formData.description,
                status: 'Active',
                createdAt: new Date().toISOString().split('T')[0],
            };
            setSkillTags([...skillTags, newTag]);
            toast.success('Skill tag created successfully!');
            setShowCreateModal(false);
        }
    };

    const handleToggleStatus = (id: string) => {
        setSkillTags(skillTags.map((t) => (t.id === id ? { ...t, status: t.status === 'Active' ? 'Inactive' : 'Active' } : t)));
        const tag = skillTags.find((t) => t.id === id);
        toast.info(`Skill tag "${tag?.name}" status changed to ${tag?.status === 'Active' ? 'Inactive' : 'Active'}`);
    };

    // Filter skill tags
    const filteredTags = skillTags.filter((tag) => {
        const searchLower = searchTerm.toLowerCase();
        return tag.name.toLowerCase().includes(searchLower) || tag.skillLevel.toLowerCase().includes(searchLower) || tag.description.toLowerCase().includes(searchLower);
    });

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

    // Define columns
    const columns: Column<SkillTag>[] = [
        {
            key: 'sno',
            header: 'S.No',
            align: 'center',
            accessor: (_row: SkillTag, 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 TAG',
            accessor: (row: SkillTag) => (
                <div>
                    <div className="flex items-center gap-2">
                        <Tag className="w-4 h-4 text-primary" />
                        <span className="text-sm font-medium text-gray-900">{row.name}</span>
                    </div>
                </div>
            ),
        },
        {
            key: 'skillLevel',
            header: 'SKILL LEVEL',
            accessor: (row: SkillTag) => (
                <span
                    className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
                    ${
                        row.skillLevel === 'Beginner'
                            ? 'bg-green-50 text-green-600 border border-green-200'
                            : row.skillLevel === 'Intermediate'
                              ? 'bg-blue-50 text-blue-600 border border-blue-200'
                              : row.skillLevel === 'Advanced'
                                ? 'bg-purple-50 text-purple-600 border border-purple-200'
                                : row.skillLevel === 'Expert'
                                  ? 'bg-orange-50 text-orange-600 border border-orange-200'
                                  : 'bg-red-50 text-red-600 border border-red-200'
                    }`}
                >
                    <TrendingUp className="w-3 h-3 mr-1" />
                    {row.skillLevel}
                </span>
            ),
        },
        {
            key: 'description',
            header: 'DESCRIPTION',
            accessor: (row: SkillTag) => <div className="text-sm text-gray-700">{row.description || '—'}</div>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row: SkillTag) => <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: SkillTag) => (
                <ActionButtons onEdit={() => handleEditTag(row)} onDelete={() => handleDeleteTag(row)} showView={false} editTooltip="Edit Skill Tag" deleteTooltip="Delete Skill Tag" 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 Tags</h2>
                        <p className="text-sm text-gray-500 mt-1">Manage knowledge tags and skill levels</p>
                    </div>
                    <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={handleAddTag}>
                        Add Skill Tag
                    </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 Tags</p>
                                <p className="text-2xl font-bold text-primary">{skillTags.length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <Tag 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">{skillTags.filter((t) => t.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">{skillTags.filter((t) => t.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 tags..."
                                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={currentTags} columns={columns} emptyMessage="No skill tags found" />

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

            {/* Create Modal */}
            <Modal
                isOpen={showCreateModal}
                onClose={() => {
                    setShowCreateModal(false);
                    setSelectedTag(null);
                }}
                onSave={handleSaveTag}
                title="Create Knowledge Tag"
                initialData={null}
                skillLevelOptions={skillLevelOptions}
            />

            {/* Edit Modal */}
            <Modal
                isOpen={showEditModal}
                onClose={() => {
                    setShowEditModal(false);
                    setSelectedTag(null);
                }}
                onSave={handleSaveTag}
                title="Edit Knowledge Tag"
                initialData={
                    selectedTag
                        ? {
                              name: selectedTag.name,
                              skillLevel: selectedTag.skillLevel,
                              description: selectedTag.description,
                          }
                        : null
                }
                skillLevelOptions={skillLevelOptions}
            />

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