// page-dashboard.jsx — Lojista dashboard com dados reais do Supabase

const { useState: usD, useEffect: ueD } = React;

function PageDashboard({ prefs, tenant }) {
  const [kpis, setKpis]     = usD(null);
  const [chart, setChart]   = usD([]);
  const [logs, setLogs]     = usD([]);
  const [syncing, setSyncing] = usD(false);

  ueD(() => {
    if (!tenant?.id) return;
    loadDashboard();
    const timer = setInterval(loadDashboard, 30000); // polling 30s
    return () => clearInterval(timer);
  }, [tenant?.id]);

  async function loadDashboard() {
    try {
      const [kpiData, logsData] = await Promise.all([
        SB.getKpis(tenant.id),
        SB.getLogs({ tenantId: tenant.id, page: 0, pageSize: 6 }),
      ]);
      setKpis(kpiData.kpis);
      setChart(kpiData.chart14d);
      setLogs(logsData.logs);
    } catch (e) { console.error('Dashboard load:', e); }
  }

  async function handleSyncNow() {
    setSyncing(true);
    try { await SB.syncOrders(tenant.id); }
    catch {}
    finally { setSyncing(false); loadDashboard(); }
  }

  const status = tenant?.status === 'active' ? 'ok' : 'warn';
  const statusLabel = tenant?.status === 'active' ? 'Integração ativa' : 'Pendente';
  const credits_used = tenant?.credits_used ?? 0;
  const credits_total = tenant?.credits_limit ?? 1;
  const plan = tenant?.plans?.name ?? 'Starter';

  return (
    <div className="fade-up">
      <div className="page-head">
        <div>
          <div className="row gap-sm" style={{ marginBottom: 4 }}>
            <span className={`tag tag-${status} tag-dot`}>{statusLabel}</span>
            <span className="tag mono" style={{ fontSize: 10 }}>{tenant?.id?.slice(0,8) ?? '…'}</span>
          </div>
          <h1 className="page-title">Olá{tenant?.store_name ? `, ${tenant.store_name}` : ''} 👋</h1>
          <p className="page-sub">Aqui está o que aconteceu nos últimos 30 dias.</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={handleSyncNow} disabled={syncing}>
            <iconify-icon icon={syncing ? 'lucide:loader-circle' : 'lucide:refresh-cw'}
              style={syncing ? { animation:'spin 1s linear infinite' } : {}} />
            {syncing ? 'Sincronizando…' : 'Sincronizar agora'}
          </button>
        </div>
      </div>

      {prefs.dashLayout === 'cards' && (
        <DashCards kpis={kpis} chart={chart} logs={logs}
          tenant={tenant} plan={plan} creditsUsed={credits_used} creditsTotal={credits_total} />
      )}
      {prefs.dashLayout === 'hybrid' && (
        <DashHybrid kpis={kpis} chart={chart} logs={logs}
          tenant={tenant} plan={plan} creditsUsed={credits_used} creditsTotal={credits_total} />
      )}
      {prefs.dashLayout === 'table' && (
        <DashTable kpis={kpis} chart={chart}
          tenant={tenant} plan={plan} creditsUsed={credits_used} creditsTotal={credits_total} />
      )}
    </div>
  );
}

function KpiCard({ k }) {
  const [v, setV] = usD(0);
  ueD(() => {
    if (!k?.value) return;
    let raf, start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 900);
      setV(Math.floor(k.value * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [k?.value]);

  if (!k) return <div className="kpi" style={{ opacity: 0.4 }}><div className="kpi-label">…</div></div>;

  return (
    <div className="kpi">
      <div className="kpi-label">
        <iconify-icon icon={k.icon} style={{ color: k.color, fontSize: 14 }} />
        {k.label}
      </div>
      <div className="kpi-value">{v.toLocaleString('pt-BR')}</div>
      <div className="row gap-sm">
        <span className="kpi-foot" style={{ color: 'var(--text-muted)' }}>últimos 30 dias</span>
      </div>
    </div>
  );
}

function DashCards({ kpis, chart, logs, plan, creditsUsed, creditsTotal }) {
  return (
    <>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        {(kpis ?? [null,null,null,null]).map((k,i) => <KpiCard key={i} k={k} />)}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        <ExecutionsChart chart={chart} />
        <HealthCard logs={logs} />
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'var(--gap)' }}>
        <RecentActivity logs={logs} />
        <CreditsCard plan={plan} used={creditsUsed} total={creditsTotal} />
      </div>
    </>
  );
}

