"use client";

import { useMemo, useState } from "react";
import Link from "next/link";

import { AiDisclaimer } from "@/components/AiDisclaimer";
import { Button, Spinner } from "@/components/ui";
import { RefreshIcon, SparklesIcon } from "@/components/icons";
import { ApiError, generateDeck } from "@/lib/client-api";
import { deckHasNotes, generatedDeckText } from "@/lib/chat-context";
import { materialiseActivities, activityTypes } from "@/lib/deck-ops";
import { scheduleForReview } from "@/lib/history";
import { useI18n } from "@/lib/i18n";
import type { Deck, TeachCardRef, TeachDifficulty, TeachSummary } from "@/lib/schemas";
import { upsertDeck } from "@/lib/storage";
import { gapCardFrom, gapFocus } from "@/lib/teach";
import { showToast } from "@/lib/toast";
import { cn } from "@/lib/utils";

type ProposedCard = { id: string; front: string; back: string; include: boolean };

/**
 * The recap of a Teach it back session: what was explained well, what was
 * missed or unclear (linked to the user's own cards when one covers it), and
 * the next steps — plus the two follow-ups the recap feeds: putting the missed
 * cards on the review schedule, and turning the gaps into new flashcards
 * (generated from the deck's own notes, editable before saving).
 */
export function TeachRecap({
  topic,
  difficulty,
  cards,
  decks,
  summary,
  busy,
  error,
  onRetry,
  onBackToSession,
}: {
  topic: string;
  difficulty: TeachDifficulty;
  cards: TeachCardRef[];
  decks: Deck[];
  summary: TeachSummary | null;
  busy: boolean;
  error: string | null;
  onRetry: () => void;
  onBackToSession: () => void;
}) {
  const { t, plural } = useI18n();

  /* Cards the recap linked a gap to — the ones "add to review" schedules. */
  const linked = useMemo(() => {
    const refs = new Set((summary?.gaps ?? []).map((gap) => gap.ref).filter((ref): ref is number => ref != null));
    return cards.filter((card) => refs.has(card.ref));
  }, [summary, cards]);

  const addToReview = () => {
    const byDeck = new Map<string, string[]>();
    for (const card of linked) {
      const list = byDeck.get(card.deckId) ?? [];
      list.push(card.activityId);
      byDeck.set(card.deckId, list);
    }
    let count = 0;
    for (const [deckId, activityIds] of byDeck) count += scheduleForReview(deckId, activityIds);
    showToast({ message: count > 0 ? plural(count, "teach.reviewAdded") : t("teach.gapsEmpty") });
  };

  const defaultDeckId = linked[0]?.deckId ?? cards[0]?.deckId ?? decks[0]?.id ?? "";

  return (
    <div className="chat-scroll relative min-h-0 flex-1 overflow-y-auto overscroll-contain">
      <div className="mx-auto w-full max-w-3xl space-y-4 px-4 py-4 lg:px-0 lg:py-6" data-testid="teach-recap">
        <p className="px-1 text-[12.5px] text-[var(--text-subtle)]">
          {topic} · {difficulty === "friendly" ? t("teach.friendly") : t("teach.skeptical")}
        </p>

        {busy ? (
          <section className="card flex items-center gap-3 p-5" role="status">
            <Spinner className="size-5 text-accent-600 dark:text-accent-200" />
            <span className="text-[13.5px] text-[var(--text-muted)]">{t("teach.summaryBusy")}</span>
          </section>
        ) : null}

        {!busy && error ? (
          <section className="card space-y-3 p-5">
            <p className="text-[13.5px] leading-relaxed text-rose-700 dark:text-rose-300">{error}</p>
            <div className="flex flex-wrap gap-2">
              <Button size="sm" variant="secondary" onClick={onRetry}>
                <RefreshIcon className="size-4" /> {t("teach.retry")}
              </Button>
              <Button size="sm" variant="ghost" onClick={onBackToSession}>
                {t("teach.back")}
              </Button>
            </div>
          </section>
        ) : null}

        {!busy && summary ? (
          <>
            <section className="card space-y-5 p-4 sm:p-5">
              <RecapList
                title={t("teach.well")}
                tone="good"
                items={summary.well}
                empty={t("teach.wellEmpty")}
              />
              <div>
                <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
                  {t("teach.gaps")}
                </h3>
                {summary.gaps.length === 0 ? (
                  <p className="text-[13.5px] text-[var(--text-muted)]">{t("teach.gapsEmpty")}</p>
                ) : (
                  <ul className="space-y-2.5">
                    {summary.gaps.map((gap, index) => {
                      const card = gap.ref != null ? cards.find((entry) => entry.ref === gap.ref) : undefined;
                      return (
                        <li key={index} className="text-[13.5px] leading-relaxed text-[var(--text)]">
                          <span>{gap.what}</span>
                          {card ? (
                            <Link
                              href={`/deck/${card.deckId}`}
                              title={t("teach.cardLinkTitle", { deck: card.deckTitle })}
                              className="mt-1 flex w-fit max-w-full items-center gap-1.5 truncate rounded-[var(--radius-chip)] border border-[var(--glass-border)] bg-[var(--surface-strong)] px-2 py-1 text-[11.5px] text-[var(--text-muted)] transition hover:text-[var(--text)]"
                            >
                              <span className="shrink-0 font-semibold">{card.deckTitle}</span>
                              <span className="truncate opacity-80">{card.label}</span>
                            </Link>
                          ) : null}
                        </li>
                      );
                    })}
                  </ul>
                )}
              </div>
              <RecapList title={t("teach.next")} tone="next" items={summary.next} empty={t("teach.wellEmpty")} />
            </section>

            <section className="flex flex-wrap gap-2">
              {linked.length > 0 ? (
                <Button variant="secondary" className="touch-target" onClick={addToReview} data-testid="teach-review">
                  <RefreshIcon className="size-4" /> {t("teach.addToReview")}
                </Button>
              ) : null}
              {summary.gaps.length > 0 ? (
                <GapCards topic={topic} gaps={summary.gaps} decks={decks} defaultDeckId={defaultDeckId} />
              ) : null}
            </section>
          </>
        ) : null}
      </div>
    </div>
  );
}

