// static/js/dashboard.jsx

function UserDashboard() {
    const { token, setView } = useContext(AuthContext);
    const [tests, setTests] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState("");

    useEffect(() => {
        let isMounted = true;

        async function loadTests() {
            try {
                setLoading(true);
                setError("");
                const data = await API.getAvailableTests(token);
                if (isMounted) {
                    setTests(Array.isArray(data) ? data : []);
                }
            } catch (e) {
                console.error(e);
                if (isMounted) {
                    setError(e.message || "Не удалось загрузить список тестов");
                    setTests([]);
                }
            } finally {
                if (isMounted) {
                    setLoading(false);
                }
            }
        }

        if (token) {
            loadTests();
        } else {
            setLoading(false);
            setTests([]);
        }

        return () => {
            isMounted = false;
        };
    }, [token]);

    if (loading) {
        return (
            <div className="flex justify-center mt-20">
                <div className="spinner"></div>
            </div>
        );
    }

    return (
        <div>
            <h2 className="text-2xl font-bold mb-6">Доступные тесты</h2>

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

            {!error && tests.length === 0 && (
                <div className="text-gray-500 text-sm">
                    Для вас пока нет доступных тестов.
                </div>
            )}

            {tests.length > 0 && (
                <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                    {tests.map(test => {
                        const hasDetails =
                            typeof test.last_percent === 'number' &&
                            typeof test.total_questions === 'number' &&
                            test.total_questions > 0 &&
                            typeof test.last_correct_questions === 'number';

                        const hasLastAttempt = test.last_score !== null && test.last_score !== undefined;

                        let resultBoxClasses = "p-2 rounded text-xs mt-2";
                        let resultTitle = "";
                        if (test.status === 'passed') {
                            resultBoxClasses += " bg-green-50 text-green-800 border border-green-200";
                            resultTitle = "Результат последней попытки — ТЕСТ СДАН";
                        } else if (test.status === 'failed') {
                            resultBoxClasses += " bg-red-50 text-red-800 border border-red-200";
                            resultTitle = "Результат последней попытки — ТЕСТ НЕ СДАН";
                        } else {
                            resultBoxClasses += " bg-gray-50 text-gray-700 border border-gray-200";
                            resultTitle = "Результат последней попытки";
                        }

                        return (
                            <div
                                key={test.id}
                                className="bg-white p-6 rounded shadow hover:shadow-lg transition flex flex-col justify-between"
                            >
                                <div>
                                    <h3 className="text-xl font-bold mb-2">{test.title}</h3>
                                    <p className="text-gray-600 mb-4 h-12 overflow-hidden">
                                        {test.description}
                                    </p>
                                    <div className="text-sm text-gray-500 mb-4 space-y-1">
                                        <p>🕒 Время: {test.time_limit ? test.time_limit + ' мин' : 'Без ограничений'}</p>
                                        <p>🎯 Проходной: {test.passing_score}%</p>
                                        <p>🔄 Попыток: {test.attempts_used} / {test.attempts_allowed || '∞'}</p>
                                    </div>

                                    {/* Блок с результатами последней попытки — показываем, если она вообще была */}
                                    {hasLastAttempt && (
                                        <div className={resultBoxClasses}>
                                            <div className="font-semibold text-[11px] uppercase tracking-wide mb-1">
                                                {resultTitle}
                                            </div>
                                            <div>
                                                {hasDetails ? (
                                                    <>
                                                        <div>
                                                            Правильных ответов:{" "}
                                                            <span className="font-semibold">
                                                                {test.last_correct_questions} из {test.total_questions}
                                                            </span>
                                                        </div>
                                                        <div>
                                                            Баллы:{" "}
                                                            <span className="font-semibold">
                                                                {test.last_score}
                                                                {typeof test.max_score === 'number' && test.max_score > 0
                                                                    ? ` из ${test.max_score}`
                                                                    : ''}
                                                            </span>
                                                            {typeof test.last_percent === 'number' && (
                                                                <> ({test.last_percent.toFixed(1)}%)</>
                                                            )}
                                                        </div>
                                                    </>
                                                ) : (
                                                    <div>
                                                        Баллы:{" "}
                                                        <span className="font-semibold">
                                                            {test.last_score}
                                                        </span>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    )}
                                </div>

                                {/* Блок с кнопкой — снизу карточки */}
                                <div className="mt-4">
                                    {test.status === 'passed' ? (
                                        <div className="bg-green-100 text-green-800 p-2 rounded text-center text-xs font-semibold">
                                            Тест уже сдан.
                                        </div>
                                    ) : (
                                        <button
                                            disabled={!test.can_start}
                                            onClick={() => setView(`test_run_${test.id}`)}
                                            className={`w-full p-2 rounded font-bold text-white ${
                                                test.can_start
                                                    ? 'bg-blue-600 hover:bg-blue-700'
                                                    : 'bg-gray-400 cursor-not-allowed'
                                            }`}
                                        >
                                            {test.can_start ? 'Начать / повторить тест' : 'Попытки исчерпаны'}
                                        </button>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}