import { useState } from 'react';
import FiscalFieldset, { type FiscalState } from './FiscalFieldset';

interface Company {
  id: string;
  name: string;
  fiscalName: string | null;
  billingEmail: string | null;
  rfc: string | null;
  fiscalRegimeCode: string | null;
  cfdiUse: string | null;
  fiscalZipCode: string | null;
  kindOfPerson: string | null;
}
interface SatOption {
  code: string;
  label: string;
}
interface Props {
  company: Company;
  regimes: SatOption[];
  cfdiUses: SatOption[];
}

export default function CompanyEditor({ company, regimes, cfdiUses }: Props) {
  const [name, setName] = useState(company.name);
  const [fiscalName, setFiscalName] = useState(company.fiscalName ?? '');
  const [billingEmail, setBillingEmail] = useState(company.billingEmail ?? '');
  const [fiscal, setFiscal] = useState<FiscalState>({
    rfc: company.rfc ?? '',
    fiscalRegimeCode: company.fiscalRegimeCode ?? '',
    cfdiUse: company.cfdiUse ?? '',
    fiscalZipCode: company.fiscalZipCode ?? '',
    kindOfPerson: company.kindOfPerson ?? 'moral',
  });
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<{ text: string; ok: boolean } | null>(null);

  function setFiscalField(field: keyof FiscalState, value: string) {
    setFiscal((f) => ({ ...f, [field]: value }));
  }

  async function save() {
    setBusy(true);
    setMsg(null);
    const res = await fetch(`/api/crm/companies/${company.id}`, {
      method: 'PATCH',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        name,
        fiscalName: fiscalName || null,
        billingEmail: billingEmail || null,
        rfc: fiscal.rfc || null,
        fiscalRegimeCode: fiscal.fiscalRegimeCode || null,
        cfdiUse: fiscal.cfdiUse || null,
        fiscalZipCode: fiscal.fiscalZipCode || null,
        kindOfPerson: fiscal.kindOfPerson || null,
      }),
    });
    const json = await res.json();
    setBusy(false);
    if (json.ok) setMsg({ text: 'Empresa guardada.', ok: true });
    else setMsg({ text: json.error || 'No se pudo guardar.', ok: false });
  }

  return (
    <div style={{ display: 'grid', gap: 16 }}>
      {msg && (
        <p className="notice" style={{ color: msg.ok ? 'var(--pf-success)' : '#ff7a8a' }}>
          {msg.text}
        </p>
      )}

      <div className="card" style={{ padding: 18 }}>
        <h2 style={{ fontSize: '1.1rem' }}>Datos de la empresa</h2>
        <div className="field">
          <label>Nombre comercial</label>
          <input className="input" value={name} onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="field">
          <label>Razón social (como en la Constancia)</label>
          <input className="input" value={fiscalName} onChange={(e) => setFiscalName(e.target.value)} />
        </div>
        <div className="field" style={{ marginBottom: 0 }}>
          <label>Email de facturación</label>
          <input className="input" type="email" value={billingEmail} onChange={(e) => setBillingEmail(e.target.value)} />
        </div>
      </div>

      <FiscalFieldset value={fiscal} onChange={setFiscalField} regimes={regimes} cfdiUses={cfdiUses} />

      <button className="btn btn-primary" disabled={busy} onClick={save}>
        {busy ? 'Guardando…' : 'Guardar empresa'}
      </button>
    </div>
  );
}