"use client";

import { useState } from "react";

import { Button } from "@/components/ui";
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="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="font-semibold">{entry.issue}</p>
                <p>{entry.why}</p>
                {entry.fix ? (
                  <p>
                    <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">
        <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>
  );
}