function DashHybrid({ kpis, chart, logs, plan, creditsUsed, creditsTotal }) {
  const k = kpis ?? [null,null,null,null];
  return (
    <>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        <ExecutionsChart chart={chart} />
        <KpiCard k={k[0]} /><KpiCard k={k[1]} />
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 2fr', gap:'var(--gap)', marginBottom:'var(--gap)' }}>
        <KpiCard k={k[2]} /><KpiCard k={k[3]} />
        <HealthCard logs={logs} />
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'var(--gap)' }}>
        <RecentActivity logs={logs} />
        <CreditsCard plan={plan} used={creditsUsed} total={creditsTotal} />
      </div>
    </>
  );
}

function DashTable({ kpis, chart, plan, creditsUsed, creditsTotal }) {
  const k = kpis ?? [];
  return (
    <>
      <div className="card" style={{ padding:0, marginBottom:'var(--gap)', overflow:'hidden' }}>
        <table className="tbl">
          <thead><tr><th>Métrica</th><th>Valor (30d)</th><th>Período</th></tr></thead>
          <tbody>
            {(k.length ? k : [{id:'a',label:'Carregando…',value:0,icon:'lucide:loader',color:'var(--text-muted)'}]).map(m => (
              <tr key={m.id}>
                <td className="strong row gap-sm" style={{ height:'var(--row-h)' }}>
                  <iconify-icon icon={m.icon} style={{ color:m.color }} />{m.label}
                </td>
                <td className="strong mono">{m.value.toLocaleString('pt-BR')}</td>
                <td className="muted">últimos 30 dias</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:'var(--gap)' }}>
        <ExecutionsChart chart={chart} />
        <CreditsCard plan={plan} used={creditsUsed} total={creditsTotal} />
      </div>
    </>
  );
}

function ExecutionsChart({ chart = [] }) {
  const max = Math.max(...chart.map(d => d.ok + d.err), 1);
  return (
    <div className="card">
      <div className="row" style={{ justifyContent:'space-between', marginBottom:16 }}>
        <div>
          <div style={{ fontSize:14, fontWeight:700 }}>Execuções por dia</div>
          <div className="muted" style={{ fontSize:11 }}>Últimos 14 dias</div>
        </div>
        <div className="row gap-md" style={{ fontSize:11 }}>
          <span className="row gap-sm"><span style={{ width:10,height:10,borderRadius:2,background:'var(--accent)' }} /> Sucesso</span>
          <span className="row gap-sm"><span style={{ width:10,height:10,borderRadius:2,background:'var(--err)' }} /> Erro</span>
        </div>
      </div>
      <div style={{ display:'flex', alignItems:'flex-end', gap:4, height:160 }}>
        {chart.length === 0
          ? <div style={{ flex:1, display:'grid', placeItems:'center', color:'var(--text-muted)', fontSize:13 }}>Sem dados ainda</div>
          : chart.map((d, i) => (
            <div key={i} title={`${d.label}: ${d.ok} ok, ${d.err} erro`}
              style={{ flex:1, display:'flex', flexDirection:'column-reverse', gap:2, height:'100%', cursor:'pointer' }}>
              <div style={{ height:(d.ok/max*100)+'%', background:'var(--accent)', borderRadius:'2px 2px 0 0', minHeight: d.ok > 0 ? 2 : 0 }} />
              {d.err > 0 && <div style={{ height:(d.err/max*100)+'%', background:'var(--err)', borderRadius:'2px 2px 0 0', minHeight:2 }} />}
            </div>
          ))
        }
      </div>
      {chart.length > 0 && (
        <div className="row" style={{ justifyContent:'space-between', marginTop:8, fontSize:10, color:'var(--text-muted)' }}>
          <span>{chart[0]?.label}</span>
          <span>{chart[6]?.label}</span>
          <span>{chart[13]?.label}</span>
        </div>
      )}
    </div>
  );
}

function HealthCard({ logs = [] }) {
  const success = logs.filter(l => l.status === 'success').length;
  const total = logs.length;
  const rate = total > 0 ? Math.round(success / total * 1000) / 10 : 100;
  const r = 56, c = 2 * Math.PI * r;
  const dash = c * (rate / 100);
  const lastLog = logs[0];
  const lastTime = lastLog ? new Date(lastLog.created_at).toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' }) : '—';
  const errCount = logs.filter(l => l.status === 'error').length;
  const avgMs = logs.length > 0 ? Math.round(logs.reduce((s,l) => s + (l.duration_ms||0), 0) / logs.length) : 0;

  return (
    <div className="card" style={{ display:'flex', flexDirection:'column' }}>
      <div style={{ fontSize:14, fontWeight:700, marginBottom:4 }}>Saúde da integração</div>
      <div className="muted" style={{ fontSize:11, marginBottom:8 }}>Taxa de sucesso · últimas execuções</div>
      <div style={{ flex:1, display:'grid', placeItems:'center', position:'relative' }}>
        <svg width="160" height="160" viewBox="0 0 160 160">
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--bg-elevated)" strokeWidth="10" />
          <circle cx="80" cy="80" r={r} fill="none"
            stroke={rate >= 95 ? 'var(--ok)' : rate >= 80 ? 'var(--warn)' : 'var(--err)'}
            strokeWidth="10" strokeDasharray={`${dash} ${c}`} strokeLinecap="round"
            transform="rotate(-90 80 80)" />
        </svg>
        <div style={{ position:'absolute', textAlign:'center' }}>
          <div style={{ fontSize:28, fontWeight:800, letterSpacing:'-1px' }}>{rate}<span style={{fontSize:14}}>%</span></div>
          <div className="muted" style={{ fontSize:10, textTransform:'uppercase', letterSpacing:1 }}>
            {rate >= 95 ? 'Saudável' : rate >= 80 ? 'Atenção' : 'Crítico'}
          </div>
        </div>
      </div>
      <div className="row" style={{ justifyContent:'space-between', marginTop:12, fontSize:11 }}>
        <div><div className="muted">Última exec.</div><div style={{fontWeight:700}}>{lastTime}</div></div>
        <div><div className="muted">Erros</div><div style={{fontWeight:700}}>{errCount}</div></div>
        <div><div className="muted">Latência avg</div><div style={{fontWeight:700}}>{avgMs}ms</div></div>
      </div>
    </div>
  );
}

