// Tidal — Purchase Orders · reconciliação de entregas parciais

const PO_STATUS = {
  aberta:   { label:'Aberta',   label_en:'Open',     cor:'var(--sky)',  soft:'rgba(92,141,174,0.14)' },
  parcial:  { label:'Parcial',  label_en:'Partial',  cor:'var(--sun)',  soft:'rgba(198,138,31,0.14)' },
  completa: { label:'Completa', label_en:'Complete', cor:'var(--leaf)', soft:'rgba(92,126,79,0.14)' },
};
const _poL = (st, lang) => (lang === 'en' && st.label_en) ? st.label_en : st.label;

const PoBar = ({pct, cor, h=6}) => (
  <div style={{height:h,background:'var(--cream-3)',borderRadius:999,overflow:'hidden',width:'100%'}}>
    <div style={{width:`${pct}%`,height:'100%',background:cor,borderRadius:999,transition:'width .3s'}}/>
  </div>
);

const StatusBadge = ({status}) => {
  const s = PO_STATUS[status] || PO_STATUS.aberta;
  const lang = useT().lang;
  return <span style={{display:'inline-block',padding:'3px 10px',borderRadius:999,background:s.soft,color:s.cor,fontFamily:'var(--fm)',fontSize:11,fontWeight:600}}>{_poL(s, lang)}</span>;
};

const num = (v) => Number(v) || 0;

// ── Modal: criar / editar PO ──
const PoModal = ({token, toast, po, onClose, onSaved}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const editMode = !!po;
  const [form, setForm] = useState(editMode ? {codigo:po.codigo||'', nome:po.nome||'', observacao:po.observacao||''} : {codigo:'',nome:'',observacao:''});
  const [saving, setSaving] = useState(false);
  const save = async () => {
    if (!form.codigo.trim()) { toast.push({icon:'x',title:'Informe o código da PO'}); return; }
    setSaving(true);
    try {
      const res = await fetch(editMode?`/api/po/${po.id}`:'/api/po', {
        method: editMode?'PATCH':'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${token()}`},
        body: JSON.stringify(form)
      });
      if (res.ok) { toast.push({icon:'check',title:editMode?'PO atualizada':'PO criada'}); onSaved(); }
      else { const d=await res.json(); toast.push({icon:'x',title:'Erro',body:d.error}); }
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
    finally { setSaving(false); }
  };
  return (
    <div style={{position:'fixed',inset:0,zIndex:210,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'6vh 16px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:460,background:'var(--cream)',borderRadius:24,padding:'26px 28px'}}>
        <div style={{fontFamily:'var(--fs)',fontSize:24,letterSpacing:'-0.5px',marginBottom:18}}>{editMode?'Editar':'Nova'} <em style={{fontStyle:'italic',color:'var(--accent)'}}>PO</em></div>
        <label className="label">{lang==='pt'?'Código da PO':'PO code'}</label>
        <input className="input" style={{width:'100%',boxSizing:'border-box',marginBottom:14,fontFamily:'var(--fm)'}} placeholder="GEN-0122-2026-B" value={form.codigo} onChange={e=>setForm(f=>({...f,codigo:e.target.value}))} autoFocus/>
        <label className="label">{lang==='pt'?'Nome / descrição (opcional)':'Name / description (optional)'}</label>
        <input className="input" style={{width:'100%',boxSizing:'border-box',marginBottom:14}} placeholder="Safety items" value={form.nome} onChange={e=>setForm(f=>({...f,nome:e.target.value}))}/>
        <label className="label">{lang==='pt'?'Observação (opcional)':'Note (optional)'}</label>
        <textarea className="input" style={{width:'100%',boxSizing:'border-box',minHeight:52,resize:'vertical',marginBottom:20}} value={form.observacao} onChange={e=>setForm(f=>({...f,observacao:e.target.value}))}/>
        <div style={{display:'flex',gap:10,justifyContent:'flex-end'}}>
          <button className="btn" onClick={onClose}>{lang==='pt'?'Cancelar':'Cancel'}</button>
          <button className="btn-tidal" onClick={save} disabled={saving}>{saving?'Salvando…':(editMode?'Salvar':'Criar')}</button>
        </div>
      </div>
    </div>
  );
};

// ── Modal: adicionar / editar item ──
const ItemModal = ({token, toast, poId, item, onClose, onSaved}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const editMode = !!item;
  const [form, setForm] = useState(editMode
    ? {sap:item.sap||'', descricao:item.descricao||'', unidade:item.unidade||'PCE', qtd_pedida:String(num(item.qtd_pedida)), qtd_entregue:String(num(item.qtd_entregue))}
    : {sap:'', descricao:'', unidade:'PCE', qtd_pedida:'', qtd_entregue:'0'});
  const [saving, setSaving] = useState(false);
  const save = async () => {
    if (!form.descricao.trim()) { toast.push({icon:'x',title:(lang==='pt'?'Descreva o item':'Describe the item')}); return; }
    setSaving(true);
    try {
      const body = { sap:form.sap.trim()||null, descricao:form.descricao.trim(), unidade:form.unidade||'PCE', qtd_pedida:num(form.qtd_pedida), qtd_entregue:num(form.qtd_entregue) };
      const res = await fetch(editMode?`/api/po/itens/${item.id}`:`/api/po/${poId}/itens`, {
        method: editMode?'PATCH':'POST',
        headers:{'Content-Type':'application/json','Authorization':`Bearer ${token()}`},
        body: JSON.stringify(body)
      });
      if (res.ok) { toast.push({icon:'check',title:editMode?'Item atualizado':'Item adicionado'}); onSaved(); }
      else { const d=await res.json(); toast.push({icon:'x',title:'Erro',body:d.error}); }
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
    finally { setSaving(false); }
  };
  const remover = async () => {
    if (!window.confirm('Remover este item?')) return;
    await fetch(`/api/po/itens/${item.id}`,{method:'DELETE',headers:{'Authorization':`Bearer ${token()}`}});
    toast.push({icon:'check',title:'Item removido'}); onSaved();
  };
  return (
    <div style={{position:'fixed',inset:0,zIndex:215,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'6vh 16px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:480,background:'var(--cream)',borderRadius:24,padding:'26px 28px'}}>
        <div style={{fontFamily:'var(--fs)',fontSize:22,letterSpacing:'-0.4px',marginBottom:18}}>{editMode?'Editar':'Novo'} item</div>
        <label className="label">{lang==='pt'?'Descrição':'Description'}</label>
        <input className="input" style={{width:'100%',boxSizing:'border-box',marginBottom:14}} placeholder="Safety boot size 40" value={form.descricao} onChange={e=>setForm(f=>({...f,descricao:e.target.value}))} autoFocus/>
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:12,marginBottom:14}}>
          <div><label className="label">SAP Number</label><input className="input" style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--fm)'}} placeholder="4039481" value={form.sap} onChange={e=>setForm(f=>({...f,sap:e.target.value}))}/></div>
          <div><label className="label">{lang==='pt'?'Unidade':'Unit'}</label><input className="input" style={{width:'100%',boxSizing:'border-box'}} value={form.unidade} onChange={e=>setForm(f=>({...f,unidade:e.target.value}))}/></div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:20}}>
          <div><label className="label">{lang==='pt'?'Qtd pedida':'Qty ordered'}</label><input className="input" type="number" min="0" style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--fm)'}} value={form.qtd_pedida} onChange={e=>setForm(f=>({...f,qtd_pedida:e.target.value}))}/></div>
          <div><label className="label">{lang==='pt'?'Qtd entregue':'Qty delivered'}</label><input className="input" type="number" min="0" style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--fm)'}} value={form.qtd_entregue} onChange={e=>setForm(f=>({...f,qtd_entregue:e.target.value}))}/></div>
        </div>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          {editMode && <button className="btn" onClick={remover} style={{color:'var(--rose)',borderColor:'var(--rose)',background:'transparent'}}>{lang==='pt'?'Excluir':'Delete'}</button>}
          <div style={{flex:1}}/>
          <button className="btn" onClick={onClose}>{lang==='pt'?'Cancelar':'Cancel'}</button>
          <button className="btn-tidal" onClick={save} disabled={saving}>{saving?'…':(editMode?'Salvar':'Adicionar')}</button>
        </div>
      </div>
    </div>
  );
};

