'use client';

import { useState, type FormEvent, type ReactNode } from 'react';
import { useRouter } from 'next/navigation';

export function AdminFormShell({
  action,
  method,
  redirectTo,
  submitLabel,
  buildPayload,
  children
}: {
  action: string;
  method: 'POST' | 'PATCH';
  redirectTo: string;
  submitLabel: string;
  buildPayload: (form: FormData) => unknown;
  children: ReactNode;
}) {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const payload = buildPayload(new FormData(e.currentTarget));
      const res = await fetch(action, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error ?? 'Erreur');
      }
      router.push(redirectTo);
      router.refresh();
    } catch (err: any) {
      setError(err.message ?? 'Une erreur est survenue.');
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
      {children}
      {error && <p className="text-sm text-copper-600">{error}</p>}
      <button
        type="submit"
        disabled={loading}
        className="rounded-full bg-copper-500 px-6 py-2.5 text-sm font-semibold text-graphite-950 hover:bg-copper-400 disabled:opacity-50"
      >
        {loading ? '…' : submitLabel}
      </button>
    </form>
  );
}