"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { updateOrderTitleAction } from "@/lib/actions/admin";

export function OrderTitleEditor({ orderId, title, canEdit }: { orderId: string; title: string; canEdit: boolean }) {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(title);
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  if (!canEdit) {
    return <h1 className="text-xl font-medium text-[var(--rk-ink)] truncate">{title}</h1>;
  }

  if (editing) {
    return (
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const trimmed = value.trim();
          if (!trimmed) return;
          startTransition(async () => {
            await updateOrderTitleAction(orderId, trimmed);
            setEditing(false);
            router.refresh();
          });
        }}
        className="flex items-center gap-2 min-w-0"
      >
        <input
          autoFocus
          value={value}
          onChange={(e) => setValue(e.target.value)}
          maxLength={300}
          className="text-xl font-medium bg-transparent border-b border-white/30 focus:outline-none focus:border-white/60 min-w-0 flex-1"
        />
        <button
          type="submit"
          disabled={pending || !value.trim()}
          className="text-xs border border-white/30 rounded-lg px-2.5 py-1 hover:border-white disabled:opacity-50 shrink-0"
        >
          Speichern
        </button>
        <button
          type="button"
          onClick={() => {
            setValue(title);
            setEditing(false);
          }}
          className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] shrink-0"
        >
          Abbrechen
        </button>
      </form>
    );
  }

  return (
    <div className="flex items-center gap-1.5 min-w-0">
      <h1 className="text-xl font-medium text-[var(--rk-ink)] truncate">{title}</h1>
      <button
        onClick={() => setEditing(true)}
        className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] shrink-0"
        title="Titel bearbeiten"
      >
        ✎
      </button>
    </div>
  );
}