"use client";
import { QuizAnswer } from '@/types/types';
import { RegularAnswerForm } from './RegularAnswerForm';
import { CustomPointsForm } from './CustomPointsForm';
import { FaChevronDown, FaChevronRight } from 'react-icons/fa6';
import { useState } from 'react';

type RoundTableProps = {
  roundLabel: string;
  answers: QuizAnswer[];
};

export function RoundTable({ roundLabel, answers }: RoundTableProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  const teams = Array.from(new Set(answers.map((a) => a.team_name))).sort();
  const questions = Array.from(
    new Set(answers.map((a) => a.question_number))
  ).sort((a, b) => a - b);

  return (
    <div className="mb-8">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="flex items-center gap-2 text-lg font-semibold mb-2 hover:text-gray-600"
      >
        {isExpanded ? <FaChevronDown /> : <FaChevronRight />}
        Рунд {roundLabel}
      </button>

      {isExpanded && (
        <div className="overflow-x-auto">
          <table className="w-auto border-collapse border border-gray-300 text-xs">
            <thead className="sticky top-0 bg-gray-50">
              <tr>
                <th className="border border-gray-300 px-2 py-1 w-10 text-center">№</th>
                {teams.map((team) => (
                  <th key={team} className="border border-gray-300 px-2 py-1 min-w-[120px] max-w-[160px]">
                    {team}
                  </th>
                ))}
              </tr>
            </thead>

            <tbody>
              {questions.map((question) => (
                <tr key={question}>
                  <td className="border border-gray-300 px-2 py-1 text-center font-medium">
                    {question}
                  </td>
                  {teams.map((team) => {
                    const answer = answers.find(
                      (a) => a.question_number === question && a.team_name === team
                    );

                    if (!answer) {
                      return (
                        <td key={`${team}-${question}`} className="border border-gray-300 px-2 py-1">
                          -
                        </td>
                      );
                    }

                    const isCustomRound = answer.question_number >= 20 && answer.question_number <= 35;

                    return (
                      <td key={`${team}-${question}`} className="border border-gray-300 px-2 py-1">
                        {isCustomRound ? (
                          <CustomPointsForm answer={answer} />
                        ) : (
                          <RegularAnswerForm answer={answer} />
                        )}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}