// SGAB v2 — Calibração RBC e Rastreada
const { useState, useMemo } = React;

function Calibracao({ user, toast, onNav }) {
  const [db, setDb]   = useState(() => SGAB.getDB());
  const [view, setView] = useState('lista'); // lista | nova | detalhe | cert
  const [sel, setSel]   = useState(null);
  const [tipo, setTipo] = useState('RBC');
  const [form, setForm] = useState(null);
  const { fmt } = SGAB;

  function reload() { setDb(SGAB.getDB()); }

  // ── NOVA CALIBRAÇÃO: INIT FORM ────────────────────────────────
  function novaCalib(t) {
    setTipo(t);
    setForm({
      tipo:t, data:fmt.today(), local:'In Situ', tecnico:user.nome,
      clienteId:'', equipamentoId:'', osId:'',
      cond:{ temp:'22', umid:'55', press:'1013', densAr:'1.193' },
      padroes:[{ tag:'PAD-001', cert:'', val:'', rastr:'IPT/INMETRO', classe:'F1', cap:'', res:'', incert:'', k:'2' }],
      pontos:[
        {nom:'',l1:'',l2:'',l3:''},
        {nom:'',l1:'',l2:'',l3:''},
        {nom:'',l1:'',l2:'',l3:''},
        {nom:'',l1:'',l2:'',l3:''},
        {nom:'',l1:'',l2:'',l3:''},
      ],
      excent:[
        {pos:'A — Centro',   carga:'',leit:''},
        {pos:'B — Frente',   carga:'',leit:''},
        {pos:'C — Trás',     carga:'',leit:''},
        {pos:'D — Esquerda', carga:'',leit:''},
        {pos:'E — Direita',  carga:'',leit:''},
        {pos:'F — Centro',   carga:'',leit:''},
      ],
      conclusao:'CONFORME', obs:''
    });
    setView('nova');
  }

  // ── SALVAR CALIBRAÇÃO ─────────────────────────────────────────
  function salvarCalib() {
    if (!form.clienteId) { toast('Selecione o cliente.','error'); return; }
    if (!form.equipamentoId) { toast('Selecione o equipamento.','error'); return; }
    const ndb = SGAB.getDB();
    const id  = SGAB.nxtId(ndb,'calib');
    const ano2 = String(new Date().getFullYear()).slice(2);
    const mes2 = String(new Date().getMonth()+1).padStart(2,'0');
    const dia2 = String(new Date().getDate()).padStart(2,'0');
    const eq   = ndb.equipamentos.find(e=>e.id===+form.equipamentoId);
    const cli  = ndb.clientes.find(c=>c.id===+form.clienteId);
    const numero = tipo==='RBC' ? `CCR_${String(id+429).padStart(3,'0')}` : `CC_${Date.now()}`;
    const sufixo = `${dia2}.${mes2}.${ano2}_${(cli?.fantasia||'').replace(/\s/g,'').slice(0,8)}`;

    // Auto-calculate pontos
    const pontos = form.pontos.filter(p=>p.nom!=='').map(p=>{
      if (!p.l1||!p.l2||!p.l3) return {...p,med:0,err:0,corr:0,tol:50,incU:0,ok:true};
      const r = SGAB.calcPonto(p.l1,p.l2,p.l3,p.nom);
      const pad = form.padroes[0];
      const div = eq?.divE?.replace(/[^\d.]/g,'')||'10';
      const iu  = SGAB.calcIncerteza(div,pad?.incert||'0.01',r.rep);
      const tol = calcTolerance(+p.nom, eq?.cap?.replace(/[^\d.]/g,'')||1000, eq?.classe||'III');
      return {...p, med:r.med, err:r.err, corr:r.corr, tol, incU:+iu.U.toFixed(2), ok:Math.abs(r.err)<=tol};
    });

    const conclusao = pontos.every(p=>p.ok) ? 'CONFORME' : 'NÃO CONFORME';
    const newCalib = { id, tipo, numero, sufixo, clienteId:+form.clienteId, equipamentoId:+form.equipamentoId,
      osId:form.osId?+form.osId:null, data:form.data, local:form.local, tecnico:form.tecnico,
      cond:form.cond, padroes:form.padroes, pontos, excent:form.excent, conclusao, obs:form.obs };
    ndb.calibracoes.push(newCalib);
    // Atualiza ultima calibração do equip
    const eIdx = ndb.equipamentos.findIndex(e=>e.id===+form.equipamentoId);
    if(eIdx>=0){
      ndb.equipamentos[eIdx].ultimaCalib = form.data;
      const proxDate = new Date(form.data); proxDate.setFullYear(proxDate.getFullYear()+1);
      ndb.equipamentos[eIdx].proxCalib = proxDate.toISOString().slice(0,10);
    }
    SGAB.saveDB(ndb); reload();
    setSel(newCalib); setView('detalhe');
    toast(`Calibração ${numero} salva com sucesso!`,'success');
  }

  function calcTolerance(valor, cap, classe) {
    const c = +cap;
    if (classe==='II')   return valor <= c*0.5 ? c*0.001 : valor <= c*0.8 ? c*0.002 : c*0.003;
    if (classe==='IIII') return valor <= c*0.5 ? c*0.02  : valor <= c*0.8 ? c*0.03  : c*0.05;
    // Classe III (padrão)
    return valor <= c*0.5 ? c*0.01 : valor <= c*0.8 ? c*0.02 : c*0.03;
  }

  // ── CERTIFICADO PDF ───────────────────────────────────────────
  function gerarCertificado(calib) {
    const cli = db.clientes.find(c=>c.id===calib.clienteId);
    const eq  = db.equipamentos.find(e=>e.id===calib.equipamentoId);
    const config = db.config.empresa;
    const isRBC = calib.tipo==='RBC';
    const tituloCert = isRBC ? 'CERTIFICADO DE CALIBRAÇÃO RBC' : 'CERTIFICADO DE CONFORMIDADE — CALIBRAÇÃO RASTREADA';

    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>${calib.numero}</title>
    <style>
      body{font-family:Arial,sans-serif;font-size:11px;margin:0;padding:20px;color:#111}
      .header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:3px solid #0D1B2A;margin-bottom:14px}
      .brand{font-size:18px;font-weight:900;color:#0D1B2A;letter-spacing:-0.5px}
      .brand sub{font-size:10px;font-weight:400;color:#6B7280;display:block;letter-spacing:0}
      .cert-num{font-size:22px;font-weight:900;color:#1E6FD9;text-align:right}
      .cert-title{font-size:13px;font-weight:700;color:#374151;text-align:right;margin-top:2px}
      .acred{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:4px;padding:5px 10px;font-size:9px;color:#1D4ED8;font-weight:700;margin-top:4px;text-align:center}
      .section{background:#0D1B2A;color:#fff;padding:5px 10px;margin:10px 0 6px;font-weight:700;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;border-radius:3px}
      table{width:100%;border-collapse:collapse;margin-bottom:8px}
      td,th{border:1px solid #ddd;padding:5px 7px;font-size:10px}
      th{background:#F1F5F9;font-weight:700;color:#374151;text-align:left}
      .ok{color:#15803D;font-weight:700} .nok{color:#B91C1C;font-weight:700}
      .conclusao-ok{background:#DCFCE7;border:2px solid #15803D;color:#15803D;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:900;text-align:center;margin:10px 0}
      .conclusao-nok{background:#FEE2E2;border:2px solid #B91C1C;color:#B91C1C;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:900;text-align:center;margin:10px 0}
      .sign{display:flex;gap:30px;margin-top:24px}
      .sign-box{flex:1;border-top:1px solid #999;padding-top:6px;font-size:9px;color:#666;text-align:center}
      .footer{margin-top:16px;padding-top:8px;border-top:1px solid #E2E8F0;font-size:8px;color:#9CA3AF;text-align:center}
      @media print{body{padding:10px}}
    </style></head><body>
    <div class="header">
      <div>
        <div class="brand">${config.nome}<sub>${config.cnpj}</sub></div>
        <div style="font-size:9px;color:#6B7280;margin-top:4px">${config.endereco} — ${config.cidade}/${config.uf}<br>${config.norma}</div>
        ${isRBC?`<div class="acred">⭐ ACREDITADO CGCRE — ${config.acred}</div>`:'<div class="acred">CALIBRAÇÃO RASTREADA — DOC 11</div>'}
      </div>
      <div>
        <div class="cert-num">${calib.numero}</div>
        <div class="cert-title">${tituloCert}</div>
        <div style="font-size:9px;color:#9CA3AF;text-align:right;margin-top:4px">Data: ${fmt.date(calib.data)} | Local: ${calib.local}</div>
      </div>
    </div>

    <div class="section">01 — IDENTIFICAÇÃO DO INSTRUMENTO</div>
    <table><tr><th>Fabricante</th><td>${eq?.fab||'—'}</td><th>Modelo</th><td>${eq?.modelo||'—'}</td></tr>
    <tr><th>N° de Série</th><td>${eq?.serie||'—'}</td><th>TAG / Patrimônio</th><td><b>${eq?.tag||'—'}</b></td></tr>
    <tr><th>Capacidade</th><td>${eq?.cap||'—'}</td><th>Divisão (d=e)</th><td>${eq?.divD||'—'}</td></tr>
    <tr><th>Classe de Exatidão</th><td>${eq?.classe||'—'}</td><th>Portaria</th><td>${eq?.portaria||'—'}</td></tr>
    <tr><th>Localização</th><td colspan="3">${eq?.local||'—'} — ${cli?.razaoSocial||'—'}, ${cli?.cidade||'—'}/${cli?.uf||'—'}</td></tr></table>

    <div class="section">02 — CONDIÇÕES AMBIENTAIS</div>
    <table><tr><th>Temperatura (°C)</th><td>${calib.cond?.temp||'—'}</td><th>Umidade Relativa (%)</th><td>${calib.cond?.umid||'—'}</td></tr>
    <tr><th>Pressão Atm. (hPa)</th><td>${calib.cond?.press||'—'}</td><th>Densidade do Ar (kg/m³)</th><td>${calib.cond?.densAr||'—'}</td></tr></table>

    <div class="section">03 — PADRÕES DE TRABALHO UTILIZADOS</div>
    <table><tr><th>TAG</th><th>N° Certificado</th><th>Validade</th><th>Rastreabilidade</th><th>Classe</th><th>Capacidade</th><th>Resolução</th><th>Incerteza</th><th>k</th></tr>
    ${(calib.padroes||[]).map(p=>`<tr><td>${p.tag}</td><td>${p.cert}</td><td>${fmt.date(p.val)}</td><td>${p.rastr}</td><td>${p.classe}</td><td>${p.cap}</td><td>${p.res}</td><td>${p.incert} g</td><td>${p.k}</td></tr>`).join('')}</table>

    <div class="section">04 — RESULTADOS DE CALIBRAÇÃO — ERROS E CORREÇÕES</div>
    <table>
      <tr><th>Carga Nominal (g)</th><th>Leitura 1</th><th>Leitura 2</th><th>Leitura 3</th><th>Média</th><th>Erro (g)</th><th>Correção (g)</th><th>Tolerância (g)</th><th>Incerteza U (g)</th><th>Resultado</th></tr>
      ${(calib.pontos||[]).map(p=>`<tr><td><b>${p.nom}</b></td><td>${p.l1}</td><td>${p.l2}</td><td>${p.l3}</td><td>${p.med}</td><td>${p.err}</td><td>${p.corr}</td><td>±${p.tol}</td><td>${p.incU}</td><td class="${p.ok?'ok':'nok'}">${p.ok?'CONFORME':'NÃO CONFORME'}</td></tr>`).join('')}
    </table>

    <div class="section">05 — ENSAIO DE EXCENTRICIDADE</div>
    <table><tr><th>Posição</th><th>Carga de Ensaio (g)</th><th>Leitura (g)</th><th>Diferença (g)</th></tr>
    ${(calib.excent||[]).map((e,i,arr)=>{const ref=arr[0]?.leit||0;const diff=+e.leit-+ref;return`<tr><td>${e.pos}</td><td>${e.carga}</td><td>${e.leit}</td><td>${diff>=0?'+':''}${diff}</td></tr>`}).join('')}</table>

    <div class="${calib.conclusao==='CONFORME'?'conclusao-ok':'conclusao-nok'}">${calib.conclusao==='CONFORME'?'✓ CONFORME':'✗ NÃO CONFORME'} — ${calib.conclusao==='CONFORME'?'O instrumento atende aos requisitos metrológicos aplicáveis.':'O instrumento não atende aos requisitos metrológicos. Recomenda-se ajuste/reparo.'}</div>

    ${calib.obs?`<div class="section">OBSERVAÇÕES</div><p style="font-size:10px;padding:6px;border:1px solid #ddd;min-height:30px">${calib.obs}</p>`:''}

    <div class="sign">
      <div class="sign-box">Técnico Responsável<br><b>${calib.tecnico||user.nome}</b><br>Levi Balanças</div>
      <div class="sign-box">Responsável pelo Cliente<br><b>${cli?.contato||'—'}</b><br>${cli?.razaoSocial||'—'}</div>
      ${isRBC?`<div class="sign-box">Responsável Técnico RBC<br>Acreditação ${config.acred}<br>Data: ${fmt.date(calib.data)}</div>`:''}
    </div>
    <div class="footer">${config.nome} • ${config.cnpj} • ${config.acred} • ${config.norma} • Documento gerado em ${new Date().toLocaleDateString('pt-BR')}</div>
    <script>window.print();<\/script></body></html>`;
    const w = window.open('','_blank','width=950,height=750');
    w.document.write(html); w.document.close();
  }

  // ── VIEW: LISTA ───────────────────────────────────────────────
  if (view==='lista') {
    return (
      <div style={{opacity:1}}>
        <PgHeader title="Calibração RBC / Rastreada" subtitle={`${db.calibracoes.length} calibrações realizadas`}
          actions={<>
            <Btn variant="outline" onClick={()=>novaCalib('Rastreada')}>+ Nova Rastreada</Btn>
            <Btn icon="plus" onClick={()=>novaCalib('RBC')}>+ Nova RBC</Btn>
          </>}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:24}}>
          <Card style={{padding:20,background:'linear-gradient(135deg,#EFF6FF,#DBEAFE)',border:'1px solid #BFDBFE'}}>
            <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:40,height:40,borderRadius:10,background:'#1E6FD9',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                <Icon name="calibracao" size={20} color="#fff"/></div>
              <div>
                <p style={{margin:0,fontSize:11,fontWeight:700,color:'#1D4ED8',textTransform:'uppercase',letterSpacing:'0.05em'}}>Calibração RBC</p>
                <p style={{margin:'4px 0 0',fontSize:22,fontWeight:800,color:'#1E3A5F'}}>{db.calibracoes.filter(c=>c.tipo==='RBC').length}</p>
                <p style={{margin:'4px 0 0',fontSize:12,color:'#3B82F6'}}>Acreditada CGCRE-CAL 0830 • ABNT NBR ISO/IEC 17025</p>
              </div>
            </div>
          </Card>
          <Card style={{padding:20,background:'linear-gradient(135deg,#F0FDF4,#DCFCE7)',border:'1px solid #BBF7D0'}}>
            <div style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:40,height:40,borderRadius:10,background:'#16A34A',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                <Icon name="calibracao" size={20} color="#fff"/></div>
              <div>
                <p style={{margin:0,fontSize:11,fontWeight:700,color:'#15803D',textTransform:'uppercase',letterSpacing:'0.05em'}}>Calibração Rastreada</p>
                <p style={{margin:'4px 0 0',fontSize:22,fontWeight:800,color:'#14532D'}}>{db.calibracoes.filter(c=>c.tipo==='Rastreada').length}</p>
                <p style={{margin:'4px 0 0',fontSize:12,color:'#16A34A'}}>Conforme DOC 11 • Portaria 157/22 INMETRO</p>
              </div>
            </div>
          </Card>
        </div>
        <Card style={{padding:0}}>
          <Tbl
            cols={[
              {k:'numero',l:'Certificado',r:v=><span style={{fontWeight:700,color:'#1E6FD9',fontFamily:'monospace'}}>{v}</span>},
              {k:'tipo',l:'Tipo',r:v=><Badge color={v==='RBC'?'blue':'green'}>{v}</Badge>},
              {k:'clienteId',l:'Cliente',r:v=>db.clientes.find(c=>c.id===v)?.fantasia||'—'},
              {k:'equipamentoId',l:'Equipamento',r:v=>{ const e=db.equipamentos.find(x=>x.id===v); return e?`${e.tag} — ${e.modelo}`:'—'; }},
              {k:'data',l:'Data',r:v=><span style={{fontFamily:'monospace'}}>{fmt.date(v)}</span>},
              {k:'conclusao',l:'Resultado',r:v=><StatusBadge status={v}/>},
              {k:'id',l:'',thStyle:{width:90},r:(_,r)=>(
                <div style={{display:'flex',gap:4}} onClick={e=>e.stopPropagation()}>
                  <button onClick={()=>{setSel(r);setView('detalhe');}} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#6B7280',borderRadius:5,display:'flex'}} title="Ver detalhes"><Icon name="eye" size={15}/></button>
                  <button onClick={()=>gerarCertificado(r)} style={{background:'none',border:'none',cursor:'pointer',padding:4,color:'#1E6FD9',borderRadius:5,display:'flex'}} title="Gerar Certificado PDF"><Icon name="printer" size={15}/></button>
                </div>
              )},
            ]}
            data={db.calibracoes} onRow={r=>{setSel(r);setView('detalhe');}}
            empty="Nenhuma calibração registrada."/>
        </Card>
      </div>
    );
  }

  // ── VIEW: DETALHE ─────────────────────────────────────────────
  if (view==='detalhe' && sel) {
    const calib = db.calibracoes.find(c=>c.id===sel.id)||sel;
    const cli = db.clientes.find(c=>c.id===calib.clienteId);
    const eq  = db.equipamentos.find(e=>e.id===calib.equipamentoId);
    return (
      <div style={{opacity:1}}>
        <PgHeader title={calib.numero} subtitle={`${calib.tipo} — ${fmt.date(calib.data)} — ${cli?.razaoSocial||'—'}`}
          back onBack={()=>setView('lista')}
          actions={<>
            <StatusBadge status={calib.conclusao}/>
            <Btn variant="outline" icon="printer" onClick={()=>gerarCertificado(calib)}>Gerar Certificado PDF</Btn>
          </>}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:16}}>
          <Card>
            <h4 style={{margin:'0 0 12px',fontSize:11,fontWeight:700,color:'#6B7280',textTransform:'uppercase',letterSpacing:'0.06em'}}>Instrumento</h4>
            {[['TAG',eq?.tag],['Fabricante',eq?.fab],['Modelo',eq?.modelo],['N° Série',eq?.serie],['Capacidade',eq?.cap],['Divisão',eq?.divD],['Classe',eq?.classe],['Localização',eq?.local]].map(([l,v])=>v&&(
              <div key={l} style={{display:'flex',gap:8,marginBottom:7}}><span style={{fontSize:11,fontWeight:700,color:'#9CA3AF',minWidth:85,flexShrink:0}}>{l}</span><span style={{fontSize:12,color:'#111827'}}>{v}</span></div>
            ))}
          </Card>
          <Card>
            <h4 style={{margin:'0 0 12px',fontSize:11,fontWeight:700,color:'#6B7280',textTransform:'uppercase',letterSpacing:'0.06em'}}>Condições Ambientais</h4>
            {[['Temperatura',`${calib.cond?.temp} °C`],['Umidade Rel.',`${calib.cond?.umid} %`],['Pressão Atm.',`${calib.cond?.press} hPa`],['Densidade do Ar',`${calib.cond?.densAr} kg/m³`]].map(([l,v])=>(
              <div key={l} style={{display:'flex',gap:8,marginBottom:7}}><span style={{fontSize:11,fontWeight:700,color:'#9CA3AF',minWidth:110,flexShrink:0}}>{l}</span><span style={{fontSize:12,color:'#111827',fontFamily:'monospace'}}>{v}</span></div>
            ))}
            <Divider/>
            <h4 style={{margin:'0 0 12px',fontSize:11,fontWeight:700,color:'#6B7280',textTransform:'uppercase',letterSpacing:'0.06em'}}>Padrão de Trabalho</h4>
            {(calib.padroes||[]).map((p,i)=>(
              <div key={i} style={{fontSize:11,lineHeight:1.8}}>
                <div><b>TAG:</b> {p.tag} &nbsp;<b>Cert:</b> {p.cert} &nbsp;<b>Val:</b> {fmt.date(p.val)}</div>
                <div><b>Classe:</b> {p.classe} &nbsp;<b>Incerteza:</b> {p.incert} g (k={p.k})</div>
              </div>
            ))}
          </Card>
        </div>
        {/* PONTOS */}
        <Card style={{padding:0,marginBottom:16}}>
          <div style={{padding:'14px 20px',borderBottom:'1px solid #F1F5F9'}}><h3 style={{margin:0,fontSize:14,fontWeight:800,color:'#0D1B2A'}}>Resultados — Erros e Correções</h3></div>
          <div style={{overflowX:'auto'}}>
            <table style={{width:'100%',borderCollapse:'collapse',fontSize:12}}>
              <thead><tr style={{borderBottom:'2px solid #E8EDF4',background:'#F8FAFC'}}>
                {['Carga Nominal (g)','Leitura 1','Leitura 2','Leitura 3','Média','Erro (g)','Correção (g)','Tol. (g)','Incert. U','Resultado'].map(h=>(
                  <th key={h} style={{padding:'9px 12px',textAlign:'left',fontWeight:700,color:'#6B7280',fontSize:10,textTransform:'uppercase',whiteSpace:'nowrap'}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>{(calib.pontos||[]).map((p,i)=>(
                <tr key={i} style={{borderBottom:'1px solid #F1F5F9'}}>
                  <td style={{padding:'9px 12px',fontWeight:700,color:'#0D1B2A',fontFamily:'monospace'}}>{p.nom}</td>
                  {['l1','l2','l3'].map(k=><td key={k} style={{padding:'9px 12px',fontFamily:'monospace',color:'#374151'}}>{p[k]}</td>)}
                  {['med','err','corr'].map(k=><td key={k} style={{padding:'9px 12px',fontFamily:'monospace',fontWeight:600,color:k==='err'&&Math.abs(p.err)>p.tol?'#DC2626':'#374151'}}>{p[k]}</td>)}
                  <td style={{padding:'9px 12px',fontFamily:'monospace',color:'#6B7280'}}>±{p.tol}</td>
                  <td style={{padding:'9px 12px',fontFamily:'monospace',color:'#6B7280'}}>{p.incU}</td>
                  <td style={{padding:'9px 12px'}}><Badge color={p.ok?'green':'red'}>{p.ok?'CONFORME':'NÃO CONF.'}</Badge></td>
                </tr>
              ))}</tbody>
            </table>
          </div>
        </Card>
        {/* EXCENTRICIDADE */}
        <Card style={{padding:0,marginBottom:16}}>
          <div style={{padding:'14px 20px',borderBottom:'1px solid #F1F5F9'}}><h3 style={{margin:0,fontSize:14,fontWeight:800,color:'#0D1B2A'}}>Ensaio de Excentricidade</h3></div>
          <Tbl cols={[{k:'pos',l:'Posição'},{k:'carga',l:'Carga (g)'},{k:'leit',l:'Leitura (g)'}]} data={(calib.excent||[]).map((e,i,a)=>({...e,diff:+e.leit-(+a[0]?.leit||0)}))}/>
        </Card>
        <div style={{padding:'14px 20px',borderRadius:12,background:calib.conclusao==='CONFORME'?'#F0FDF4':'#FEF2F2',border:`2px solid ${calib.conclusao==='CONFORME'?'#16A34A':'#DC2626'}`,textAlign:'center'}}>
          <span style={{fontSize:16,fontWeight:900,color:calib.conclusao==='CONFORME'?'#15803D':'#B91C1C'}}>{calib.conclusao==='CONFORME'?'✓ CONFORME':'✗ NÃO CONFORME'}</span>
        </div>
      </div>
    );
  }

  // ── VIEW: NOVA CALIBRAÇÃO FORM ────────────────────────────────
  const F = (path, val) => {
    setForm(prev => {
      const next = {...prev};
      const keys = path.split('.');
      let obj = next;
      for (let i=0;i<keys.length-1;i++) { obj[keys[i]]={...obj[keys[i]]}; obj=obj[keys[i]]; }
      obj[keys[keys.length-1]] = val;
      return next;
    });
  };
  const equipOpts = form?.clienteId ? db.equipamentos.filter(e=>e.clienteId===+form.clienteId).map(e=>({v:e.id,l:`${e.tag} — ${e.modelo} (${e.cap})`})) : [];

  return (
    <div style={{opacity:1}}>
      <PgHeader title={`Nova Calibração ${tipo}`} subtitle={tipo==='RBC'?'Acreditada CGCRE • DOC 09 • ABNT NBR ISO/IEC 17025:2017':'Rastreada • DOC 11 • Portaria 157/22 INMETRO'}
        back onBack={()=>setView('lista')}
        actions={<Btn icon="check" onClick={salvarCalib}>Salvar e Gerar Certificado</Btn>}/>

      <Card style={{marginBottom:16}}>
        <Divider label="Identificação"/>
        <Grid cols={3} gap={14}>
          <FormField label="Cliente" required><Sel value={form.clienteId} onChange={v=>F('clienteId',v)} options={db.clientes.filter(c=>c.ativo).map(c=>({v:c.id,l:c.razaoSocial}))}/></FormField>
          <FormField label="Equipamento" required><Sel value={form.equipamentoId} onChange={v=>F('equipamentoId',v)} options={equipOpts} placeholder={form.clienteId?'Selecionar balança...':'Selecione o cliente primeiro'}/></FormField>
          <FormField label="Ordem de Serviço"><Sel value={form.osId} onChange={v=>F('osId',v)} options={db.ordens.filter(o=>o.clienteId===+form.clienteId).map(o=>({v:o.id,l:o.numero}))} placeholder="Vincular OS (opcional)"/></FormField>
          <FormField label="Data da Calibração" required><Inp value={form.data} onChange={v=>F('data',v)} type="date"/></FormField>
          <FormField label="Local de Calibração"><Sel value={form.local} onChange={v=>F('local',v)} options={['In Situ','Laboratório'].map(x=>({v:x,l:x}))}/></FormField>
          <FormField label="Técnico Responsável"><Inp value={form.tecnico} onChange={v=>F('tecnico',v)}/></FormField>
        </Grid>
        <Divider label="Condições Ambientais"/>
        <Grid cols={4} gap={14}>
          <FormField label="Temperatura (°C)"><Inp value={form.cond?.temp} onChange={v=>F('cond.temp',v)} type="number" step="0.1"/></FormField>
          <FormField label="Umidade Rel. (%)"><Inp value={form.cond?.umid} onChange={v=>F('cond.umid',v)} type="number" step="1"/></FormField>
          <FormField label="Pressão Atm. (hPa)"><Inp value={form.cond?.press} onChange={v=>F('cond.press',v)} type="number" step="0.1"/></FormField>
          <FormField label="Densidade do Ar"><Inp value={form.cond?.densAr} onChange={v=>F('cond.densAr',v)} type="number" step="0.001"/></FormField>
        </Grid>
        <Divider label="Padrão de Trabalho Utilizado"/>
        {(form.padroes||[]).map((p,i)=>(
          <Grid key={i} cols={5} gap={12}>
            <FormField label="TAG Padrão"><Inp value={p.tag} onChange={v=>{ const ps=[...form.padroes]; ps[i]={...ps[i],tag:v}; F('padroes',ps); }}/></FormField>
            <FormField label="N° Certificado"><Inp value={p.cert} onChange={v=>{ const ps=[...form.padroes]; ps[i]={...ps[i],cert:v}; F('padroes',ps); }}/></FormField>
            <FormField label="Validade"><Inp value={p.val} onChange={v=>{ const ps=[...form.padroes]; ps[i]={...ps[i],val:v}; F('padroes',ps); }} type="date"/></FormField>
            <FormField label="Incerteza (g)"><Inp value={p.incert} onChange={v=>{ const ps=[...form.padroes]; ps[i]={...ps[i],incert:v}; F('padroes',ps); }} type="number" step="0.001"/></FormField>
            <FormField label="k"><Sel value={p.k} onChange={v=>{ const ps=[...form.padroes]; ps[i]={...ps[i],k:v}; F('padroes',ps); }} options={['2','2.57','3'].map(x=>({v:x,l:`k=${x}`}))}/></FormField>
          </Grid>
        ))}
      </Card>

      {/* PONTOS */}
      <Card style={{marginBottom:16}}>
        <Divider label="Pontos de Calibração — 3 Leituras por Ponto"/>
        <p style={{margin:'0 0 14px',fontSize:12,color:'#6B7280'}}>Insira a carga nominal e as 3 leituras. O erro, correção e incerteza são calculados automaticamente.</p>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
            <thead><tr style={{borderBottom:'2px solid #E8EDF4'}}>
              {['Carga Nominal (g)','Leitura 1 (g)','Leitura 2 (g)','Leitura 3 (g)','Média calc.','Erro calc.','Correção calc.'].map(h=>(
                <th key={h} style={{padding:'8px 10px',textAlign:'left',fontWeight:700,color:'#6B7280',fontSize:10,textTransform:'uppercase',whiteSpace:'nowrap'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {(form.pontos||[]).map((p,i)=>{
                const calc = p.l1&&p.l2&&p.l3&&p.nom ? SGAB.calcPonto(p.l1,p.l2,p.l3,p.nom) : null;
                return (
                  <tr key={i} style={{borderBottom:'1px solid #F1F5F9'}}>
                    {['nom','l1','l2','l3'].map(k=>(
                      <td key={k} style={{padding:'6px 8px'}}>
                        <Inp value={p[k]} onChange={v=>{ const pts=[...form.pontos]; pts[i]={...pts[i],[k]:v}; F('pontos',pts); }} type="number" step="1" placeholder="0"/>
                      </td>
                    ))}
                    <td style={{padding:'6px 12px',fontFamily:'monospace',fontWeight:600,color:'#374151'}}>{calc?calc.med:'—'}</td>
                    <td style={{padding:'6px 12px',fontFamily:'monospace',fontWeight:700,color:calc&&Math.abs(calc.err)>0?'#D97706':'#374151'}}>{calc?calc.err:'—'}</td>
                    <td style={{padding:'6px 12px',fontFamily:'monospace',color:'#16A34A',fontWeight:600}}>{calc?calc.corr:'—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>

      {/* EXCENTRICIDADE */}
      <Card style={{marginBottom:16}}>
        <Divider label="Ensaio de Excentricidade"/>
        <Grid cols={3} gap={14}>
          {(form.excent||[]).map((e,i)=>(
            <Card key={i} style={{padding:12,background:'#F8FAFF',border:'1px solid #E8EDF4'}}>
              <p style={{margin:'0 0 8px',fontSize:11,fontWeight:700,color:'#374151'}}>{e.pos}</p>
              <div style={{display:'flex',gap:8}}>
                <FormField label="Carga (g)"><Inp value={e.carga} onChange={v=>{ const ex=[...form.excent]; ex[i]={...ex[i],carga:v}; F('excent',ex); }} type="number"/></FormField>
                <FormField label="Leitura (g)"><Inp value={e.leit} onChange={v=>{ const ex=[...form.excent]; ex[i]={...ex[i],leit:v}; F('excent',ex); }} type="number"/></FormField>
              </div>
            </Card>
          ))}
        </Grid>
      </Card>

      <Card>
        <Divider label="Conclusão"/>
        <Grid cols={2} gap={14}>
          <FormField label="Resultado Final">
            <Sel value={form.conclusao} onChange={v=>F('conclusao',v)} options={['CONFORME','NÃO CONFORME'].map(x=>({v:x,l:x}))}/>
          </FormField>
          <FormField label="Observações" col="1/-1"><Txta value={form.obs} onChange={v=>F('obs',v)} rows={2} placeholder="Observações adicionais sobre a calibração..."/></FormField>
        </Grid>
        <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:8}}>
          <Btn variant="secondary" onClick={()=>setView('lista')}>Cancelar</Btn>
          <Btn icon="check" size="lg" onClick={salvarCalib}>Salvar Calibração e Gerar Certificado</Btn>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Calibracao });