function CreditsCard({ plan, used, total }) {
  const pct = total > 0 ? Math.min(100, used / total * 100) : 0;
  const remaining = Math.max(0, total - used);
  return (
    <div className="card">
      <div className="row" style={{ justifyContent:'space-between', marginBottom:12 }}>
        <div>
          <div style={{ fontSize:14, fontWeight:700 }}>Créditos do mês</div>
          <div className="muted" style={{ fontSize:11 }}>Plano {plan}</div>
        </div>
        <span className="tag tag-accent">{remaining.toLocaleString('pt-BR')} restantes</span>
      </div>
      <div className="row" style={{ alignItems:'baseline', gap:6, marginBottom:8 }}>
        <span style={{ fontSize:24, fontWeight:800 }} className="mono">{used.toLocaleString('pt-BR')}</span>
        <span className="muted">/ {total.toLocaleString('pt-BR')}</span>
      </div>
      <div className="progress">
        <div className="progress-bar"
          style={{ width:pct+'%', background: pct > 90 ? 'var(--err)' : pct > 70 ? 'var(--warn)' : undefined }} />
      </div>
    </div>
  );
}

function RecentActivity({ logs = [] }) {
  return (
    <div className="card" style={{ padding:0 }}>
      <div className="row" style={{ justifyContent:'space-between', padding:'var(--card-pad)' }}>
        <div style={{ fontSize:14, fontWeight:700 }}>Atividade recente</div>
      </div>
      {logs.length === 0
        ? <div style={{ padding:'20px var(--card-pad)', color:'var(--text-muted)', fontSize:13 }}>Sem execuções ainda.</div>
        : logs.slice(0,6).map(l => (
          <div key={l.id} className="row"
            style={{ padding:'10px var(--card-pad)', borderTop:'1px solid var(--border-subtle)', gap:10 }}>
            <span style={{ width:8, height:8, borderRadius:'50%', flexShrink:0,
              background: l.status==='success' ? 'var(--ok)' : l.status==='error' ? 'var(--err)' : 'var(--warn)' }} />
            <span style={{ fontSize:12, fontWeight:600, flex:1 }}>{l.function_name}</span>
            <span className="muted mono" style={{ fontSize:11 }}>{l.duration_ms ?? 0}ms</span>
            <span className="muted mono" style={{ fontSize:11 }}>
              {new Date(l.created_at).toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'})}
            </span>
          </div>
        ))
      }
    </div>
  );
}

Object.assign(window, { PageDashboard });