freezmo/components/activities/ShortAnswer.tsx

"use client";

import { useEffect, useRef, useState } from "react";

import { ApiError, gradeAnswer } from "@/lib/client-api";
import { useI18n } from "@/lib/i18n";
import type { Activity } from "@/lib/schemas";
import { cn } from "@/lib/utils";
import { Button, Spinner } from "@/components/ui";

import {
  ActivityHeader,
  FeedbackPanel,
  Hint,
  PromptCard,
  QuestionText,
  type ActivityComponentProps,
} from "./shared";

type ShortAnswerActivity = Extract<Activity, { type: "short_answer" }>;

type GradeState =
  | { status: "idle" }
  | { status: "grading" }
  | { status: "graded"; correct: boolean; feedback: string; missing: string[] }
  | { status: "error"; message: string }
  | { status: "self-check" };

export function ShortAnswer({ activity, active, language, onAnswered, onNext, isLast }: ActivityComponentProps<ShortAnswerActivity>) {
  const { t } = useI18n();
  const [value, setValue] = useState("");
  const [state, setState] = useState<GradeState>({ status: "idle" });
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (active && state.status === "idle") {
      const timer = window.setTimeout(() => textareaRef.current?.focus(), 350);
      return () => window.clearTimeout(timer);
    }
  }, [active, state.status]);

  const grade = async () => {
    if (!value.trim() || state.status === "grading") return;
    setState({ status: "grading" });
    try {
      const result = await gradeAnswer({
        question: activity.question,
        referenceAnswer: activity.referenceAnswer,
        keyPoints: activity.keyPoints,
        userAnswer: value.trim(),
        language,
      });
      setState({
        status: "graded",
        correct: result.correct,
        feedback: result.feedback,
        missing: result.missing,
      });
      onAnswered(result.correct, { userAnswer: value.trim() });
    } catch (error) {
      setState({
        status: "error",
        message:
          error instanceof ApiError
            ? error.message
            : t("short.gradeFailed"),
      });
    }
  };

  const selfCheck = (correct: boolean) => {
    setState({ status: "graded", correct, feedback: t("short.selfChecked"), missing: [] });
    onAnswered(correct, { userAnswer: value.trim() });
  };

  return (
    <>
      <ActivityHeader type="short_answer" topic={activity.topic} />
      <PromptCard>
        <QuestionText>{activity.question}</QuestionText>
      </PromptCard>

      <label className="sr-only" htmlFor={`answer-${activity.id}`}>
        {t("short.yourAnswer")}
      </label>
      <textarea
        id={`answer-${activity.id}`}
        ref={textareaRef}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onKeyDown={(event) => {
          event.stopPropagation();
          if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
            event.preventDefault();
            void grade();
          }
        }}
        disabled={state.status === "grading" || state.status === "graded"}
        rows={3}
        placeholder={t("short.placeholder")}
        className="w-full resize-none rounded-2xl border-2 border-[var(--glass-border)] bg-[var(--surface-strong)] px-4 py-3 text-[15px] font-medium text-frost-950 shadow-sm outline-none transition placeholder:text-frost-400 focus:border-[var(--focus)] disabled:opacity-70 dark:border-[var(--glass-border)] dark:bg-[var(--surface-strong)] dark:text-frost-50 dark:placeholder:text-frost-400"
      />

      {state.status === "idle" ? (
        <div className="flex items-center justify-between gap-3">
          <Hint>{t("short.ctrlEnter")}</Hint>
          <Button size="lg" onClick={() => void grade()} disabled={!value.trim()}>
            {t("short.submit")}
          </Button>
        </div>
      ) : null}

      {state.status === "grading" ? (
        <div className="flex items-center gap-3 rounded-2xl border border-white/60 bg-white/50 backdrop-blur-xl px-4 py-3 text-sm font-semibold text-frost-800 dark:border-white/15 dark:bg-white/10 dark:text-frost-100">
          <Spinner className="size-5" />
          {t("short.grading")}
        </div>
      ) : null}

      {state.status === "error" ? (
        <div className="rounded-2xl border-2 border-amber-300 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-100">
          <p className="font-bold">{t("short.couldNotGrade")}</p>
          <p className="mt-1">{state.message}</p>
          <div className="mt-3 flex flex-wrap gap-2">
            <Button size="sm" onClick={() => void grade()}>
              {t("common.retry")}
            </Button>
            <Button size="sm" variant="secondary" onClick={() => setState({ status: "self-check" })}>
              {t("short.showAnswer")}
            </Button>
          </div>
        </div>
      ) : null}

      {state.status === "self-check" ? (
        <div className="card space-y-3 p-4">
          <p className="text-sm font-bold text-frost-900 dark:text-frost-100">{t("short.modelAnswer")}</p>
          <p className="text-sm leading-relaxed text-frost-700 dark:text-frost-200">{activity.referenceAnswer}</p>
          <p className="text-xs text-frost-500 dark:text-frost-400">{t("short.keyPoints")} {activity.keyPoints.join(" · ")}</p>
          <div className="grid grid-cols-2 gap-3">
            <Button variant="secondary" onClick={() => selfCheck(false)}>
              {t("short.missedIt")}
            </Button>
            <Button variant="success" onClick={() => selfCheck(true)}>
              {t("short.hadRight")}
            </Button>
          </div>
        </div>
      ) : null}

      {state.status === "graded" ? (
        <>
          <div
            className={cn(
              "rounded-2xl border-2 p-3 text-sm font-semibold",
              state.correct
                ? "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/10 dark:text-emerald-100"
                : "border-rose-300 bg-rose-50 text-rose-900 dark:border-rose-400/40 dark:bg-rose-400/10 dark:text-rose-100",
            )}
          >
            <p className="font-extrabold uppercase tracking-wide">
              {state.correct ? t("short.accepted") : t("short.needsWork")}
            </p>
            <p className="mt-1 font-normal">{state.feedback}</p>
            {state.missing.length ? (
              <ul className="mt-2 list-inside list-disc font-normal">
                {state.missing.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            ) : null}
            {!state.correct ? (
              <p className="mt-2 font-normal">
                <span className="font-bold">{t("short.modelAnswer")}: </span>
                {activity.referenceAnswer}
              </p>
            ) : null}
          </div>

          <FeedbackPanel
            correct={state.correct}
            explanation={activity.explanation}
            xp={activity.xp}
            isLast={isLast}
            onNext={onNext}
          />
        </>
      ) : null}
    </>
  );
}