TasksTab.tsx

import React, { useEffect, useMemo, useState } from 'react';
import type { Session } from '@supabase/supabase-js';

import Loader from './Loader';
import { isSupabaseConfigured, supabase } from '../services/supabaseClient';

interface FipiTask {
  id: number;
  title: string;
  content: string;
  task_type: string | null;
  source_url: string;
  scraped_at: string;
  variants?: string[];
  can_check_answer?: boolean;
}

interface TaskAttempt {
  id?: number;
  task_id: number;
  submitted_answer: string;
  is_correct: boolean;
  check_status: string;
  created_at: string;
}

interface CheckAnswerResult {
  success: boolean;
  is_correct: boolean;
  status_code: string;
  status_label: string;
  submitted_answer: string;
  normalized_answer: string;
  message: string;
}

interface TasksTabProps {
  session: Session | null;
  scraperUrl?: string;
}

const FILTERS = ['all', 'checkable', 'writing', 'test', 'reading', 'listening', 'other'] as const;

const sourceLabel = (task: FipiTask) => {
  if (task.source_url.includes('questions.php')) return 'Банк ФИПИ';
  if (task.source_url.includes('otkrytyye-varianty-kim-ege')) return 'Открытый вариант';
  if (task.source_url.includes('demoversii-specifikacii-kodifikatory')) return 'Демоверсия';
  return 'Источник ФИПИ';
};

