// static/js/admin.Tests.jsx

function AdminTests({ token }) {
    const [tests, setTests] = useState([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [selectedTestId, setSelectedTestId] = useState(null);
    const [isEditing, setIsEditing] = useState(false);

    // Для модалки с примером JSON
    const [showJsonExample, setShowJsonExample] = useState(false);
    const [exampleJson, setExampleJson] = useState("");

    const makeDefaultTest = () => ({
        title: "",
        description: "",
        start_date: new Date().toISOString(),
        end_date: new Date(Date.now() + 86400000 * 30).toISOString(),
        time_limit_minutes: 30,
        attempts_allowed: 1,
        passing_score_percent: 80,
        shuffle_questions: true,
        is_active: true,
    });

    const makeEmptyQuestion = (id) => ({
        id,
        text: "",
        q_type: "single", // single, multi
        score: 1,
        options: [
            { id: 1, text: "", is_correct: true },
            { id: 2, text: "", is_correct: false },
        ],
    });

    const [test, setTest] = useState(makeDefaultTest());
    const [questions, setQuestions] = useState([makeEmptyQuestion(1)]);

    const loadTests = async () => {
        setLoading(true);
        try {
            const data = await API.adminGetTests(token);
            setTests(data);
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка загрузки списка тестов");
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        loadTests();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const resetForm = () => {
        setTest(makeDefaultTest());
        setQuestions([makeEmptyQuestion(1)]);
        setSelectedTestId(null);
        setIsEditing(false);
    };

    const addQuestion = () => {
        setQuestions(prev => {
            const nextId = prev.length > 0 ? Math.max(...prev.map(q => q.id)) + 1 : 1;
            return [...prev, makeEmptyQuestion(nextId)];
        });
    };

    const removeQuestion = (id) => {
        setQuestions(prev => prev.filter(q => q.id !== id));
    };

    const moveQuestionUp = (id) => {
        setQuestions(prev => {
            const idx = prev.findIndex(q => q.id === id);
            if (idx <= 0) return prev;
            const copy = [...prev];
            const tmp = copy[idx - 1];
            copy[idx - 1] = copy[idx];
            copy[idx] = tmp;
            return copy;
        });
    };

    const moveQuestionDown = (id) => {
        setQuestions(prev => {
            const idx = prev.findIndex(q => q.id === id);
            if (idx === -1 || idx === prev.length - 1) return prev;
            const copy = [...prev];
            const tmp = copy[idx + 1];
            copy[idx + 1] = copy[idx];
            copy[idx] = tmp;
            return copy;
        });
    };

    const updateQuestionField = (id, field, value) => {
        setQuestions(prev =>
            prev.map(q => q.id === id ? { ...q, [field]: value } : q)
        );
    };

    const addOption = (questionId) => {
        setQuestions(prev =>
            prev.map(q => {
                if (q.id !== questionId) return q;
                const nextOptId = q.options.length > 0 ? Math.max(...q.options.map(o => o.id)) + 1 : 1;
                return {
                    ...q,
                    options: [...q.options, { id: nextOptId, text: "", is_correct: false }]
                };
            })
        );
    };

    const removeOption = (questionId, optId) => {
        setQuestions(prev =>
            prev.map(q => {
                if (q.id !== questionId) return q;
                return {
                    ...q,
                    options: q.options.filter(o => o.id !== optId)
                };
            })
        );
    };

    const updateOptionField = (questionId, optId, field, value) => {
        setQuestions(prev =>
            prev.map(q => {
                if (q.id !== questionId) return q;
                return {
                    ...q,
                    options: q.options.map(o => o.id === optId ? { ...o, [field]: value } : o)
                };
            })
        );
    };

    const setCorrectSingle = (questionId, optId) => {
        setQuestions(prev =>
            prev.map(q => {
                if (q.id !== questionId) return q;
                return {
                    ...q,
                    options: q.options.map(o => ({
                        ...o,
                        is_correct: o.id === optId
                    }))
                };
            })
        );
    };

    const toggleCorrectMulti = (questionId, optId) => {
        setQuestions(prev =>
            prev.map(q => {
                if (q.id !== questionId) return q;
                return {
                    ...q,
                    options: q.options.map(o => o.id === optId ? { ...o, is_correct: !o.is_correct } : o)
                };
            })
        );
    };

    // Загрузка теста в форму для редактирования
    const loadTestForEdit = async (id) => {
        try {
            const data = await API.adminGetTestById(token, id);
            setSelectedTestId(id);
            setIsEditing(true);
            setTest({
                title: data.title,
                description: data.description,
                start_date: data.start_date,
                end_date: data.end_date,
                time_limit_minutes: data.time_limit_minutes,
                attempts_allowed: data.attempts_allowed,
                passing_score_percent: data.passing_score_percent,
                shuffle_questions: data.shuffle_questions,
                is_active: data.is_active,
            });
            const mappedQuestions = (data.questions || []).map((q, idx) => ({
                id: idx + 1,
                text: q.text,
                q_type: q.q_type,
                score: q.score,
                options: (q.options || []).map((o, oIdx) => ({
                    id: oIdx + 1,
                    text: o.text,
                    is_correct: o.is_correct,
                }))
            }));
            setQuestions(mappedQuestions.length ? mappedQuestions : [makeEmptyQuestion(1)]);
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка загрузки теста");
        }
    };

    const deleteTest = async (id) => {
        if (!confirm("Удалить этот тест со всеми вопросами и результатами?")) return;

        try {
            await API.adminDeleteTest(token, id);
            if (selectedTestId === id) {
                resetForm();
            }
            await loadTests();
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка удаления теста");
        }
    };

    // Переключение активности теста
    const toggleActive = async (t) => {
        try {
            await API.adminUpdateTestStatus(token, t.id, !t.is_active);
            await loadTests();
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка обновления статуса теста");
        }
    };

    const saveTest = async () => {
        if (!test.title.trim()) {
            alert("Введите название теста");
            return;
        }
        if (questions.length === 0) {
            alert("Добавьте хотя бы один вопрос");
            return;
        }

        const payload = {
            ...test,
            questions: questions.map((q) => ({
                text: q.text,
                q_type: q.q_type,
                score: Number(q.score) || 1,
                options:
                    (q.q_type === "single" || q.q_type === "multi")
                        ? q.options.map(o => ({
                            text: o.text,
                            is_correct: !!o.is_correct
                        }))
                        : []
            }))
        };

        setSaving(true);

        try {
            if (selectedTestId) {
                await API.adminUpdateTest(token, selectedTestId, payload);
                alert("Тест обновлён");
            } else {
                await API.adminCreateTest(token, payload);
                alert("Тест сохранён");
            }
            resetForm();
            await loadTests();
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка сохранения теста");
        } finally {
            setSaving(false);
        }
    };

    // ---------- Импорт JSON и подсказка-пример ----------

    // убираем все поля-Комментарии (ключи, начинающиеся с "_")
    const stripComments = (obj) => {
        if (Array.isArray(obj)) {
            return obj.map(stripComments);
        }
        if (obj && typeof obj === "object") {
            const res = {};
            Object.entries(obj).forEach(([key, value]) => {
                if (key.startsWith("_")) return;
                res[key] = stripComments(value);
            });
            return res;
        }
        return obj;
    };

    const applyImportedTest = (data) => {
        if (!data || typeof data !== "object") {
            alert("Неверная структура JSON");
            return;
        }

        setTest(prev => ({
            ...prev,
            title: data.title || "",
            description: data.description || "",
            start_date: data.start_date || prev.start_date,
            end_date: data.end_date || prev.end_date,
            time_limit_minutes: typeof data.time_limit_minutes === "number"
                ? data.time_limit_minutes
                : prev.time_limit_minutes,
            attempts_allowed: typeof data.attempts_allowed === "number"
                ? data.attempts_allowed
                : prev.attempts_allowed,
            passing_score_percent: typeof data.passing_score_percent === "number"
                ? data.passing_score_percent
                : prev.passing_score_percent,
            shuffle_questions: typeof data.shuffle_questions === "boolean"
                ? data.shuffle_questions
                : prev.shuffle_questions,
            is_active: typeof data.is_active === "boolean"
                ? data.is_active
                : prev.is_active,
        }));

        const importedQuestions = Array.isArray(data.questions) ? data.questions : [];
        const mappedQuestions = importedQuestions.map((q, idx) => ({
            id: idx + 1,
            text: q.text || "",
            q_type: q.q_type || "single",
            score: typeof q.score === "number" ? q.score : 1,
            options: (Array.isArray(q.options) ? q.options : []).map((o, oIdx) => ({
                id: oIdx + 1,
                text: o.text || "",
                is_correct: !!o.is_correct,
            })),
        }));

        if (mappedQuestions.length === 0) {
            alert("В JSON не найдено ни одного вопроса. Будет создан один пустой вопрос.");
            setQuestions([makeEmptyQuestion(1)]);
        } else {
            setQuestions(mappedQuestions);
        }

        setSelectedTestId(null);
        setIsEditing(false);
    };

    const handleJsonFileChange = (e) => {
        const file = e.target.files && e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (ev) => {
            try {
                const text = ev.target.result;
                const raw = JSON.parse(text);
                const clean = stripComments(raw);
                applyImportedTest(clean);
                alert("JSON загружен. Проверьте данные и нажмите «Сохранить тест».");
            } catch (err) {
                console.error(err);
                alert("Ошибка чтения JSON: " + err.message);
            } finally {
                e.target.value = "";
            }
        };
        reader.readAsText(file, "utf-8");
    };

    const openJsonExample = () => {
        if (exampleJson) {
            setShowJsonExample(true);
            return;
        }
        fetch("sample_test.json")
            .then(res => res.text())
            .then(text => {
                setExampleJson(text);
                setShowJsonExample(true);
            })
            .catch(err => {
                console.error(err);
                setExampleJson("// Не удалось загрузить sample_test.json. Проверьте, что файл лежит рядом с index.html.");
                setShowJsonExample(true);
            });
    };

    const copyExampleJson = () => {
        if (!exampleJson) return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(exampleJson)
                .then(() => alert("JSON-шаблон скопирован в буфер обмена"))
                .catch(() => alert("Не удалось скопировать автоматически. Скопируйте текст вручную."));
        } else {
            alert("Браузер не поддерживает автоматическое копирование. Скопируйте текст вручную.");
        }
    };

    return (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Список тестов слева */}
            <div className="lg:col-span-1">
                <div className="bg-white p-4 rounded shadow h-full">
                    <div className="flex justify-between items-center mb-4">
                        <h3 className="font-bold">Список тестов</h3>
                        <button
                            className="text-xs text-blue-600"
                            onClick={resetForm}
                        >
                            + Новый тест
                        </button>
                    </div>
                    {loading ? (
                        <div>Загрузка...</div>
                    ) : tests.length === 0 ? (
                        <div className="text-gray-500 text-sm">Тестов пока нет</div>
                    ) : (
                        <ul className="space-y-2">
                            {tests.map(t => (
                                <li key={t.id} className="border rounded p-2 flex flex-col">
                                    <div className="flex justify-between items-center">
                                        <button
                                            className="font-semibold text-left hover:underline"
                                            onClick={() => loadTestForEdit(t.id)}
                                        >
                                            {t.title}
                                        </button>
                                        <span
                                            className={`text-xs px-2 py-1 rounded ${t.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-700'}`}
                                        >
                                            {t.is_active ? 'Активен' : 'Неактивен'}
                                        </span>
                                    </div>
                                    <div className="text-xs text-gray-500 mt-1">
                                        Время: {t.time_limit_minutes} мин · Попыток: {t.attempts_allowed || '∞'}
                                    </div>
                                    <div className="flex gap-3 mt-2 text-xs">
                                        <button
                                            className="text-blue-600 hover:underline"
                                            onClick={() => loadTestForEdit(t.id)}
                                        >
                                            Редактировать
                                        </button>
                                        <button
                                            className="text-gray-700 hover:underline"
                                            onClick={() => toggleActive(t)}
                                        >
                                            {t.is_active ? 'Деактивировать' : 'Активировать'}
                                        </button>
                                        <button
                                            className="text-red-600 hover:underline"
                                            onClick={() => deleteTest(t.id)}
                                        >
                                            Удалить
                                        </button>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            </div>

            {/* Конструктор теста справа */}
            <div className="lg:col-span-2">
                <div className="bg-white p-4 rounded shadow">
                    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 mb-4">
                        <h3 className="font-bold">
                            {isEditing ? `Редактирование теста #${selectedTestId}` : 'Создание теста'}
                        </h3>
                        <div className="flex flex-wrap gap-2">
                            {/* Импорт JSON */}
                            <label className="relative inline-flex items-center">
                                <input
                                    type="file"
                                    accept="application/json"
                                    className="hidden"
                                    onChange={handleJsonFileChange}
                                />
                                <span className="cursor-pointer text-xs px-3 py-1 border rounded bg-gray-50 hover:bg-gray-100">
                                    📥 Импортировать JSON
                                </span>
                            </label>
                            {/* Пример JSON */}
                            <button
                                type="button"
                                onClick={openJsonExample}
                                className="text-xs px-3 py-1 border rounded bg-gray-50 hover:bg-gray-100"
                            >
                                📄 Пример JSON
                            </button>
                        </div>
                    </div>

                    {/* Основные настройки теста */}
                    <div className="mb-4 space-y-3">
                        <input
                            className="w-full border p-2 rounded"
                            placeholder="Название теста"
                            value={test.title}
                            onChange={e => setTest({ ...test, title: e.target.value })}
                        />
                        <textarea
                            className="w-full border p-2 rounded"
                            placeholder="Описание / инструкции"
                            rows="3"
                            value={test.description}
                            onChange={e => setTest({ ...test, description: e.target.value })}
                        />

                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                            <div>
                                <label className="block mb-1">Время (мин)</label>
                                <input
                                    type="number"
                                    className="w-full border p-2 rounded"
                                    value={test.time_limit_minutes}
                                    onChange={e => setTest({ ...test, time_limit_minutes: Number(e.target.value) || 0 })}
                                />
                            </div>
                            <div>
                                <label className="block mb-1">Попыток</label>
                                <input
                                    type="number"
                                    className="w-full border p-2 rounded"
                                    value={test.attempts_allowed}
                                    onChange={e => setTest({ ...test, attempts_allowed: Number(e.target.value) || 0 })}
                                />
                                <p className="text-xs text-gray-500 mt-1">0 — без ограничений</p>
                            </div>
                            <div>
                                <label className="block mb-1">Проходной %</label>
                                <input
                                    type="number"
                                    className="w-full border p-2 rounded"
                                    value={test.passing_score_percent}
                                    onChange={e => setTest({ ...test, passing_score_percent: Number(e.target.value) || 0 })}
                                />
                            </div>
                            <div className="flex items-center gap-2 mt-5">
                                <input
                                    type="checkbox"
                                    className="h-4 w-4"
                                    checked={test.is_active}
                                    onChange={e => setTest({ ...test, is_active: e.target.checked })}
                                />
                                <span className="text-sm">Сделать тест активным</span>
                            </div>
                        </div>

                        <div className="flex items-center gap-2 text-sm">
                            <input
                                type="checkbox"
                                className="h-4 w-4"
                                checked={test.shuffle_questions}
                                onChange={e => setTest({ ...test, shuffle_questions: e.target.checked })}
                            />
                            <span>Перемешивать вопросы для сотрудников</span>
                        </div>
                    </div>

                    {/* Вопросы */}
                    <div className="border-t pt-4">
                        <div className="flex justify-between items-center mb-3">
                            <h4 className="font-bold">Вопросы ({questions.length})</h4>
                        </div>

                        <div className="space-y-4">
                            {questions.map((q, index) => (
                                <div key={q.id} className="border rounded p-3 bg-gray-50">
                                    <div className="flex justify-between items-center mb-2">
                                        <div className="font-semibold text-sm">
                                            Вопрос #{index + 1}
                                        </div>
                                        <div className="flex gap-2 text-xs">
                                            <button
                                                className="px-2 py-1 border rounded"
                                                onClick={() => moveQuestionUp(q.id)}
                                                disabled={index === 0}
                                            >
                                                ↑
                                            </button>
                                            <button
                                                className="px-2 py-1 border rounded"
                                                onClick={() => moveQuestionDown(q.id)}
                                                disabled={index === questions.length - 1}
                                            >
                                                ↓
                                            </button>
                                            <button
                                                className="px-2 py-1 text-red-600"
                                                onClick={() => removeQuestion(q.id)}
                                                disabled={questions.length === 1}
                                            >
                                                Удалить
                                            </button>
                                        </div>
                                    </div>

                                    <input
                                        className="w-full border p-2 rounded mb-2"
                                        placeholder="Текст вопроса"
                                        value={q.text}
                                        onChange={e => updateQuestionField(q.id, "text", e.target.value)}
                                    />

                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm mb-3">
                                        <div>
                                            <label className="block mb-1">Тип вопроса</label>
                                            <select
                                                className="w-full border p-2 rounded"
                                                value={q.q_type}
                                                onChange={e => updateQuestionField(q.id, "q_type", e.target.value)}
                                            >
                                                <option value="single">Один вариант</option>
                                                <option value="multi">Несколько вариантов</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label className="block mb-1">Баллы</label>
                                            <input
                                                type="number"
                                                className="w-full border p-2 rounded"
                                                value={q.score}
                                                onChange={e => updateQuestionField(q.id, "score", Number(e.target.value) || 1)}
                                            />
                                        </div>
                                    </div>

                                    {(q.q_type === "single" || q.q_type === "multi") && (
                                        <div className="space-y-2">
                                            <div className="flex justify-between items-center">
                                                <span className="text-sm font-semibold">
                                                    Варианты ответов
                                                </span>
                                                <button
                                                    className="text-xs text-blue-600"
                                                    onClick={() => addOption(q.id)}
                                                >
                                                    + вариант
                                                </button>
                                            </div>
                                            {q.options.map(o => (
                                                <div key={o.id} className="flex items-center gap-2">
                                                    {q.q_type === "single" && (
                                                        <input
                                                            type="radio"
                                                            name={`q-${q.id}-correct`}
                                                            className="h-4 w-4"
                                                            checked={o.is_correct}
                                                            onChange={() => setCorrectSingle(q.id, o.id)}
                                                        />
                                                    )}
                                                    {q.q_type === "multi" && (
                                                        <input
                                                            type="checkbox"
                                                            className="h-4 w-4"
                                                            checked={o.is_correct}
                                                            onChange={() => toggleCorrectMulti(q.id, o.id)}
                                                        />
                                                    )}
                                                    <input
                                                        className="flex-1 border p-2 rounded"
                                                        placeholder="Текст варианта"
                                                        value={o.text}
                                                        onChange={e => updateOptionField(q.id, o.id, "text", e.target.value)}
                                                    />
                                                    <button
                                                        className="text-xs text-red-500"
                                                        onClick={() => removeOption(q.id, o.id)}
                                                        disabled={q.options.length <= 1}
                                                    >
                                                        ✕
                                                    </button>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>

                        {/* Кнопка добавления вопроса — внизу, как ты просил */}
                        <div className="mt-4 flex justify-end">
                            <button
                                className="bg-gray-100 border px-3 py-1 rounded text-sm hover:bg-gray-200"
                                onClick={addQuestion}
                            >
                                + Добавить вопрос
                            </button>
                        </div>
                    </div>

                    <div className="mt-6 flex gap-2">
                        <button
                            onClick={saveTest}
                            disabled={saving}
                            className="bg-blue-600 text-white flex-1 py-2 rounded font-bold hover:bg-blue-700 disabled:opacity-50"
                        >
                            {saving ? "Сохраняем..." : (isEditing ? "Сохранить изменения" : "Сохранить тест")}
                        </button>
                        {isEditing && (
                            <button
                                onClick={resetForm}
                                className="bg-gray-200 px-4 py-2 rounded text-sm"
                            >
                                Отмена редактирования
                            </button>
                        )}
                    </div>
                </div>
            </div>

            {/* Модальное окно с примером JSON */}
            {showJsonExample && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                    <div className="bg-white rounded-lg shadow-xl w-11/12 md:w-3/5 max-h-[80vh] flex flex-col">
                        <div className="flex justify-between items-center px-4 py-3 border-b">
                            <h4 className="font-semibold text-sm md:text-base">Пример JSON-файла теста</h4>
                            <button
                                className="text-gray-500 hover:text-gray-700 text-lg"
                                onClick={() => setShowJsonExample(false)}
                            >
                                ✕
                            </button>
                        </div>
                        <div className="p-3 md:p-4 overflow-auto text-xs bg-gray-900 text-green-100 font-mono">
                            <pre className="whitespace-pre-wrap">
                                {exampleJson || "// Загрузка примера..."}
                            </pre>
                        </div>
                        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 px-4 py-3 border-t bg-gray-50">
                            <span className="text-xs text-gray-500">
                                Этот шаблон можно скопировать, отредактировать и загрузить обратно через «Импортировать JSON».
                            </span>
                            <button
                                onClick={copyExampleJson}
                                className="text-xs px-3 py-1 rounded bg-blue-600 text-white hover:bg-blue-700"
                            >
                                Скопировать JSON
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}