/* Sistema > SDR Troubleshooting — notas + historico chamadas */

const SistemaSdrTroubleshooting = () => {
  const [mainTab, setMainTab] = React.useState('chamadas'); // chamadas | notas

  return (
    <div style={{ padding:24, maxWidth:1200, overflow:'auto', height:'100%' }}>
      {/* Header */}
      <div style={{ marginBottom:16 }}>
        <div style={{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.08em', marginBottom:4 }}>SISTEMA · SDR TROUBLESHOOTING</div>
        <div style={{ fontSize:20, fontWeight:700, color:'var(--dgd-fg-1)' }}>SDR Monitor</div>
      </div>

      {/* Tabs */}
      <div style={{ display:'flex', gap:0, borderBottom:'1px solid var(--dgd-border-1)', marginBottom:20 }}>
        {[['chamadas','Chamadas'],['notas','Notas Troubleshooting']].map(function(t) {
          var active = mainTab === t[0];
          return React.createElement('button', { key:t[0], onClick:function(){setMainTab(t[0])}, style:{ padding:'10px 20px', border:'none', borderBottom: active ? '2px solid #112954' : '2px solid transparent', background:'transparent', fontSize:13, fontWeight:active?700:400, color:active?'#112954':'var(--dgd-fg-2)', cursor:'pointer' } }, t[1]);
        })}
      </div>

      {mainTab === 'chamadas' && <SdrChamadasPanel />}
      {mainTab === 'notas' && <SdrNotasPanel />}
    </div>
  );
};

// ─── Painel Chamadas ──────────────────────────────────────────────────────────
const SdrChamadasPanel = () => {
  const [calls, setCalls]     = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filterSDR, setFSDR]  = React.useState('all');
  const [filterEst, setFEst]  = React.useState('all');
  const [selCall, setSelCall]  = React.useState(null);

  const load = () => {
    setLoading(true);
    fetch('/api/comercial/sdr/chamadas', { credentials:'include' })
      .then(r => r.ok ? r.json() : [])
      .then(d => { setCalls(d); setLoading(false); })
      .catch(() => setLoading(false));
  };
  React.useEffect(load, []);

  const sdrs = [...new Set(calls.map(c => c.sdr_email).filter(Boolean))];
  const filtered = calls.filter(c =>
    (filterSDR === 'all' || c.sdr_email === filterSDR) &&
    (filterEst === 'all' || c.estado === filterEst)
  );

  const estadoCfg = {
    atendida:     { label:'Atendida',      color:'#166534', bg:'#f0fdf4', border:'#bbf7d0' },
    sem_resposta: { label:'Sem resposta',  color:'#92400e', bg:'#fffbeb', border:'#fde68a' },
    ocupado:      { label:'Ocupado',       color:'#dc2626', bg:'#fef2f2', border:'#fecaca' },
    erro:         { label:'Erro',          color:'#dc2626', bg:'#fef2f2', border:'#fecaca' },
    cancelada:    { label:'Cancelada',     color:'#64748b', bg:'#f1f5f9', border:'#e2e8f0' },
  };

  // Stats
  const total     = calls.length;
  const atendidas = calls.filter(c => c.estado === 'atendida').length;
  const semResp   = calls.filter(c => c.estado === 'sem_resposta').length;
  const durTotal  = calls.reduce((s, c) => s + (c.duracao_seg || 0), 0);
  const durMedia  = atendidas > 0 ? Math.round(durTotal / atendidas) : 0;
  // Hoje
  const hoje = new Date().toISOString().slice(0, 10);
  const callsHoje = calls.filter(c => c.created_at && c.created_at.slice(0, 10) === hoje);
  const atendidasHoje = callsHoje.filter(c => c.estado === 'atendida').length;

  const pill = (label, active, onClick) => (
    React.createElement('button', { onClick:onClick, style:{ padding:'4px 12px', borderRadius:99, border:'1px solid', fontSize:11, cursor:'pointer', fontWeight:active?700:400, background:active?'#112954':'transparent', color:active?'#fff':'var(--dgd-fg-2)', borderColor:active?'#112954':'var(--dgd-border-1)' } }, label)
  );

  const th = { padding:'7px 12px', textAlign:'left', fontSize:10.5, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', fontWeight:600, whiteSpace:'nowrap', background:'var(--dgd-bg,#f8fafc)' };
  const td = { padding:'9px 12px', fontSize:12.5, borderBottom:'1px solid var(--dgd-border-1)', color:'var(--dgd-fg-2)' };

  function fmtDur(s) {
    if (!s) return '—';
    var m = Math.floor(s / 60);
    var sec = s % 60;
    return m > 0 ? m + 'm ' + sec + 's' : sec + 's';
  }

  function sdrNome(email) {
    if (!email) return '—';
    var parts = email.split('@')[0].split('.');
    return parts.map(function(p) { return p.charAt(0).toUpperCase() + p.slice(1); }).join(' ');
  }

  return React.createElement('div', null,
    // Stats
    React.createElement('div', { style:{ display:'flex', gap:10, marginBottom:20, flexWrap:'wrap' } },
      React.createElement('div', { style:{ padding:'12px 18px', background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, minWidth:90 } },
        React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.06em', marginBottom:4 } }, 'TOTAL'),
        React.createElement('div', { style:{ fontSize:22, fontWeight:700, color:'var(--dgd-fg-1)' } }, total)
      ),
      React.createElement('div', { style:{ padding:'12px 18px', background:'#f0fdf4', border:'1px solid #bbf7d0', borderRadius:8, minWidth:90 } },
        React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'#166534', letterSpacing:'0.06em', marginBottom:4 } }, 'ATENDIDAS'),
        React.createElement('div', { style:{ fontSize:22, fontWeight:700, color:'#166534' } }, atendidas)
      ),
      React.createElement('div', { style:{ padding:'12px 18px', background:'#fffbeb', border:'1px solid #fde68a', borderRadius:8, minWidth:90 } },
        React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'#92400e', letterSpacing:'0.06em', marginBottom:4 } }, 'SEM RESPOSTA'),
        React.createElement('div', { style:{ fontSize:22, fontWeight:700, color:'#92400e' } }, semResp)
      ),
      React.createElement('div', { style:{ padding:'12px 18px', background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, minWidth:90 } },
        React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.06em', marginBottom:4 } }, 'DUR. MEDIA'),
        React.createElement('div', { style:{ fontSize:22, fontWeight:700, color:'var(--dgd-fg-1)' } }, fmtDur(durMedia))
      ),
      React.createElement('div', { style:{ padding:'12px 18px', background:'#eff6ff', border:'1px solid #bfdbfe', borderRadius:8, minWidth:90 } },
        React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'#1d4ed8', letterSpacing:'0.06em', marginBottom:4 } }, 'HOJE'),
        React.createElement('div', { style:{ fontSize:22, fontWeight:700, color:'#1d4ed8' } }, atendidasHoje + '/' + callsHoje.length)
      )
    ),
    // Filters
    React.createElement('div', { style:{ display:'flex', gap:6, marginBottom:14, flexWrap:'wrap', alignItems:'center' } },
      React.createElement('span', { style:{ fontSize:10.5, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', marginRight:4 } }, 'SDR'),
      pill('Todos', filterSDR==='all', function(){setFSDR('all')}),
      sdrs.map(function(e) { return pill(sdrNome(e), filterSDR===e, function(){setFSDR(e)}); }),
      React.createElement('span', { style:{ width:16 } }),
      React.createElement('span', { style:{ fontSize:10.5, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', marginRight:4 } }, 'ESTADO'),
      pill('Todos', filterEst==='all', function(){setFEst('all')}),
      pill('Atendida', filterEst==='atendida', function(){setFEst('atendida')}),
      pill('Sem resposta', filterEst==='sem_resposta', function(){setFEst('sem_resposta')}),
      React.createElement('button', { onClick:load, style:{ marginLeft:'auto', padding:'4px 12px', borderRadius:6, border:'1px solid var(--dgd-border-1)', background:'transparent', fontSize:11, cursor:'pointer', color:'var(--dgd-fg-2)' } }, 'Refresh')
    ),
    // Table
    loading
      ? React.createElement('div', { style:{ padding:40, textAlign:'center', color:'var(--dgd-fg-3)', fontSize:13 } }, 'A carregar...')
      : filtered.length === 0
        ? React.createElement('div', { style:{ padding:40, textAlign:'center', color:'var(--dgd-fg-3)', fontSize:13 } }, 'Sem chamadas registadas.')
        : React.createElement('div', { style:{ background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, overflow:'hidden' } },
            React.createElement('table', { style:{ width:'100%', borderCollapse:'collapse' } },
              React.createElement('thead', null,
                React.createElement('tr', null,
                  ['Data','SDR','Empresa','Contacto','Campanha','Estado','Durac.'].map(function(h) {
                    return React.createElement('th', { key:h, style:th }, h);
                  })
                )
              ),
              React.createElement('tbody', null,
                filtered.map(function(c) {
                  var ec = estadoCfg[c.estado] || { label:c.estado||'—', color:'#64748b', bg:'#f1f5f9', border:'#e2e8f0' };
                  return React.createElement('tr', {
                    key:c.id,
                    style:{ cursor:'pointer' },
                    onClick:function(){setSelCall(c)},
                    onMouseEnter:function(e){e.currentTarget.style.background='var(--dgd-bg,#f8fafc)'},
                    onMouseLeave:function(e){e.currentTarget.style.background='transparent'}
                  },
                    React.createElement('td', { style:Object.assign({}, td, { fontSize:11.5, fontFamily:'var(--dgd-font-mono,monospace)', whiteSpace:'nowrap' }) },
                      new Date(c.created_at).toLocaleString('pt-PT', { day:'2-digit', month:'2-digit', hour:'2-digit', minute:'2-digit' })
                    ),
                    React.createElement('td', { style:Object.assign({}, td, { fontWeight:500 }) }, sdrNome(c.sdr_email)),
                    React.createElement('td', { style:Object.assign({}, td, { fontWeight:500, color:'var(--dgd-fg-1)' }) }, c.empresa || '—'),
                    React.createElement('td', { style:td }, c.contacto || '—'),
                    React.createElement('td', { style:Object.assign({}, td, { fontSize:11.5 }) }, c.campanha_nome || '—'),
                    React.createElement('td', { style:td },
                      React.createElement('span', { style:{ fontSize:10, padding:'1px 8px', borderRadius:99, background:ec.bg, color:ec.color, border:'1px solid '+ec.border, fontWeight:600 } }, ec.label)
                    ),
                    React.createElement('td', { style:Object.assign({}, td, { fontFamily:'var(--dgd-font-mono,monospace)', fontSize:11.5 }) }, fmtDur(c.duracao_seg))
                  );
                })
              )
            )
          ),
    selCall && React.createElement(SdrChamadaModal, { call:selCall, onClose:function(){setSelCall(null)}, fmtDur:fmtDur, sdrNome:sdrNome, estadoCfg:estadoCfg })
  );
};

// ─── Modal detalhe chamada ────────────────────────────────────────────────────
const SdrChamadaModal = ({ call, onClose, fmtDur, sdrNome, estadoCfg }) => {
  var c = call;
  var ec = estadoCfg[c.estado] || { label:c.estado||'—', color:'#64748b', bg:'#f1f5f9', border:'#e2e8f0' };
  var bant = c.bant || {};
  var hasBant = bant.budget !== undefined || bant.authority !== undefined || bant.need !== undefined || bant.timeline !== undefined;
  var sugestoes = c.sugestoes || [];
  var pessoa = c.pessoa || null;
  var qual = c.qualificacao || null;

  var overlay = { position:'fixed', inset:0, zIndex:2000, background:'rgba(0,0,0,0.45)', display:'flex', alignItems:'center', justifyContent:'center', padding:24 };
  var card = { width:'100%', maxWidth:700, maxHeight:'90vh', overflowY:'auto', background:'var(--dgd-bg-surface,#fff)', border:'1px solid var(--dgd-border-1,#e2e8f0)', borderRadius:12, boxShadow:'0 12px 48px rgba(0,0,0,0.22)' };
  var section = function(title) { return { fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:6, fontWeight:600, marginTop:16 }; };
  var bantPill = function(k) {
    var v = bant[k];
    var color = v===true?'#166534':v===false?'#991b1b':'#94a3b8';
    var bg = v===true?'#f0fdf4':v===false?'#fef2f2':'#f1f5f9';
    var border = v===true?'#bbf7d0':v===false?'#fecaca':'#e2e8f0';
    return React.createElement('span', { key:k, style:{ display:'inline-flex', alignItems:'center', justifyContent:'center', gap:4, padding:'3px 10px', borderRadius:4, fontSize:11, fontWeight:600, fontFamily:'var(--dgd-font-mono,monospace)', color:color, background:bg, border:'1px solid '+border } },
      k.charAt(0).toUpperCase() + ' ' + (v===true?'Sim':v===false?'Nao':'?')
    );
  };

  return React.createElement('div', { style:overlay, onClick:function(e){if(e.target===e.currentTarget)onClose()} },
    React.createElement('div', { style:card },
      // Header
      React.createElement('div', { style:{ padding:'16px 20px', borderBottom:'1px solid var(--dgd-border-1)', display:'flex', alignItems:'center', gap:12 } },
        React.createElement('div', { style:{ flex:1 } },
          React.createElement('div', { style:{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.08em', marginBottom:3 } }, 'REGISTO DE CHAMADA'),
          React.createElement('div', { style:{ fontSize:17, fontWeight:700, color:'var(--dgd-fg-1)' } }, c.empresa || '—'),
          React.createElement('div', { style:{ fontSize:12, color:'var(--dgd-fg-3)', marginTop:2 } }, c.contacto || '')
        ),
        React.createElement('span', { style:{ fontSize:10, padding:'2px 10px', borderRadius:99, background:ec.bg, color:ec.color, border:'1px solid '+ec.border, fontWeight:600 } }, ec.label),
        React.createElement('button', { onClick:onClose, style:{ background:'transparent', border:'none', cursor:'pointer', color:'var(--dgd-fg-3)', padding:6, marginLeft:4 } },
          React.createElement('svg', { width:16, height:16, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:2 },
            React.createElement('line', { x1:18, y1:6, x2:6, y2:18 }),
            React.createElement('line', { x1:6, y1:6, x2:18, y2:18 })
          )
        )
      ),
      // Body
      React.createElement('div', { style:{ padding:'16px 20px' } },
        // Meta
        React.createElement('div', { style:{ display:'flex', gap:16, flexWrap:'wrap', marginBottom:12, padding:'10px 14px', background:'var(--dgd-bg,#f8fafc)', borderRadius:8, border:'1px solid var(--dgd-border-1)' } },
          React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)' } }, 'DATA'),
            React.createElement('div', { style:{ fontSize:12.5, fontWeight:500, color:'var(--dgd-fg-1)' } }, new Date(c.created_at).toLocaleString('pt-PT', { day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit' }))
          ),
          React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)' } }, 'SDR'),
            React.createElement('div', { style:{ fontSize:12.5, fontWeight:500, color:'var(--dgd-fg-1)' } }, sdrNome(c.sdr_email))
          ),
          React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)' } }, 'DURACAO'),
            React.createElement('div', { style:{ fontSize:12.5, fontWeight:500, color:'var(--dgd-fg-1)' } }, fmtDur(c.duracao_seg))
          ),
          c.campanha_nome && React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)' } }, 'CAMPANHA'),
            React.createElement('div', { style:{ fontSize:12.5, fontWeight:500, color:'var(--dgd-fg-1)' } }, c.campanha_nome)
          ),
          c.telefone && React.createElement('div', null,
            React.createElement('div', { style:{ fontSize:10, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)' } }, 'TELEFONE'),
            React.createElement('div', { style:{ fontSize:12.5, fontWeight:500, color:'var(--dgd-fg-1)', fontFamily:'var(--dgd-font-mono,monospace)' } }, c.telefone)
          )
        ),
        // Resumo
        c.resumo && React.createElement('div', null,
          React.createElement('div', { style:section() }, 'RESUMO AI'),
          React.createElement('div', { style:{ fontSize:13, color:'var(--dgd-fg-1)', lineHeight:1.7, whiteSpace:'pre-wrap', padding:'10px 14px', background:'var(--dgd-bg,#f8fafc)', borderRadius:8, border:'1px solid var(--dgd-border-1)' } }, c.resumo)
        ),
        // BANT
        hasBant && React.createElement('div', null,
          React.createElement('div', { style:section() }, 'BANT EXTRAIDO'),
          React.createElement('div', { style:{ display:'flex', gap:8, flexWrap:'wrap' } },
            ['budget','authority','need','timeline'].map(bantPill)
          )
        ),
        // Sugestoes
        sugestoes.length > 0 && React.createElement('div', null,
          React.createElement('div', { style:section() }, 'SUGESTOES AI'),
          React.createElement('div', { style:{ padding:'10px 14px', background:'#fffbeb', borderRadius:8, border:'1px solid #fde68a', display:'flex', flexDirection:'column', gap:4 } },
            sugestoes.map(function(s, i) {
              return React.createElement('div', { key:i, style:{ fontSize:12.5, color:'var(--dgd-fg-1)', display:'flex', gap:6 } },
                React.createElement('span', { style:{ color:'#92400e', flexShrink:0 } }, (i+1)+'.'),
                React.createElement('span', null, s)
              );
            })
          )
        ),
        // Notas
        c.notas && React.createElement('div', null,
          React.createElement('div', { style:section() }, 'NOTAS'),
          React.createElement('div', { style:{ fontSize:12.5, color:'var(--dgd-fg-1)', lineHeight:1.6, whiteSpace:'pre-wrap' } }, c.notas)
        ),
        // Sem dados
        !c.resumo && !hasBant && !c.notas && sugestoes.length === 0 &&
          React.createElement('div', { style:{ padding:24, textAlign:'center', color:'var(--dgd-fg-3)', fontSize:13 } }, 'Sem dados de avaliacao para esta chamada.')
      ),
      // Footer
      React.createElement('div', { style:{ padding:'12px 20px', borderTop:'1px solid var(--dgd-border-1)', display:'flex', justifyContent:'flex-end', background:'var(--dgd-bg,#f8fafc)' } },
        React.createElement('button', { onClick:onClose, style:{ padding:'7px 16px', borderRadius:6, border:'1px solid var(--dgd-border-1)', background:'transparent', fontSize:13, cursor:'pointer', color:'var(--dgd-fg-2)' } }, 'Fechar')
      )
    )
  );
};

// ─── Painel Notas Troubleshooting ─────────────────────────────────────────────
const SdrNotasPanel = () => {
  const [notes, setNotes]     = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filterCat, setFC]    = React.useState('all');
  const [filterRes, setFR]    = React.useState('all');
  const [expanded, setExp]    = React.useState(null);

  const load = () => {
    setLoading(true);
    fetch('/api/comercial/sdr/troubleshooting', { credentials:'include' })
      .then(r => r.ok ? r.json() : [])
      .then(d => { setNotes(d); setLoading(false); })
      .catch(() => setLoading(false));
  };
  React.useEffect(load, []);

  const toggleResolvido = async (id, current) => {
    await fetch('/api/comercial/sdr/troubleshooting/' + id, {
      method:'PATCH', credentials:'include',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ resolvido: !current }),
    }).catch(() => {});
    setNotes(ns => ns.map(n => n.id === id ? { ...n, resolvido: !current } : n));
  };

  const filtered = notes.filter(n =>
    (filterCat === 'all' || n.categoria === filterCat) &&
    (filterRes === 'all' || (filterRes === 'aberto' ? !n.resolvido : n.resolvido))
  );

  const catCfg = {
    chamada: { label:'Chamada', color:'#1d4ed8', bg:'#eff6ff', border:'#bfdbfe' },
    sistema: { label:'Sistema', color:'#92400e', bg:'#fffbeb', border:'#fde68a' },
    dados:   { label:'Dados',   color:'#166534', bg:'#f0fdf4', border:'#bbf7d0' },
    outro:   { label:'Outro',   color:'#64748b', bg:'#f1f5f9', border:'#e2e8f0' },
  };

  const total   = notes.length;
  const abertos = notes.filter(n => !n.resolvido).length;

  const pill = (label, active, onClick) => (
    <button onClick={onClick} style={{ padding:'4px 12px', borderRadius:99, border:'1px solid', fontSize:11, cursor:'pointer', fontWeight:active?700:400, background:active?'#112954':'transparent', color:active?'#fff':'var(--dgd-fg-2)', borderColor:active?'#112954':'var(--dgd-border-1)' }}>{label}</button>
  );

  const th = { padding:'7px 12px', textAlign:'left', fontSize:10.5, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', borderBottom:'1px solid var(--dgd-border-1)', fontWeight:600, whiteSpace:'nowrap', background:'var(--dgd-bg,#f8fafc)' };
  const td = { padding:'9px 12px', fontSize:12.5, borderBottom:'1px solid var(--dgd-border-1)', color:'var(--dgd-fg-2)' };

  return (
    <div>
      {/* Stats */}
      <div style={{ display:'flex', gap:10, marginBottom:20, flexWrap:'wrap' }}>
        <div style={{ padding:'12px 18px', background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, minWidth:100 }}>
          <div style={{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', letterSpacing:'0.06em', marginBottom:4 }}>TOTAL</div>
          <div style={{ fontSize:22, fontWeight:700, color:'var(--dgd-fg-1)' }}>{total}</div>
        </div>
        <div style={{ padding:'12px 18px', background:'#fffbeb', border:'1px solid #fde68a', borderRadius:8, minWidth:100 }}>
          <div style={{ fontSize:10, fontFamily:'var(--dgd-font-mono,monospace)', color:'#92400e', letterSpacing:'0.06em', marginBottom:4 }}>EM ABERTO</div>
          <div style={{ fontSize:22, fontWeight:700, color:'#92400e' }}>{abertos}</div>
        </div>
      </div>

      {/* Filters */}
      <div style={{ display:'flex', gap:6, marginBottom:14, flexWrap:'wrap', alignItems:'center' }}>
        <span style={{ fontSize:10.5, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', marginRight:4 }}>CATEGORIA</span>
        {pill('Todas', filterCat==='all', () => setFC('all'))}
        {Object.entries(catCfg).map(([k, c]) => pill(c.label, filterCat===k, () => setFC(k)))}
        <span style={{ width:16 }} />
        <span style={{ fontSize:10.5, fontFamily:'var(--dgd-font-mono,monospace)', color:'var(--dgd-fg-3)', marginRight:4 }}>ESTADO</span>
        {pill('Todos', filterRes==='all', () => setFR('all'))}
        {pill('Em aberto', filterRes==='aberto', () => setFR('aberto'))}
        {pill('Resolvidos', filterRes==='resolvido', () => setFR('resolvido'))}
        <button onClick={load} style={{ marginLeft:'auto', padding:'4px 12px', borderRadius:6, border:'1px solid var(--dgd-border-1)', background:'transparent', fontSize:11, cursor:'pointer', color:'var(--dgd-fg-2)' }}>Refresh</button>
      </div>

      {/* Table */}
      {loading ? (
        <div style={{ padding:40, textAlign:'center', color:'var(--dgd-fg-3)', fontSize:13 }}>A carregar...</div>
      ) : filtered.length === 0 ? (
        <div style={{ padding:40, textAlign:'center', color:'var(--dgd-fg-3)', fontSize:13 }}>Sem notas de troubleshooting.</div>
      ) : (
        <div style={{ background:'var(--dgd-bg-card,white)', border:'1px solid var(--dgd-border-1)', borderRadius:8, overflow:'hidden' }}>
          <table style={{ width:'100%', borderCollapse:'collapse' }}>
            <thead>
              <tr>
                {['Data','SDR','Empresa','Campanha','Categoria','Estado',''].map(h => <th key={h} style={th}>{h}</th>)}
              </tr>
            </thead>
            <tbody>
              {filtered.map(n => {
                const cc = catCfg[n.categoria] || catCfg.outro;
                const isExp = expanded === n.id;
                return React.createElement(React.Fragment, { key: n.id },
                  <tr style={{ cursor:'pointer', background: isExp ? 'var(--dgd-bg,#f8fafc)' : 'transparent' }}
                    onClick={() => setExp(isExp ? null : n.id)}
                    onMouseEnter={e => { if (!isExp) e.currentTarget.style.background='var(--dgd-bg,#f8fafc)'; }}
                    onMouseLeave={e => { if (!isExp) e.currentTarget.style.background='transparent'; }}
                  >
                    <td style={{ ...td, fontSize:11.5, fontFamily:'var(--dgd-font-mono,monospace)', whiteSpace:'nowrap' }}>
                      {new Date(n.created_at).toLocaleString('pt-PT', { day:'2-digit', month:'2-digit', year:'2-digit', hour:'2-digit', minute:'2-digit' })}
                    </td>
                    <td style={{ ...td, fontWeight:500 }}>{n.sdr_nome || n.sdr_email}</td>
                    <td style={{ ...td, fontWeight:500, color:'var(--dgd-fg-1)' }}>{n.empresa_nome || '—'}</td>
                    <td style={{ ...td, fontSize:11.5 }}>{n.campanha || '—'}</td>
                    <td style={td}>
                      <span style={{ fontSize:10, padding:'1px 8px', borderRadius:99, background:cc.bg, color:cc.color, border:'1px solid '+cc.border, fontWeight:600 }}>{cc.label}</span>
                    </td>
                    <td style={td}>
                      {n.resolvido
                        ? <span style={{ fontSize:10, color:'#166534', fontWeight:600 }}>Resolvido</span>
                        : <span style={{ fontSize:10, color:'#dc2626', fontWeight:600 }}>Em aberto</span>
                      }
                    </td>
                    <td style={{ ...td, textAlign:'right' }}>
                      <button onClick={e => { e.stopPropagation(); toggleResolvido(n.id, n.resolvido); }}
                        style={{ padding:'3px 10px', borderRadius:5, border:'1px solid var(--dgd-border-1)', background:'transparent', fontSize:10.5, cursor:'pointer', color:'var(--dgd-fg-2)' }}
                      >{n.resolvido ? 'Reabrir' : 'Resolver'}</button>
                    </td>
                  </tr>,
                  isExp && (
                    <tr key={n.id + '-detail'}>
                      <td colSpan={7} style={{ padding:'12px 16px', background:'var(--dgd-bg,#f8fafc)', borderBottom:'1px solid var(--dgd-border-1)' }}>
                        <div style={{ fontSize:12.5, color:'var(--dgd-fg-1)', lineHeight:1.6, whiteSpace:'pre-wrap' }}>{n.nota}</div>
                        {n.prospect_id && <div style={{ fontSize:10.5, color:'var(--dgd-fg-3)', fontFamily:'var(--dgd-font-mono,monospace)', marginTop:8 }}>Prospect ID: {n.prospect_id}</div>}
                      </td>
                    </tr>
                  )
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

window.SistemaSdrTroubleshooting = SistemaSdrTroubleshooting;