"use client";

import { useEffect, useRef } from "react";

import AnswerResultLine from "@/components/game/AnswerResultLine";
import type {
  VariableGradeResult,
  VariableParenthesisProblem,
  VariableParenthesisTerm,
} from "@/lib/engine/variable-types";
import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";

interface VariableFeedbackPanelProps {
  result: VariableGradeResult;
  problem: VariableParenthesisProblem;
  isLastProblem: boolean;
  onNext: () => void;
}

function formatSignedNumber(value: number) {
  return value < 0 ? `(${value})` : `${value}`;
}

function formatSignedTerm(term: VariableParenthesisTerm, sign: 1 | -1) {
  const coefficient = term.coefficient * sign;

  return formatVariableTermLatex({ ...term, coefficient });
}

export default function VariableFeedbackPanel({
  result,
  problem,
  isLastProblem,
  onNext,
}: VariableFeedbackPanelProps) {
  const nextButtonRef = useRef<HTMLButtonElement>(null);
  const signedTerms = [
    formatSignedTerm(problem.firstTerm, 1),
    formatSignedTerm(problem.secondTerm, problem.operator === "-" ? -1 : 1),
  ] as const;
  const feedbackItems = signedTerms.map((termLatex, index) => {
    const termIndex = index as 0 | 1;
    const userAnswer = result.userAnswer[termIndex];
    const correctAnswer = result.correctAnswer[termIndex];

    return {
      formulaLatex: `${formatSignedNumber(problem.multiplier)}\\times ${termLatex}`,
      userAnswerLatex: userAnswer?.latex ?? "?",
      correctAnswerLatex: correctAnswer.latex,
      correct: userAnswer?.coefficient === correctAnswer.coefficient,
    };
  });

  useEffect(() => {
    nextButtonRef.current?.focus();
  }, []);

  return (
    <div
      className={`rounded-md p-6 shadow-sm ring-1 ${
        result.correct
          ? "bg-emerald-50 text-emerald-950 ring-emerald-200"
          : "bg-red-50 text-red-950 ring-red-200"
      }`}
    >
      <p className="text-lg font-bold">
        {result.correct ? "정답입니다." : "오답입니다."}
      </p>
      <ul className="mt-5 space-y-3">
        {feedbackItems.map((item, index) => (
          <AnswerResultLine
            key={index}
            expressionLatex={item.formulaLatex}
            userAnswerLatex={item.userAnswerLatex}
            correctAnswerLatex={item.correctAnswerLatex}
            correct={item.correct}
          />
        ))}
      </ul>
      <button
        ref={nextButtonRef}
        type="button"
        onClick={onNext}
        className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
      >
        {isLastProblem ? "결과 보기" : "다음 문제"}
      </button>
    </div>
  );
}