// static/js/admin.Analytics.jsx

function AdminAnalytics({ token }) {
    const [tests, setTests] = useState([]);
    const [selectedTestId, setSelectedTestId] = useState("");
    const [detail, setDetail] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    // Загружаем список тестов для выбора
    useEffect(() => {
        let cancelled = false;

        const loadTests = async () => {
            try {
                setError("");
                const data = await API.adminGetTests(token);
                if (!cancelled) {
                    setTests(data);
                }
            } catch (e) {
                console.error(e);
                if (!cancelled) {
                    setError("Не удалось загрузить список тестов");
                }
            }
        };

        loadTests();

        return () => {
            cancelled = true;
        };
    }, [token]);

    const loadDetail = async (testId) => {
        if (!testId) {
            setDetail(null);
            return;
        }
        setLoading(true);
        setError("");
        try {
            const data = await API.adminGetTestAnalytics(token, testId);
            setDetail(data);
        } catch (e) {
            console.error(e);
            setError(e.message || "Ошибка при загрузке аналитики");
        } finally {
            setLoading(false);
        }
    };

    const handleSelectChange = (e) => {
        const val = e.target.value;
        setSelectedTestId(val);
        if (val) {
            loadDetail(val);
        } else {
            setDetail(null);
        }
    };

    // Скачивание CSV по выбранному тесту
    const downloadCsv = async () => {
        if (!selectedTestId) {
            alert("Сначала выберите тест");
            return;
        }

        try {
            const blob = await API.adminDownloadTestCsv(token, selectedTestId);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = detail
                ? `test_${detail.test.id}_results.csv`
                : "results.csv";
            a.click();
            window.URL.revokeObjectURL(url);
        } catch (e) {
            console.error(e);
            alert(e.message || "Ошибка при скачивании отчета");
        }
    };

    // Безопасно достаем список тех, кто не проходил тест
    const neverAttempted = detail && Array.isArray(detail.never_attempted_users)
        ? detail.never_attempted_users
        : [];

    return (
        <div className="space-y-6">
            {/* Заголовок блока аналитики */}
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                <div>
                    <h3 className="text-2xl font-bold text-gray-800">Аналитика тестов</h3>
                    <p className="text-gray-500 text-sm">
                        Выберите тест, чтобы посмотреть статистику и выгрузить отчет в Excel.
                    </p>
                </div>
            </div>

            {/* Блок выбора теста */}
            <div className="bg-white p-4 rounded shadow border border-gray-200">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    Выберите тест
                </label>
                <select
                    value={selectedTestId}
                    onChange={handleSelectChange}
                    className="w-full md:w-96 border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    <option value="">— Не выбран —</option>
                    {tests.map(t => (
                        <option key={t.id} value={t.id}>
                            {t.title}
                        </option>
                    ))}
                </select>
                <p className="text-xs text-gray-400 mt-1">
                    Отчеты строятся только по завершенным попыткам (статус "completed").
                </p>
            </div>

            {error && (
                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded text-sm">
                    {error}
                </div>
            )}

            {loading && (
                <div className="text-gray-500 text-sm">
                    Загружаем аналитику по тесту...
                </div>
            )}

            {!loading && !detail && !error && (
                <div className="text-gray-500 text-sm">
                    Выберите тест выше, чтобы увидеть статистику.
                </div>
            )}

            {/* Детальная аналитика + кнопка скачивания в блоке выбранного теста */}
            {!loading && detail && (
                <div className="space-y-6">
                    {/* Общая статистика по тесту */}
                    <div className="bg-white p-4 rounded shadow border border-gray-200">
                        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 mb-4">
                            <div>
                                <h4 className="font-semibold text-lg text-gray-800">
                                    {detail.test.title}
                                </h4>
                                <p className="text-xs text-gray-500">
                                    ID теста: {detail.test.id}
                                </p>
                            </div>
                            <div className="flex flex-col md:items-end gap-2">
                                <div className="text-xs text-gray-500 max-w-xl">
                                    {detail.test.description}
                                </div>
                                <button
                                    onClick={downloadCsv}
                                    className="inline-flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 text-xs md:text-sm"
                                >
                                    <span>📥</span>
                                    <span>Скачать отчет по этому тесту</span>
                                </button>
                            </div>
                        </div>

                        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Всего попыток</div>
                                <div className="text-lg font-bold">{detail.total_attempts}</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Уникальных сотрудников</div>
                                <div className="text-lg font-bold">{detail.unique_users}</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Завершено попыток</div>
                                <div className="text-lg font-bold">{detail.completed}</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Прошли тест</div>
                                <div className="text-lg font-bold">
                                    {detail.passed}{" "}
                                    <span className="text-xs text-gray-500">
                                        ({detail.completed > 0 ? Math.round(detail.passed / detail.completed * 100) : 0}% от завершивших)
                                    </span>
                                </div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Средний балл</div>
                                <div className="text-lg font-bold">{detail.avg_score}</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Средний % правильных</div>
                                <div className="text-lg font-bold">{detail.avg_percent}%</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Среднее время</div>
                                <div className="text-lg font-bold">{detail.avg_time_minutes} мин</div>
                            </div>
                            <div className="bg-gray-50 rounded p-3 border border-gray-100">
                                <div className="text-xs text-gray-500">Распределение попыток</div>
                                <div className="text-xs text-gray-700">
                                    {Object.keys(detail.attempts_distribution || {}).length === 0 && (
                                        <span>Нет данных</span>
                                    )}
                                    {Object.entries(detail.attempts_distribution || {}).map(([tryNum, count]) => (
                                        <div key={tryNum}>
                                            {tryNum}-я попытка: <span className="font-semibold">{count}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Таблица по сотрудникам с попытками */}
                    <div className="bg-white p-4 rounded shadow border border-gray-200">
                        <div className="flex items-center justify-between mb-3">
                            <h4 className="font-semibold text-md text-gray-800">Результаты сотрудников (те, кто проходил тест)</h4>
                            <span className="text-xs text-gray-500">
                                Сотрудников с попытками: {detail.users.length}
                            </span>
                        </div>
                        {detail.users.length === 0 ? (
                            <div className="text-sm text-gray-500">Пока нет завершенных попыток.</div>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="min-w-full text-xs md:text-sm">
                                    <thead className="bg-gray-50 text-gray-600">
                                        <tr>
                                            <th className="px-3 py-2 text-left">Сотрудник</th>
                                            <th className="px-3 py-2 text-left">Email</th>
                                            <th className="px-3 py-2 text-center">Попыток</th>
                                            <th className="px-3 py-2 text-center">1-я успешная попытка</th>
                                            <th className="px-3 py-2 text-center">Лучшая %</th>
                                            <th className="px-3 py-2 text-center">Последняя %</th>
                                            <th className="px-3 py-2 text-center">Прошел в последней</th>
                                            <th className="px-3 py-2 text-center">Суммарное время (мин)</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-100">
                                        {detail.users.map(u => (
                                            <tr key={u.user_id} className="hover:bg-gray-50">
                                                <td className="px-3 py-2 whitespace-nowrap">{u.name}</td>
                                                <td className="px-3 py-2 whitespace-nowrap text-gray-500">{u.email}</td>
                                                <td className="px-3 py-2 text-center">{u.attempts}</td>
                                                <td className="px-3 py-2 text-center">
                                                    {u.first_pass_attempt ? `${u.first_pass_attempt}-я` : "не прошел"}
                                                </td>
                                                <td className="px-3 py-2 text-center">{u.best_percent}%</td>
                                                <td className="px-3 py-2 text-center">{u.last_percent}%</td>
                                                <td className="px-3 py-2 text-center">
                                                    {u.last_passed ? (
                                                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700">
                                                            ✅ прошел
                                                        </span>
                                                    ) : (
                                                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-red-100 text-red-700">
                                                            ❌ не прошел
                                                        </span>
                                                    )}
                                                </td>
                                                <td className="px-3 py-2 text-center">{u.total_time_minutes}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>

                    {/* НОВАЯ ТАБЛИЦА: сотрудники, которые ещё НЕ проходили тест */}
                    <div className="bg-white p-4 rounded shadow border border-gray-200">
                        <div className="flex items-center justify-between mb-3">
                            <h4 className="font-semibold text-md text-gray-800">
                                Сотрудники, которые ещё не проходили этот тест
                            </h4>
                            <span className="text-xs text-gray-500">
                                Таких сотрудников: {neverAttempted.length}
                            </span>
                        </div>
                        {neverAttempted.length === 0 ? (
                            <div className="text-sm text-gray-500">
                                Все специалисты уже хотя бы раз открывали этот тест.
                            </div>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="min-w-full text-xs md:text-sm">
                                    <thead className="bg-gray-50 text-gray-600">
                                        <tr>
                                            <th className="px-3 py-2 text-left">Сотрудник</th>
                                            <th className="px-3 py-2 text-left">Email</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-100">
                                        {neverAttempted.map(u => (
                                            <tr key={u.user_id} className="hover:bg-gray-50">
                                                <td className="px-3 py-2 whitespace-nowrap">{u.name}</td>
                                                <td className="px-3 py-2 whitespace-nowrap text-gray-500">{u.email}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>

                    {/* Таблица по вопросам */}
                    <div className="bg-white p-4 rounded shadow border border-gray-200">
                        <div className="flex items-center justify-between mb-3">
                            <h4 className="font-semibold text-md text-gray-800">Сложность вопросов</h4>
                            <span className="text-xs text-gray-500">
                                Всего вопросов: {detail.questions.length}
                            </span>
                        </div>
                        {detail.questions.length === 0 ? (
                            <div className="text-sm text-gray-500">Пока нет ответов на вопросы.</div>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="min-w-full text-xs md:text-sm">
                                    <thead className="bg-gray-50 text-gray-600">
                                        <tr>
                                            <th className="px-3 py-2 text-left">Вопрос</th>
                                            <th className="px-3 py-2 text-center">Ответов</th>
                                            <th className="px-3 py-2 text-center">Правильных</th>
                                            <th className="px-3 py-2 text-center">% правильных</th>
                                            <th className="px-3 py-2 text-center">Среднее время (сек)</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-100">
                                        {detail.questions.map(q => (
                                            <tr key={q.id} className="hover:bg-gray-50">
                                                <td className="px-3 py-2 whitespace-pre-wrap max-w-xl">{q.text}</td>
                                                <td className="px-3 py-2 text-center">{q.total_answers}</td>
                                                <td className="px-3 py-2 text-center">{q.correct_answers}</td>
                                                <td className="px-3 py-2 text-center">{q.correct_percent}%</td>
                                                <td className="px-3 py-2 text-center">{q.avg_time_seconds}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}