// ── Detalhe de uma PO ──
// ── Dossiê da PO: anotações (feed) + anexos ──
const _fmtQuando = (iso) => {
  if (!iso) return '';
  const d = new Date(iso); if (isNaN(d)) return '';
  return d.toLocaleString('pt-BR', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' });
};
const _isImg = (u) => /\.(jpg|jpeg|png|gif|webp)$/i.test(u||'');

const PoDossie = ({token, toast, canManage, poId}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const [notas, setNotas] = useState(null);
  const [anexos, setAnexos] = useState(null);
  const [texto, setTexto] = useState('');
  const [fotoNota, setFotoNota] = useState(null);
  const [enviando, setEnviando] = useState(false);

  const H = () => ({'Authorization':`Bearer ${token()}`});
  const loadNotas = () => fetch(`/api/po/${poId}/notas`,{headers:H()}).then(r=>r.ok?r.json():[]).then(setNotas).catch(()=>setNotas([]));
  const loadAnexos = () => fetch(`/api/po/${poId}/anexos`,{headers:H()}).then(r=>r.ok?r.json():[]).then(setAnexos).catch(()=>setAnexos([]));
  useEffect(()=>{ loadNotas(); loadAnexos(); }, [poId]);

  const upload = async (file) => {
    const fd = new FormData(); fd.append('photo', file);
    const r = await fetch('/api/upload/photo',{method:'POST',headers:H(),body:fd});
    const d = await r.json();
    if (r.ok && d.url) return d.url;
    toast.push({icon:'x',title:(lang==='pt'?'Erro no upload':'Upload error')}); return null;
  };
  const anexarFotoNota = async (file) => { if(!file) return; const url = await upload(file); if(url){ setFotoNota(url); toast.push({icon:'check',title:'Foto anexada'}); } };
  const addNota = async () => {
    if (!texto.trim() && !fotoNota) { toast.push({icon:'x',title:'Escreva algo ou anexe uma foto'}); return; }
    setEnviando(true);
    try {
      const r = await fetch(`/api/po/${poId}/notas`,{method:'POST',headers:{...H(),'Content-Type':'application/json'},body:JSON.stringify({texto:texto.trim()||null,url:fotoNota})});
      if (r.ok) { setTexto(''); setFotoNota(null); loadNotas(); } else toast.push({icon:'x',title:(lang==='pt'?'Erro ao salvar':'Error saving')});
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
    finally { setEnviando(false); }
  };
  const delNota = async (id) => { if (!window.confirm((lang==='pt'?'Apagar esta anotação?':'Delete this note?'))) return; await fetch(`/api/po/notas/${id}`,{method:'DELETE',headers:H()}); loadNotas(); };
  const addAnexo = async (file) => {
    if (!file) return;
    const url = await upload(file); if (!url) return;
    await fetch(`/api/po/${poId}/anexos`,{method:'POST',headers:{...H(),'Content-Type':'application/json'},body:JSON.stringify({url,nome:file.name})});
    toast.push({icon:'check',title:(lang==='pt'?'Anexo adicionado':'Attachment added')}); loadAnexos();
  };
  const delAnexo = async (id) => { if (!window.confirm('Remover anexo?')) return; await fetch(`/api/po/anexos/${id}`,{method:'DELETE',headers:H()}); loadAnexos(); };

  return (
    <div style={{marginTop:26}}>
      <div className="t-eyebrow" style={{marginBottom:10}}>{lang==='pt'?'Dossiê · anotações':'Dossier · notes'}</div>

      <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:14,padding:'12px 14px',marginBottom:12}}>
        <textarea className="input" placeholder="Escreva uma anotação sobre esta PO…" value={texto} onChange={e=>setTexto(e.target.value)} style={{width:'100%',boxSizing:'border-box',minHeight:56,resize:'vertical',fontFamily:'var(--f)',fontSize:13}}/>
        {fotoNota && <div style={{marginTop:8,display:'flex',alignItems:'center',gap:8}}><img src={fotoNota} style={{width:44,height:44,borderRadius:8,objectFit:'cover'}}/><button className="btn btn-sm" onClick={()=>setFotoNota(null)}>{lang==='pt'?'remover foto':'remove photo'}</button></div>}
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:8}}>
          <label className="btn btn-sm" style={{cursor:'pointer',margin:0}}>📷 Foto
            <input type="file" accept="image/*" style={{display:'none'}} onChange={e=>{ anexarFotoNota(e.target.files[0]); e.target.value=''; }}/>
          </label>
          <button className="btn btn-primary btn-sm" onClick={addNota} disabled={enviando}>{enviando?'Salvando…':'Anotar'}</button>
        </div>
      </div>

      {notas === null ? <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',padding:'2px 2px 12px'}}>{lang==='pt'?'Carregando…':'Loading…'}</div> :
       notas.length === 0 ? <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)',padding:'2px 2px 14px'}}>{lang==='pt'?'Nenhuma anotação ainda.':'No notes yet.'}</div> : (
        <div style={{display:'grid',gap:8,marginBottom:22}}>
          {notas.map(n => (
            <div key={n.id} style={{display:'flex',gap:10,background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:12,padding:'10px 12px'}}>
              <div style={{width:30,height:30,borderRadius:'50%',flexShrink:0,backgroundImage:n.autor_foto?`url(${n.autor_foto})`:'none',backgroundColor:n.autor_foto?'transparent':'var(--teal)',backgroundSize:'cover',backgroundPosition:'center',display:'grid',placeItems:'center',fontFamily:'var(--fm)',fontSize:12,color:'#fff'}}>{n.autor_foto?'':(n.autor_initials||(n.autor_nome||'?').slice(0,1))}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:8}}>
                  <span style={{fontFamily:'var(--fm)',fontSize:11.5,fontWeight:600}}>{n.autor_nome||'—'}</span>
                  <span style={{fontFamily:'var(--fm)',fontSize:10,color:'var(--muted)'}}>{_fmtQuando(n.created_at)}</span>
                </div>
                {n.texto && <div style={{fontFamily:'var(--f)',fontSize:13,color:'var(--ink)',marginTop:3,whiteSpace:'pre-wrap'}}>{n.texto}</div>}
                {n.url && <img src={n.url} style={{marginTop:6,maxWidth:'100%',maxHeight:220,borderRadius:8,cursor:'pointer',display:'block'}} onClick={()=>window.open(n.url,'_blank')}/>}
              </div>
              {canManage && <button onClick={()=>delNota(n.id)} title="apagar" style={{background:'transparent',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:12,flexShrink:0,alignSelf:'flex-start'}}>✕</button>}
            </div>
          ))}
        </div>
      )}

      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
        <div className="t-eyebrow">Anexos{anexos&&anexos.length?` · ${anexos.length}`:''}</div>
        <label className="btn btn-sm" style={{cursor:'pointer',margin:0}}>📎 Anexar
          <input type="file" style={{display:'none'}} onChange={e=>{ addAnexo(e.target.files[0]); e.target.value=''; }}/>
        </label>
      </div>
      {anexos === null ? <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)'}}>{lang==='pt'?'Carregando…':'Loading…'}</div> :
       anexos.length === 0 ? <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)'}}>{lang==='pt'?'Nenhum anexo.':'No attachments.'}</div> : (
        <div style={{display:'grid',gap:6}}>
          {anexos.map(a => (
            <div key={a.id} style={{display:'flex',alignItems:'center',gap:10,background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:10,padding:'8px 12px'}}>
              {_isImg(a.url) ? <img src={a.url} style={{width:34,height:34,borderRadius:6,objectFit:'cover',flexShrink:0,cursor:'pointer'}} onClick={()=>window.open(a.url,'_blank')}/> : <span style={{fontSize:18,flexShrink:0}}>📄</span>}
              <div style={{flex:1,minWidth:0}}>
                <a href={a.url} target="_blank" rel="noreferrer" style={{fontFamily:'var(--f)',fontSize:12.5,color:'var(--sky)',textDecoration:'none',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',display:'block'}}>{a.nome||'anexo'}</a>
                <div style={{fontFamily:'var(--fm)',fontSize:9.5,color:'var(--muted)'}}>{a.uploaded_by_nome||'—'} · {_fmtQuando(a.created_at)}</div>
              </div>
              {canManage && <button onClick={()=>delAnexo(a.id)} title="remover" style={{background:'transparent',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:12,flexShrink:0}}>✕</button>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const PoDetail = ({token, toast, canManage, poId, onBack, onChanged, isMobile}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const [data, setData] = useState(null);
  const [novoItem, setNovoItem] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [editPo, setEditPo] = useState(false);

  const load = async () => {
    try { const r = await fetch(`/api/po/${poId}`,{headers:{'Authorization':`Bearer ${token()}`}}); if (r.ok) setData(await r.json()); } catch(e){}
  };
  useEffect(()=>{ load(); }, [poId]);
  const refresh = () => { load(); onChanged && onChanged(); };

  if (!data) return <div style={{color:'var(--muted)',fontFamily:'var(--fm)',fontSize:13,padding:20}}>{lang==='pt'?'Carregando…':'Loading…'}</div>;
  const po = data.po, itens = data.itens || [];
  const s = PO_STATUS[po.status] || PO_STATUS.aberta;

  const removerPo = async () => {
    if (!window.confirm(`Excluir a PO ${po.codigo} e todos os itens?`)) return;
    await fetch(`/api/po/${po.id}`,{method:'DELETE',headers:{'Authorization':`Bearer ${token()}`}});
    toast.push({icon:'check',title:'PO excluída'}); onChanged && onChanged(); onBack();
  };

  return (
    <div>
      <button className="btn-icone neutro" onClick={onBack} title="voltar">←</button>

      {/* Cabeçalho da PO */}
      <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:`3px solid ${s.cor}`,borderRadius:18,padding:'18px 20px',boxShadow:'var(--shadow-sm)',marginBottom:18}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12,flexWrap:'wrap'}}>
          <div style={{minWidth:0}}>
            <div style={{fontFamily:'var(--fm)',fontSize:16,fontWeight:600,letterSpacing:0.3}}>{po.codigo}</div>
            {po.nome && <div style={{fontFamily:'var(--fs)',fontSize:18,marginTop:2}}>{po.nome}</div>}
            {po.observacao && <div style={{fontFamily:'var(--f)',fontSize:12.5,color:'var(--muted)',marginTop:4}}>{po.observacao}</div>}
          </div>
          <div style={{display:'flex',gap:8,alignItems:'center'}}>
            <StatusBadge status={po.status}/>
            {canManage && <button onClick={()=>setEditPo(true)} style={{background:'transparent',border:'none',cursor:'pointer',fontSize:14,color:'var(--muted)'}}>✏️</button>}
          </div>
        </div>
        {/* progresso geral */}
        <div style={{marginTop:14}}>
          <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',marginBottom:5}}>
            <span>{po.total_entregue} de {po.total_pedido} recebidos</span><span>{po.pct}%</span>
          </div>
          <PoBar pct={po.pct} cor={s.cor} h={8}/>
        </div>
      </div>

      {/* Itens */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
        <div className="t-eyebrow">{itens.length} {itens.length===1?'item':'itens'}</div>
        <button className="btn btn-sm" onClick={()=>setNovoItem(true)}>+ Item</button>
      </div>

      {itens.length===0 ? (
        <div style={{textAlign:'center',padding:'30px 20px',background:'var(--surface)',border:'1px dashed var(--line)',borderRadius:16,fontFamily:'var(--fm)',fontSize:12.5,color:'var(--muted)'}}>Nenhum item ainda. Adicione manualmente ou importe um PDF (em breve).</div>
      ) : (
        <div style={{display:'grid',gap:8}}>
          {itens.map(i=>{
            const ped=num(i.qtd_pedida), ent=num(i.qtd_entregue), pend=Math.max(0,ped-ent);
            const pct = ped>0 ? Math.min(100,Math.round(ent/ped*100)) : 0;
            const cor = ent>=ped&&ped>0 ? 'var(--leaf)' : ent>0 ? 'var(--sun)' : 'var(--sky)';
            return (
              <div key={i.id} onClick={()=>canManage&&setEditItem(i)} style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:12,padding:'12px 14px',boxShadow:'var(--shadow-sm)',cursor:canManage?'pointer':'default'}}>
                <div style={{display:'flex',justifyContent:'space-between',gap:12,alignItems:'flex-start'}}>
                  <div style={{minWidth:0,flex:1}}>
                    <div style={{fontFamily:'var(--f)',fontSize:14,color:'var(--ink)'}}>{i.descricao}</div>
                    {i.sap && <div style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)',marginTop:2}}>SAP {i.sap}</div>}
                  </div>
                  <div style={{textAlign:'right',flexShrink:0}}>
                    <div style={{fontFamily:'var(--fm)',fontSize:13,color:cor,fontWeight:600}}>{ent}/{ped}</div>
                    <div style={{fontFamily:'var(--fm)',fontSize:9.5,color:'var(--muted)'}}>{i.unidade}{pend>0?` · faltam ${pend}`:' ✓'}</div>
                  </div>
                </div>
                <div style={{marginTop:8}}><PoBar pct={pct} cor={cor}/></div>
              </div>
            );
          })}
        </div>
      )}

      <PoDossie token={token} toast={toast} canManage={canManage} poId={po.id}/>

      {canManage && <button className="btn-tidal-sec rose" onClick={removerPo}>{lang==='pt'?'Excluir':'Delete'}</button>}

      {novoItem && <ItemModal token={token} toast={toast} poId={po.id} onClose={()=>setNovoItem(false)} onSaved={()=>{ setNovoItem(false); refresh(); }}/>}
      {editItem && <ItemModal token={token} toast={toast} poId={po.id} item={editItem} onClose={()=>setEditItem(null)} onSaved={()=>{ setEditItem(null); refresh(); }}/>}
      {editPo && <PoModal token={token} toast={toast} po={po} onClose={()=>setEditPo(false)} onSaved={()=>{ setEditPo(false); refresh(); }}/>}
    </div>
  );
};

// ── Tela de conferência do import (operador confere antes de salvar) ──
const ConferenciaModal = ({token, toast, dados, onClose, onImported}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const [codigo, setCodigo] = useState(dados.codigo || '');
  const [nome, setNome] = useState(dados.nome || '');
  const [itens, setItens] = useState((dados.itens || []).map((x,i)=>({...x, _k:i})));
  const [saving, setSaving] = useState(false);

  const setItem = (k, campo, val) => setItens(arr => arr.map(it => it._k===k ? {...it, [campo]:val} : it));
  const removeItem = (k) => setItens(arr => arr.filter(it => it._k!==k));

  const confirmar = async () => {
    if (!codigo.trim()) { toast.push({icon:'x',title:'Informe o código da PO'}); return; }
    if (!itens.length) { toast.push({icon:'x',title:'Nenhum item pra importar'}); return; }
    setSaving(true);
    try {
      const res = await fetch('/api/po/import', {
        method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${token()}`},
        body: JSON.stringify({ codigo:codigo.trim(), nome:nome.trim()||null, itens: itens.map(({sap,descricao,unidade,qtd_pedida})=>({sap,descricao,unidade,qtd_pedida})) })
      });
      const d = await res.json();
      if (res.ok) { toast.push({icon:'check', title:`PO criada · ${d.itens} itens`}); onImported(d.id); }
      else toast.push({icon:'x', title:'Erro', body:d.error});
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
    finally { setSaving(false); }
  };

  return (
    <div style={{position:'fixed',inset:0,zIndex:215,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'4vh 14px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{width:'100%',maxWidth:660,background:'var(--cream)',borderRadius:24,padding:'24px 26px',marginBottom:40}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:10,marginBottom:6}}>
          <div>
            <div className="t-eyebrow" style={{color:'var(--accent)'}}>{lang==='pt'?'conferência do import':'import review'}</div>
            <div style={{fontFamily:'var(--fs)',fontSize:24,letterSpacing:'-0.5px',marginTop:4}}>{lang==='pt'?'Confira antes de criar':'Review before creating'}</div>
          </div>
          <button className="btn btn-sm" onClick={onClose}>{lang==='pt'?'fechar':'close'}</button>
        </div>
        <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)',marginBottom:16,lineHeight:1.5}}>Li o PDF e extraí o que está abaixo. Ajuste o que precisar, remova o que não for item, e confirme.</div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:12,marginBottom:18}}>
          <div><label className="label">{lang==='pt'?'Código da PO':'PO code'}</label><input className="input" style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--fm)'}} value={codigo} onChange={e=>setCodigo(e.target.value)}/></div>
          <div><label className="label">{lang==='pt'?'Nome (opcional)':'Name (optional)'}</label><input className="input" style={{width:'100%',boxSizing:'border-box'}} placeholder="ex.: Safety items" value={nome} onChange={e=>setNome(e.target.value)}/></div>
        </div>

        <div className="t-eyebrow" style={{marginBottom:8}}>{itens.length} {itens.length===1?'item':'itens'}</div>
        <div style={{display:'grid',gap:8,marginBottom:20}}>
          {itens.map(it=>(
            <div key={it._k} style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:12,padding:'10px 12px',display:'flex',gap:10,alignItems:'flex-start'}}>
              <div style={{flex:1,minWidth:0,display:'grid',gap:6}}>
                <input className="input" style={{width:'100%',boxSizing:'border-box',fontSize:13}} value={it.descricao} onChange={e=>setItem(it._k,'descricao',e.target.value)}/>
                <div style={{display:'flex',gap:8}}>
                  <input className="input" style={{width:120,fontFamily:'var(--fm)',fontSize:11.5}} placeholder="SAP" value={it.sap||''} onChange={e=>setItem(it._k,'sap',e.target.value)}/>
                  <input className="input" style={{width:64,fontFamily:'var(--fm)',fontSize:11.5}} value={it.unidade||'PCE'} onChange={e=>setItem(it._k,'unidade',e.target.value)}/>
                  <div style={{display:'flex',alignItems:'center',gap:5}}>
                    <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)'}}>qtd</span>
                    <input className="input" type="number" min="0" style={{width:64,fontFamily:'var(--fm)',fontSize:11.5}} value={it.qtd_pedida} onChange={e=>setItem(it._k,'qtd_pedida',e.target.value)}/>
                  </div>
                </div>
              </div>
              <button onClick={()=>removeItem(it._k)} style={{background:'transparent',border:'none',cursor:'pointer',color:'var(--muted-3)',fontSize:16}}>×</button>
            </div>
          ))}
          {itens.length===0 && <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',fontStyle:'italic'}}>{lang==='pt'?'Nenhum item.':'No items.'}</div>}
        </div>

        <div style={{display:'flex',gap:10,justifyContent:'flex-end'}}>
          <button className="btn" onClick={onClose}>{lang==='pt'?'Cancelar':'Cancel'}</button>
          <button className="btn-tidal" onClick={confirmar} disabled={saving}>{saving?'Criando…':`Criar (${itens.length})`}</button>
        </div>
      </div>
    </div>
  );
};

// ── Reconciliação por planilha do Storekeeper ──
const EXC_META = {
  excede_pendente:    { label:'Excede o pendente', cor:'var(--sun)',   acionavel:true  },
  item_fechado:       { label:'Item já completo',  cor:'var(--leaf)',  acionavel:true  },
  po_nao_encontrada:  { label:'PO não encontrada', cor:'var(--rose)',  acionavel:false },
  sap_nao_encontrado: { label:'SAP fora da PO',    cor:'var(--rose)',  acionavel:false },
  qtd_invalida:       { label:'Qtd inválida',      cor:'var(--muted)', acionavel:false },
  sem_codigo:         { label:'Sem código',        cor:'var(--muted)', acionavel:false },
  sem_sap:            { label:'Sem SAP',           cor:'var(--muted)', acionavel:false },
};

// Linha de uma baixa que casou limpa
const ReconLinhaOk = ({o, d, onChange}) => {
  const lang = useT().lang;
  const aceitar = d ? d.aceitar : true;
  const qtd = d ? d.qtd : o.qtd_recebida;
  const pedida = num(o.qtd_pedida);
  const total = num(o.ja_entregue) + num(qtd);
  const pct = pedida>0 ? Math.min(100, Math.round((total/pedida)*100)) : 0;
  const cor = total>=pedida ? 'var(--leaf)' : 'var(--sun)';
  return (
    <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderLeft:`4px solid ${aceitar?cor:'var(--cream-3)'}`,borderRadius:12,padding:'11px 13px',opacity:aceitar?1:0.55}}>
      <div style={{display:'flex',gap:10,alignItems:'flex-start'}}>
        <input type="checkbox" checked={aceitar} onChange={e=>onChange({aceitar:e.target.checked})} style={{marginTop:3,accentColor:'var(--accent)',width:16,height:16}}/>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',gap:8,alignItems:'baseline',flexWrap:'wrap'}}>
            <span style={{fontFamily:'var(--fm)',fontSize:11.5,fontWeight:600,color:'var(--muted)'}}>{o.po_codigo}</span>
            <span style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--accent)'}}>SAP {o.sap}</span>
          </div>
          <div style={{fontFamily:'var(--fs)',fontSize:14,marginTop:2}}>{o.descricao||'—'}</div>
          <div style={{display:'flex',alignItems:'center',gap:10,marginTop:8}}>
            <div style={{flex:1}}><PoBar pct={pct} cor={cor}/></div>
            <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)',whiteSpace:'nowrap'}}>{num(o.ja_entregue)} + {num(qtd)} = {total}/{pedida}</span>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:6,marginTop:8}}>
            <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)'}}>{lang==='pt'?'recebido':'received'}</span>
            <input className="input" type="number" min="0" value={qtd} onChange={e=>onChange({qtd:e.target.value})} style={{width:74,fontFamily:'var(--fm)',fontSize:12,padding:'4px 8px'}}/>
            {o.porto && <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)'}}>· {o.porto}</span>}
            {o.recebido_em && <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)'}}>· {o.recebido_em}</span>}
          </div>
        </div>
      </div>
    </div>
  );
};

// Linha de uma exceção (acionável ou só informativa)
const ReconLinhaExc = ({e, d, onChange, onEvidencia}) => {
  const lang = useT().lang;
  const meta = EXC_META[e.tipo] || { label:e.tipo, cor:'var(--muted)', acionavel:false };
  const aceitar = !!(d && d.aceitar);
  const qtd = d ? d.qtd : (e.qtd_recebida || (e.linha && e.linha.qtd) || 0);
  return (
    <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderLeft:`4px solid ${meta.cor}`,borderRadius:12,padding:'11px 13px'}}>
      <div style={{display:'flex',justifyContent:'space-between',gap:8,alignItems:'flex-start'}}>
        <div style={{minWidth:0}}>
          <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)'}}>
            {(e.linha&&e.linha.codigo)||e.po_codigo||'—'} · SAP {(e.linha&&e.linha.sap)||e.sap||'—'}
          </div>
          {(e.descricao) && <div style={{fontFamily:'var(--fs)',fontSize:14,marginTop:2}}>{e.descricao}</div>}
        </div>
        <span style={{flexShrink:0,padding:'3px 9px',borderRadius:999,background:meta.cor,color:'#fff',fontFamily:'var(--fm)',fontSize:10,fontWeight:600}}>{meta.label}</span>
      </div>
      <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)',marginTop:6}}>{e.motivo}</div>

      {meta.acionavel ? (
        <div style={{marginTop:10,paddingTop:10,borderTop:'1px dashed var(--line)'}}>
          <label style={{display:'flex',gap:8,alignItems:'center',cursor:'pointer'}}>
            <input type="checkbox" checked={aceitar} onChange={ev=>onChange({aceitar:ev.target.checked})} style={{accentColor:'var(--accent)',width:16,height:16}}/>
            <span style={{fontFamily:'var(--fm)',fontSize:12}}>{lang==='pt'?'Dar baixa assim mesmo':'Receive anyway'}</span>
          </label>
          {aceitar && (
            <div style={{marginTop:8,display:'grid',gap:8}}>
              <div style={{display:'flex',alignItems:'center',gap:6}}>
                <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)'}}>qtd</span>
                <input className="input" type="number" min="0" value={qtd} onChange={ev=>onChange({qtd:ev.target.value})} style={{width:74,fontFamily:'var(--fm)',fontSize:12,padding:'4px 8px'}}/>
              </div>
              <input className="input" placeholder="Motivo / observação" value={(d&&d.obs)||''} onChange={ev=>onChange({obs:ev.target.value})} style={{width:'100%',boxSizing:'border-box',fontSize:12.5}}/>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <label className="btn btn-sm" style={{cursor:'pointer',margin:0}}>
                  📎 Evidência
                  <input type="file" accept="image/*" style={{display:'none'}} onChange={ev=>{ onEvidencia(ev.target.files[0]); ev.target.value=''; }}/>
                </label>
                {d&&d.evidencia && <span style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--leaf)'}}>✓ anexada</span>}
              </div>
            </div>
          )}
        </div>
      ) : (
        <div style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted-3)',marginTop:6,fontStyle:'italic'}}>{lang==='pt'?'Corrija na planilha e reenvie, se for o caso.':'Fix the spreadsheet and re-upload if needed.'}</div>
      )}
    </div>
  );
};

const ReconciliacaoModal = ({token, toast, onClose, onDone}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const [preview, setPreview] = useState(null);
  const [dec, setDec] = useState({});
  const [loading, setLoading] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const fileRef = React.useRef(null);

  const baixarModelo = async () => {
    try {
      const r = await fetch('/api/po/reconciliacao/modelo', {headers:{'Authorization':`Bearer ${token()}`}});
      if (!r.ok) { toast.push({icon:'x',title:(lang==='pt'?'Erro ao gerar o modelo':'Error generating the template')}); return; }
      const b = await r.blob();
      const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'modelo-recebimentos.xlsx'; a.click(); URL.revokeObjectURL(a.href);
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
  };

  const subir = async (file) => {
    if (!file) return;
    setLoading(true);
    try {
      const fd = new FormData(); fd.append('planilha', file);
      const r = await fetch('/api/po/reconciliacao/preview', {method:'POST', headers:{'Authorization':`Bearer ${token()}`}, body: fd});
      const d = await r.json();
      if (r.ok) {
        setPreview(d);
        const init = {};
        (d.ok||[]).forEach(o => { init[o.ref] = {aceitar:true, qtd:o.qtd_recebida, obs:'', evidencia:null}; });
        (d.excecoes||[]).forEach(x => { if (x.item_id) init[x.ref] = {aceitar:false, qtd:x.qtd_recebida||(x.linha&&x.linha.qtd)||0, obs:'', evidencia:null}; });
        setDec(init);
      } else toast.push({icon:'x', title:'Não rolou', body:d.error});
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro ao ler a planilha':'Error reading the spreadsheet')}); }
    finally { setLoading(false); }
  };

  const patch = (ref, p) => setDec(prev => ({...prev, [ref]: {...prev[ref], ...p}}));

  const anexar = async (ref, file) => {
    if (!file) return;
    try {
      const fd = new FormData(); fd.append('photo', file);
      const r = await fetch('/api/upload/photo', {method:'POST', headers:{'Authorization':`Bearer ${token()}`}, body: fd});
      const d = await r.json();
      if (r.ok && d.url) { patch(ref, {evidencia:d.url}); toast.push({icon:'check',title:'Evidência anexada'}); }
      else toast.push({icon:'x',title:(lang==='pt'?'Erro no upload':'Upload error')});
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro no upload':'Upload error')}); }
  };

  const montarDecisoes = () => {
    const out = [];
    const add = (item_id, porto, recebido_em, ref) => {
      const x = dec[ref]; if (!x || !x.aceitar || !(Number(x.qtd)>0)) return;
      out.push({decisao:'aceitar', item_id, qtd:Number(x.qtd), porto:porto||null, recebido_em:recebido_em||null, observacao:x.obs||null, evidencia_url:x.evidencia||null});
    };
    (preview.ok||[]).forEach(o => add(o.item_id, o.porto, o.recebido_em, o.ref));
    (preview.excecoes||[]).forEach(e => { if (e.item_id) add(e.item_id, e.porto, e.recebido_em, e.ref); });
    return out;
  };
  const nSelecionadas = preview ? montarDecisoes().length : 0;

  const confirmar = async () => {
    const decisoes = montarDecisoes();
    if (!decisoes.length) { toast.push({icon:'x',title:'Nada selecionado pra processar'}); return; }
    setConfirming(true);
    try {
      const r = await fetch('/api/po/reconciliacao/confirmar', {method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${token()}`}, body: JSON.stringify({decisoes})});
      const d = await r.json();
      if (r.ok) { toast.push({icon:'check', title:`${d.gravadas} baixa(s) · ${d.total_baixado} un`}); onDone && onDone(); }
      else toast.push({icon:'x', title:'Erro', body:d.error});
    } catch(e){ toast.push({icon:'x',title:(lang==='pt'?'Erro de conexão':'Connection error')}); }
    finally { setConfirming(false); }
  };

  return (
    <div style={{position:'fixed',inset:0,zIndex:218,background:'rgba(31,42,46,0.55)',backdropFilter:'blur(3px)',display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'5vh 16px',overflowY:'auto'}} onClick={onClose}>
      <div onClick={ev=>ev.stopPropagation()} style={{width:'100%',maxWidth:560,background:'var(--cream)',borderRadius:24,padding:'24px 26px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>
          <div style={{fontFamily:'var(--fs)',fontSize:23,letterSpacing:'-0.5px'}}>Reconciliar <em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'recebimentos':'receipts'}</em></div>
          <button className="btn btn-sm" onClick={onClose}>{lang==='pt'?'fechar':'close'}</button>
        </div>
        <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--muted)',marginBottom:18}}>Planilha do Storekeeper → casa por Código PO + SAP → você confirma cada baixa.</div>

        {!preview ? (
          <div style={{display:'grid',gap:12}}>
            <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:14,padding:'16px 18px'}}>
              <div className="t-eyebrow" style={{marginBottom:6}}>1 · modelo</div>
              <div style={{fontFamily:'var(--fm)',fontSize:12.5,color:'var(--muted)',marginBottom:12}}>Baixe o modelo já preenchido com as POs abertas/parciais. O Storekeeper só preenche a coluna <strong>{lang==='pt'?'Qtd recebida':'Qty received'}</strong> (e Porto/Data, se quiser).</div>
              <button className="btn-icone neutro" onClick={baixarModelo} title="baixar a planilha-modelo">⬇</button>
            </div>
            <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:14,padding:'16px 18px'}}>
              <div className="t-eyebrow" style={{marginBottom:6}}>2 · enviar</div>
              <div style={{fontFamily:'var(--fm)',fontSize:12.5,color:'var(--muted)',marginBottom:12}}>Suba a planilha preenchida. Nada é gravado ainda — você vê o resultado antes de confirmar.</div>
              <input ref={fileRef} type="file" accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style={{display:'none'}} onChange={ev=>{ subir(ev.target.files[0]); ev.target.value=''; }}/>
              <button className="btn-tidal" onClick={()=>fileRef.current&&fileRef.current.click()} disabled={loading}>{loading?'Lendo…':'📤 Subir planilha'}</button>
            </div>
          </div>
        ) : (
          <div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:14,fontFamily:'var(--fm)',fontSize:11}}>
              <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(92,126,79,0.14)',color:'var(--leaf)',fontWeight:600}}>{(preview.ok||[]).length} casaram</span>
              <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(177,78,92,0.12)',color:'var(--rose)',fontWeight:600}}>{(preview.excecoes||[]).length} exceções</span>
            </div>

            {preview.mapeamento && (
              <div style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted-3)',marginBottom:14,lineHeight:1.5}}>
                Li da planilha — código: <strong>{preview.mapeamento.codigo||'?'}</strong> · sap: <strong>{preview.mapeamento.sap||'?'}</strong> · qtd: <strong>{preview.mapeamento.qtd||'?'}</strong>{preview.mapeamento.porto?<span> · porto: <strong>{preview.mapeamento.porto}</strong></span>:null}
              </div>
            )}

            {(preview.ok||[]).length>0 && <>
              <div className="t-eyebrow" style={{marginBottom:8}}>{lang==='pt'?'Vão dar baixa':'Will be received'}</div>
              <div style={{display:'grid',gap:8,marginBottom:18}}>
                {preview.ok.map(o => <ReconLinhaOk key={o.ref} o={o} d={dec[o.ref]} onChange={p=>patch(o.ref,p)}/>)}
              </div>
            </>}

            {(preview.excecoes||[]).length>0 && <>
              <div className="t-eyebrow" style={{marginBottom:8}}>{lang==='pt'?'Balde de exceções':'Exceptions bucket'}</div>
              <div style={{display:'grid',gap:8,marginBottom:18}}>
                {preview.excecoes.map(e => <ReconLinhaExc key={e.ref} e={e} d={dec[e.ref]} onChange={p=>patch(e.ref,p)} onEvidencia={f=>anexar(e.ref,f)}/>)}
              </div>
            </>}

            <div style={{display:'flex',gap:10,justifyContent:'space-between',alignItems:'center',position:'sticky',bottom:0,background:'var(--cream)',paddingTop:12,marginTop:4,borderTop:'1px solid var(--line)'}}>
              <button className="btn btn-sm" onClick={()=>{ setPreview(null); setDec({}); }}>← outra planilha</button>
              <button className="btn-tidal" onClick={confirmar} disabled={confirming||nSelecionadas===0}>{confirming?'Processando…':`Processar ${nSelecionadas}`}</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ── Página Purchase Orders ──
