"use client";

import { useEffect, useRef, useState } from "react";
import { NOTE_TEXT_LIMIT } from "@/lib/annotations/types";
import type { Anchor, Note, NoteOp } from "@/lib/annotations/types";
import { fmtAgo } from "@/lib/format";

// A note in the rail, and the box that writes one. Shared by the article
// reader and the evidence walk.

export function anchorLabel(a: Anchor, titles: Record<string, string>, cites: Record<string, number | undefined>): string {
  const sec = (id: string) => titles[id] ?? id;
  switch (a.kind) {
    case "text":
      return `${sec(a.section)} · “${a.quote.length > 60 ? `${a.quote.slice(0, 59)}…` : a.quote}”`;
    case "section":
      return `section · ${sec(a.section)}`;
    case "cite":
      return `citation [${cites[a.cite] ?? a.cite}]`;
    case "whole":
      return "whole article";
    case "moment":
      return `${a.file} @ ${a.t.toFixed(1)}s`;
    default:
      return a.kind;
  }
}

export function Composer({
  label,
  initial = "",
  busy,
  onSave,
  onCancel,
  saveLabel = "save note",
}: {
  label: string;
  initial?: string;
  busy?: boolean;
  onSave: (text: string) => void | Promise<void>;
  onCancel: () => void;
  saveLabel?: string;
}) {
  const [text, setText] = useState(initial);
  const ref = useRef<HTMLTextAreaElement>(null);
  useEffect(() => ref.current?.focus(), []);
  const save = () => {
    if (text.trim()) void onSave(text);
  };
  return (
    <div data-composer className="space-y-1 rounded border border-[var(--color-sel)] bg-[var(--color-panel)] p-2">
      <div className="micro truncate" title={label}>
        {label}
      </div>
      <textarea
        ref={ref}
        aria-label="note text"
        value={text}
        maxLength={NOTE_TEXT_LIMIT}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            save();
          } else if (e.key === "Escape") {
            e.preventDefault();
            onCancel();
          }
        }}
        rows={4}
        className="w-full resize-y rounded border border-[var(--color-line)] bg-[var(--color-ink)] p-1.5 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
      />
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={save}
          disabled={busy || !text.trim()}
          className="rounded bg-[var(--color-sel)] px-2 py-0.5 text-[12px] text-[var(--color-ink)] disabled:opacity-40"
        >
          {saveLabel}
        </button>
        <button type="button" onClick={onCancel} className="text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)]">
          cancel
        </button>
        <span className="micro ml-auto">ctrl+enter</span>
      </div>
    </div>
  );
}

const STATUS_TONE: Record<Note["status"], string> = {
  open: "text-[var(--color-dirty)] border-[var(--color-dirty)]",
  resolved: "text-[var(--color-good)] border-[var(--color-good)]",
  wontfix: "text-[var(--color-dim)] border-[var(--color-line)]",
};

export function NoteCard({
  note,
  label,
  orphaned,
  selected,
  editing,
  busy,
  onSelect,
  onHover,
  onEdit,
  onCancelEdit,
  write,
}: {
  note: Note;
  label: string;
  orphaned?: boolean;
  selected?: boolean;
  editing?: boolean;
  busy?: boolean;
  onSelect?: () => void;
  onHover?: (on: boolean) => void;
  onEdit?: () => void;
  onCancelEdit?: () => void;
  write: (op: NoteOp) => Promise<unknown>;
}) {
  const [replying, setReplying] = useState(false);
  const mine = note.author === "operator";
  return (
    <li
      data-note-card={note.id}
      data-status={note.status}
      data-orphaned={orphaned ? "true" : undefined}
      aria-current={selected ? "true" : undefined}
      onMouseEnter={() => onHover?.(true)}
      onMouseLeave={() => onHover?.(false)}
      onClick={onSelect}
      className={`cursor-default space-y-1 rounded border bg-[var(--color-panel)] p-2 text-[12px] ${selected ? "border-[var(--color-sel)]" : "border-[var(--color-line)]"}`}
    >
      <div className="flex items-center gap-1.5">
        <span className={`rounded border px-1 font-mono text-[10px] uppercase ${STATUS_TONE[note.status]}`}>{note.status}</span>
        {note.author === "agent" && <span className="rounded border border-[var(--color-meter)] px-1 font-mono text-[10px] text-[var(--color-meter)]">agent</span>}
        {orphaned && (
          <span title="the quoted text is no longer in the article" className="rounded border border-[var(--color-bad)] px-1 font-mono text-[10px] text-[var(--color-bad)]">
            orphaned
          </span>
        )}
        <span className="num ml-auto text-[10px] text-[var(--color-dim)]" title={note.updatedAt}>
          {fmtAgo(Date.parse(note.updatedAt))}
        </span>
      </div>
      <div className="truncate text-[11px] text-[var(--color-dim)]" title={label}>
        {label}
      </div>
      {editing ? (
        <Composer
          label="edit note"
          initial={note.text}
          busy={busy}
          saveLabel="save"
          onSave={async (text) => {
            await write({ op: "edit", id: note.id, text });
            onCancelEdit?.();
          }}
          onCancel={() => onCancelEdit?.()}
        />
      ) : (
        <p data-note-text className="whitespace-pre-wrap text-[var(--color-text)]">
          {note.text}
        </p>
      )}
      {note.replies.length > 0 && (
        <ul className="space-y-1 border-l border-[var(--color-line)] pl-2">
          {note.replies.map((r, i) => (
            <li key={`${r.at}-${i}`} data-reply={r.author} className="text-[12px]">
              <span className={`mr-1 font-mono text-[10px] ${r.author === "agent" ? "text-[var(--color-meter)]" : "text-[var(--color-dim)]"}`}>{r.author}</span>
              <span className="whitespace-pre-wrap text-[var(--color-text)]">{r.text}</span>
            </li>
          ))}
        </ul>
      )}
      {replying ? (
        <Composer
          label="reply"
          busy={busy}
          saveLabel="reply"
          onSave={async (text) => {
            await write({ op: "reply", id: note.id, text });
            setReplying(false);
          }}
          onCancel={() => setReplying(false)}
        />
      ) : (
        <div className="flex flex-wrap gap-2 pt-0.5 text-[11px]">
          {note.status === "open" ? (
            <>
              <Act onClick={() => write({ op: "status", id: note.id, status: "resolved" })} disabled={busy}>
                resolve
              </Act>
              <Act onClick={() => write({ op: "status", id: note.id, status: "wontfix" })} disabled={busy}>
                won’t fix
              </Act>
            </>
          ) : (
            <Act onClick={() => write({ op: "status", id: note.id, status: "open" })} disabled={busy}>
              reopen
            </Act>
          )}
          <Act onClick={() => setReplying(true)} disabled={busy}>
            reply
          </Act>
          {mine && onEdit && (
            <Act onClick={onEdit} disabled={busy}>
              edit
            </Act>
          )}
          <Act
            onClick={() => {
              if (window.confirm("Delete this note?")) void write({ op: "delete", id: note.id });
            }}
            disabled={busy}
          >
            delete
          </Act>
        </div>
      )}
    </li>
  );
}

function Act({ onClick, disabled, children }: { onClick: () => void; disabled?: boolean; children: React.ReactNode }) {
  return (
    <button
      type="button"
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      disabled={disabled}
      className="text-[var(--color-dim)] hover:text-[var(--color-sel)] disabled:opacity-40"
    >
      {children}
    </button>
  );
}