interface SatOption {
  code: string;
  label: string;
}

export interface FiscalState {
  rfc: string;
  fiscalRegimeCode: string;
  cfdiUse: string;
  fiscalZipCode: string;
  kindOfPerson: string;
}

interface Props {
  value: FiscalState;
  onChange: (field: keyof FiscalState, value: string) => void;
  regimes: SatOption[];
  cfdiUses: SatOption[];
}

/**
 * Bloque de datos fiscales (CFDI 4.0) reutilizable en empresa y contacto.
 * Los códigos SAT se eligen de catálogos (ver docs/INTEGRATION_ALEGRA.md).
 */
export default function FiscalFieldset({ value, onChange, regimes, cfdiUses }: Props) {
  return (
    <div className="card" style={{ padding: 18 }}>
      <h2 style={{ fontSize: '1.1rem' }}>Datos fiscales (para facturación / CFDI 4.0)</h2>
      <p className="muted" style={{ fontSize: '.82rem', marginBottom: 8 }}>
        Captura tal como aparece en la Constancia de Situación Fiscal. Necesarios para enviar a Alegra (Etapa 2).
      </p>

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <div className="field" style={{ flex: '1 1 160px' }}>
          <label>RFC</label>
          <input
            className="input"
            value={value.rfc}
            onChange={(e) => onChange('rfc', e.target.value.toUpperCase())}
            placeholder="XAXX010101000"
            maxLength={13}
          />
        </div>
        <div className="field" style={{ flex: '1 1 120px' }}>
          <label>CP fiscal</label>
          <input
            className="input"
            inputMode="numeric"
            maxLength={5}
            value={value.fiscalZipCode}
            onChange={(e) => onChange('fiscalZipCode', e.target.value.replace(/\D/g, ''))}
            placeholder="44100"
          />
        </div>
      </div>

      <div className="field">
        <label>Tipo de persona</label>
        <select className="select" value={value.kindOfPerson} onChange={(e) => onChange('kindOfPerson', e.target.value)}>
          <option value="">—</option>
          <option value="fisica">Persona física</option>
          <option value="moral">Persona moral</option>
        </select>
      </div>

      <div className="field">
        <label>Régimen fiscal (SAT)</label>
        <select
          className="select"
          value={value.fiscalRegimeCode}
          onChange={(e) => onChange('fiscalRegimeCode', e.target.value)}
        >
          <option value="">— Selecciona —</option>
          {regimes.map((r) => (
            <option key={r.code} value={r.code}>
              {r.label}
            </option>
          ))}
        </select>
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <label>Uso del CFDI</label>
        <select className="select" value={value.cfdiUse} onChange={(e) => onChange('cfdiUse', e.target.value)}>
          <option value="">— Selecciona —</option>
          {cfdiUses.map((u) => (
            <option key={u.code} value={u.code}>
              {u.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}