// SGAB v2 — Clientes & Equipamentos
const { useState } = React;

// ── CLIENTES ──────────────────────────────────────────────────────
function Clientes({ user, toast, onNav }) {
  const [db, setDb]         = useState(() => SGAB.getDB());
  const [q, setQ]           = useState('');
  const [modal, setModal]   = useState(false);
  const [editItem, setEdit] = useState(null);
  const [form, setForm]     = useState({});
  const [detalhe, setDetalhe] = useState(null);
  const { fmt } = SGAB;

  function reload() { setDb(SGAB.getDB()); }
  function F(k, v) { setForm(f=>({...f,[k]:v})); }

  const lista = db.clientes.filter(c =>
    !q || c.razaoSocial.toLowerCase().includes(q.toLowerCase()) ||
    (c.cnpj||'').includes(q) || (c.cidade||'').toLowerCase().includes(q.toLowerCase()) ||
    (c.contato||'').toLowerCase().includes(q.toLowerCase())
  );

  function openNew() { setEdit(null); setForm({ ativo:true, uf:'SP' }); setModal(true); }
  function openEdit(c) { setEdit(c); setForm({...c}); setModal(true); }

  function salvar() {
    if (!form.razaoSocial?.trim()) { toast('Razão Social obrigatória.','error'); return; }
    const ndb = SGAB.getDB();
    if (editItem) {
      const i = ndb.clientes.findIndex(c=>c.id===editItem.id);
      if (i>=0) ndb.clientes[i] = {...ndb.clientes[i],...form};
    } else {
      ndb.clientes.push({id:SGAB.nxtId(ndb,'clientes'),createdAt:fmt.today(),...form});
    }
    SGAB.saveDB(ndb); reload(); setModal(false);
    toast(editItem?'Cliente atualizado!':'Cliente cadastrado!');
    if (detalhe) setDetalhe(ndb.clientes.find(c=>c.id===detalhe.id)||null);
  }

  function excluir(c) {
    if (!confirm(`Excluir cliente "${c.razaoSocial}"?`)) return;
    const ndb = SGAB.getDB();
    ndb.clientes = ndb.clientes.filter(x=>x.id!==c.id);
    SGAB.saveDB(ndb); reload(); setDetalhe(null);
    toast('Cliente removido.','info');
  }

  function toggleAtivo(c) {
    const ndb = SGAB.getDB();
    const i = ndb.clientes.findIndex(x=>x.id===c.id);
    if (i>=0) ndb.clientes[i].ativo = !ndb.clientes[i].ativo;
    SGAB.saveDB(ndb); reload();
    if (detalhe) setDetalhe(ndb.clientes[i]);
    toast('Status atualizado.');
  }

  const ufs = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'];

  // ── DETALHE DO CLIENTE ────────────────────────────────────────
  if (detalhe) {
    const cli = db.clientes.find(c=>c.id===detalhe.id) || detalhe;
    const equips = db.equipamentos.filter(e=>e.clienteId===cli.id);
    const ordens = db.ordens.filter(o=>o.clienteId===cli.id);
    const receber = db.financeiro.receber.filter(r=>r.clienteId===cli.id);
    return (
      <div style={{opacity:1}}>
        <PgHeader title={cli.razaoSocial} subtitle={`CNPJ: ${cli.cnpj||'—'}`}
          back onBack={()=>setDetalhe(null)}
          actions={<>
            <StatusBadge status={cli.ativo?'Ativo':'Inativo'}/>
            <Btn variant="secondary" icon="edit" onClick={()=>openEdit(cli)}>Editar</Btn>
            <Btn variant={cli.ativo?'warning':'success'} onClick={()=>toggleAtivo(cli)}>{cli.ativo?'Desativar':'Ativar'}</Btn>
          </>}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginBottom:20}}>
          <Card>
            <h4 style={{margin:'0 0 16px',fontSize:13,fontWeight:700,color:'#6B7280',textTransform:'uppercase',letterSpacing:'0.06em'}}>Dados do Cliente</h4>
            {[['Razão Social',cli.razaoSocial],['Fantasia',cli.fantasia],['CNPJ',cli.cnpj],['IE',cli.ie],['Endereço',`${cli.endereco||''}, ${cli.bairro||''}`],['Cidade/UF',`${cli.cidade||''}/${cli.uf||''}`],['CEP',cli.cep]].map(([l,v])=>v&&(
              <div key={l} style={{display:'flex',gap:8,marginBottom:8,alignItems:'flex-start'}}>
                <span style={{fontSize:12,fontWeight:700,color:'#9CA3AF',minWidth:90,flexShrink:0}}>{l}</span>
                <span style={{fontSize:13,color:'#111827'}}>{v}</span>
              </div>
            ))}
          </Card>
          <Card>
            <h4 style={{margin:'0 0 16px',fontSize:13,fontWeight:700,color:'#6B7280',textTransform:'uppercase',letterSpacing:'0.06em'}}>Contato</h4>
            {[['Responsável',cli.contato],['Departamento',cli.depto],['Telefone',cli.tel],['Celular',cli.cel],['E-mail',cli.email]].map(([l,v])=>v&&(
              <div key={l} style={{display:'flex',gap:8,marginBottom:8,alignItems:'center'}}>
                <span style={{fontSize:12,fontWeight:700,color:'#9CA3AF',minWidth:90,flexShrink:0}}>{l}</span>
                <span style={{fontSize:13,color:'#111827'}}>{v}</span>
              </div>
            ))}
            {cli.obs&&<div style={{marginTop:16,padding:'10px 12px',background:'#FFFBEB',borderRadius:8,border:'1px solid #FDE68A',fontSize:12,color:'#92400E'}}><b>Obs:</b> {cli.obs}</div>}
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginTop:16}}>
              {[['Balanças',equips.length,'equipamentos'],['OS',ordens.length,'ordens'],['A Receber',receber.filter(r=>r.status!=='Recebida').length,'financeiro']].map(([l,v,nav])=>(
                <div key={l} onClick={()=>onNav(nav)} style={{padding:'12px 10px',borderRadius:10,background:'#F8FAFF',border:'1px solid #E8EDF4',textAlign:'center',cursor:'pointer',transition:'border-color 0.15s'}}
                  onMouseEnter={e=>e.currentTarget.style.borderColor='#1E6FD9'} onMouseLeave={e=>e.currentTarget.style.borderColor='#E8EDF4'}>
                  <div style={{fontSize:20,fontWeight:800,color:'#1E6FD9'}}>{v}</div>
                  <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>{l}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>
        {/* EQUIPAMENTOS */}
        <Card style={{padding:0}}>
          <div style={{padding:'16px 20px',borderBottom:'1px solid #F1F5F9',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <h3 style={{margin:0,fontSize:15,fontWeight:800,color:'#0D1B2A'}}>Balanças cadastradas ({equips.length})</h3>
            <Btn size="sm" icon="plus" onClick={()=>onNav('equipamentos')}>Cadastrar balança</Btn>
          </div>
          <Tbl
            cols={[
              {k:'tag',l:'TAG'},
              {k:'fab',l:'Fabricante'},
              {k:'modelo',l:'Modelo'},
              {k:'serie',l:'Série'},
              {k:'cap',l:'Capacidade'},
              {k:'local',l:'Localização'},
              {k:'tipoCalib',l:'Tipo Calib.'},
              {k:'proxCalib',l:'Próx. Calibração', r:(v)=>{
                const d=SGAB.fmt.daysTo(v);
                const c=d===null?'#6B7280':d<0?'#DC2626':d<=30?'#D97706':'#16A34A';
                return <span style={{fontWeight:700,color:c}}>{SGAB.fmt.date(v)}</span>;
              }},
            ]}
            data={equips}
            empty="Nenhuma balança cadastrada para este cliente."
          />
        </Card>
        <Modal open={modal} onClose={()=>setModal(false)} title={editItem?'Editar Cliente':'Novo Cliente'} width={680}
          footer={<><Btn variant="secondary" onClick={()=>setModal(false)}>Cancelar</Btn><Btn icon="check" onClick={salvar}>Salvar</Btn></>}>
          <ClienteForm form={form} F={F} ufs={ufs} toast={toast}/>
        </Modal>
      </div>
    );
  }

  // ── LISTA ──────────────────────────────────────────────────────
  return (
    <div style={{opacity:1}}>
      <PgHeader title="Clientes" subtitle={`${db.clientes.filter(c=>c.ativo).length} clientes ativos`}
        actions={<Btn icon="plus" onClick={openNew}>Novo Cliente</Btn>}/>
      <Card style={{padding:0}}>
        <div style={{padding:'16px 20px',borderBottom:'1px solid #F1F5F9'}}>
          <Search value={q} onChange={setQ} placeholder="Buscar por nome, CNPJ, cidade, contato..." style={{maxWidth:400}}/>
        </div>
        <Tbl
          cols={[
            {k:'razaoSocial',l:'Razão Social',r:(v,r)=><div><div style={{fontWeight:700,color:'#111827'}}>{v}</div><div style={{fontSize:11,color:'#9CA3AF'}}>{r.fantasia}</div></div>},
            {k:'cnpj',l:'CNPJ'},
            {k:'cidade',l:'Cidade/UF',r:(v,r)=>`${v||'—'}/${r.uf||''}`},
            {k:'contato',l:'Contato',r:(v,r)=><div><div>{v}</div><div style={{fontSize:11,color:'#9CA3AF'}}>{r.tel}</div></div>},
            {k:'ativo',l:'Status',r:v=><StatusBadge status={v?'Ativo':'Inativo'}/>},
            {k:'id',l:'',thStyle:{width:80},r:(_,r)=>(
              <div style={{display:'flex',gap:4}} onClick={e=>e.stopPropagation()}>
                <button onClick={()=>openEdit(r)} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#6B7280',borderRadius:5,display:'flex'}} title="Editar"><Icon name="edit" size={15}/></button>
                <button onClick={()=>excluir(r)} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#DC2626',borderRadius:5,display:'flex'}} title="Excluir"><Icon name="trash" size={15}/></button>
              </div>
            )},
          ]}
          data={lista}
          onRow={r=>setDetalhe(r)}
          empty="Nenhum cliente encontrado."
        />
      </Card>
      <Modal open={modal} onClose={()=>setModal(false)} title={editItem?'Editar Cliente':'Novo Cliente'} width={680}
        footer={<><Btn variant="secondary" onClick={()=>setModal(false)}>Cancelar</Btn><Btn icon="check" onClick={salvar}>Salvar</Btn></>}>
        <ClienteForm form={form} F={F} ufs={ufs} toast={toast}/>
      </Modal>
    </div>
  );
}

function ClienteForm({ form, F, ufs, toast }) {
  const [cnpjLoading, setCnpjLoading] = useState(false);

  function maskCnpjCpf(v) {
    const d = (v||'').replace(/\D/g,'').slice(0,14);
    if (d.length <= 11) {
      return d.replace(/(\d{3})(\d)/,'$1.$2')
              .replace(/(\d{3})\.(\d{3})(\d)/,'$1.$2.$3')
              .replace(/(\d{3})(\d{1,2})$/,'$1-$2');
    }
    return d.replace(/^(\d{2})(\d)/,'$1.$2')
            .replace(/^(\d{2})\.(\d{3})(\d)/,'$1.$2.$3')
            .replace(/\.(\d{3})(\d)/,'.$1/$2')
            .replace(/(\d{4})(\d)/,'$1-$2');
  }

  async function lookupCnpj(digits) {
    setCnpjLoading(true);
    try {
      const r = await fetch(`https://brasilapi.com.br/api/cnpj/v1/${digits}`);
      if (!r.ok) throw new Error('não encontrado');
      const d = await r.json();
      F('razaoSocial', d.razao_social || '');
      F('fantasia', d.nome_fantasia || d.razao_social || '');
      const log = [d.descricao_tipo_de_logradouro, d.logradouro].filter(Boolean).join(' ').trim();
      F('endereco', [log, d.numero].filter(Boolean).join(', ').trim());
      F('bairro', d.bairro || '');
      F('cep', d.cep ? String(d.cep).replace(/\D/g,'').replace(/(\d{5})(\d{3})/,'$1-$2') : '');
      F('cidade', d.municipio || '');
      F('uf', d.uf || '');
      if (d.ddd_telefone_1) F('tel', d.ddd_telefone_1);
      if (d.email) F('email', d.email);
      toast && toast('Dados carregados da Receita Federal', 'success');
    } catch (e) {
      toast && toast('CNPJ não encontrado ou serviço indisponível.', 'error');
    } finally {
      setCnpjLoading(false);
    }
  }

  function onCnpjChange(v) {
    const formatted = maskCnpjCpf(v);
    const prev = (form.cnpj||'').replace(/\D/g,'');
    F('cnpj', formatted);
    const digits = formatted.replace(/\D/g,'');
    if (digits.length === 14 && prev.length !== 14) lookupCnpj(digits);
  }

  return (
    <>
      <style>{`@keyframes sgab-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}`}</style>
      <Divider label="Dados da empresa"/>
      <Grid cols={2} gap={14}>
        <FormField label="Razão Social" required col="1/-1"><Inp value={form.razaoSocial} onChange={v=>F('razaoSocial',v)} placeholder="Nome completo da empresa"/></FormField>
        <FormField label="Nome Fantasia"><Inp value={form.fantasia} onChange={v=>F('fantasia',v)} placeholder="Como é conhecido"/></FormField>
        <FormField label="CNPJ / CPF">
          <div style={{position:'relative'}}>
            <Inp value={form.cnpj} onChange={onCnpjChange} placeholder="00.000.000/0000-00"/>
            {cnpjLoading && (
              <div style={{position:'absolute',right:10,top:'50%',transform:'translateY(-50%)',width:16,height:16,border:'2px solid #BFDBFE',borderTopColor:'#1E6FD9',borderRadius:'50%',animation:'sgab-spin 0.7s linear infinite'}}/>
            )}
          </div>
          {cnpjLoading
            ? <div style={{fontSize:11,color:'#1E6FD9',marginTop:4,fontWeight:600}}>Buscando na Receita Federal…</div>
            : <div style={{fontSize:11,color:'#9CA3AF',marginTop:4}}>Os campos serão preenchidos automaticamente ao digitar um CNPJ válido.</div>}
        </FormField>
        <FormField label="Inscrição Estadual"><Inp value={form.ie} onChange={v=>F('ie',v)} placeholder="000.000.000-00"/></FormField>
      </Grid>
      <Divider label="Endereço"/>
      <Grid cols={2} gap={14}>
        <FormField label="Endereço" col="1/-1"><Inp value={form.endereco} onChange={v=>F('endereco',v)} placeholder="Rua, número"/></FormField>
        <FormField label="Bairro"><Inp value={form.bairro} onChange={v=>F('bairro',v)}/></FormField>
        <FormField label="CEP"><Inp value={form.cep} onChange={v=>F('cep',v)} placeholder="00000-000"/></FormField>
        <FormField label="Cidade" required><Inp value={form.cidade} onChange={v=>F('cidade',v)}/></FormField>
        <FormField label="UF"><Sel value={form.uf} onChange={v=>F('uf',v)} options={ufs}/></FormField>
      </Grid>
      <Divider label="Contato"/>
      <Grid cols={2} gap={14}>
        <FormField label="Responsável"><Inp value={form.contato} onChange={v=>F('contato',v)} placeholder="Nome do contato"/></FormField>
        <FormField label="Departamento"><Inp value={form.depto} onChange={v=>F('depto',v)} placeholder="Ex: Compras, Manutenção"/></FormField>
        <FormField label="Telefone"><Inp value={form.tel} onChange={v=>F('tel',v)} placeholder="(11) 0000-0000"/></FormField>
        <FormField label="Celular"><Inp value={form.cel} onChange={v=>F('cel',v)} placeholder="(11) 9 0000-0000"/></FormField>
        <FormField label="E-mail" col="1/-1"><Inp value={form.email} onChange={v=>F('email',v)} type="email" placeholder="email@empresa.com.br"/></FormField>
        <FormField label="Observações" col="1/-1"><Txta value={form.obs} onChange={v=>F('obs',v)} placeholder="Horários preferenciais, instruções de acesso, etc."/></FormField>
      </Grid>
    </>
  );
}

// ── EQUIPAMENTOS ──────────────────────────────────────────────────
function Equipamentos({ user, toast }) {
  const [db, setDb]       = useState(() => SGAB.getDB());
  const [q, setQ]         = useState('');
  const [modal, setModal] = useState(false);
  const [editItem, setEdit] = useState(null);
  const [form, setForm]   = useState({});
  const { fmt } = SGAB;

  function reload() { setDb(SGAB.getDB()); }
  function F(k,v) { setForm(f=>({...f,[k]:v})); }

  const lista = db.equipamentos.filter(e =>
    !q || (e.tag||'').toLowerCase().includes(q.toLowerCase()) ||
    (e.modelo||'').toLowerCase().includes(q.toLowerCase()) ||
    (e.serie||'').toLowerCase().includes(q.toLowerCase()) ||
    db.clientes.find(c=>c.id===e.clienteId)?.razaoSocial.toLowerCase().includes(q.toLowerCase())
  );

  function openNew() { setEdit(null); setForm({ativo:true,tipoCalib:'RBC',classe:'III'}); setModal(true); }
  function openEdit(e) { setEdit(e); setForm({...e}); setModal(true); }

  function salvar() {
    if (!form.clienteId) { toast('Selecione o cliente.','error'); return; }
    if (!form.tag?.trim()) { toast('TAG/Patrimônio obrigatório.','error'); return; }
    const ndb = SGAB.getDB();
    if (editItem) {
      const i = ndb.equipamentos.findIndex(e=>e.id===editItem.id);
      if (i>=0) ndb.equipamentos[i] = {...ndb.equipamentos[i],...form,clienteId:+form.clienteId};
    } else {
      ndb.equipamentos.push({id:SGAB.nxtId(ndb,'equip'),...form,clienteId:+form.clienteId});
    }
    SGAB.saveDB(ndb); reload(); setModal(false);
    toast(editItem?'Balança atualizada!':'Balança cadastrada!');
  }

  function excluir(e) {
    if (!confirm(`Excluir balança ${e.tag}?`)) return;
    const ndb = SGAB.getDB(); ndb.equipamentos = ndb.equipamentos.filter(x=>x.id!==e.id);
    SGAB.saveDB(ndb); reload(); toast('Balança removida.','info');
  }

  const cliOpts = db.clientes.filter(c=>c.ativo).map(c=>({v:c.id,l:c.razaoSocial}));
  const classeOpts = [{v:'I',l:'Classe I — Especial'},{v:'II',l:'Classe II — Fino'},{v:'III',l:'Classe III — Médio'},{v:'IIII',l:'Classe IIII — Grosseiro'}];
  const calibOpts = [{v:'RBC',l:'Calibração RBC (Acreditada CGCRE)'},{v:'Rastreada',l:'Calibração Rastreada (DOC 11)'}];
  const portariaOpts = ['OIML R-76','Portaria 157/22','MDCIE 261/02','MTIC 63/44','Portaria 236/94'];

  return (
    <div style={{opacity:1}}>
      <PgHeader title="Equipamentos / Balanças" subtitle={`${db.equipamentos.filter(e=>e.ativo).length} balanças ativas`}
        actions={<Btn icon="plus" onClick={openNew}>Nova Balança</Btn>}/>
      <Card style={{padding:0}}>
        <div style={{padding:'16px 20px',borderBottom:'1px solid #F1F5F9'}}>
          <Search value={q} onChange={setQ} placeholder="Buscar por TAG, modelo, série, cliente..." style={{maxWidth:440}}/>
        </div>
        <Tbl
          cols={[
            {k:'tag',l:'TAG',r:(v,r)=><span style={{fontWeight:700,color:'#1E6FD9'}}>{v}</span>},
            {k:'clienteId',l:'Cliente',r:v=>db.clientes.find(c=>c.id===v)?.fantasia||'—'},
            {k:'fab',l:'Fabricante'},
            {k:'modelo',l:'Modelo'},
            {k:'serie',l:'N° Série'},
            {k:'cap',l:'Capacidade'},
            {k:'classe',l:'Classe'},
            {k:'tipoCalib',l:'Tipo Calib.',r:v=><Badge color={v==='RBC'?'blue':'teal'}>{v}</Badge>},
            {k:'proxCalib',l:'Próx. Calib.',r:v=>{
              const d=fmt.daysTo(v);
              const c=d===null?'#6B7280':d<0?'#DC2626':d<=30?'#D97706':'#16A34A';
              return <span style={{fontWeight:700,color:c,fontSize:12}}>{fmt.date(v)}</span>;
            }},
            {k:'id',l:'',thStyle:{width:72},r:(_,r)=>(
              <div style={{display:'flex',gap:4}} onClick={e=>e.stopPropagation()}>
                <button onClick={()=>openEdit(r)} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#6B7280',borderRadius:5,display:'flex'}}><Icon name="edit" size={15}/></button>
                <button onClick={()=>excluir(r)} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#DC2626',borderRadius:5,display:'flex'}}><Icon name="trash" size={15}/></button>
              </div>
            )},
          ]}
          data={lista} empty="Nenhuma balança encontrada."/>
      </Card>
      <Modal open={modal} onClose={()=>setModal(false)} title={editItem?`Editar — ${editItem.tag}`:'Nova Balança'} width={640}
        footer={<><Btn variant="secondary" onClick={()=>setModal(false)}>Cancelar</Btn><Btn icon="check" onClick={salvar}>Salvar</Btn></>}>
        <Grid cols={2} gap={14}>
          <FormField label="Cliente" required col="1/-1"><Sel value={form.clienteId} onChange={v=>F('clienteId',v)} options={cliOpts} placeholder="Selecionar cliente..."/></FormField>
          <FormField label="Fabricante" required><Inp value={form.fab} onChange={v=>F('fab',v)} placeholder="Ex: Toledo, Filizola"/></FormField>
          <FormField label="Modelo" required><Inp value={form.modelo} onChange={v=>F('modelo',v)} placeholder="Ex: Prix 3 Plus"/></FormField>
          <FormField label="N° de Série" required><Inp value={form.serie} onChange={v=>F('serie',v)} placeholder="Ex: TL-2024-001"/></FormField>
          <FormField label="TAG / Patrimônio" required><Inp value={form.tag} onChange={v=>F('tag',v)} placeholder="Ex: ALX-001"/></FormField>
          <FormField label="Capacidade"><Inp value={form.cap} onChange={v=>F('cap',v)} placeholder="Ex: 30 kg"/></FormField>
          <FormField label="P. de Trabalho"><Inp value={form.ptrab} onChange={v=>F('ptrab',v)} placeholder="Ex: 10 g"/></FormField>
          <FormField label="Divisão (e)"><Inp value={form.divE} onChange={v=>F('divE',v)} placeholder="Ex: 10 g"/></FormField>
          <FormField label="Divisão (d)"><Inp value={form.divD} onChange={v=>F('divD',v)} placeholder="Ex: 10 g"/></FormField>
          <FormField label="Classe de Exatidão"><Sel value={form.classe} onChange={v=>F('classe',v)} options={classeOpts}/></FormField>
          <FormField label="Portaria INMETRO"><Sel value={form.portaria} onChange={v=>F('portaria',v)} options={portariaOpts.map(p=>({v:p,l:p}))}/></FormField>
          <FormField label="Localização" col="1/-1"><Inp value={form.local} onChange={v=>F('local',v)} placeholder="Ex: Checkout 1, Açougue, Expedição"/></FormField>
          <FormField label="Tipo de Calibração"><Sel value={form.tipoCalib} onChange={v=>F('tipoCalib',v)} options={calibOpts}/></FormField>
          <FormField label="Última Calibração"><Inp value={form.ultimaCalib} onChange={v=>F('ultimaCalib',v)} type="date"/></FormField>
          <FormField label="Próxima Calibração"><Inp value={form.proxCalib} onChange={v=>F('proxCalib',v)} type="date"/></FormField>
        </Grid>
      </Modal>
    </div>
  );
}

Object.assign(window, { Clientes, Equipamentos });