"use client";

import { useEffect, useRef, useState } from "react";
import { NOTE_LIMIT, type NoteEntry } from "@/lib/note-types";

// A generous note, on anything.
//
// GENEROUS IS THE POINT. This is a textarea with an 8000-character budget, not
// a one-line "why" field -- the verdict chip already has one of those, and its
// terseness is exactly why the reasoning kept ending up in chat instead. What
// gets written here is meant to survive being handed to somebody else cold.
//
// Collapsed until there is something to show or somebody asks for it, because a
// page with fifteen open textareas on it is unreadable.

type Props = {
  /** Where to POST. One of these two shapes. */
  song?: string;
  target?: string;
  set?: string;
  hook?: string;
  initial: NoteEntry | null;
  label?: string;
  /** Start open, for the one place per page that is the obvious one to write in. */
  open?: boolean;
  rows?: number;
};

export default function NoteField({
  song,
  target,
  set,
  hook,
  initial,
  label = "note",
  open = false,
  rows = 4,
}: Props) {
  const [entry, setEntry] = useState<NoteEntry | null>(initial);
  const [draft, setDraft] = useState(initial?.note ?? "");
  const [editing, setEditing] = useState(open);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [ready, setReady] = useState(false);
  const ta = useRef<HTMLTextAreaElement>(null);

  useEffect(() => setReady(true), []);
  useEffect(() => {
    setEntry(initial);
    setDraft(initial?.note ?? "");
  }, [initial]);

  const dirty = draft !== (entry?.note ?? "");

  const save = async () => {
    setSaving(true);
    setError(null);
    try {
      const res = await fetch("/api/browse/notes", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(set ? { set, hook, note: draft } : { song, target, note: draft }),
        cache: "no-store",
      });
      const j = await res.json();
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      const next = draft.trim() ? { note: draft.replace(/\s+$/, ""), at: new Date().toISOString() } : null;
      setEntry(next);
      if (!next) setDraft("");
      setEditing(false);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setSaving(false);
    }
  };

  if (!editing) {
    return (
      <button
        type="button"
        disabled={!ready}
        data-note-for={target ?? `${set}:${hook}`}
        data-has-note={entry ? "1" : "0"}
        onClick={() => {
          setEditing(true);
          requestAnimationFrame(() => ta.current?.focus());
        }}
        className="block w-full text-left text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-40"
      >
        {entry ? (
          <span className="block whitespace-pre-wrap border-l-2 border-[var(--color-line)] pl-2">
            {entry.note}
          </span>
        ) : (
          <span>+ {label}</span>
        )}
      </button>
    );
  }

  return (
    <div className="space-y-1" data-note-for={target ?? `${set}:${hook}`}>
      <textarea
        ref={ta}
        rows={rows}
        value={draft}
        maxLength={NOTE_LIMIT}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={(e) => {
          // Ctrl/Cmd+Enter saves; plain Enter is a NEWLINE, because these are
          // meant to be paragraphs.
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            void save();
          }
          if (e.key === "Escape") {
            setDraft(entry?.note ?? "");
            setEditing(false);
          }
        }}
        placeholder={`${label} — what you tried, what was wrong with it, what to do next`}
        className="w-full rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-2 py-1 text-[12px] leading-relaxed text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
      />
      <div className="flex items-center gap-2">
        <button
          type="button"
          disabled={saving || !dirty}
          onClick={save}
          className="rounded border border-[var(--color-sel)] px-2 py-0.5 text-[11px] text-[var(--color-sel)] disabled:opacity-40"
        >
          save
        </button>
        <button
          type="button"
          onClick={() => {
            setDraft(entry?.note ?? "");
            setEditing(false);
          }}
          className="text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
        >
          cancel
        </button>
        <span className="num ml-auto text-[10px] text-[var(--color-dim)]">
          {draft.length}/{NOTE_LIMIT} · <kbd>⌘⏎</kbd>
        </span>
      </div>
      {error && <p className="text-[11px] text-[var(--color-bad)]">{error}</p>}
    </div>
  );
}