import type { ReactNode } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';

type Props<T> = {
  name: string;
  label: string;
  hint?: string;
  newItem: () => T;
  itemLabel?: (index: number) => string;
  children: (params: { index: number; namePrefix: string }) => ReactNode;
};

export function ArrayEditor<T>({
  name,
  label,
  hint,
  newItem,
  itemLabel,
  children,
}: Props<T>) {
  const { control } = useFormContext();
  const { fields, append, remove, move } = useFieldArray({ control, name });

  return (
    <section className="space-y-3">
      <header className="flex items-center justify-between">
        <div>
          <h3 className="font-display uppercase tracking-widest text-base text-[color:var(--color-acid)] glow-text-acid">
            {label}
          </h3>
          {hint && (
            <p className="font-mono text-[10px] text-[color:var(--color-text-dim)] mt-0.5">
              {hint}
            </p>
          )}
        </div>
        <button
          type="button"
          onClick={() => append(newItem() as never)}
          className="px-3 py-1.5 font-mono text-xs uppercase tracking-widest text-[color:var(--color-bg)] bg-[color:var(--color-acid)] rounded hover:opacity-90 transition-opacity"
        >
          + ajouter
        </button>
      </header>

      {fields.length === 0 && (
        <div className="font-mono text-xs text-[color:var(--color-text-dim)] italic border border-dashed border-[color:var(--color-border)] rounded p-4 text-center">
          (aucun élément — clique « ajouter » pour commencer)
        </div>
      )}

      <ol className="space-y-3">
        {fields.map((field, idx) => (
          <li
            key={field.id}
            className="border border-[color:var(--color-border)] rounded bg-[color:var(--color-surface)] p-4 relative"
          >
            <div className="flex items-center justify-between mb-3 pb-2 border-b border-[color:var(--color-border)]">
              <span className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-cyan)]">
                {itemLabel ? itemLabel(idx) : `# ${String(idx + 1).padStart(2, '0')}`}
              </span>
              <div className="flex items-center gap-1">
                <button
                  type="button"
                  onClick={() => idx > 0 && move(idx, idx - 1)}
                  disabled={idx === 0}
                  className="px-2 py-1 font-mono text-xs text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] disabled:opacity-30"
                  aria-label="monter"
                >
                  ↑
                </button>
                <button
                  type="button"
                  onClick={() => idx < fields.length - 1 && move(idx, idx + 1)}
                  disabled={idx === fields.length - 1}
                  className="px-2 py-1 font-mono text-xs text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] disabled:opacity-30"
                  aria-label="descendre"
                >
                  ↓
                </button>
                <button
                  type="button"
                  onClick={() => remove(idx)}
                  className="px-2 py-1 font-mono text-xs text-[color:var(--color-magenta)] hover:text-[color:var(--color-bg)] hover:bg-[color:var(--color-magenta)] rounded transition-colors"
                  aria-label="supprimer"
                >
                  supprimer
                </button>
              </div>
            </div>
            <div className="space-y-3">
              {children({ index: idx, namePrefix: `${name}.${idx}` })}
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}