// ═══ NPT · Non-Productive Time ═══════════════════════════════════════════════
const _nptFmtDur = (min) => {
  min = Math.round(Number(min) || 0);
  const h = Math.floor(min / 60), m = min % 60;
  if (h && m) return `${h}h ${m}min`;
  if (h) return `${h}h`;
  return `${m}min`;
};
const _nptFmtDT = (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 _nptIsoToLocal = (iso) => {
  if (!iso) return '';
  const d = new Date(iso); if (isNaN(d)) return '';
  const local = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
  return local.toISOString().slice(0, 16);
};
const _nptCorCausa = (nome) => {
  const map = { Vessel: 'var(--sky)', Crane: 'var(--sun)', AHC: 'var(--teal)', Outros: 'var(--muted)' };
  if (map[nome]) return map[nome];
  const paleta = ['var(--rose)', 'var(--leaf)', 'var(--accent)', 'var(--sky)', 'var(--sun)', 'var(--teal)'];
  let h = 0; for (const ch of (nome || '')) h = (h * 31 + ch.charCodeAt(0)) % paleta.length;
  return paleta[h];
};

// ── Modal de inserção/edição de evento ──
const NptModal = ({token, toast, causas, evento, eventos, onClose, onSaved}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const edit = !!evento;
  const [inicio, setInicio] = React.useState(evento ? _nptIsoToLocal(evento.inicio) : '');
  const [fim, setFim] = React.useState(evento ? _nptIsoToLocal(evento.fim) : '');
  const [causaId, setCausaId] = React.useState(evento ? (evento.causa_id || '') : (causas[0] ? causas[0].id : ''));
  const [motivo, setMotivo] = React.useState(evento ? (evento.motivo || '') : '');
  const [opParalela, setOpParalela] = React.useState(evento ? (evento.operacao_paralela || '') : '');
  const [evidencia, setEvidencia] = React.useState(evento ? (evento.evidencia_url || null) : null);
  const [saving, setSaving] = React.useState(false);

  const H = () => ({'Authorization':`Bearer ${token()}`});
  const validIntervalo = inicio && fim && new Date(fim) > new Date(inicio);
  const dur = validIntervalo ? (new Date(fim) - new Date(inicio)) / 60000 : null;
  const overlap = validIntervalo ? (eventos || []).filter(e => {
    if (edit && e.id === evento.id) return false;
    return new Date(e.inicio) < new Date(fim) && new Date(e.fim) > new Date(inicio);
  }) : [];

  const upEvidencia = async (file) => {
    if (!file) return;
    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) { setEvidencia(d.url); toast.push({icon:'check', title:(lang==='pt'?'Evidência anexada':'Evidence attached')}); }
    else toast.push({icon:'x', title:(lang==='pt'?'Erro no upload':'Upload error')});
  };

  const salvar = async () => {
    if (!inicio || !fim) { toast.push({icon:'x', title:'Preencha início e fim'}); return; }
    if (new Date(fim) <= new Date(inicio)) { toast.push({icon:'x', title:'O fim precisa ser depois do início'}); return; }
    setSaving(true);
    try {
      const toISO = (s) => s ? new Date(s).toISOString() : null;
      const body = { inicio: toISO(inicio), fim: toISO(fim), causa_id: causaId || null, motivo: motivo.trim() || null, evidencia_url: evidencia, operacao_paralela: opParalela.trim() || null };
      const r = await fetch(edit ? `/api/npt/eventos/${evento.id}` : '/api/npt/eventos',
        {method: edit ? 'PATCH' : 'POST', headers:{...H(),'Content-Type':'application/json'}, body: JSON.stringify(body)});
      const d = await r.json();
      if (r.ok) { toast.push({icon:'check', title: edit ? (lang==='pt'?'Evento atualizado':'Event updated') : (lang==='pt'?'NPT registrado':'NPT logged')}); onSaved(); }
      else toast.push({icon:'x', title:'Não rolou', 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:220,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={e=>e.stopPropagation()} style={{width:'100%',maxWidth:460,background:'var(--cream)',borderRadius:24,padding:'24px 26px'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
          <div style={{fontFamily:'var(--fs)',fontSize:22}}>{edit ? (lang==='pt'?'Editar':'Edit') : (lang==='pt'?'Registrar':'Log')} <em style={{fontStyle:'italic',color:'var(--accent)'}}>NPT</em></div>
          <button className="btn btn-sm" onClick={onClose}>{lang==='pt'?'fechar':'close'}</button>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:12}}>
          <div>
            <div className="label">{lang==='pt'?'Início':'Start'}</div>
            <input className="input" type="datetime-local" value={inicio} onChange={e=>setInicio(e.target.value)} style={{width:'100%',boxSizing:'border-box'}}/>
          </div>
          <div>
            <div className="label">Fim</div>
            <input className="input" type="datetime-local" value={fim} onChange={e=>setFim(e.target.value)} style={{width:'100%',boxSizing:'border-box'}}/>
          </div>
        </div>

        {inicio && fim && !validIntervalo && <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--rose)',marginBottom:10}}>⚠ O fim precisa ser depois do início.</div>}
        {dur !== null && <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',marginBottom:10}}>Duração: <strong style={{color:'var(--ink)'}}>{_nptFmtDur(dur)}</strong></div>}
        {overlap.length > 0 && <div style={{fontFamily:'var(--fm)',fontSize:11.5,color:'var(--sun)',background:'rgba(198,138,31,0.1)',borderRadius:8,padding:'8px 10px',marginBottom:10}}>⚠ Este intervalo se sobrepõe a {overlap.length} evento(s) já registrado(s). Você ainda pode salvar.</div>}

        <div className="label">{lang==='pt'?'Classe da falha':'Failure class'}</div>
        <select className="select" value={causaId} onChange={e=>setCausaId(e.target.value)} style={{width:'100%',marginBottom:12}}>
          <option value="">— sem classe —</option>
          {causas.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
        </select>

        <div className="label">{lang==='pt'?'Motivo / descrição':'Reason / description'}</div>
        <textarea className="input" value={motivo} onChange={e=>setMotivo(e.target.value)} placeholder={lang==='pt'?'O que aconteceu…':'What happened…'} style={{width:'100%',boxSizing:'border-box',minHeight:56,resize:'vertical',marginBottom:12,fontFamily:'var(--f)',fontSize:13}}/>

        <div style={{background:'rgba(31,87,85,0.05)',border:'1px solid var(--teal)',borderRadius:12,padding:'11px 13px',marginBottom:12}}>
          <div className="label" style={{marginBottom:4}}>{lang==='pt'?'Seguiu operacional?':'Kept operating?'} <span style={{fontWeight:400,color:'var(--muted)',textTransform:'none',letterSpacing:0}}>(opcional)</span></div>
          <div style={{fontFamily:'var(--fm)',fontSize:10.5,color:'var(--muted)',marginBottom:7,lineHeight:1.4}}>Se o barco tomou NPT mas continuou operando em outra frente (ex: AHC parado, ROV rodando), diga qual. Deixe vazio se parou tudo.</div>
          <input className="input" value={opParalela} onChange={e=>setOpParalela(e.target.value)} placeholder={lang==='pt'?'ex: ROV':'e.g. ROV'} style={{width:'100%',boxSizing:'border-box'}}/>
        </div>

        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:18}}>
          <label className="btn-icone neutro" title="anexar evidência" style={{cursor:'pointer',margin:0}}>📎
            <input type="file" accept="image/*" style={{display:'none'}} onChange={e=>{ upEvidencia(e.target.files[0]); e.target.value=''; }}/>
          </label>
          {evidencia && <><img src={evidencia} style={{width:34,height:34,borderRadius:6,objectFit:'cover'}}/><button className="btn btn-sm" onClick={()=>setEvidencia(null)}>{lang==='pt'?'remover':'remove'}</button></>}
        </div>

        <div style={{display:'flex',justifyContent:'flex-end',gap:8}}>
          <button className="btn" onClick={onClose}>{lang==='pt'?'Cancelar':'Cancel'}</button>
          <button className="btn-tidal" onClick={salvar} disabled={saving}>{saving ? (lang==='pt'?'Salvando…':'Saving…') : (edit ? (lang==='pt'?'Salvar':'Save') : (lang==='pt'?'Registrar':'Log'))}</button>
        </div>
      </div>
    </div>
  );
};

// ── Modal de gerenciar taxonomia de causas ──
const NptCausasModal = ({token, toast, onClose, onChanged}) => {
  const _tt = useT();
  const lang = _tt.lang;
  const [causas, setCausas] = React.useState(null);
  const [nova, setNova] = React.useState('');
  const H = () => ({'Authorization':`Bearer ${token()}`});
  const load = () => fetch('/api/npt/causas',{headers:H()}).then(r=>r.ok?r.json():[]).then(setCausas).catch(()=>setCausas([]));
  React.useEffect(()=>{ load(); }, []);

  const add = async () => {
    const nome = nova.trim(); if (!nome) return;
    const r = await fetch('/api/npt/causas',{method:'POST',headers:{...H(),'Content-Type':'application/json'},body:JSON.stringify({nome})});
    if (r.ok) { setNova(''); load(); onChanged&&onChanged(); } else toast.push({icon:'x',title:(lang==='pt'?'Erro ao adicionar':'Error adding')});
  };
  const remover = async (c) => {
    if (!window.confirm(`Remover a causa "${c.nome}"?`)) return;
    const r = await fetch(`/api/npt/causas/${c.id}`,{method:'DELETE',headers:H()});
    const d = await r.json();
    if (r.ok) { toast.push({icon:'check', title: d.desativada ? (lang==='pt'?'Causa desativada (histórico mantido)':'Cause disabled (history kept)') : (lang==='pt'?'Causa removida':'Cause removed')}); load(); onChanged&&onChanged(); }
    else toast.push({icon:'x',title:(lang==='pt'?'Erro ao remover':'Error removing')});
  };

  return (
    <div style={{position:'fixed',inset:0,zIndex:221,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:420,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:21}}>Classes de <em style={{fontStyle:'italic',color:'var(--accent)'}}>falha</em></div>
          <button className="btn btn-sm" onClick={onClose}>{lang==='pt'?'fechar':'close'}</button>
        </div>
        <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',marginBottom:16}}>O que já tem evento vira "desativado" (some da lista, mas o histórico fica).</div>

        <div style={{display:'flex',gap:8,marginBottom:16}}>
          <input className="input" value={nova} placeholder={lang==='pt'?'Nova classe…':'New class…'} onChange={e=>setNova(e.target.value)} onKeyDown={e=>{ if(e.key==='Enter') add(); }} style={{flex:1}}/>
          <button className="btn-tidal" onClick={add}>+ Add</button>
        </div>

        {causas === null ? <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)'}}>{lang==='pt'?'Carregando…':'Loading…'}</div> : (
          <div style={{display:'grid',gap:6}}>
            {causas.map(c => (
              <div key={c.id} style={{display:'flex',alignItems:'center',gap:10,background:'var(--surface)',border:'1px solid var(--line-soft)',borderLeft:`4px solid ${_nptCorCausa(c.nome)}`,borderRadius:10,padding:'9px 12px'}}>
                <span style={{flex:1,fontFamily:'var(--fm)',fontSize:13}}>{c.nome}</span>
                <button onClick={()=>remover(c)} title="remover" style={{background:'transparent',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:12}}>✕</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Donut dinâmico: proporção de NPT por classe (SVG puro, sem libs) ──
const NptDonut = ({dados, isMobile}) => {
  const lang = useT().lang;
  const total = dados.reduce((a, d) => a + d.min, 0);
  const r = 58, sw = 24, cx = 75, cy = 75, c = 2 * Math.PI * r;
  let acc = 0;
  return (
    <div style={{display:'flex',flexDirection:isMobile?'column':'row',alignItems:'center',gap:isMobile?18:28}}>
      <svg width={150} height={150} viewBox="0 0 150 150" style={{flexShrink:0}}>
        {total === 0 ? (
          <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--cream-3)" strokeWidth={sw}/>
        ) : dados.map((d, i) => {
          const len = (d.min / total) * c;
          const el = (
            <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.cor} strokeWidth={sw}
              strokeDasharray={`${len} ${c - len}`} strokeDashoffset={-acc}
              transform={`rotate(-90 ${cx} ${cy})`}/>
          );
          acc += len;
          return el;
        })}
        <text x={cx} y={cy - 3} textAnchor="middle" style={{fontFamily:'var(--fs)',fontSize:22,fill:'var(--ink)'}}>{dados.length}</text>
        <text x={cx} y={cy + 14} textAnchor="middle" style={{fontFamily:'var(--fm)',fontSize:8.5,letterSpacing:0.5,fill:'var(--muted)'}}>CLASSES</text>
      </svg>
      <div style={{flex:1,display:'grid',gap:9,width:'100%'}}>
        {total === 0 ? (
          <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)'}}>{lang==='pt'?'Sem eventos no período.':'No events in the period.'}</div>
        ) : dados.map((d, i) => {
          const pct = Math.round(d.min / total * 100);
          return (
            <div key={i} style={{display:'flex',alignItems:'center',gap:10}}>
              <span style={{width:12,height:12,borderRadius:3,background:d.cor,flexShrink:0}}/>
              <span style={{flex:1,fontFamily:'var(--fm)',fontSize:12.5,color:'var(--ink)'}}>{d.nome}</span>
              <div style={{width:isMobile?70:110,height:6,borderRadius:3,background:'var(--cream-3)',overflow:'hidden',flexShrink:0}}><div style={{width:`${pct}%`,height:'100%',background:d.cor}}/></div>
              <span style={{width:92,textAlign:'right',fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',flexShrink:0}}>{_nptFmtDur(d.min)} · {pct}%</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const NPT = ({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 [causas, setCausas] = React.useState([]);
  const [eventos, setEventos] = React.useState(null);
  const [fDesde, setFDesde] = React.useState('');
  const [fAte, setFAte] = React.useState('');
  const [fCausa, setFCausa] = React.useState('');
  const [modal, setModal] = React.useState(null);   // {} novo | {evento} editar
  const [taxon, setTaxon] = React.useState(false);

  const H = () => ({'Authorization':`Bearer ${token()}`});
  const loadCausas = () => fetch('/api/npt/causas',{headers:H()}).then(r=>r.ok?r.json():[]).then(setCausas).catch(()=>setCausas([]));
  const loadEventos = () => {
    const qs = [];
    if (fDesde) qs.push('desde=' + encodeURIComponent(new Date(fDesde + 'T00:00').toISOString()));
    if (fAte) qs.push('ate=' + encodeURIComponent(new Date(fAte + 'T23:59').toISOString()));
    if (fCausa) qs.push('causa_id=' + fCausa);
    fetch('/api/npt/eventos' + (qs.length ? '?' + qs.join('&') : ''), {headers:H()})
      .then(r=>r.ok?r.json():[]).then(setEventos).catch(()=>setEventos([]));
  };
  React.useEffect(()=>{ loadCausas(); }, []);
  React.useEffect(()=>{ loadEventos(); }, [fDesde, fAte, fCausa]);

  const lista = eventos || [];
  const totalMin = lista.reduce((a, e) => a + (Number(e.duracao_min) || 0), 0);
  const porCausa = {};
  lista.forEach(e => { const k = e.causa_nome || 'Sem classe'; porCausa[k] = (porCausa[k] || 0) + (Number(e.duracao_min) || 0); });
  const dadosPizza = Object.entries(porCausa).map(([nome, min]) => ({ nome, min, cor: _nptCorCausa(nome) })).sort((a, b) => b.min - a.min);

  // Operacionalidade: denominador = horas do período (sem filtro = ano corrente até agora)
  const _agora = new Date();
  const pDesde = fDesde ? new Date(fDesde + 'T00:00') : new Date(_agora.getFullYear(), 0, 1);
  const pAte = fAte ? new Date(fAte + 'T23:59') : _agora;
  const totalPeriodoH = Math.max(0, (pAte - pDesde) / 3600000);
  const operacionalH = Math.max(0, totalPeriodoH - totalMin / 60);
  const pctOp = totalPeriodoH > 0 ? (operacionalH / totalPeriodoH * 100) : 100;
  const corOp = pctOp >= 98 ? 'var(--leaf)' : pctOp >= 95 ? 'var(--sun)' : 'var(--rose)';

  const apagar = async (e) => {
    if (!window.confirm((lang==='pt'?'Apagar este evento de NPT?':'Delete this NPT event?'))) return;
    await fetch(`/api/npt/eventos/${e.id}`,{method:'DELETE',headers:H()});
    toast.push({icon:'check', title:(lang==='pt'?'Evento apagado':'Event deleted')}); loadEventos();
  };
  const onSaved = () => { setModal(null); loadEventos(); };

  return (
    <main style={{maxWidth:1080,margin:'0 auto',padding:isMobile?'16px 14px 60px':'26px 30px 80px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12,flexWrap:'wrap',marginBottom:20}}>
        <div>
          <div style={{fontFamily:'var(--fs)',fontSize:isMobile?24:30,letterSpacing:'-0.5px'}}>NPT · <em style={{fontStyle:'italic',color:'var(--accent)'}}>{lang==='pt'?'tempo não-produtivo':'non-productive time'}</em></div>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
          <button className="btn-icone" onClick={()=>setTaxon(true)} title="classes de NPT">⚙</button>
          <button className="btn-tidal" onClick={()=>setModal({})}>+ Registro</button>
        </div>
      </div>

      {/* filtros */}
      <div style={{display:'flex',gap:10,flexWrap:'wrap',alignItems:'flex-end',marginBottom:18}}>
        <div><div className="label">De</div><input className="input" type="date" value={fDesde} onChange={e=>setFDesde(e.target.value)}/></div>
        <div><div className="label">{lang==='pt'?'Até':'Until'}</div><input className="input" type="date" value={fAte} onChange={e=>setFAte(e.target.value)}/></div>
        <div><div className="label">Classe</div>
          <select className="select" value={fCausa} onChange={e=>setFCausa(e.target.value)}>
            <option value="">{lang==='pt'?'todas':'all'}</option>
            {causas.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
          </select>
        </div>
        {(fDesde||fAte||fCausa) && <button className="btn btn-sm" onClick={()=>{ setFDesde(''); setFAte(''); setFCausa(''); }}>{lang==='pt'?'limpar':'clear'}</button>}
      </div>

      {/* KPIs */}
      <div style={{display:'flex',gap:12,flexWrap:'wrap',marginBottom:14}}>
        <div style={{flex:isMobile?'1 1 100%':'2 1 320px',background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:`3px solid ${corOp}`,borderRadius:18,padding:'18px 22px',boxShadow:'var(--shadow-sm)'}}>
          <div className="t-eyebrow" style={{marginBottom:6}}>{lang==='pt'?'operacionalidade':'uptime'}{(fDesde||fAte)?(lang==='pt'?' no período':' in the period'):(lang==='pt'?' no ano':' this year')}</div>
          <span style={{fontFamily:'var(--fs)',fontSize:40,lineHeight:1,color:corOp}}>{pctOp.toFixed(2)}%</span>
          <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',marginTop:6}}>{_nptFmtDur(operacionalH*60)} {lang==='pt'?'operacional de':'operating out of'} {_nptFmtDur(totalPeriodoH*60)}</div>
          <div style={{height:8,borderRadius:4,background:'var(--cream-3)',overflow:'hidden',margin:'10px 0 6px'}}><div style={{width:`${Math.min(100,pctOp)}%`,height:'100%',background:corOp}}/></div>
          <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--fm)',fontSize:10,color:'var(--muted)'}}>
            <span>NPT: {(100-pctOp).toFixed(2)}%</span><span>{lang==='pt'?'Meta: ≥98%':'Target: ≥98%'}</span>
          </div>
        </div>
        <div style={{flex:'1 1 120px',background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:18,padding:'16px 18px',boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
          <span style={{fontFamily:'var(--fs)',fontSize:34,color:'var(--ink)'}}>{lista.length}</span>
          <span className="t-eyebrow" style={{marginTop:2}}>{lang==='pt'?'eventos NPT':'NPT events'}</span>
        </div>
        <div style={{flex:'1 1 120px',background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:18,padding:'16px 18px',boxShadow:'var(--shadow-sm)',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
          <span style={{fontFamily:'var(--fs)',fontSize:28,color:'var(--accent)'}}>{_nptFmtDur(totalMin)}</span>
          <span className="t-eyebrow" style={{marginTop:2}}>{lang==='pt'?'total parado':'total downtime'}</span>
        </div>
      </div>

      {/* Pizza por classe (dinâmica) */}
      <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderTop:'3px solid var(--accent)',borderRadius:18,padding:'18px 22px',marginBottom:20,boxShadow:'var(--shadow-sm)'}}>
        <div className="t-eyebrow" style={{marginBottom:14}}>{lang==='pt'?'NPT por classe de falha':'NPT by failure class'}</div>
        <NptDonut dados={dadosPizza} isMobile={isMobile}/>
      </div>

      {/* tabela de eventos */}
      {eventos === null ? <div style={{fontFamily:'var(--fm)',fontSize:13,color:'var(--muted)',padding:20}}>{lang==='pt'?'Carregando…':'Loading…'}</div> :
       lista.length === 0 ? (
        <div style={{textAlign:'center',padding:'50px 20px',background:'var(--surface)',border:'1px dashed var(--line)',borderRadius:18}}>
          <div style={{fontSize:30,marginBottom:8}}>⏱️</div>
          <div style={{fontFamily:'var(--fs)',fontSize:18}}>{lang==='pt'?'Nenhum NPT no período':'No NPT in the period'}</div>
          <div style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--muted)',marginTop:4}}>{lang==='pt'?'Registre o primeiro evento no botão acima.':'Log the first event using the button above.'}</div>
        </div>
      ) : isMobile ? (
        <div style={{display:'grid',gap:8}}>
          {lista.map(e => (
            <div key={e.id} style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderLeft:`4px solid ${_nptCorCausa(e.causa_nome)}`,borderRadius:12,padding:'12px 14px'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={{fontFamily:'var(--fm)',fontSize:12,fontWeight:600}}>{e.causa_nome||'Sem classe'}</span>
                <span style={{fontFamily:'var(--fm)',fontSize:12,color:'var(--accent)',fontWeight:600}}>{_nptFmtDur(e.duracao_min)}</span>
              </div>
              <div style={{fontFamily:'var(--fm)',fontSize:11,color:'var(--muted)',marginTop:3}}>{_nptFmtDT(e.inicio)} → {_nptFmtDT(e.fim)}</div>
              {e.motivo && <div style={{fontFamily:'var(--f)',fontSize:13,marginTop:6}}>{e.motivo}</div>}
              {e.operacao_paralela && <div style={{display:'inline-flex',alignItems:'center',gap:5,marginTop:7,fontFamily:'var(--fm)',fontSize:11,color:'var(--teal)',background:'rgba(31,87,85,0.08)',border:'1px solid var(--teal)',borderRadius:999,padding:'3px 10px'}}>✔ {lang==='pt'?'seguiu operacional':'kept operating'}: <strong>{e.operacao_paralela}</strong></div>}
              <div style={{display:'flex',gap:8,marginTop:8,alignItems:'center'}}>
                {e.evidencia_url && <a href={e.evidencia_url} target="_blank" rel="noreferrer" className="btn btn-sm">📎 evidência</a>}
                <button className="btn btn-sm" onClick={()=>setModal({evento:e})}>{lang==='pt'?'editar':'edit'}</button>
                <button className="btn btn-sm" onClick={()=>apagar(e)} style={{color:'var(--rose)'}}>{lang==='pt'?'apagar':'delete'}</button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{background:'var(--surface)',border:'1px solid var(--line-soft)',borderRadius:18,overflow:'hidden',boxShadow:'var(--shadow-sm)'}}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead>
              <tr style={{background:'var(--cream-2)',fontFamily:'var(--fm)',fontSize:10,letterSpacing:0.5,color:'var(--muted)',textTransform:'uppercase'}}>
                <th style={{textAlign:'left',padding:'10px 14px'}}>{lang==='pt'?'Início':'Start'}</th>
                <th style={{textAlign:'left',padding:'10px 14px'}}>Fim</th>
                <th style={{textAlign:'left',padding:'10px 14px'}}>{lang==='pt'?'Duração':'Duration'}</th>
                <th style={{textAlign:'left',padding:'10px 14px'}}>Classe</th>
                <th style={{textAlign:'left',padding:'10px 14px'}}>Motivo</th>
                <th style={{textAlign:'right',padding:'10px 14px'}}></th>
              </tr>
            </thead>
            <tbody>
              {lista.map(e => (
                <tr key={e.id} style={{borderTop:'1px solid var(--cream-2)'}}>
                  <td style={{padding:'10px 14px',fontFamily:'var(--fm)',fontSize:12}}>{_nptFmtDT(e.inicio)}</td>
                  <td style={{padding:'10px 14px',fontFamily:'var(--fm)',fontSize:12}}>{_nptFmtDT(e.fim)}</td>
                  <td style={{padding:'10px 14px',fontFamily:'var(--fm)',fontSize:12,fontWeight:600,color:'var(--accent)'}}>{_nptFmtDur(e.duracao_min)}</td>
                  <td style={{padding:'10px 14px'}}><span style={{fontFamily:'var(--fm)',fontSize:11,fontWeight:600,color:'#fff',background:_nptCorCausa(e.causa_nome),padding:'2px 8px',borderRadius:999}}>{e.causa_nome||'Sem classe'}</span></td>
                  <td style={{padding:'10px 14px',fontFamily:'var(--f)',fontSize:12.5,color:'var(--ink)'}}>{e.motivo||'—'}</td>
                  <td style={{padding:'10px 14px',textAlign:'right',whiteSpace:'nowrap'}}>
                    {e.evidencia_url && <a href={e.evidencia_url} target="_blank" rel="noreferrer" title="evidência" style={{marginRight:8,textDecoration:'none'}}>📎</a>}
                    <button className="btn btn-sm" onClick={()=>setModal({evento:e})}>{lang==='pt'?'editar':'edit'}</button>
                    <button onClick={()=>apagar(e)} title="apagar" style={{background:'transparent',border:'none',cursor:'pointer',color:'var(--muted)',fontSize:12,marginLeft:6}}>✕</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {modal && <NptModal token={token} toast={toast} causas={causas} evento={modal.evento} eventos={lista} onClose={()=>setModal(null)} onSaved={onSaved}/>}
      {taxon && <NptCausasModal token={token} toast={toast} onClose={()=>setTaxon(false)} onChanged={()=>{ loadCausas(); loadEventos(); }}/>}
    </main>
  );
};