const { useState } = React;

// ─── Lead time status ─────────────────────────────────────────────────────────
function ltStatus(days) {
  if (days <= 7)  return 'critical';
  if (days <= 14) return 'at_risk';
  return 'ok';
}

// ─── Lead Time Row ────────────────────────────────────────────────────────────
function LeadTimeRow({ item, idx }) {
  const st = ltStatus(item.daysSlack);
  const col = statusColor(st);
  return (
    <tr style={{ background: st==='critical'?'#FFF5F5': st==='at_risk'?'#FFFBEB': idx%2===0?'#FAFBFC':C.card }}>
      <Td>
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          {item.criticalPath && <span style={{ fontSize:8, fontWeight:800, background:C.danger, color:'#fff', padding:'1px 5px', borderRadius:3 }}>CC</span>}
          <span style={{ fontWeight:600, color:C.text, fontSize:11.5 }}>{item.item}</span>
        </div>
      </Td>
      <Td style={{ fontSize:11 }}>{item.supplier}</Td>
      <Td><span style={{ fontSize:10.5, background:C.borderSub, padding:'1px 6px', borderRadius:3, fontWeight:600 }}>{item.country}</span></Td>
      <Td style={{ textAlign:'center' }}>
        <span style={{ fontFamily:'IBM Plex Mono, monospace', fontWeight:700, fontSize:12, color: item.leadWeeks >= 16 ? C.danger : item.leadWeeks >= 10 ? C.warning : C.textSub }}>{item.leadWeeks} sem</span>
      </Td>
      <Td>
        <span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, color:col, fontWeight:700 }}>{item.poDeadline}</span>
      </Td>
      <Td><span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11 }}>{item.needDate}</span></Td>
      <Td>
        <Badge
          label={item.poStatus}
          variant={item.poStatus==='Não emitida'?'danger': item.poStatus.includes('negoc')||item.poStatus.includes('aprov')?'warning':'default'}
          small
        />
      </Td>
      <Td style={{ textAlign:'center' }}>
        <div style={{ display:'flex', alignItems:'center', gap:5, justifyContent:'center' }}>
          <span style={{ width:8, height:8, borderRadius:'50%', background:col, display:'inline-block' }} />
          <span style={{ fontSize:12, fontWeight:800, color:col }}>{item.daysSlack}d</span>
        </div>
      </Td>
      <Td>
        {item.criticalPath
          ? <span style={{ fontSize:10.5, color:C.danger, fontWeight:700 }}>⚠ Caminho crítico</span>
          : <span style={{ fontSize:10.5, color:C.textSub }}>Folga no cronograma</span>
        }
      </Td>
    </tr>
  );
}

// ─── Import Tracker Row ───────────────────────────────────────────────────────
function ImportRow({ imp }) {
  const radarOk = imp.radar === 'OK';
  return (
    <tr style={{ background: C.card }}>
      <Td><span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, fontWeight:600, color:C.primary }}>{imp.bl}</span></Td>
      <Td style={{ fontWeight:500 }}>{imp.item}</Td>
      <Td style={{ fontSize:11 }}>{imp.origin}</Td>
      <Td><span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, fontWeight:700 }}>{imp.eta}</span></Td>
      <Td>
        <Badge
          label={imp.status}
          variant={imp.status.includes('trânsito')?'primary':imp.status.includes('confirmado')?'success':'default'}
          small
        />
      </Td>
      <Td>
        <Badge label={imp.customs} variant={imp.customs==='—'?'default':imp.customs.includes('pendente')||imp.customs.includes('Aguard')?'warning':'success'} small />
      </Td>
      <Td>
        <div style={{ display:'flex', alignItems:'center', gap:5 }}>
          <span style={{ width:7, height:7, borderRadius:'50%', background: radarOk ? C.success : C.warning, display:'inline-block' }} />
          <span style={{ fontSize:11, fontWeight:600, color: radarOk ? C.success : C.warning }}>RADAR {imp.radar}</span>
        </div>
      </Td>
    </tr>
  );
}