function RecapList({ title, tone, items, empty }: { title: string; tone: "good" | "next"; items: string[]; empty: string }) {
  return (
    <div>
      <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">{title}</h3>
      {items.length === 0 ? (
        <p className="text-[13.5px] text-[var(--text-muted)]">{empty}</p>
      ) : (
        <ul className="space-y-1.5">
          {items.map((item, index) => (
            <li key={index} className="flex gap-2 text-[13.5px] leading-relaxed text-[var(--text)]">
              <span aria-hidden className={cn("mt-[7px] size-1.5 shrink-0 rounded-full", tone === "good" ? "bg-emerald-500" : "bg-accent-500")} />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/**
 * "Turn gaps into cards": one flashcard per gap, generated from the chosen
 * deck's own notes, reviewed and edited here before anything is saved.
 */
function GapCards({
  topic,
  gaps,
  decks,
  defaultDeckId,
}: {
  topic: string;
  gaps: { what: string }[];
  decks: Deck[];
  defaultDeckId: string;
}) {
  const { t, plural } = useI18n();
  const [open, setOpen] = useState(false);
  const [deckId, setDeckId] = useState(defaultDeckId);
  const [generating, setGenerating] = useState(false);
  const [generateError, setGenerateError] = useState<string | null>(null);
  const [proposed, setProposed] = useState<ProposedCard[] | null>(null);
  const [savedCount, setSavedCount] = useState<number | null>(null);

  const deck = decks.find((entry) => entry.id === deckId);
  const chosen = (proposed ?? []).filter((card) => card.include && card.front.trim() && card.back.trim());

  const patch = (id: string, change: Partial<ProposedCard>) =>
    setProposed((current) => current?.map((card) => (card.id === id ? { ...card, ...change } : card)) ?? null);

  const generate = async () => {
    if (!deck || generating) return;
    setGenerating(true);
    setGenerateError(null);
    try {
      const { deck: generated } = await generateDeck({
        text: (deckHasNotes(deck) ? deck.sourceText : generatedDeckText(deck)).slice(0, 48_000),
        difficulty: deck.difficulty,
        count: Math.max(4, Math.min(8, gaps.length * 2)),
        focus: gapFocus(gaps),
        language: deck.language,
        mode: "more",
        existing: { title: deck.title, types: activityTypes(deck.activities), count: deck.activities.length },
      });
      const cards = generated.activities
        .map((activity, index) => {
          const pair = gapCardFrom(activity);
          return { id: `gap-${index}`, ...pair, include: true };
        })
        .filter((card) => card.front.length > 0 && card.back.length > 0);
      if (cards.length === 0) {
        setGenerateError(t("teach.generateFailed"));
        return;
      }
      setProposed(cards);
    } catch (caught) {
      setGenerateError(caught instanceof ApiError ? caught.message : t("teach.generateFailed"));
    } finally {
      setGenerating(false);
    }
  };

  const save = () => {
    if (!deck || chosen.length === 0) return;
    const activities = materialiseActivities(
      chosen.map((card) => ({
        type: "flashcard" as const,
        topic: topic.slice(0, 120) || undefined,
        front: card.front.trim().slice(0, 400),
        back: card.back.trim().slice(0, 1200),
        explanation: gaps[0]?.what.slice(0, 600) ?? t("teach.gapsToCards"),
      })),
      deck.difficulty,
    );
    upsertDeck({ ...deck, activities: [...deck.activities, ...activities], updatedAt: Date.now() });
    setProposed(null);
    setSavedCount(activities.length);
    showToast({ message: plural(activities.length, "teach.cardsSaved", { deck: deck.title }) });
  };

  if (!open) {
    return (
      <Button
        variant="secondary"
        className="touch-target"
        onClick={() => setOpen(true)}
        data-testid="teach-gap-cards"
      >
        <SparklesIcon className="size-4" /> {t("teach.gapsToCards")}
      </Button>
    );
  }

  return (
    <section className="card w-full space-y-3 p-4 sm:p-5" data-testid="teach-gap-panel">
      <h3 className="text-[13.5px] font-semibold text-[var(--text)]">{t("teach.gapsToCards")}</h3>

      {savedCount !== null ? (
        <p className="text-[13px] leading-relaxed text-emerald-700 dark:text-emerald-300">
          {plural(savedCount, "teach.cardsSaved", { deck: deck?.title ?? "" })}
        </p>
      ) : null}

      {!proposed ? (
        <>
          <label className="block">
            <span className="mb-1.5 block text-[12.5px] font-semibold text-[var(--text)]">{t("teach.gapDeck")}</span>
            <select
              value={deckId}
              onChange={(event) => setDeckId(event.target.value)}
              className="w-full rounded-[var(--radius-control)] border border-[var(--glass-border)] bg-[var(--surface-strong)] px-3 py-2.5 text-[16px] text-[var(--text)] outline-none focus:border-accent-400/60 sm:text-[13.5px]"
            >
              {decks.map((entry) => (
                <option key={entry.id} value={entry.id}>
                  {entry.title}
                </option>
              ))}
            </select>
          </label>
          {generateError ? (
            <p role="alert" className="text-[12.5px] leading-relaxed text-rose-700 dark:text-rose-300">
              {generateError}
            </p>
          ) : null}
          <div className="flex flex-wrap items-center gap-2">
            <Button size="sm" onClick={() => void generate()} loading={generating} disabled={generating || !deck}>
              {generating ? t("teach.generating") : t("teach.generate")}
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setOpen(false)}>
              {t("common.cancel")}
            </Button>
          </div>
          <AiDisclaimer />
        </>
      ) : (
        <>
          <h4 className="text-[12px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">{t("teach.reviewTitle")}</h4>
          <p className="text-[12px] leading-relaxed text-[var(--text-subtle)]">{t("teach.reviewHint")}</p>
          <ul className="space-y-2">
            {proposed.map((card) => (
              <li key={card.id} className="space-y-1.5 rounded-[var(--radius-control)] border border-[var(--glass-border)] bg-[var(--surface-strong)] p-2.5">
                <div className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={card.include}
                    onChange={(event) => patch(card.id, { include: event.target.checked })}
                    aria-label={t("teach.reviewTitle")}
                    className="size-4 accent-sky-500"
                  />
                  <span className="flex-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
                    {t("teach.cardFront")}
                  </span>
                </div>
                <input
                  value={card.front}
                  onChange={(event) => patch(card.id, { front: event.target.value })}
                  aria-label={t("teach.cardFront")}
                  maxLength={400}
                  className="w-full rounded-[var(--radius-chip)] border border-[var(--glass-border)] bg-[var(--surface)] px-2.5 py-2 text-[16px] text-[var(--text)] outline-none focus:border-accent-400/60 sm:text-[13px]"
                />
                <span className="block text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">{t("teach.cardBack")}</span>
                <textarea
                  value={card.back}
                  onChange={(event) => patch(card.id, { back: event.target.value })}
                  aria-label={t("teach.cardBack")}
                  rows={2}
                  maxLength={1200}
                  className="w-full resize-none rounded-[var(--radius-chip)] border border-[var(--glass-border)] bg-[var(--surface)] px-2.5 py-2 text-[16px] text-[var(--text)] outline-none focus:border-accent-400/60 sm:text-[13px]"
                />
              </li>
            ))}
          </ul>
          <div className="flex flex-wrap items-center gap-2">
            <Button size="sm" onClick={save} disabled={chosen.length === 0} data-testid="teach-save-cards">
              {plural(chosen.length, "teach.saveCards")}
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setProposed(null)}>
              {t("common.cancel")}
            </Button>
          </div>
        </>
      )}
    </section>
  );
}