"use client";

import { useMemo } from "react";

import { NotesIcon } from "@/components/icons";
import { useI18n } from "@/lib/i18n";
import { highlightSegments, notesSource } from "@/lib/notes-source";
import type { Activity } from "@/lib/schemas";

import { useNoHints, useNotesText } from "./context";

/**
 * "From your notes": the passage an activity's answer comes from, with the
 * matching words highlighted green.
 *
 * The quote is the one the generator stored with the activity (verbatim from
 * the notes); decks made before that, or quotes the model trimmed, fall back
 * to a local, IDF-weighted sentence match over the same notes text. It sits
 * inside the feedback panel, so it only appears once the learner has answered,
 * and it disappears in exam mode with the other reveals.
 */
export function NotesSource({ activity }: { activity: Activity }) {
  const { t } = useI18n();
  const notes = useNotesText();
  const noHints = useNoHints();
  const match = useMemo(() => (noHints ? null : notesSource(notes, activity)), [noHints, notes, activity]);
  if (!match) return null;
  const pieces = highlightSegments(match.text, match.spans);
  return (
    <div className="mt-3 rounded-[var(--radius-control)] border border-[var(--glass-border)] bg-[var(--surface-strong)] p-3">
      <p className="mb-1 flex items-center gap-1.5 text-[10.5px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
        <NotesIcon className="size-3.5" />
        {t("activity.source")}
      </p>
      <p
        className="text-[13px] leading-relaxed text-[var(--text)]"
        data-notes-source
        data-notes-quote={match.quote ? "1" : "0"}
      >
        {pieces.map((piece, index) =>
          piece.hit ? (
            <mark
              key={index}
              className="rounded bg-emerald-200/85 px-0.5 text-emerald-950 dark:bg-emerald-400/35 dark:text-emerald-50"
            >
              {piece.text}
            </mark>
          ) : (
            <span key={index}>{piece.text}</span>
          ),
        )}
      </p>
    </div>
  );
}