// ── Itens de uma PO, exibidos inline na expansão da linha ──
const PoItensInline = ({token, poId, onAbrir}) => {
  const lang = useT().lang;
  const [itens, setItens] = useState(null);
  useEffect(() => {
    fetch(`/api/po/${poId}`, { headers:{'Authorization':`Bearer ${token()}`} })
      .then(r=>r.ok?r.json():null).then(d=>setItens(d ? (d.itens||[]) : [])).catch(()=>setItens([]));
  }, [poId]);
  if (itens === null) return <div style={{padding:'12px 18px',fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)'}}>{lang==='pt'?'Carregando itens…':'Loading items…'}</div>;
  if (itens.length === 0) return <div style={{padding:'12px 18px',fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)'}}>{lang==='pt'?'Nenhum item nessa PO.':'No items in this PO.'}</div>;
  return (
    <div style={{padding:'2px 18px 14px'}}>
      {itens.map(i=>{
        const ped=num(i.qtd_pedida), ent=num(i.qtd_entregue);
        const pct = ped>0 ? Math.min(100,Math.round(ent/ped*100)) : 0;
        const cor = ent>=ped&&ped>0 ? 'var(--leaf)' : ent>0 ? 'var(--sun)' : 'var(--sky)';
        return (
          <div key={i.id} style={{display:'flex',gap:12,alignItems:'flex-start',padding:'10px 0',borderTop:'1px solid var(--cream-2)'}}>
            <span style={{fontFamily:'var(--fm)',fontSize:11,fontWeight:600,color:'var(--accent)',flexShrink:0,width:62,paddingTop:1}}>{i.sap||'—'}</span>
            <span style={{flex:1,minWidth:0,fontFamily:'var(--f)',fontSize:12.5,lineHeight:1.4,color:'var(--ink)'}}>{i.descricao}</span>
            <div style={{flexShrink:0,width:92}}>
              <div style={{textAlign:'right',fontFamily:'var(--fm)',fontSize:11.5,fontWeight:600,color:cor}}>{ent}/{ped}<span style={{color:'var(--muted)',fontWeight:400}}> · {pct}%</span></div>
              <div style={{marginTop:5}}><PoBar pct={pct} cor={cor}/></div>
            </div>
          </div>
        );
      })}
      {onAbrir && <div style={{marginTop:12,textAlign:'right'}}><button className="btn btn-sm" onClick={onAbrir}>{lang==='pt'?'Abrir / gerenciar →':'Open / manage →'}</button></div>}
    </div>
  );
};

const PurchaseOrders = ({state, setState, setPage}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const toast = useToast();
  const isMobile = useMobile();
  const token = () => localStorage.getItem('genesis_token');
  const me = state.currentUser || {};
  const canManage = me.role === 'admin' || me.is_staff === true;

  const [pos, setPos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [sel, setSel] = useState(null);     // id da PO aberta
  const [exp, setExp] = useState(()=>new Set());  // POs expandidas inline
  const toggleExp = (id) => setExp(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const [creating, setCreating] = useState(false);
  const [parsing, setParsing] = useState(false);
  const [parsed, setParsed] = useState(null);  // dados da conferência
  const [reconc, setReconc] = useState(false);  // modal de reconciliação por planilha
  const pdfRef = React.useRef(null);

  const importarPdf = async (file) => {
    if (!file) return;
    setParsing(true);
    try {
      const fd = new FormData(); fd.append('pdf', file);
      const res = await fetch('/api/po/parse-pdf', { method:'POST', headers:{'Authorization':`Bearer ${token()}`}, body: fd });
      const d = await res.json();
      if (res.ok) setParsed(d);
      else toast.push({icon:'x', title:'Não rolou', body:d.error});
    } catch(e){ toast.push({icon:'x', title:(lang==='pt'?'Erro ao ler o PDF':'Error reading the PDF')}); }
    finally { setParsing(false); }
  };

  const fetchPos = async () => {
    try { const r = await fetch('/api/po',{headers:{'Authorization':`Bearer ${token()}`}}); if (r.ok) setPos(await r.json()); }
    catch(e){} finally { setLoading(false); }
  };
  useEffect(()=>{ fetchPos(); }, []);

  return (
    <main style={{padding: isMobile ? '16px 16px 80px' : '30px 36px 56px', flex:1}}>
      {/* Cabeçalho */}
      <div style={{marginBottom:18}}>
        <div className="t-eyebrow" style={{cursor:'pointer'}} onClick={()=>setPage&&setPage('bridge')}>← bridge · passadiço</div>
        <h1 style={{fontFamily:'var(--fs)',fontSize:isMobile?30:38,letterSpacing:'-0.8px',lineHeight:1.05,marginTop:6}}>
          Purchase <em style={{fontStyle:'italic',color:'var(--accent)'}}>Orders.</em>
        </h1>
        <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',marginTop:6}}>{lang==='pt'?'Acompanhamento de pedidos e entregas parciais.':'Order tracking and partial deliveries.'}</div>
      </div>

      {sel ? (
        <PoDetail token={token} toast={toast} canManage={canManage} poId={sel} isMobile={isMobile} onBack={()=>setSel(null)} onChanged={fetchPos}/>
      ) : (
        <>
          <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginBottom:16}}>
            <input ref={pdfRef} type="file" accept="application/pdf" style={{display:'none'}} onChange={e=>{ importarPdf(e.target.files[0]); e.target.value=''; }}/>
            <button className="btn-tidal-sec" onClick={()=>setReconc(true)}>🧾 Reconciliar</button>
            <button className="btn" onClick={()=>pdfRef.current&&pdfRef.current.click()} disabled={parsing}>{parsing?'Lendo PDF…':'📄 Importar PDF'}</button>
            <button className="btn-tidal" onClick={()=>setCreating(true)}>+ PO</button>
          </div>
          {loading ? <div style={{color:'var(--muted)',fontFamily:'var(--fm)',fontSize:13,padding:20}}>{lang==='pt'?'Carregando…':'Loading…'}</div> :
           pos.length===0 ? (
            <div style={{textAlign:'center',padding:'50px 20px',background:'var(--surface)',border:'1px dashed var(--line)',borderRadius:18}}>
              <div style={{fontSize:34,marginBottom:8}}>🛒</div>
              <div style={{fontFamily:'var(--fs)',fontSize:18}}>{lang==='pt'?'Nenhuma PO ainda':'No POs yet'}</div>
              <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',marginTop:4}}>{lang==='pt'?'Crie uma manualmente, importe um PDF do TM Master ou reconcilie por planilha.':'Create one manually, import a TM Master PDF or reconcile via spreadsheet.'}</div>
            </div>
          ) : (
            <div style={{display:'grid',gap:10}}>
              {pos.map(po=>{
                const s = PO_STATUS[po.status]||PO_STATUS.aberta;
                return (
                  <div key={po.id} style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderLeft:`4px solid ${s.cor}`,borderRadius:14,boxShadow:'var(--shadow-sm)',overflow:'hidden'}}>
                    <div onClick={()=>toggleExp(po.id)} style={{padding:'14px 18px',cursor:'pointer'}}>
                      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12,flexWrap:'wrap'}}>
                        <div style={{minWidth:0,display:'flex',alignItems:'flex-start',gap:9}}>
                          <span style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',marginTop:3,transition:'transform .2s',transform:exp.has(po.id)?'rotate(90deg)':'none',display:'inline-block',flexShrink:0}}>▸</span>
                          <div style={{minWidth:0}}>
                            <div style={{fontFamily:'var(--fm)',fontSize:14,fontWeight:600,letterSpacing:0.3}}>{po.codigo}</div>
                            {po.nome && <div style={{fontFamily:'var(--fs)',fontSize:15,color:'var(--muted)',marginTop:1}}>{po.nome}</div>}
                          </div>
                        </div>
                        <StatusBadge status={po.status}/>
                      </div>
                      <div style={{display:'flex',alignItems:'center',gap:12,marginTop:12}}>
                        <div style={{flex:1}}><PoBar pct={po.pct} cor={s.cor}/></div>
                        <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',whiteSpace:'nowrap'}}>{po.total_entregue}/{po.total_pedido} · {po.n_itens} {po.n_itens===1?'item':'itens'}</div>
                      </div>
                    </div>
                    {exp.has(po.id) && (
                      <div style={{borderTop:'1px solid var(--line-soft)',background:'var(--cream)'}}>
                        <PoItensInline token={token} poId={po.id} onAbrir={()=>setSel(po.id)}/>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </>
      )}

      {creating && <PoModal token={token} toast={toast} onClose={()=>setCreating(false)} onSaved={()=>{ setCreating(false); fetchPos(); }}/>}
      {parsed && <ConferenciaModal token={token} toast={toast} dados={parsed} onClose={()=>setParsed(null)} onImported={(id)=>{ setParsed(null); fetchPos(); setSel(id); }}/>}
      {reconc && <ReconciliacaoModal token={token} toast={toast} onClose={()=>setReconc(false)} onDone={()=>{ setReconc(false); fetchPos(); }}/>}
    </main>
  );
};