import React, { useState, useEffect } from 'react';

interface CustomPath {
    ge_id: string;
    lang: string;
    custom_path: string;
    created_at?: string;
    updated_at?: string;
}

interface CustomPathManagerModalProps {
    isOpen: boolean;
    onClose: () => void;
    onPathUpdated?: () => void; // Callback khi có thay đổi
}

const CustomPathManagerModal: React.FC<CustomPathManagerModalProps> = ({ isOpen, onClose, onPathUpdated }) => {
    const [searchTerm, setSearchTerm] = useState('');
    const [allPaths, setAllPaths] = useState<CustomPath[]>([]);
    const [filteredPaths, setFilteredPaths] = useState<CustomPath[]>([]);
    const [visibleCount, setVisibleCount] = useState(10);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [editingPath, setEditingPath] = useState<CustomPath | null>(null);
    const [editForm, setEditForm] = useState({ ge_id: '', lang: '', custom_path: '' });
    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
    const [deleteTarget, setDeleteTarget] = useState<string | null>(null);

    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden';
            loadPaths();
        } else {
            document.body.style.overflow = 'auto';
        }
        return () => {
            document.body.style.overflow = 'auto';
        };
    }, [isOpen]);

    useEffect(() => {
        // Filter paths when search term changes
        if (searchTerm.trim() === '') {
            setFilteredPaths(allPaths.slice(0, visibleCount));
        } else {
            const filtered = allPaths
                .filter(path =>
                    path.ge_id.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    path.lang.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    path.custom_path.toLowerCase().includes(searchTerm.toLowerCase())
                )
                .slice(0, visibleCount);
            setFilteredPaths(filtered);
        }
    }, [searchTerm, allPaths, visibleCount]);

    const loadPaths = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const response = await fetch('/api/custom-paths');
            const data = await response.json();
            if (data.success && Array.isArray(data.custom_paths)) {
                setAllPaths(data.custom_paths);
                setFilteredPaths(data.custom_paths.slice(0, 10));
            } else {
                setError('Không thể tải danh sách custom paths');
            }
        } catch (err) {
            console.error('Error loading custom paths:', err);
            setError('Lỗi khi tải danh sách custom paths');
        } finally {
            setIsLoading(false);
        }
    };

    if (!isOpen) {
        return null;
    }

    const handleSearch = () => {
        setVisibleCount(10);
        const filtered = allPaths
            .filter(path =>
                path.ge_id.toLowerCase().includes(searchTerm.toLowerCase()) ||
                path.lang.toLowerCase().includes(searchTerm.toLowerCase()) ||
                path.custom_path.toLowerCase().includes(searchTerm.toLowerCase())
            )
            .slice(0, 10);
        setFilteredPaths(filtered);
    };

    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleSearch();
        }
    };

    const handleLoadMore = () => {
        const newCount = visibleCount + 10;
        setVisibleCount(newCount);

        if (searchTerm.trim() === '') {
            setFilteredPaths(allPaths.slice(0, newCount));
        } else {
            const filtered = allPaths
                .filter(path =>
                    path.ge_id.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    path.lang.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    path.custom_path.toLowerCase().includes(searchTerm.toLowerCase())
                )
                .slice(0, newCount);
            setFilteredPaths(filtered);
        }
    };

    const handleEdit = (path: CustomPath) => {
        setEditingPath(path);
        setEditForm({
            ge_id: path.ge_id,
            lang: path.lang,
            custom_path: path.custom_path
        });
    };

    const handleCancelEdit = () => {
        setEditingPath(null);
        setEditForm({ ge_id: '', lang: '', custom_path: '' });
    };

    const handleSaveEdit = async () => {
        if (!editForm.ge_id || !editForm.lang || !editForm.custom_path) {
            setError('Vui lòng điền đầy đủ thông tin');
            return;
        }

        setIsLoading(true);
        setError(null);
        try {
            // Delete old record if ge_id changed
            if (editingPath && editingPath.ge_id !== editForm.ge_id) {
                await fetch(`/api/custom-paths/${editingPath.ge_id}`, {
                    method: 'DELETE'
                });
            }

            // Create/update new record
            const response = await fetch('/api/custom-paths', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(editForm)
            });

            const data = await response.json();
            if (data.success) {
                await loadPaths();
                handleCancelEdit();
                if (onPathUpdated) onPathUpdated();
            } else {
                setError(data.message || 'Không thể lưu custom path');
            }
        } catch (err) {
            console.error('Error saving custom path:', err);
            setError('Lỗi khi lưu custom path');
        } finally {
            setIsLoading(false);
        }
    };

    const handleDeleteClick = (geId: string) => {
        setDeleteTarget(geId);
        setShowDeleteConfirm(true);
    };

    const handleConfirmDelete = async () => {
        if (!deleteTarget) return;

        setIsLoading(true);
        setError(null);
        try {
            const response = await fetch(`/api/custom-paths/${deleteTarget}`, {
                method: 'DELETE'
            });

            const data = await response.json();
            if (data.success) {
                await loadPaths();
                setShowDeleteConfirm(false);
                setDeleteTarget(null);
                if (onPathUpdated) onPathUpdated();
            } else {
                setError(data.message || 'Không thể xóa custom path');
            }
        } catch (err) {
            console.error('Error deleting custom path:', err);
            setError('Lỗi khi xóa custom path');
        } finally {
            setIsLoading(false);
        }
    };

    const handleCancelDelete = () => {
        setShowDeleteConfirm(false);
        setDeleteTarget(null);
    };

    return (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4">
            <div className="bg-slate-800 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col border border-slate-700">
                {/* Header */}
                <div className="flex justify-between items-center p-6 border-b border-slate-700">
                    <h2 className="text-2xl font-bold text-white">Quản lý Custom Paths</h2>
                    <button
                        onClick={onClose}
                        className="text-slate-400 hover:text-white transition-colors p-2 hover:bg-slate-700 rounded-lg"
                    >
                        <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
                            <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
                        </svg>
                    </button>
                </div>

                {/* Search Bar */}
                <div className="p-6 border-b border-slate-700">
                    <div className="flex gap-3">
                        <input
                            type="text"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            onKeyDown={handleInputKeyDown}
                            placeholder="Tìm kiếm GE ID, Lang, hoặc Path..."
                            className="flex-1 bg-slate-900/50 border border-slate-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 px-4 py-2.5"
                        />
                        <button
                            onClick={handleSearch}
                            className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors"
                        >
                            Tìm kiếm
                        </button>
                    </div>
                </div>

                {/* Error Message */}
                {error && (
                    <div className="mx-6 mt-4 p-4 bg-red-900/20 border border-red-500/50 rounded-lg">
                        <p className="text-red-400 text-sm">{error}</p>
                    </div>
                )}

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-6">
                    {isLoading && filteredPaths.length === 0 ? (
                        <div className="flex justify-center items-center py-12">
                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
                        </div>
                    ) : filteredPaths.length === 0 ? (
                        <div className="text-center py-12">
                            <p className="text-slate-400">Không tìm thấy custom path nào</p>
                        </div>
                    ) : (
                        <div className="space-y-3">
                            {filteredPaths.map((path) => (
                                <div
                                    key={path.ge_id}
                                    className="bg-slate-900/50 border border-slate-700 rounded-lg p-4 hover:border-slate-600 transition-colors"
                                >
                                    {editingPath?.ge_id === path.ge_id ? (
                                        /* Edit Mode */
                                        <div className="space-y-3">
                                            <div className="grid grid-cols-3 gap-3">
                                                <input
                                                    type="text"
                                                    value={editForm.ge_id}
                                                    onChange={(e) => setEditForm({ ...editForm, ge_id: e.target.value })}
                                                    placeholder="GE ID"
                                                    className="bg-slate-800 border border-slate-600 text-white text-sm rounded-lg px-3 py-2"
                                                />
                                                <input
                                                    type="text"
                                                    value={editForm.lang}
                                                    onChange={(e) => setEditForm({ ...editForm, lang: e.target.value.toUpperCase() })}
                                                    placeholder="Lang"
                                                    className="bg-slate-800 border border-slate-600 text-white text-sm rounded-lg px-3 py-2"
                                                />
                                                <input
                                                    type="text"
                                                    value={editForm.custom_path}
                                                    onChange={(e) => setEditForm({ ...editForm, custom_path: e.target.value })}
                                                    placeholder="Custom Path"
                                                    className="bg-slate-800 border border-slate-600 text-white text-sm rounded-lg px-3 py-2"
                                                />
                                            </div>
                                            <div className="flex gap-2">
                                                <button
                                                    onClick={handleSaveEdit}
                                                    disabled={isLoading}
                                                    className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg disabled:opacity-50"
                                                >
                                                    Lưu
                                                </button>
                                                <button
                                                    onClick={handleCancelEdit}
                                                    className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded-lg"
                                                >
                                                    Hủy
                                                </button>
                                            </div>
                                        </div>
                                    ) : (
                                        /* View Mode */
                                        <div className="flex items-center justify-between">
                                            <div className="flex-1 space-y-1">
                                                <div className="flex items-center gap-3">
                                                    <span className="text-white font-semibold">{path.ge_id}</span>
                                                    <span className="px-2 py-0.5 bg-indigo-600/20 text-indigo-300 text-xs rounded">
                                                        {path.lang}
                                                    </span>
                                                </div>
                                                <p className="text-slate-300 text-sm font-mono">{path.custom_path}</p>
                                            </div>
                                            <div className="flex gap-2">
                                                <button
                                                    onClick={() => handleEdit(path)}
                                                    className="p-2 text-indigo-400 hover:text-indigo-300 hover:bg-slate-800 rounded-lg transition-colors"
                                                    title="Sửa"
                                                >
                                                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                                                        <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z" />
                                                        <path d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z" />
                                                    </svg>
                                                </button>
                                                <button
                                                    onClick={() => handleDeleteClick(path.ge_id)}
                                                    className="p-2 text-red-400 hover:text-red-300 hover:bg-slate-800 rounded-lg transition-colors"
                                                    title="Xóa"
                                                >
                                                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                                                        <path fillRule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clipRule="evenodd" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    )}

                    {/* Load More Button */}
                    {filteredPaths.length < allPaths.length && (
                        <div className="mt-6 text-center">
                            <button
                                onClick={handleLoadMore}
                                className="px-6 py-2.5 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg transition-colors"
                            >
                                Tải thêm
                            </button>
                        </div>
                    )}
                </div>

                {/* Footer Info */}
                <div className="p-4 border-t border-slate-700 bg-slate-900/50">
                    <p className="text-slate-400 text-sm text-center">
                        Tổng số: <span className="text-white font-semibold">{allPaths.length}</span> custom paths
                    </p>
                </div>
            </div>

            {/* Delete Confirmation Modal */}
            {showDeleteConfirm && (
                <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-[60]">
                    <div className="bg-slate-800 rounded-xl shadow-2xl p-6 max-w-md w-full mx-4 border border-slate-700">
                        <h3 className="text-xl font-bold text-white mb-4">Xác nhận xóa</h3>
                        <p className="text-slate-300 mb-6">
                            Bạn có chắc chắn muốn xóa custom path cho <span className="text-white font-semibold">{deleteTarget}</span>?
                        </p>
                        <div className="flex gap-3">
                            <button
                                onClick={handleConfirmDelete}
                                disabled={isLoading}
                                className="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg disabled:opacity-50"
                            >
                                Xóa
                            </button>
                            <button
                                onClick={handleCancelDelete}
                                className="flex-1 px-4 py-2.5 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg"
                            >
                                Hủy
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default CustomPathManagerModal;