"use client";

import { useState } from "react";
import { badgeVariants } from "@/components/ui/badge";
import type { Anchor, Note } from "@/lib/annotations/types";
import type { UseNotes } from "@/lib/annotations/useNotes";
import { NoteComposer, NoteThread } from "./NoteThread";

// The notes on one THING: a timeline row (`entry`), a take (`take`). A count
// of the open ones, folded; unfolded, every note on it and a box for another.

type Pin = { kind: "entry"; entry: string } | { kind: "take"; take: string };

export const notesOn = (notes: Note[], pin: Pin) =>
  notes.filter((n) => {
    const a = n.anchor as Anchor;
    if (pin.kind === "entry") {
      return (a.kind === "entry" && a.entry === pin.entry) || (a.kind === "edit" && a.entry === pin.entry);
    }
    return (a.kind === "take" && a.take === pin.take) || (a.kind === "moment" && a.take === pin.take);
  });

export default function AnchoredNotes({
  notes,
  pin,
  startOpen = false,
  label = "notes",
}: {
  notes: UseNotes;
  pin: Pin;
  startOpen?: boolean;
  label?: string;
}) {
  const [open, setOpen] = useState(startOpen);
  const mine = notesOn(notes.notes, pin).filter((n) => n.anchor.kind !== "moment");
  const openCount = mine.filter((n) => n.status === "open").length;
  const key = pin.kind === "entry" ? pin.entry : pin.take;
  return (
    <div data-anchored-notes={key} data-open-notes={openCount} className="text-[11px]">
      <button
        type="button"
        data-action="toggle-notes"
        onClick={() => setOpen((o) => !o)}
        className={openCount ? badgeVariants({ variant: "open", size: "sm" }) : "text-[var(--color-sel)] hover:underline"}
      >
        {openCount ? `${openCount} open ${openCount === 1 ? "note" : "notes"}` : mine.length ? `${label} (${mine.length})` : `+ ${label.replace(/s$/, "")}`}
      </button>
      {open && (
        <div className="mt-1 space-y-1 rounded bg-[var(--color-panel-2)] p-2">
          {mine.map((n) => (
            <NoteThread
              key={n.id}
              note={n}
              write={notes.write}
              busy={notes.busy}
              head={
                n.anchor.kind === "edit" ? (
                  <span className={badgeVariants({ variant: "info", size: "sm" })}>edit · {n.anchor.field}</span>
                ) : null
              }
            />
          ))}
          <NoteComposer
            busy={notes.busy}
            placeholder={pin.kind === "entry" ? `a note on ${key}` : `a note on this take`}
            testId={`note-input-${key}`}
            onAdd={(text) => void notes.write({ op: "add", text, anchor: pin })}
          />
          {notes.error && <div className="text-[var(--color-bad)]">{notes.error}</div>}
        </div>
      )}
    </div>
  );
}