"use client";

import { useState } from "react";
import { badgeVariants } from "@/components/ui/badge";
import type { Note, NoteOp } from "@/lib/annotations/types";

// One note: its text, who wrote it, its status, the replies, and what can be
// done to it. Shared by the timed notes, the row notes and the take notes.

const STATUS_TONE = { open: "open", resolved: "info", wontfix: "info" } as const;

export function NoteThread({
  note,
  write,
  busy,
  head,
}: {
  note: Note;
  write: (op: NoteOp) => Promise<unknown>;
  busy: boolean;
  /** What the note is on, drawn before its text (a timestamp, an entry id). */
  head?: React.ReactNode;
}) {
  const [reply, setReply] = useState<string | null>(null);
  const open = note.status === "open";
  return (
    <div
      data-note-id={note.id}
      data-note-status={note.status}
      className={`space-y-0.5 text-[12px] ${open ? "" : "opacity-60"}`}
    >
      <div className="flex flex-wrap items-baseline gap-1.5">
        {head}
        {note.author === "agent" && <span className={badgeVariants({ variant: "meter", size: "sm" })}>agent</span>}
        {!open && <span className={badgeVariants({ variant: STATUS_TONE[note.status], size: "sm" })}>{note.status}</span>}
        <span className="flex-1 whitespace-pre-wrap text-[var(--color-text)]">{note.text}</span>
        <span className="flex gap-1.5 text-[10px]">
          {open ? (
            <>
              <button type="button" data-note-action="resolve" disabled={busy} onClick={() => void write({ op: "status", id: note.id, status: "resolved" })} className="text-[var(--color-good)] hover:underline disabled:opacity-40">
                resolve
              </button>
              <button type="button" data-note-action="wontfix" disabled={busy} onClick={() => void write({ op: "status", id: note.id, status: "wontfix" })} className="text-[var(--color-dim)] hover:underline disabled:opacity-40">
                won&rsquo;t fix
              </button>
            </>
          ) : (
            <button type="button" data-note-action="reopen" disabled={busy} onClick={() => void write({ op: "status", id: note.id, status: "open" })} className="text-[var(--color-sel)] hover:underline disabled:opacity-40">
              reopen
            </button>
          )}
          <button type="button" data-note-action="reply" disabled={busy} onClick={() => setReply((r) => (r === null ? "" : null))} className="text-[var(--color-sel)] hover:underline disabled:opacity-40">
            reply
          </button>
          {note.author === "operator" && (
            <button type="button" data-note-action="delete" disabled={busy} onClick={() => void write({ op: "delete", id: note.id })} className="text-[var(--color-dim)] hover:text-[var(--color-bad)] disabled:opacity-40">
              delete
            </button>
          )}
        </span>
      </div>
      {note.replies.map((r, i) => (
        <div key={i} data-note-reply={i} className="ml-4 flex flex-wrap items-baseline gap-1.5 text-[11px]">
          {r.author === "agent" && <span className={badgeVariants({ variant: "meter", size: "sm" })}>agent</span>}
          <span className="whitespace-pre-wrap text-[var(--color-dim)]">{r.text}</span>
        </div>
      ))}
      {reply !== null && (
        <input
          autoFocus
          value={reply}
          data-note-reply-input=""
          onChange={(e) => setReply(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && reply.trim()) {
              void write({ op: "reply", id: note.id, text: reply });
              setReply(null);
            }
            if (e.key === "Escape") setReply(null);
          }}
          placeholder="reply — Enter to send"
          className="ml-4 w-[calc(100%-1rem)] rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-0.5 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
        />
      )}
    </div>
  );
}

/** A one-line composer: Enter adds, Escape cancels. */
export function NoteComposer({
  onAdd,
  onCancel,
  busy,
  placeholder,
  head,
  testId,
}: {
  onAdd: (text: string) => void;
  onCancel?: () => void;
  busy: boolean;
  placeholder: string;
  head?: React.ReactNode;
  testId?: string;
}) {
  const [text, setText] = useState("");
  const add = () => {
    if (!text.trim()) return;
    onAdd(text);
    setText("");
  };
  return (
    <div className="flex flex-wrap items-center gap-2">
      {head}
      <input
        autoFocus
        value={text}
        data-testid={testId}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") add();
          if (e.key === "Escape") onCancel?.();
        }}
        placeholder={placeholder}
        className="min-w-[14rem] flex-1 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-0.5 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
      />
      <button
        type="button"
        disabled={busy || !text.trim()}
        onClick={add}
        className="rounded border border-[var(--color-good)] px-2 py-0.5 text-[11px] text-[var(--color-good)] disabled:opacity-40"
      >
        add
      </button>
    </div>
  );
}