const TasksTab: React.FC<TasksTabProps> = ({
  session,
  scraperUrl = import.meta.env.VITE_SCRAPER_URL || 'http://localhost:8000',
}) => {
  const [tasks, setTasks] = useState<FipiTask[]>([]);
  const [attempts, setAttempts] = useState<TaskAttempt[]>([]);
  const [localAttempts, setLocalAttempts] = useState<TaskAttempt[]>([]);
  const [answerDrafts, setAnswerDrafts] = useState<Record<number, string>>({});
  const [checkResults, setCheckResults] = useState<Record<number, CheckAnswerResult>>({});
  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
  const [filterType, setFilterType] = useState<(typeof FILTERS)[number]>('checkable');
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [statsLoading, setStatsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [checkingTaskId, setCheckingTaskId] = useState<number | null>(null);

  const fetchTasks = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`${scraperUrl}/api/tasks`);
      if (!response.ok) {
        throw new Error('Не удалось загрузить задания.');
      }
      const data = await response.json();
      const taskList = (Array.isArray(data) ? data : data.tasks || []) as FipiTask[];
      setTasks(taskList);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Не удалось загрузить задания.');
    } finally {
      setLoading(false);
    }
  };

  const fetchAttempts = async () => {
    if (!session || !isSupabaseConfigured()) {
      setAttempts([]);
      return;
    }

    setStatsLoading(true);
    try {
      const { data, error: selectError } = await supabase
        .from('task_attempts')
        .select('*')
        .eq('user_id', session.user.id)
        .order('created_at', { ascending: false });

      if (selectError) {
        throw selectError;
      }
      setAttempts((data || []) as TaskAttempt[]);
    } catch {
      setAttempts([]);
    } finally {
      setStatsLoading(false);
    }
  };

  useEffect(() => {
    fetchTasks();
  }, [scraperUrl]);

  useEffect(() => {
    fetchAttempts();
  }, [session]);

  const allAttempts = session ? attempts : localAttempts;

  const latestAttemptByTask = useMemo(() => {
    const latest = new Map<number, TaskAttempt>();
    for (const attempt of allAttempts) {
      if (!latest.has(attempt.task_id)) {
        latest.set(attempt.task_id, attempt);
      }
    }
    return latest;
  }, [allAttempts]);

  const taskStats = useMemo(() => {
    const totalAttempts = allAttempts.length;
    const incorrectAttempts = allAttempts.filter((attempt) => !attempt.is_correct).length;
    const correctAttempts = totalAttempts - incorrectAttempts;
    const solvedTasks = new Set(allAttempts.filter((attempt) => attempt.is_correct).map((attempt) => attempt.task_id)).size;
    const accuracy = totalAttempts === 0 ? 0 : Math.round((correctAttempts / totalAttempts) * 100);

    const wrongByTask = new Map<number, number>();
    for (const attempt of allAttempts) {
      if (!attempt.is_correct) {
        wrongByTask.set(attempt.task_id, (wrongByTask.get(attempt.task_id) || 0) + 1);
      }
    }

    const hardestTasks = Array.from(wrongByTask.entries())
      .sort((left, right) => right[1] - left[1])
      .slice(0, 5)
      .map(([taskId, wrongCount]) => ({
        task: tasks.find((task) => task.id === taskId),
        wrongCount,
      }))
      .filter((item) => item.task);

    return {
      totalAttempts,
      incorrectAttempts,
      correctAttempts,
      solvedTasks,
      accuracy,
      hardestTasks,
    };
  }, [allAttempts, tasks]);

  const filteredTasks = useMemo(() => {
    const normalizedQuery = search.trim().toLowerCase();
    return tasks
      .filter((task) => {
        if (filterType === 'checkable') {
          return Boolean(task.can_check_answer);
        }
        if (filterType !== 'all') {
          return task.task_type === filterType;
        }
        return true;
      })
      .filter((task) => {
        if (!normalizedQuery) {
          return true;
        }
        return (
          task.title.toLowerCase().includes(normalizedQuery) ||
          task.content.toLowerCase().includes(normalizedQuery)
        );
      })
      .sort((left, right) => Number(Boolean(right.can_check_answer)) - Number(Boolean(left.can_check_answer)));
  }, [filterType, search, tasks]);

  const submitAnswer = async (task: FipiTask) => {
    const draft = (answerDrafts[task.id] || '').trim();
    if (!draft) {
      setCheckResults((current) => ({
        ...current,
        [task.id]: {
          success: false,
          is_correct: false,
          status_code: 'validation_error',
          status_label: 'Пустой ответ',
          submitted_answer: draft,
          normalized_answer: '',
          message: 'Введите ответ перед проверкой.',
        },
      }));
      return;
    }

    setCheckingTaskId(task.id);
    try {
      const response = await fetch(`${scraperUrl}/api/tasks/${task.id}/check-answer`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ answer: draft }),
      });
      const payload = (await response.json()) as CheckAnswerResult | { detail?: string };
      if (!response.ok) {
        throw new Error('detail' in payload && payload.detail ? payload.detail : 'Проверка не удалась.');
      }

      const result = payload as CheckAnswerResult;
      setCheckResults((current) => ({ ...current, [task.id]: result }));

      const attempt: TaskAttempt = {
        task_id: task.id,
        submitted_answer: draft,
        is_correct: result.is_correct,
        check_status: result.status_code,
        created_at: new Date().toISOString(),
      };

      if (session && isSupabaseConfigured()) {
        const { error: insertError } = await supabase.from('task_attempts').insert({
          user_id: session.user.id,
          task_id: task.id,
          submitted_answer: draft,
          is_correct: result.is_correct,
          check_status: result.status_code,
        });

        if (!insertError) {
          await fetchAttempts();
        }
      } else {
        setLocalAttempts((current) => [attempt, ...current]);
      }
    } catch (err) {
      setCheckResults((current) => ({
        ...current,
        [task.id]: {
          success: false,
          is_correct: false,
          status_code: 'request_error',
          status_label: 'Ошибка',
          submitted_answer: draft,
          normalized_answer: draft,
          message: err instanceof Error ? err.message : 'Проверка не удалась.',
        },
      }));
    } finally {
      setCheckingTaskId(null);
    }
  };

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

  return (
    <div className="mx-auto max-w-6xl space-y-6 pb-12 animate-fade-in">
      <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <h2 className="text-3xl font-serif font-bold text-refined-dark">Практика по заданиям ФИПИ</h2>
            <p className="mt-1 text-stone-500">
              Задания подгружаются из базы автоматически. Проверка ответа доступна для задач из банка ФИПИ.
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <input
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder="Поиск по тексту задания"
              className="rounded-full border border-stone-300 px-4 py-3 text-sm text-stone-700 outline-none transition focus:border-refined-red"
            />
            <button
              onClick={fetchTasks}
              className="rounded-full bg-stone-100 px-5 py-3 text-sm font-medium text-stone-700 transition hover:bg-stone-200"
            >
              Обновить список
            </button>
          </div>
        </div>

        <div className="mt-5 flex flex-wrap gap-2">
          {FILTERS.map((filter) => {
            const count =
              filter === 'all'
                ? tasks.length
                : filter === 'checkable'
                  ? tasks.filter((task) => task.can_check_answer).length
                  : tasks.filter((task) => task.task_type === filter).length;
            if (count === 0 && filter !== 'all') {
              return null;
            }
            return (
              <button
                key={filter}
                onClick={() => setFilterType(filter)}
                className={`rounded-full px-4 py-2 text-sm font-medium transition ${
                  filterType === filter
                    ? 'bg-refined-red text-white'
                    : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
                }`}
              >
                {filter === 'all' ? 'Все' : filter === 'checkable' ? 'С проверкой' : filter}
                {' '}
                ({count})
              </button>
            );
          })}
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-4">
        <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
          <p className="text-xs font-bold uppercase text-stone-500">Всего заданий</p>
          <p className="mt-2 text-3xl font-serif font-bold text-refined-dark">{tasks.length}</p>
        </div>
        <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
          <p className="text-xs font-bold uppercase text-stone-500">Решено</p>
          <p className="mt-2 text-3xl font-serif font-bold text-refined-dark">{taskStats.solvedTasks}</p>
        </div>
        <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
          <p className="text-xs font-bold uppercase text-stone-500">Ошибок</p>
          <p className="mt-2 text-3xl font-serif font-bold text-refined-dark">{taskStats.incorrectAttempts}</p>
        </div>
        <div className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
          <p className="text-xs font-bold uppercase text-stone-500">Точность</p>
          <p className="mt-2 text-3xl font-serif font-bold text-refined-dark">{taskStats.accuracy}%</p>
        </div>
      </div>

      {(statsLoading || taskStats.hardestTasks.length > 0) && (
        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
          <h3 className="font-serif text-xl font-bold text-refined-dark">Статистика ошибок</h3>
          {statsLoading ? (
            <div className="mt-4 flex justify-center">
              <Loader />
            </div>
          ) : taskStats.hardestTasks.length === 0 ? (
            <p className="mt-3 text-stone-500">Пока нет ошибок по сохранённым попыткам.</p>
          ) : (
            <div className="mt-4 space-y-3">
              {taskStats.hardestTasks.map(({ task, wrongCount }) => (
                <div key={task!.id} className="rounded-xl border border-stone-200 bg-stone-50 p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <p className="font-semibold text-refined-dark">{task!.title}</p>
                      <p className="mt-1 text-sm text-stone-500">{sourceLabel(task!)}</p>
                    </div>
                    <span className="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700">
                      Ошибок: {wrongCount}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {error && (
        <div className="rounded-2xl border border-red-200 bg-red-50 p-6 text-red-700">
          {error}
        </div>
      )}

      <div className="space-y-4">
        {filteredTasks.map((task) => {
          const latestAttempt = latestAttemptByTask.get(task.id);
          const isExpanded = selectedTaskId === task.id;
          const checkResult = checkResults[task.id];
          return (
            <div key={task.id} className="rounded-2xl border border-stone-200 bg-white shadow-sm">
              <div className="flex flex-col gap-4 p-6 md:flex-row md:items-start md:justify-between">
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="rounded-full bg-stone-100 px-3 py-1 text-xs font-medium text-stone-600">
                      {sourceLabel(task)}
                    </span>
                    {task.can_check_answer && (
                      <span className="rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700">
                        Можно проверить
                      </span>
                    )}
                    {latestAttempt && (
                      <span
                        className={`rounded-full px-3 py-1 text-xs font-medium ${
                          latestAttempt.is_correct
                            ? 'bg-emerald-100 text-emerald-700'
                            : 'bg-red-100 text-red-700'
                        }`}
                      >
                        {latestAttempt.is_correct ? 'Последний ответ верный' : 'Последний ответ неверный'}
                      </span>
                    )}
                  </div>
                  <h3 className="mt-3 text-xl font-semibold text-refined-dark">{task.title}</h3>
                  <p className="mt-2 line-clamp-3 whitespace-pre-wrap text-sm text-stone-600">{task.content}</p>
                </div>
                <button
                  onClick={() => setSelectedTaskId(isExpanded ? null : task.id)}
                  className="rounded-full bg-stone-100 px-4 py-2 text-sm font-medium text-stone-700 transition hover:bg-stone-200"
                >
                  {isExpanded ? 'Скрыть' : 'Открыть'}
                </button>
              </div>

              {isExpanded && (
                <div className="border-t border-stone-200 px-6 py-6">
                  <div className="rounded-xl border border-stone-200 bg-refined-paper p-5">
                    <p className="whitespace-pre-wrap text-stone-700">{task.content}</p>

                    {task.variants && task.variants.length > 0 && (
                      <div className="mt-5">
                        <p className="mb-2 text-sm font-semibold text-refined-dark">Варианты из задания</p>
                        <div className="space-y-2">
                          {task.variants.map((variant, index) => (
                            <div key={`${task.id}-variant-${index}`} className="rounded-lg bg-white px-3 py-2 text-sm text-stone-700">
                              {variant}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    <div className="mt-6 space-y-3">
                      {task.can_check_answer ? (
                        <>
                          <label className="block text-sm font-semibold text-refined-dark">
                            Введите ответ
                          </label>
                          <div className="flex flex-col gap-3 md:flex-row">
                            <input
                              value={answerDrafts[task.id] || ''}
                              onChange={(event) =>
                                setAnswerDrafts((current) => ({
                                  ...current,
                                  [task.id]: event.target.value,
                                }))
                              }
                              placeholder="Например: 25 или СЛОВО"
                              className="flex-1 rounded-xl border border-stone-300 px-4 py-3 text-sm text-stone-700 outline-none transition focus:border-refined-red"
                            />
                            <button
                              onClick={() => submitAnswer(task)}
                              disabled={checkingTaskId === task.id}
                              className="rounded-xl bg-refined-red px-5 py-3 text-sm font-medium text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {checkingTaskId === task.id ? 'Проверяю...' : 'Проверить'}
                            </button>
                          </div>
                          <p className="text-xs text-stone-500">
                            Для статистики попытки сохраняются в Supabase, если пользователь авторизован.
                          </p>
                        </>
                      ) : (
                        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                          Для этой задачи автоматическая проверка пока недоступна. Проверка работает для задач из динамического банка ФИПИ.
                        </div>
                      )}

                      {checkResult && (
                        <div
                          className={`rounded-xl p-4 text-sm font-medium ${
                            checkResult.is_correct
                              ? 'bg-emerald-50 text-emerald-700'
                              : 'bg-red-50 text-red-700'
                          }`}
                        >
                          <p>{checkResult.message}</p>
                          <p className="mt-1 text-xs opacity-80">
                            Отправлено: {checkResult.submitted_answer}
                          </p>
                        </div>
                      )}
                    </div>

                    <a
                      href={task.source_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-refined-red hover:underline"
                    >
                      Открыть источник
                    </a>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {!error && filteredTasks.length === 0 && (
        <div className="rounded-2xl border border-stone-200 bg-white p-10 text-center text-stone-500 shadow-sm">
          По текущему фильтру заданий не найдено.
        </div>
      )}
    </div>
  );
};

export default TasksTab;