'use client';
import { useActionState } from 'react';
import type { ActionResult } from '@/app/krtf1krtf/actions';

/** Yönetici işlem formu: isteğe bağlı onay sorusu, gönderimde kilitlenir, sonucu altında gösterir. */
export function ActionForm({ action, label, confirm, tone = 'line', fields, hidden, className = '' }: {
  action: (s: ActionResult, fd: FormData) => Promise<ActionResult>;
  label: string; confirm?: string; tone?: 'ink' | 'line' | 'danger' | 'signal';
  fields?: React.ReactNode; hidden?: Record<string, string>; className?: string;
}) {
  const [state, run, pending] = useActionState(action, undefined);
  const btn = { ink: 'btn-ink', line: 'btn-line', signal: 'btn-signal', danger: 'btn bg-survey text-white hover:opacity-90' }[tone];
  return (
    <form action={run} onSubmit={(e) => { if (confirm && !window.confirm(confirm)) e.preventDefault(); }} className={className}>
      {hidden && Object.entries(hidden).map(([k, v]) => <input key={k} type="hidden" name={k} value={v} />)}
      {fields}
      <button disabled={pending} className={`${btn} btn-sm w-full`}>{pending ? 'İşleniyor…' : label}</button>
      {state?.ok && <p className="mt-1 text-[12.5px] font-semibold text-ok">{state.ok}</p>}
      {state?.error && <p className="mt-1 text-[12.5px] font-semibold text-survey-dark">{state.error}</p>}
    </form>
  );
}