"use client";

import { useState } from "react";

import { Button } from "@/components/ui";
import { AskButton } from "@/components/chat/AskButton";
import { useI18n } from "@/lib/i18n";
import type { HomeworkMakeRecord } from "@/lib/schemas";
import { shareHomework } from "@/lib/share";

import { ReportQuestionButton } from "@/components/ReportQuestionButton";
import { homeworkReportActivity } from "@/lib/question-reports";

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

/** Mode 1 result: the finished homework, nothing else. */
export function HomeworkResult({
  record,
  onAgain,
  onNew,
  onToDeck,
  againLoading,
}: {
  record: HomeworkMakeRecord;
  onAgain: () => void;
  onNew: () => void;
  onToDeck: () => void;
  againLoading: boolean;
}) {
  const { t } = useI18n();
  const [answer, setAnswer] = useState(record.answer);

  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.result.title")}
        </p>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] text-balance">
          {record.title}
        </h1>
      </header>

      <article className="card space-y-3 p-4 sm:p-5">
        <p className="whitespace-pre-wrap break-words text-[15px] leading-relaxed text-[var(--text)]">{answer}</p>
        <FollowUpBar
          text={answer}
          context={record.sourceText}
          onReplace={setAnswer}
          onRestore={() => setAnswer(record.answer)}
          canRestore={answer !== record.answer}
        />
      </article>

      <div className="flex flex-wrap items-start gap-2">
        <CopyButton text={answer} />
        <Button variant="secondary" className="touch-target" onClick={() => void shareHomework({ ...record, answer })}>
          {t("deck.share")}
        </Button>
        <AskButton
          seed={{
            label: record.title,
            text: [
              `${t("chat.seedAssignment")}:`,
              record.sourceText,
              "",
              `${t("chat.seedAnswer")}:`,
              answer,
            ].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>

      {/* Same report control as the study feeds and the guide, under the
          result (the homework record is the "deck" here). */}
      <div className="flex justify-end">
        <ReportQuestionButton
          deckId={record.id}
          deckTitle={record.title}
          activity={homeworkReportActivity({ id: record.id, title: record.title, answer })}
          labelKey="homework.report"
        />
      </div>
    </div>
  );
}