"use client";

import { useState } from "react";

const CUSTOM_OPTION = "__custom__";

type Props = {
  value: string;
  onChange: (next: string) => void;
  defaultQueueKey: string;
  existingQueues: string[];
  actionLabel: string;
};

export function QueueControl({
  value,
  onChange,
  defaultQueueKey,
  existingQueues,
  actionLabel,
}: Props) {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);

  if (editing) {
    return (
      <div className="flex items-center gap-1 text-xs">
        <input
          type="text"
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          aria-label={`custom queue for ${actionLabel}`}
          autoFocus
          placeholder="leave empty for immediate"
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              onChange(draft.trim());
              setEditing(false);
            } else if (e.key === "Escape") {
              e.preventDefault();
              setEditing(false);
              setDraft(value);
            }
          }}
          className="w-44 font-mono px-2 py-1 rounded border border-border bg-card"
        />
        <button
          type="button"
          aria-label={`save custom queue for ${actionLabel}`}
          onClick={() => {
            onChange(draft.trim());
            setEditing(false);
          }}
          className="px-2 py-1 rounded bg-primary text-primary-foreground"
        >
          Set
        </button>
        <button
          type="button"
          onClick={() => {
            setEditing(false);
            setDraft(value);
          }}
          className="text-muted-foreground underline"
        >
          Cancel
        </button>
      </div>
    );
  }

  // Compose options: blank (immediate) first, then default queue, current
  // value, and any active queues, deduplicated.
  const named = Array.from(
    new Set(
      [defaultQueueKey, value, ...existingQueues].filter((s) => s.length > 0),
    ),
  ).sort();

  return (
    <label className="flex items-center gap-1 text-xs text-muted-foreground">
      <span className="sr-only">queue for {actionLabel}</span>
      <select
        value={value}
        aria-label={`queue for ${actionLabel}`}
        onChange={(e) => {
          const next = e.target.value;
          if (next === CUSTOM_OPTION) {
            setDraft(value);
            setEditing(true);
            return;
          }
          onChange(next);
        }}
        className="font-mono px-2 py-1 rounded border border-border bg-card text-foreground"
      >
        <option value="">(immediate)</option>
        {named.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
        <option value={CUSTOM_OPTION}>Custom…</option>
      </select>
    </label>
  );
}