import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

/** Thème visuel du formulaire : clair (page /diagnostic, bloc WP) ou sombre (modale hero). */
export type FormTheme = 'light' | 'dark';

type Props = {
  label: string;
  htmlFor?: string;
  error?: string;
  required?: boolean;
  hint?: string;
  children: ReactNode;
  className?: string;
  theme?: FormTheme;
};

export const Field = ({ label, htmlFor, error, required, hint, children, className, theme = 'light' }: Props) => {
  const dark = theme === 'dark';
  return (
    <div className={className}>
      {/* Header : label + hint visually grouped (tight) */}
      <div className="mb-3">
        <label
          htmlFor={htmlFor}
          className={cn('block font-body text-sm font-semibold leading-tight', dark ? 'text-white' : 'text-foreground')}
        >
          {label}
          {required && <span className={cn('ml-1', dark ? 'text-red-400' : 'text-[#d1290d]')}>*</span>}
        </label>
        {hint && !error && (
          <p className={cn('text-xs font-body mt-1.5 leading-snug', dark ? 'text-white/50' : 'text-foreground/50')}>{hint}</p>
        )}
      </div>
      {children}
      {error && (
        <p role="alert" className={cn('text-xs font-body font-medium mt-2', dark ? 'text-red-400' : 'text-[#d1290d]')}>
          {error}
        </p>
      )}
    </div>
  );
};

export const textInputClass =
  'w-full px-4 py-3.5 rounded-xl bg-white border-2 border-foreground/10 text-foreground placeholder:text-foreground/30 focus:outline-none focus:border-primary transition-colors text-base';

export const darkTextInputClass =
  'w-full px-4 py-3.5 rounded-xl bg-white/[0.07] border-2 border-white/[0.12] text-white placeholder:text-white/30 focus:outline-none focus:border-primary transition-colors text-base';

/** Classe d'input selon le thème (utilisée par les champs texte, select, CountrySelect…). */
export const inputClass = (theme: FormTheme = 'light') =>
  theme === 'dark' ? darkTextInputClass : textInputClass;