freezmo/components/homework/HomeworkCheckResult.tsx

"use client";

import { useState } from "react";

import { ReportQuestionButton } from "@/components/ReportQuestionButton";
import { Button } from "@/components/ui";
import { homeworkReportActivity } from "@/lib/question-reports";
import { AskButton } from "@/components/chat/AskButton";
import { useI18n } from "@/lib/i18n";
import type { HomeworkCheckRecord } from "@/lib/schemas";

import { CopyButton } from "./CopyButton";
import { FollowUpBar } from "./FollowUpBar";

/** Mode 3 result: verdict, what's right, what needs fixing, corrected version. */
export function HomeworkCheckResult({
  record,
  onAgain,
  onNew,
  onToDeck,
  againLoading,
}: {
  record: HomeworkCheckRecord;
  onAgain: () => void;
  onNew: () => void;
  onToDeck: () => void;
  againLoading: boolean;
}) {
  const { t } = useI18n();
  const [corrected, setCorrected] = useState(record.corrected);

  return (
    <div className="space-y-5">
      <header className="space-y-1">
        <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
          {t("homework.check.title")}
        </p>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] text-balance">
          {record.title}
        </h1>
      </header>

      <section className="card space-y-1.5 p-4">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
          {t("homework.check.verdict")}
        </p>
        <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">{record.verdict}</p>
      </section>

      {record.correct.length > 0 ? (
        <section className="rounded-2xl border border-emerald-200/80 bg-emerald-50/90 p-4 dark:border-emerald-400/30 dark:bg-emerald-500/10">
          <p className="text-[11px] font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-200">
            {t("homework.check.correct")}
          </p>
          <ul className="mt-2 list-inside list-disc space-y-1 text-[14px] leading-relaxed text-emerald-900 dark:text-emerald-100">
            {record.correct.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </section>
      ) : null}

      {record.wrong.length > 0 ? (
        <section className="rounded-2xl border border-rose-200/80 bg-rose-50/90 p-4 dark:border-rose-400/30 dark:bg-rose-500/10">
          <p className="text-[11px] font-semibold uppercase tracking-wide text-rose-800 dark:text-rose-200">
            {t("homework.check.wrong")}
          </p>
          <ul className="mt-2 space-y-3">
            {record.wrong.map((entry, index) => (
              <li key={index} className="space-y-0.5 text-[14px] leading-relaxed text-rose-900 dark:text-rose-100">
                <p className="whitespace-pre-wrap break-words font-semibold">{entry.issue}</p>
                <p className="whitespace-pre-wrap break-words">{entry.why}</p>
                {entry.fix ? (
                  <p className="whitespace-pre-wrap break-words">
                    <span className="font-bold">{t("homework.check.fix")}: </span>
                    {entry.fix}
                  </p>
                ) : null}
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      <article className="card space-y-3 p-4 sm:p-5">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
          {t("homework.check.corrected")}
        </p>
        <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">{corrected}</p>
        <div className="flex flex-wrap items-center gap-2">
          <CopyButton text={corrected} />
          <FollowUpBar
            text={corrected}
            context={record.sourceText}
            onReplace={setCorrected}
            onRestore={() => setCorrected(record.corrected)}
            canRestore={corrected !== record.corrected}
          />
        </div>
      </article>

      <div className="flex flex-wrap items-start gap-2">
        <AskButton
          seed={{
            label: record.title,
            text: [
              `${t("chat.seedAssignment")}:`,
              record.sourceText,
              "",
              `${t("chat.seedAttempt")}:`,
              record.attempt ?? "",
              "",
              `${t("chat.seedVerdict")}:`,
              record.verdict,
              ...(record.wrong.length > 0
                ? ["", `${t("chat.seedToFix")}:`, ...record.wrong.map((entry) => `- ${entry.issue}: ${entry.why} → ${entry.fix}`)]
                : []),
              "",
              `${t("chat.seedCorrected")}:`,
              corrected,
            ].join("\n"),
          }}
        />
        <Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
          {t("homework.followup.redo")}
        </Button>
        <Button variant="secondary" className="touch-target" onClick={onToDeck}>
          {t("homework.toDeck")}
        </Button>
        <Button variant="ghost" className="touch-target" onClick={onNew}>
          {t("homework.result.new")}
        </Button>
      </div>
      <p className="text-[11.5px] text-[var(--text-subtle)]">{t("homework.toDeckNote")}</p>

      <div className="flex justify-end">
        <ReportQuestionButton
          deckId={record.id}
          deckTitle={record.title}
          activity={homeworkReportActivity({ id: record.id, title: record.title, answer: corrected })}
          labelKey="homework.report"
        />
      </div>
    </div>
  );
}