"use client";

// The saved-chats library row — the /ask analogue of the search "profiles" row
// (WorkspaceSearchBar's ProfilesRow): a select of saved chats + text-link
// Save / Save as… / Rename / Delete actions and a warning dirty dot. The live
// "working" chat autosaves on its own; these actions manage NAMED copies, so a
// research session can be saved and resumed later (even a paused sweep). Uses the
// browser prompt/confirm, exactly like ProfilesRow.

export function SavedChatsRow({
  names,
  activeName,
  dirty,
  busy,
  onLoad,
  onSave,
  onSaveAs,
  onRename,
  onDelete,
}: {
  names: string[];
  activeName: string | null;
  dirty: boolean;
  busy: boolean;
  onLoad: (name: string) => void;
  onSave: () => void;
  onSaveAs: () => void;
  onRename: () => void;
  onDelete: () => void;
}) {
  // Nothing saved and nothing loaded → keep the header quiet (Save as… still
  // reachable via the composer area's New chat flow once there's content).
  const hasAny = names.length > 0 || activeName != null;
  if (!hasAny) {
    return (
      <div
        className="flex flex-wrap items-center gap-x-3 gap-y-1"
        data-testid="saved-chats-row"
      >
        <span className="text-xs uppercase tracking-wide text-muted-foreground">
          Saved chats
        </span>
        <button
          type="button"
          onClick={onSaveAs}
          disabled={busy}
          className="inline-flex min-h-9 items-center text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
        >
          Save as…
        </button>
      </div>
    );
  }

  return (
    <div
      className="flex flex-wrap items-center gap-x-3 gap-y-1"
      data-testid="saved-chats-row"
    >
      <span className="text-xs uppercase tracking-wide text-muted-foreground">
        Saved chats
      </span>
      <select
        value={activeName ?? ""}
        onChange={(e) => e.target.value && onLoad(e.target.value)}
        data-testid="saved-chat-select"
        className="min-h-9 rounded border border-border bg-card px-2 py-0.5 text-base sm:text-sm text-foreground"
      >
        <option value="">(unsaved)</option>
        {names.map((n) => (
          <option key={n} value={n}>
            {n}
          </option>
        ))}
      </select>
      {dirty && (
        <span
          role="status"
          aria-label="chat has unsaved changes"
          data-testid="chat-dirty-dot"
          className="text-base leading-none text-warning"
        >
          •
        </span>
      )}
      <button
        type="button"
        onClick={onSave}
        disabled={busy || !activeName || !dirty}
        className="inline-flex min-h-9 items-center text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
      >
        Save
      </button>
      <button
        type="button"
        onClick={onSaveAs}
        disabled={busy}
        className="inline-flex min-h-9 items-center text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
      >
        Save as…
      </button>
      <button
        type="button"
        onClick={onRename}
        disabled={busy || !activeName}
        className="inline-flex min-h-9 items-center text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
      >
        Rename
      </button>
      <button
        type="button"
        onClick={onDelete}
        disabled={busy || !activeName}
        className="inline-flex min-h-9 items-center text-xs text-destructive transition-colors hover:opacity-80 disabled:opacity-50"
      >
        Delete
      </button>
    </div>
  );
}