import { useMemo } from "react";
import type { GalleryItem, HCCCandidate, MEATEvidence } from "../lib/types";
import { cn } from "../lib/cn";

interface Props {
  noteText: string;
  onChange: (text: string) => void;
  gallery: GalleryItem[];
  onPickGalleryItem: (item: GalleryItem) => void;
  onCode: () => void;
  loading: boolean;
  selectedCandidate: HCCCandidate | null;
}

export function NotePanel(props: Props) {
  const { noteText, onChange, gallery, onPickGalleryItem, onCode, loading, selectedCandidate } =
    props;

  const highlights = useMemo(() => buildHighlights(selectedCandidate, noteText), [
    selectedCandidate,
    noteText,
  ]);

  return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div className="flex items-center justify-between border-b border-slate-200 px-3 py-2 dark:border-slate-800">
        <h2 className="text-sm font-medium text-slate-900 dark:text-slate-100">Clinical note</h2>
        <div className="flex items-center gap-2">
          <GalleryDropdown gallery={gallery} onPick={onPickGalleryItem} />
          <button
            onClick={onCode}
            disabled={loading}
            className={cn(
              "rounded px-3 py-1 text-sm text-white",
              loading
                ? "bg-slate-400 dark:bg-slate-600"
                : "bg-indigo-600 hover:bg-indigo-700",
            )}
          >
            {loading ? "Coding…" : "Code note"}
          </button>
        </div>
      </div>

      <div className="grid flex-1 grid-cols-1 gap-2 overflow-hidden p-3 lg:grid-cols-2">
        <textarea
          value={noteText}
          onChange={(e) => onChange(e.target.value)}
          className="h-full min-h-[320px] w-full resize-none rounded border border-slate-200 bg-slate-50 p-2 font-mono text-xs leading-relaxed text-slate-900 outline-indigo-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-100"
          spellCheck={false}
        />
        <div className="note-preview h-full overflow-auto whitespace-pre-wrap rounded border border-slate-200 bg-white p-2 font-mono text-xs leading-relaxed text-slate-800 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200">
          {highlights}
        </div>
      </div>
    </div>
  );
}

function buildHighlights(
  candidate: HCCCandidate | null,
  text: string,
): React.ReactNode {
  if (!candidate)
    return <span className="text-slate-400 dark:text-slate-500">Preview</span>;
  const spans: { start: number; end: number; cat: string; ev: MEATEvidence }[] = [];
  for (const ev of candidate.meat_evidence) {
    if (!ev.verified) continue;
    spans.push({ start: ev.start, end: ev.end, cat: ev.category, ev });
  }
  spans.sort((a, b) => a.start - b.start);

  const out: React.ReactNode[] = [];
  let cursor = 0;
  spans.forEach((s, i) => {
    if (s.start < cursor) return; // overlap; skip
    if (s.start > cursor)
      out.push(<span key={`t-${i}-${cursor}`}>{text.slice(cursor, s.start)}</span>);
    out.push(
      <span
        key={`h-${i}`}
        className="meat-highlight"
        data-cat={s.cat}
        title={`${s.cat} (conf ${s.ev.extractor_confidence.toFixed(2)})`}
      >
        {text.slice(s.start, s.end)}
      </span>,
    );
    cursor = s.end;
  });
  if (cursor < text.length) out.push(<span key={`t-end-${cursor}`}>{text.slice(cursor)}</span>);
  return <>{out}</>;
}

function GalleryDropdown({
  gallery,
  onPick,
}: {
  gallery: GalleryItem[];
  onPick: (i: GalleryItem) => void;
}) {
  if (!gallery.length)
    return <span className="text-xs text-slate-400 dark:text-slate-500">(gallery loading…)</span>;
  return (
    <select
      className="rounded border border-slate-200 bg-white px-2 py-1 text-sm text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
      defaultValue=""
      onChange={(e) => {
        const pick = gallery.find((g) => g.case_id === e.target.value);
        if (pick) onPick(pick);
      }}
    >
      <option value="" disabled>
        Load example…
      </option>
      {gallery.map((g) => (
        <option key={g.case_id} value={g.case_id}>
          {g.name}
        </option>
      ))}
    </select>
  );
}