// ─── Screen 6: Suprimentos / Lead Time ───────────────────────────────────────
function Screen6Supply() {
  const { criticalLeadTimes, importTracking } = window.SIGP_DATA;
  const [activeTab, setActiveTab] = useState('leadtimes');

  const critical8  = criticalLeadTimes.filter(i => i.leadWeeks >= 8).length;
  const poAtraso   = criticalLeadTimes.filter(i => i.poStatus === 'Não emitida' || i.poStatus === 'Cotação pendente').length;
  const semHedge   = 2; // from currency exposure
  const janelaCrit = criticalLeadTimes.filter(i => i.daysSlack <= 7).length;

  return (
    <ScreenShell
      title="Dashboard de Suprimentos e Lead Time"
      subtitle="SUP · Controle de equipamentos críticos, alertas de emissão de PO e importações"
    >
      {/* ── KPIs ── */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10, marginBottom:14 }}>
        <KPICard label="Lead Time Crítico (≥8 sem)" value={critical8}  sub="itens sem PO emitida" status="at_risk" />
        <KPICard label="Janela de PO Vencendo (≤7d)" value={janelaCrit} sub="risco de impacto crítico" status={janelaCrit>0?'critical':'ok'} />
        <KPICard label="POs Pendentes / Não Emitidas" value={poAtraso} sub="equipamentos sem ordem" status="warning" />
        <KPICard label="Exposição Cambial Sem Hedge" value={`R$ 2,8M`} sub="EUR — risco de +R$420k no EAC" status="at_risk" />
      </div>

      {/* ── CRITICAL ALERT — Caldeira ── */}
      <div style={{ padding:'10px 14px', background:'#FFF5F5', border:`2px solid ${C.danger}`, borderRadius:7, marginBottom:14, display:'flex', gap:12, alignItems:'center' }}>
        <span style={{ fontSize:22 }}>🔴</span>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:13, fontWeight:800, color:C.danger, marginBottom:2 }}>JANELA CRÍTICA — CALDEIRA AQUATUBULAR 30t/h</div>
          <div style={{ fontSize:11.5, color:C.text, lineHeight:1.6 }}>
            <strong>Lead time: 22 semanas · Fornecedor: Hoval Brasil · Deadline PO: 30/05/2026 (7 dias)</strong><br />
            Sem emissão da PO até 30/05, a data de necessidade (25/10/2026) não será atendida → atraso em cascata de toda a Fase 2 (Montagem Mecânica). <strong>Impacto: +22 semanas no Caminho Crítico.</strong>
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          <Btn variant="danger" onClick={() => alert('Abrindo fluxo de aprovação REQ-2852...')}>🚀 Aprovar PO Emergencial</Btn>
          <Btn variant="default" small onClick={() => alert('Abrindo tela de autorizações...')}>Ver REQ-2852 na fila</Btn>
        </div>
      </div>

      {/* ── Tabs ── */}
      <div style={{ display:'flex', gap:2, marginBottom:12 }}>
        {[{id:'leadtimes',label:'Lead Times Críticos'},{id:'imports',label:'Importações em Andamento'},{id:'janela',label:'Janela de Emissão PO'}].map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
            padding:'6px 14px', fontSize:11.5, fontWeight:activeTab===t.id?700:500,
            background:activeTab===t.id?C.primary:'#fff',
            color:activeTab===t.id?'#fff':C.textSub,
            border:`1px solid ${activeTab===t.id?C.primary:C.border}`,
            borderRadius:5, cursor:'pointer', fontFamily:'inherit',
          }}>{t.label}</button>
        ))}
      </div>

      {/* ── Lead Times Tab ── */}
      {activeTab === 'leadtimes' && (
        <Card title="Maiores Lead Times — Equipamentos Críticos" subtitle="CC = Caminho Crítico · Semáforo: Verde (folga OK) / Âmbar (<14d) / Vermelho (janela ≤7d)" noPad>
          <Table>
            <thead>
              <tr>
                <Th>Item / Equipamento</Th>
                <Th>Fornecedor</Th>
                <Th>País</Th>
                <Th style={{ textAlign:'center' }}>Lead Time</Th>
                <Th>Deadline PO</Th>
                <Th>Necessidade</Th>
                <Th>Status PO</Th>
                <Th style={{ textAlign:'center' }}>Folga</Th>
                <Th>Impacto</Th>
              </tr>
            </thead>
            <tbody>
              {criticalLeadTimes.map((item, i) => <LeadTimeRow key={i} item={item} idx={i} />)}
            </tbody>
          </Table>
          <div style={{ padding:'8px 12px', borderTop:`1px solid ${C.borderSub}`, fontSize:11, color:C.textSub }}>
            <span style={{ fontWeight:700, color:C.danger }}>CC = Caminho Crítico</span> · Um atraso nestes itens impacta diretamente a data de conclusão do projeto. Integração com Tela IAP para recomendações de hedge e compra antecipada.
          </div>
        </Card>
      )}

      {/* ── Imports Tab ── */}
      {activeTab === 'imports' && (
        <Card title="Tracker de Importações em Andamento" subtitle="BL, ETA, status aduaneiro e RADAR SISCOMEX" noPad>
          <Table>
            <thead>
              <tr>
                <Th>BL / AWB</Th>
                <Th>Item</Th>
                <Th>Origem</Th>
                <Th>ETA</Th>
                <Th>Status</Th>
                <Th>Documentação Aduaneira</Th>
                <Th>RADAR</Th>
              </tr>
            </thead>
            <tbody>
              {importTracking.map((imp, i) => <ImportRow key={i} imp={imp} />)}
            </tbody>
          </Table>
          <div style={{ padding:'10px 12px', background:'#FFF7ED', borderRadius:5, margin:'10px 12px', border:`1px solid #FED7AA`, fontSize:11 }}>
            <strong style={{ color:'#92400E' }}>⚠ NLRTM2604221</strong> <span style={{ color:'#78350F' }}>— Medidores Coriolis com RADAR pendente. Risco de bloqueio aduaneiro. Acionar despachante Camex imediatamente.</span>
          </div>
        </Card>
      )}

      {/* ── PO Window Tab ── */}
      {activeTab === 'janela' && (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          <Card title="Janela de Emissão de PO — Próximas 8 Semanas">
            {criticalLeadTimes.slice(0,6).map((item, i) => {
              const st = ltStatus(item.daysSlack);
              const col = statusColor(st);
              const pct = Math.min(100, (item.daysSlack / 90) * 100);
              return (
                <div key={i} style={{ marginBottom:12 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                    <span style={{ fontSize:11.5, fontWeight:600, color:C.text }}>{item.item.substring(0,30)}{item.item.length>30?'…':''}</span>
                    <span style={{ fontSize:11, fontWeight:700, color:col }}>{item.daysSlack}d de folga</span>
                  </div>
                  <div style={{ position:'relative', height:10, background:C.borderSub, borderRadius:4, overflow:'hidden' }}>
                    <div style={{ height:'100%', width:`${pct}%`, background:col, borderRadius:4, transition:'width 0.3s' }} />
                  </div>
                  <div style={{ fontSize:10, color:C.textSub, marginTop:2 }}>Deadline: {item.poDeadline} · Lead: {item.leadWeeks} sem · {item.poStatus}</div>
                </div>
              );
            })}
          </Card>
          <Card title="Ações Prioritárias de Compra" subtitle="Ordenado por urgência">
            {[
              { item:'Caldeira Aquatubular 30t/h',   deadline:'30/05 (7d)',  action:'Emitir PO emergencial',   status:'critical' },
              { item:'Destilador GEA — 6 colunas',   deadline:'15/06 (23d)', action:'Concluir negociação',     status:'at_risk'  },
              { item:'Transformador Siemens 2MVA',    deadline:'30/06 (38d)', action:'Aguardar aprovação REQ',  status:'warning'  },
              { item:'Evaporador Dedini 5 efeitos',   deadline:'20/07 (58d)', action:'Finalizar análise técnica',status:'ok'     },
            ].map((a, i) => (
              <div key={i} style={{ display:'flex', gap:10, padding:'9px 0', borderBottom:`1px solid ${C.borderSub}` }}>
                <div style={{ width:8, alignSelf:'stretch', borderRadius:2, background:statusColor(a.status), flexShrink:0 }} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:12, fontWeight:600, color:C.text }}>{a.item}</div>
                  <div style={{ fontSize:10.5, color:C.textSub }}>{a.action}</div>
                </div>
                <div style={{ textAlign:'right', flexShrink:0 }}>
                  <div style={{ fontSize:11, fontWeight:700, color:statusColor(a.status) }}>{a.deadline}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>
      )}
    </ScreenShell>
  );
}

Object.assign(window, { Screen6Supply });