"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";

export function RenameField({
  id,
  name,
  action,
  textClassName = "text-sm",
  textStyle,
}: {
  id: string;
  name: string;
  action: (id: string, formData: FormData) => Promise<void>;
  textClassName?: string;
  textStyle?: React.CSSProperties;
}) {
  const [editing, setEditing] = useState(false);
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  if (!editing) {
    return (
      <button
        type="button"
        onClick={() => setEditing(true)}
        title="Umbenennen"
        style={textStyle}
        className={`${textClassName} text-left hover:underline decoration-dotted underline-offset-4`}
      >
        {name}
      </button>
    );
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
        startTransition(async () => {
          await action(id, data);
          setEditing(false);
          router.refresh();
        });
      }}
      className="flex items-center gap-2"
      onClick={(e) => e.stopPropagation()}
    >
      <input
        name="name"
        defaultValue={name}
        autoFocus
        disabled={pending}
        className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-white/50 disabled:opacity-50"
      />
      <button
        type="submit"
        disabled={pending}
        className="text-xs border border-white/30 rounded-full px-2.5 py-1 hover:border-white disabled:opacity-50 shrink-0"
      >
        Speichern
      </button>
      <button
        type="button"
        onClick={() => setEditing(false)}
        disabled={pending}
        className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] shrink-0"
      >
        Abbrechen
      </button>
    </form>
  );
}