// page-logs.jsx — Logs com dados reais do Supabase

const { useState: usL, useEffect: ueL, useMemo: umL } = React;

const FUNCTION_OPTIONS = [
  ['all','Todas'],
  ['fn-webhook-router','fn-webhook-router'],
  ['fn-abandoned-carts','fn-abandoned-carts'],
  ['fn-sync-leads','fn-sync-leads'],
  ['fn-sync-catalog','fn-sync-catalog'],
  ['fn-sync-orders','fn-sync-orders'],
];

function PageLogs({ prefs, role, tenant }) {
  const [open, setOpen]           = usL(null);
  const [q, setQ]                 = usL('');
  const [status, setStatus]       = usL('all');
  const [fn, setFn]               = usL('all');
  const [showFilters, setShowFilters] = usL(false);
  const [logs, setLogs]           = usL([]);
  const [total, setTotal]         = usL(0);
  const [page, setPage]           = usL(0);
  const [loading, setLoading]     = usL(false);

  const PAGE_SIZE = 50;

  ueL(() => {
    loadLogs(0);
  }, [tenant?.id, status, fn]);

  async function loadLogs(p = 0) {
    setLoading(true);
    try {
      const filters = {};
      if (status !== 'all') filters.status = status;
      if (fn !== 'all') filters.function_name = fn;

      const opts = {
        page: p,
        pageSize: PAGE_SIZE,
        filters,
      };
      // Admin vê todos; usuário vê apenas o seu
      if (role !== 'super_admin' && tenant?.id) opts.tenantId = tenant.id;

      const res = await SB.getLogs(opts);
      setLogs(res.logs);
      setTotal(res.total);
      setPage(p);
    } catch (e) { console.error('Logs load:', e); }
    finally { setLoading(false); }
  }

  // Filtro local por texto
  const filtered = umL(() => {
    if (!q) return logs;
    return logs.filter(l =>
      l.id.includes(q) ||
      l.function_name.toLowerCase().includes(q.toLowerCase())
    );
  }, [logs, q]);

  const stats = {
    total,
    success: filtered.filter(l => l.status === 'success').length,
    error: filtered.filter(l => l.status === 'error').length,
    avg: filtered.length > 0
      ? Math.round(filtered.reduce((a,l) => a + (l.duration_ms||0), 0) / filtered.length)
      : 0,
  };

  return (
    <div className="fade-up">
      <div className="page-head">
        <div>
          <h1 className="page-title">Logs de execução</h1>
          <p className="page-sub">
            {role === 'super_admin'
              ? 'Visão global de todas as execuções dos últimos 15 dias.'
              : 'Histórico das suas execuções nos últimos 15 dias.'}
          </p>
        </div>
      </div>

      {/* Stats */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        <MiniStat label="Total" value={stats.total.toLocaleString('pt-BR')} icon="lucide:zap" />
        <MiniStat label="Sucesso" value={stats.success} icon="lucide:check-circle-2" tone="ok" />
        <MiniStat label="Erros" value={stats.error} icon="lucide:alert-triangle" tone="err" />
        <MiniStat label="Duração média" value={stats.avg + 'ms'} icon="lucide:timer" />
      </div>

      {/* Filtros */}
      <div className="card" style={{ padding:12, marginBottom:'var(--gap)' }}>
        <div className="row gap-sm" style={{ flexWrap:'wrap' }}>
          <div style={{ flex:1, minWidth:240, position:'relative' }}>
            <iconify-icon icon="lucide:search" style={{ position:'absolute',left:12,top:'50%',transform:'translateY(-50%)',color:'var(--text-muted)' }} />
            <input className="input" style={{ paddingLeft:36 }}
              placeholder="Buscar por ID ou função…"
              value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <Pill label="Status" value={status} setValue={v => { setStatus(v); loadLogs(0); }}
            options={[['all','Todos'],['success','Sucesso'],['error','Erro'],['pending','Pendente']]} />
          <Pill label="Função" value={fn} setValue={v => { setFn(v); loadLogs(0); }}
            options={FUNCTION_OPTIONS} />
          <button className="btn" onClick={() => loadLogs(0)} disabled={loading}>
            <iconify-icon icon={loading ? 'lucide:loader-circle' : 'lucide:refresh-cw'}
              style={loading ? { animation:'spin 1s linear infinite' } : {}} />
            Atualizar
          </button>
          <button className="btn btn-ghost" onClick={() => { setQ(''); setStatus('all'); setFn('all'); loadLogs(0); }}>
            <iconify-icon icon="lucide:x" />Limpar
          </button>
        </div>
      </div>

      {prefs.logsView === 'table'
        ? <LogsTable rows={filtered} role={role} onOpen={setOpen} />
        : <LogsTimeline rows={filtered} role={role} onOpen={setOpen} />
      }

      {/* Paginação */}
      {total > PAGE_SIZE && (
        <div className="row" style={{ justifyContent:'center', gap:8, marginTop:'var(--gap)' }}>
          <button className="btn" disabled={page === 0} onClick={() => loadLogs(page - 1)}>← Anterior</button>
          <span className="muted" style={{ fontSize:12, padding:'0 8px', alignSelf:'center' }}>
            Página {page + 1} de {Math.ceil(total / PAGE_SIZE)}
          </span>
          <button className="btn" disabled={(page + 1) * PAGE_SIZE >= total} onClick={() => loadLogs(page + 1)}>Próxima →</button>
        </div>
      )}

      <Modal open={!!open} onClose={() => setOpen(null)}
        title={open ? `Execução ${open.id.slice(0,8)}…` : ''}
        maxWidth={760}
        footer={<button className="btn btn-primary" onClick={() => setOpen(null)}>Fechar</button>}>
        {open && <LogDetail log={open} />}
      </Modal>
    </div>
  );
}

function MiniStat({ label, value, icon, tone }) {
  return (
    <div className="card row gap-md">
      <div style={{
        width:38, height:38, borderRadius:10,
        background: tone === 'ok' ? 'var(--ok-soft)' : tone === 'err' ? 'var(--err-soft)' : 'var(--bg-elevated)',
        color: tone === 'ok' ? 'var(--ok)' : tone === 'err' ? 'var(--err)' : 'var(--accent)',
        display:'grid', placeItems:'center',
      }}>
        <iconify-icon icon={icon} style={{ fontSize:18 }} />
      </div>
      <div>
        <div className="muted" style={{ fontSize:11, textTransform:'uppercase', letterSpacing:1, fontWeight:700 }}>{label}</div>
        <div style={{ fontSize:20, fontWeight:800 }} className="mono">{value}</div>
      </div>
    </div>
  );
}

function Pill({ label, value, setValue, options }) {
  const [open, setOpen] = usL(false);
  const cur = options.find(o => o[0] === value);
  return (
    <div style={{ position:'relative' }}>
      <button className="select" onClick={() => setOpen(!open)}>
        <span className="muted">{label}:</span>
        <span style={{ color:'var(--text-primary)' }}>{cur ? cur[1] : value}</span>
        <iconify-icon icon="lucide:chevron-down" />
      </button>
      {open && (
        <>
          <div style={{ position:'fixed',inset:0,zIndex:50 }} onClick={() => setOpen(false)} />
          <div style={{
            position:'absolute', top:'calc(100% + 4px)', left:0, zIndex:51,
            background:'var(--bg-elevated)', border:'1px solid var(--border-strong)',
            borderRadius:'var(--r-md)', padding:4, minWidth:180, maxHeight:260, overflow:'auto',
            boxShadow:'var(--shadow-md)',
          }}>
            {options.map(([v,l]) => (
              <button key={v} onClick={() => { setValue(v); setOpen(false); }}
                style={{
                  display:'block', width:'100%', textAlign:'left',
                  padding:'7px 10px', borderRadius:6, fontSize:12, fontWeight:600,
                  color: v === value ? 'var(--accent)' : 'var(--text-secondary)',
                  background: v === value ? 'var(--accent-soft)' : 'transparent',
                }}>{l}</button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function StatusTag({ s }) {
  if (s === 'success') return <span className="tag tag-ok tag-dot">sucesso</span>;
  if (s === 'error')   return <span className="tag tag-err tag-dot">erro</span>;
  return <span className="tag tag-warn tag-dot">pendente</span>;
}

function fmtDate(iso) {
  const d = new Date(iso);
  return d.toLocaleDateString('pt-BR', { day:'2-digit', month:'short' });
}
function fmtTime(iso) {
  return new Date(iso).toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
}

function LogsTable({ rows, role, onOpen }) {
  return (
    <div className="card" style={{ padding:0, overflow:'hidden' }}>
      <div style={{ maxHeight:'calc(100vh - 380px)', overflow:'auto' }}>
        <table className="tbl">
          <thead><tr>
            <th style={{ width:100 }}>Status</th>
            <th>ID</th>
            <th>Função</th>
            <th style={{ width:100 }}>Duração</th>
            <th style={{ width:80 }}>Créditos</th>
            <th style={{ width:160 }}>Quando</th>
          </tr></thead>
          <tbody>
            {rows.length === 0 && (
              <tr><td colSpan="6" style={{ textAlign:'center', padding:24, color:'var(--text-muted)' }}>
                Nenhuma execução encontrada.
              </td></tr>
            )}
            {rows.map(l => (
              <tr key={l.id} onClick={() => onOpen(l)} style={{ cursor:'pointer' }}>
                <td><StatusTag s={l.status} /></td>
                <td className="strong mono" style={{ fontSize:11 }}>{l.id.slice(0,8)}…</td>
                <td className="strong">{l.function_name}</td>
                <td className="mono">{l.duration_ms ?? '—'}ms</td>
                <td className="mono">{l.credits_used}</td>
                <td><span className="muted">{fmtDate(l.created_at)} </span><span className="mono">{fmtTime(l.created_at)}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function LogsTimeline({ rows, role, onOpen }) {
  const groups = {};
  rows.forEach(r => {
    const day = fmtDate(r.created_at);
    (groups[day] = groups[day] || []).push(r);
  });
  return (
    <div className="card" style={{ padding:'var(--card-pad)' }}>
      <div style={{ maxHeight:'calc(100vh - 380px)', overflow:'auto' }}>
        {Object.keys(groups).length === 0 && (
          <div style={{ textAlign:'center', padding:24, color:'var(--text-muted)' }}>Nenhuma execução encontrada.</div>
        )}
        {Object.entries(groups).map(([day, items]) => (
          <div key={day} style={{ marginBottom:16 }}>
            <div className="row gap-sm" style={{ marginBottom:10, position:'sticky', top:0, background:'var(--bg-surface)', padding:'6px 0', zIndex:1 }}>
              <span style={{ fontSize:11, fontWeight:800, textTransform:'uppercase', letterSpacing:1, color:'var(--text-muted)' }}>{day}</span>
              <div style={{ flex:1, height:1, background:'var(--border)' }} />
              <span className="muted" style={{ fontSize:11 }}>{items.length} execuções</span>
            </div>
            <div style={{ position:'relative', paddingLeft:18 }}>
              <div style={{ position:'absolute', left:6, top:6, bottom:6, width:1, background:'var(--border)' }} />
              {items.map(l => (
                <div key={l.id} onClick={() => onOpen(l)}
                  style={{ position:'relative', display:'grid', gridTemplateColumns:'auto 1fr auto auto auto', gap:12, alignItems:'center', padding:'8px 10px', borderRadius:'var(--r-md)', cursor:'pointer', marginBottom:2 }}
                  onMouseEnter={e => e.currentTarget.style.background='var(--bg-hover)'}
                  onMouseLeave={e => e.currentTarget.style.background='transparent'}>
                  <span style={{
                    position:'absolute', left:-16, top:'50%', transform:'translateY(-50%)',
                    width:9, height:9, borderRadius:'50%',
                    background: l.status==='success'?'var(--ok)':l.status==='error'?'var(--err)':'var(--warn)',
                    border:'2px solid var(--bg-surface)',
                  }} />
                  <span className="mono muted" style={{ fontSize:11 }}>{fmtTime(l.created_at)}</span>
                  <span className="strong" style={{ fontSize:13 }}>{l.function_name}</span>
                  <span className="mono muted" style={{ fontSize:11 }}>{l.duration_ms ?? '—'}ms</span>
                  <span className="mono muted" style={{ fontSize:11 }}>{l.credits_used}c</span>
                  <StatusTag s={l.status} />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function LogDetail({ log }) {
  function copyPayload(data) {
    navigator.clipboard.writeText(JSON.stringify(data, null, 2)).catch(() => {});
  }
  return (
    <div>
      <div className="row gap-md" style={{ marginBottom:18, flexWrap:'wrap' }}>
        <DetailField label="Status" value={<StatusTag s={log.status} />} />
        <DetailField label="Função" value={<span className="strong">{log.function_name}</span>} />
        <DetailField label="Duração" value={<span className="mono strong">{log.duration_ms ?? '—'}ms</span>} />
        <DetailField label="Créditos" value={<span className="mono strong">{log.credits_used}</span>} />
        <DetailField label="Quando" value={<span className="mono">{fmtDate(log.created_at)} {fmtTime(log.created_at)}</span>} />
      </div>
      {log.error_message && (
        <div style={{ background:'var(--err-soft)', border:'1px solid var(--err)', borderRadius:'var(--r-md)', padding:14, marginBottom:16 }}>
          <div className="row gap-sm" style={{ marginBottom:4 }}>
            <iconify-icon icon="lucide:alert-octagon" style={{ color:'var(--err)' }} />
            <span style={{ fontWeight:700, color:'var(--err)' }}>Erro capturado</span>
          </div>
          <div className="mono" style={{ fontSize:12 }}>{log.error_message}</div>
        </div>
      )}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
        <PayloadBlock title="Payload de entrada" data={log.payload_in} onCopy={() => copyPayload(log.payload_in)} />
        <PayloadBlock title="Payload de saída" data={log.payload_out} onCopy={() => copyPayload(log.payload_out)} />
      </div>
    </div>
  );
}

function DetailField({ label, value }) {
  return (
    <div>
      <div className="muted" style={{ fontSize:10, textTransform:'uppercase', letterSpacing:1, fontWeight:700, marginBottom:3 }}>{label}</div>
      <div style={{ fontSize:13 }}>{value}</div>
    </div>
  );
}

function PayloadBlock({ title, data, onCopy }) {
  return (
    <div>
      <div className="row" style={{ justifyContent:'space-between', marginBottom:6 }}>
        <span style={{ fontSize:12, fontWeight:700 }}>{title}</span>
        <button className="btn btn-sm btn-ghost" onClick={onCopy}><iconify-icon icon="lucide:copy" />Copiar</button>
      </div>
      <pre style={{
        background:'var(--bg-base)', border:'1px solid var(--border)',
        borderRadius:'var(--r-md)', padding:12,
        fontFamily:'var(--font-mono)', fontSize:11.5,
        color:'var(--text-secondary)', overflow:'auto', maxHeight:280,
        whiteSpace:'pre-wrap',
      }}>{data ? JSON.stringify(data, null, 2) : '— sem dados —'}</pre>
    </div>
  );
}

Object.assign(window, { PageLogs });