// Dashboard — overview metrics, charts, RAG health, top questions, activity
function ScreenDashboard({ onRoute, onAction, layout, user }) {
  const toast = useToast();
  const [, setTick] = useState(0);
  const sparkData = Data.conversationsByDay.map((d) => d.v);
  const fbSpark = Data.conversationsByDay.map((d) => d.fb);

  // Pull TUDO em paralelo na mount; força re-render quando termina
  useEffect(() => {
    let alive = true;
    Promise.all([
      DataLoader.metrics(),
      DataLoader.redirects(),
      DataLoader.files(),
      DataLoader.topQuestions(),
      DataLoader.activity(),
    ]).then(() => { if (alive) setTick((t) => t + 1); });
    return () => { alive = false; };
  }, []);

  const today = new Date().toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });
  const userName = (user && (user.user || user.username || user.name)) || 'admin';

  const clearCache = () => {
    api('/api/admin/cache', { method: 'DELETE' })
      .then(() => toast({ title: "Cache limpo", msg: "Cache de respostas zerado.", kind: "success" }))
      .catch((e) => toast({ title: "Falha ao limpar cache", msg: e.message, kind: "error" }));
  };

  // Deltas formatados
  const convDelta = Data.stats.conversationsDelta || 0;
  const convDeltaStr = (convDelta >= 0 ? "+" : "") + convDelta + "%";
  const fbDelta = Data.stats.fallbackDelta || 0;
  const fbDeltaStr = (fbDelta >= 0 ? "+" : "") + fbDelta.toFixed(1) + "pp";
  const avgMsDelta = Data.stats.avgMsDelta || 0;
  const avgMsDeltaStr = (avgMsDelta >= 0 ? "+" : "") + (avgMsDelta / 1000).toFixed(2) + "s";
  const sessionsActive = Data.stats.sessionsActive30 != null ? Data.stats.sessionsActive30 : Data.stats.sessions;

  // RAG health alert
  const ragMeta = Data.ragHealthMeta || { lowSim: 0, totalAnswered: 0 };

  return (
    <div className="page" data-screen-label="Dashboard">
      <div className="page-header">
        <div>
          <h1>
            <span className="h1-icon"><i className="fas fa-chart-line"></i></span>
            Olá, {userName} 👋
          </h1>
          <p className="sub">Aqui está o panorama do chatbot SINTRACON em <strong style={{ color: "var(--t2)" }}>{today}</strong>.</p>
        </div>
        <div className="page-header-actions">
          <button className="btn btn-ghost" onClick={clearCache}>
            <i className="fas fa-trash-alt"></i> Limpar cache
          </button>
          <button className="btn btn-primary" onClick={() => onAction("upload")}>
            <i className="fas fa-plus"></i> Adicionar conteúdo
          </button>
        </div>
      </div>

      {/* KPI row */}
      <div className="stats">
        <Stat
          label="Conversas hoje"
          value={Data.stats.conversations}
          unit=""
          delta={convDeltaStr}
          deltaDir={convDelta >= 0 ? "up" : "down"}
          deltaNote="vs ontem"
          icon="fa-comments"
          color="or"
          spark={sparkData}
        />
        <Stat
          label="Tempo médio"
          value={Data.stats.avgTime.toFixed(2)}
          unit="s"
          delta={avgMsDeltaStr}
          deltaDir={avgMsDelta <= 0 ? "up" : "down"}
          deltaNote="vs janela anterior"
          icon="fa-bolt"
          color="bl"
        />
        <Stat
          label="Taxa de fallback"
          value={Data.stats.fallback.toFixed(1)}
          unit="%"
          delta={fbDeltaStr}
          deltaDir={fbDelta <= 0 ? "up" : "down"}
          deltaNote="vs janela anterior"
          icon="fa-question"
          color="rd"
          spark={fbSpark}
          sparkColor="var(--rd)"
        />
        <Stat
          label="Sessões ativas"
          value={sessionsActive}
          unit=""
          delta=""
          deltaDir="up"
          deltaNote="últimos 30 min"
          icon="fa-user-check"
          color="gr"
        />
      </div>

      {/* AI cost overview — só admin+ (editor/viewer não veem custos de IA) */}
      {Auth.userCan('admin') && <CostCard onRoute={onRoute} />}

      {/* Chart + RAG */}
      <div className="dash-grid">
        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-chart-area"></i> Conversas nos últimos 14 dias</h3>
            <div className="row">
              <div className="legend">
                <span className="li"><span className="sw" style={{ background: "var(--or)" }}></span>Conversas</span>
                <span className="li"><span className="sw" style={{ background: "var(--rd)" }}></span>Fallbacks</span>
              </div>
            </div>
          </div>
          <div className="chart-wrap">
            <AreaChart data={Data.conversationsByDay} height={220} />
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-heartbeat"></i> Saúde do RAG</h3>
            {(() => {
              const sim = (Data.ragHealthMeta && Data.ragHealthMeta.avgTopSim) || 0;
              const cls = sim >= 0.75 ? 'b-gr' : sim >= 0.6 ? 'b-am' : 'b-rd';
              const label = sim >= 0.75 ? 'Saudável' : sim >= 0.6 ? 'Atenção' : 'Crítico';
              return <span className={"badge " + cls}><span className="dot"></span>{label}</span>;
            })()}
          </div>
          <div className="rag-gauge">
            {Data.ragHealth.map((r) => {
              const pct = (r.val / r.max) * 100;
              return (
                <div className="rag-bar" key={r.name}>
                  <div className="lbl">
                    <span className="name">{r.name}</span>
                    <span className="val">{r.val}{r.unit}{r.max !== 100 && r.unit === "" ? ` / ${r.max}` : ""}</span>
                  </div>
                  <div className="track">
                    <div className={"fill " + r.color} style={{ width: pct + "%" }}></div>
                  </div>
                </div>
              );
            })}
            {ragMeta.lowSim > 0 ? (
              <div style={{ marginTop: 8, padding: "10px 12px", background: "var(--bg1)", border: "1px solid var(--b1)", borderRadius: "var(--r-input)", fontSize: 12, color: "var(--t2)", lineHeight: 1.5 }}>
                <i className="fas fa-lightbulb" style={{ color: "var(--or)", marginRight: 6 }}></i>
                <strong>{ragMeta.lowSim} conversa{ragMeta.lowSim === 1 ? '' : 's'} com similaridade baixa</strong>{" "}
                <span style={{ color: "var(--t3)" }}>nos últimos 14 dias. Considere revisar:</span>{" "}
                <a style={{ color: "var(--or)", cursor: "pointer" }} onClick={() => onRoute("history")}>ver histórico →</a>
              </div>
            ) : ragMeta.totalAnswered > 0 ? (
              <div style={{ marginTop: 8, padding: "10px 12px", background: "var(--bg1)", border: "1px solid var(--b1)", borderRadius: "var(--r-input)", fontSize: 12, color: "var(--t3)", lineHeight: 1.5 }}>
                <i className="fas fa-check-circle" style={{ color: "var(--gr)", marginRight: 6 }}></i>
                Nenhuma conversa com similaridade baixa nos últimos 14 dias.
              </div>
            ) : null}
          </div>
        </div>
      </div>

      {/* Qualidade percebida — ratings 1-5★ avaliados pelo admin no histórico.
          Mostra média, histograma e taxa de avaliação. Link → histórico filtrado
          por ≤2★ pra atacar o pior primeiro. */}
      <QualityCard onRoute={onRoute} />

      {/* Triple grid: top questions, channels, quick actions */}
      <div className="dash-grid-3">
        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-fire"></i> Top perguntas (7 dias)</h3>
            <a style={{ fontSize: 12, color: "var(--t3)", cursor: "pointer" }} onClick={() => onRoute("history")}>ver tudo →</a>
          </div>
          <div>
            {Data.topQuestions.length === 0 ? (
              <div className="empty" style={{ padding: 12 }}>
                <p style={{ fontSize: 12 }}>Sem perguntas suficientes para agrupar ainda.</p>
              </div>
            ) : Data.topQuestions.slice(0, 6).map((q, i) => {
              const max = Math.max(...Data.topQuestions.map((x) => x.c));
              const pct = (q.c / max) * 100;
              return (
                <div className="tq-row" key={i}>
                  <span className="tq-rank">{String(i + 1).padStart(2, "0")}</span>
                  <div className="tq-bar-wrap">
                    <div className="tq-q" title={q.q}>
                      {q.q}
                      {q.fb && <span style={{ marginLeft: 6, color: "var(--rd)", fontSize: 10 }}><i className="fas fa-exclamation-circle"></i> fallback</span>}
                    </div>
                    <div className="tq-bar"><div style={{ width: pct + "%", background: q.fb ? "var(--rd)" : "var(--or)" }}></div></div>
                  </div>
                  <span className="tq-count">{q.c}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-headset"></i> Atendimento humano</h3>
            <a style={{ fontSize: 12, color: "var(--t3)", cursor: "pointer" }} onClick={() => onRoute("chatbot:handoff")}>gerenciar →</a>
          </div>
          <div className="chan-list">
            {Data.channels.length === 0 ? (
              <div className="empty" style={{ padding: 12 }}>
                <p style={{ fontSize: 12 }}>Nenhum canal cadastrado.</p>
              </div>
            ) : Data.channels.map((c) => (
              <div className="chan-row" key={c.type + c.url}>
                <div className={"chan-icon " + c.type}>
                  <i className={"fab " + c.icon}></i>
                </div>
                <div className="chan-info">
                  <div className="n">{c.name}</div>
                  <div className="s">{c.url}</div>
                </div>
                <StatusBadge status={c.active ? "enabled" : "disabled"} />
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-bolt"></i> Atalhos rápidos</h3>
          </div>
          <div className="qa-grid">
            <button className="qa-btn" onClick={() => onAction("add-context")}>
              <span className="qi"><i className="fas fa-brain"></i></span>
              <span className="qb">
                <span className="qt">Novo contexto</span>
                <span className="qs">card direto na IA</span>
              </span>
            </button>
            <button className="qa-btn" onClick={() => onAction("upload")}>
              <span className="qi"><i className="fas fa-upload"></i></span>
              <span className="qb">
                <span className="qt">Upload arquivo</span>
                <span className="qs">PDF, DOCX, TXT, MD</span>
              </span>
            </button>
            <button className="qa-btn" onClick={() => onAction("add-page")}>
              <span className="qi"><i className="fas fa-globe"></i></span>
              <span className="qb">
                <span className="qt">Nova página</span>
                <span className="qs">URL do site</span>
              </span>
            </button>
            <button className="qa-btn" onClick={() => onRoute("chatbot:persona")}>
              <span className="qi"><i className="fas fa-user-cog"></i></span>
              <span className="qb">
                <span className="qt">Ajustar voz</span>
                <span className="qs">tom & timbre</span>
              </span>
            </button>
            <button className="qa-btn" onClick={() => onRoute("chatbot:prompt")}>
              <span className="qi"><i className="fas fa-terminal"></i></span>
              <span className="qb">
                <span className="qt">System prompt</span>
                <span className="qs">instruções da IA</span>
              </span>
            </button>
            <button className="qa-btn" onClick={() => onAction("reindex")}>
              <span className="qi"><i className="fas fa-sync"></i></span>
              <span className="qb">
                <span className="qt">Reindexar tudo</span>
                <span className="qs">refaz embeddings</span>
              </span>
            </button>
          </div>
        </div>
      </div>

      {/* Activity feed */}
      <div className="card">
        <div className="card-header">
          <h3><i className="fas fa-stream"></i> Atividade recente</h3>
          <span className="meta">últimas 24h–7d</span>
        </div>
        <div className="activity">
          {Data.activity.length === 0 ? (
            <div className="empty" style={{ padding: 24 }}>
              <i className="fas fa-stream"></i>
              <p>Sem atividade recente registrada.</p>
            </div>
          ) : Data.activity.map((a, i) => (
            <div className="activity-item" key={a.iso || i} title={a.iso ? new Date(a.iso).toLocaleString('pt-BR') : ''}>
              <div className={"activity-icon " + a.type}><i className={"fas " + a.icon}></i></div>
              <div className="activity-body">
                <div className="activity-msg">{a.msg}</div>
                <div className="activity-sub">{a.sub}</div>
              </div>
              <span className="activity-time">{a.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, unit, delta, deltaDir, deltaNote, icon, color, spark, sparkColor }) {
  return (
    <div className="stat">
      <div className="stat-head">
        <span>{label}</span>
        <span className={"stat-icon " + color}><i className={"fas " + icon}></i></span>
      </div>
      <div className="stat-value">
        {value}{unit && <span className="unit">{unit}</span>}
      </div>
      <div className="stat-foot">
        {delta && (
          <span className={"delta " + (deltaDir || "")}>
            <i className={"fas fa-arrow-" + (deltaDir === "up" ? "up" : "down")} style={{ fontSize: 9 }}></i> {delta}
          </span>
        )}
        <span>{deltaNote}</span>
      </div>
      {spark && <Sparkline data={spark} color={sparkColor || "var(--or)"} />}
    </div>
  );
}

// ─── Cost card (AI usage) — design Unbox ───────────────────────────────
const PROVIDER_DISPLAY_COLOR = {
  ollama: 'or', groq: 'bl', gemini: 'or', openai: 'rd', deepseek: 'gr',
};
const PROVIDER_DISPLAY_NAME = {
  ollama: 'Ollama', groq: 'Groq', gemini: 'Gemini', openai: 'OpenAI', deepseek: 'DeepSeek',
};

function CostCard({ onRoute }) {
  const [data, setData] = useState(null);
  const [active, setActive] = useState(null);
  useEffect(() => {
    let alive = true;
    const load = () => {
      Promise.all([
        DataLoader.usageSummary(),
        api('/api/admin/llm/providers').catch(() => null),
      ]).then(([usage, providers]) => {
        if (!alive) return;
        setData(usage);
        if (providers) setActive(providers.active);
      });
    };
    load();
    const t = setInterval(load, 10_000);
    return () => { alive = false; clearInterval(t); };
  }, []);

  const fmtBR = (n) => (n || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const fmtUS = (n) => '$ ' + (n || 0).toFixed(2);

  if (!data) {
    return (
      <div className="cost-card">
        <div className="cost-card-head">
          <div className="cost-card-title">
            <span className="cost-card-icon"><i className="fas fa-coins"></i></span>
            <div>
              <h3>Custos da IA</h3>
              <span className="meta">carregando…</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const t = data.totals;
  const usdBrl = data.usd_to_brl || 5.20;
  const deltaPct = t.delta_pct_vs_prev_month || 0;
  const deltaUp = deltaPct > 0;
  const activeProvider = active ? active.provider : 'ollama';
  const activeName = PROVIDER_DISPLAY_NAME[activeProvider] || activeProvider;
  const activeFree = activeProvider === 'ollama';

  // Quebra por provider (mês) — somar custos do mesmo provider
  const byProviderMap = {};
  (data.by_provider || []).forEach((row) => {
    if (!byProviderMap[row.provider]) {
      byProviderMap[row.provider] = { id: row.provider, name: PROVIDER_DISPLAY_NAME[row.provider] || row.provider, brl: 0, color: PROVIDER_DISPLAY_COLOR[row.provider] || 'or' };
    }
    byProviderMap[row.provider].brl += row.cost_brl || 0;
  });
  const byProvider = Object.values(byProviderMap).filter((p) => p.brl > 0).sort((a, b) => b.brl - a.brl);
  const totalMonth = byProvider.reduce((s, p) => s + p.brl, 0);

  // Sparkline dos últimos 14 dias (custo USD por dia)
  const last14 = (data.daily || []).slice(-14).map((d) => d.cost_usd);
  // Se não tiver dados suficientes, completa com zeros à esquerda
  while (last14.length < 14) last14.unshift(0);

  // Hint da projeção
  let projHint = '';
  if (t.projected_month_usd > t.month_usd * 1.5 && t.month_usd > 0) projHint = 'acelerando — revisar';
  else if (t.projected_month_brl > 200) projHint = 'dentro do esperado';
  else if (totalMonth > 0) projHint = 'dentro do orçamento';
  else projHint = 'sem chamadas pagas ainda';

  return (
    <div className="cost-card">
      <div className="cost-card-head">
        <div className="cost-card-title">
          <span className="cost-card-icon"><i className="fas fa-coins"></i></span>
          <div>
            <h3>Custos da IA</h3>
            <span className="meta">tempo real · cotação R$ {usdBrl.toFixed(2)}/USD</span>
          </div>
        </div>
        <div className="cost-card-actions">
          <span className={"badge " + (activeFree ? 'b-gr' : 'b-bl')}>
            <span className="dot"></span>{activeName} ativo{activeFree && ' · grátis'}
          </span>
          <a className="link-or" onClick={() => onRoute('system:config')}>
            configurar provider <i className="fas fa-arrow-right"></i>
          </a>
        </div>
      </div>

      <div className="cost-grid">
        <div className="cost-kpi">
          <div className="cost-kpi-label">Gasto hoje</div>
          <div className="cost-kpi-value">R$ <span>{fmtBR(t.today_brl)}</span></div>
          <div className="cost-kpi-sub">
            <span>{fmtUS(t.today_usd)}</span>
            <span>·</span>
            <span>{(t.today_calls || 0).toLocaleString('pt-BR')} chamadas</span>
          </div>
          {last14.some((v) => v > 0) && (
            <div className="cost-kpi-spark"><Sparkline data={last14} color="var(--or)" height={26} /></div>
          )}
        </div>

        <div className="cost-kpi">
          <div className="cost-kpi-label">Mês atual</div>
          <div className="cost-kpi-value">R$ <span>{fmtBR(t.month_brl)}</span></div>
          <div className="cost-kpi-sub">
            <span>{fmtUS(t.month_usd)}</span>
            <span>·</span>
            <span>{(t.month_calls || 0).toLocaleString('pt-BR')} chamadas</span>
          </div>
          {(t.prev_month_usd || 0) > 0 && (
            <div className={"cost-kpi-delta " + (deltaUp ? 'up' : 'down')}>
              <i className={"fas fa-arrow-" + (deltaUp ? 'up' : 'down')}></i>
              {Math.abs(deltaPct)}% vs mês passado
            </div>
          )}
        </div>

        <div className="cost-kpi">
          <div className="cost-kpi-label">Projeção mensal</div>
          <div className="cost-kpi-value muted">R$ <span>{fmtBR(t.projected_month_brl)}</span></div>
          <div className="cost-kpi-sub">
            <span>{fmtUS(t.projected_month_usd)}</span>
            <span>·</span>
            <span>últimos 7d × 30</span>
          </div>
          <div className="cost-kpi-hint">{projHint}</div>
        </div>

        <div className="cost-breakdown">
          <div className="cost-breakdown-head">
            <span>Por provider · mês</span>
            <span className="meta">{byProvider.length} ativo{byProvider.length === 1 ? '' : 's'}</span>
          </div>
          {byProvider.length === 0 ? (
            <div style={{ fontSize: 11.5, color: 'var(--t3)', textAlign: 'center', padding: '12px 4px', lineHeight: 1.55 }}>
              Sem chamadas pagas neste mês.<br />
              Ollama local é o provider ativo (grátis).
            </div>
          ) : (
            <>
              <div className="cost-stack">
                {byProvider.map((p) => {
                  const pct = totalMonth > 0 ? (p.brl / totalMonth) * 100 : 0;
                  return <div key={p.id} className={"cs-seg " + p.color} style={{ width: pct + '%' }} title={p.name + ' · R$ ' + fmtBR(p.brl)}></div>;
                })}
              </div>
              <div className="cost-legend">
                {byProvider.map((p) => (
                  <div key={p.id} className="cl-item">
                    <span className={"cl-dot " + p.color}></span>
                    <span className="cl-name">{p.name}</span>
                    <span className="cl-val">R$ {fmtBR(p.brl)}</span>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// Card "Qualidade percebida" — Fase 1 do sistema de avaliação.
// Lê Data.ratings (populado por DataLoader.metrics) e mostra média + histograma
// + taxa de avaliação. Link "Ver mal avaliadas" leva ao histórico filtrado.
// ───────────────────────────────────────────────────────────────────────────
function QualityCard({ onRoute }) {
  const r = (Data && Data.ratings) || { totalRated: 0, totalConversations: 0, avgRating: null, histogram: { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }, lowRatedRecent: [] };
  const rated = r.totalRated || 0;
  const total = r.totalConversations || 0;
  const ratedPct = total > 0 ? Math.round((rated / total) * 100) : 0;
  const avg = typeof r.avgRating === 'number' ? r.avgRating : null;
  const maxBar = Math.max(1, r.histogram[1], r.histogram[2], r.histogram[3], r.histogram[4], r.histogram[5]);

  // Cor da média: verde ≥4, amarelo ≥3, vermelho <3
  const avgColor = avg == null ? 'var(--t3)' : avg >= 4 ? 'var(--gr)' : avg >= 3 ? 'var(--am)' : 'var(--rd)';
  const lowCount = (r.lowRatedRecent || []).length;

  return (
    <div className="card" style={{ marginBottom: 16 }}>
      <div className="card-header">
        <h3><i className="fas fa-star"></i> Qualidade percebida (últimos 14 dias)</h3>
        {rated > 0 && (
          <span style={{ fontSize: 12, color: 'var(--t3)' }}>
            {rated} de {total} avaliadas ({ratedPct}%)
          </span>
        )}
      </div>

      {rated === 0 ? (
        <div className="empty" style={{ padding: 18, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-star" style={{ fontSize: 24, marginBottom: 8, color: 'var(--t3)' }}></i>
          <p style={{ fontSize: 13, margin: 0 }}>Ainda nenhuma resposta avaliada.</p>
          <p style={{ fontSize: 12, marginTop: 6 }}>
            Abra uma conversa no <a style={{ color: 'var(--or)', cursor: 'pointer' }} onClick={() => onRoute('history')}>Histórico</a> e clique nas estrelas pra avaliar.
          </p>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(160px, 1fr) 2fr', gap: 20, padding: '4px 0' }}>
          {/* Coluna esquerda: média gigante */}
          <div style={{ textAlign: 'center', padding: 12 }}>
            <div style={{ fontSize: 48, fontWeight: 700, color: avgColor, lineHeight: 1 }}>
              {avg != null ? avg.toFixed(1) : '—'}
            </div>
            <div style={{ fontSize: 18, color: avgColor, marginTop: 4 }}>
              {[1, 2, 3, 4, 5].map((n) => (
                <i
                  key={n}
                  className={'fas ' + (avg && avg >= n - 0.5 ? 'fa-star' : 'fa-star')}
                  style={{ opacity: avg && avg >= n - 0.5 ? 1 : 0.25, marginRight: 2 }}
                ></i>
              ))}
            </div>
            <div style={{ fontSize: 11, color: 'var(--t3)', marginTop: 8 }}>nota média</div>
          </div>

          {/* Coluna direita: histograma 1-5 */}
          <div>
            {[5, 4, 3, 2, 1].map((n) => {
              const v = r.histogram[n] || 0;
              const pct = (v / maxBar) * 100;
              const c = n >= 4 ? 'var(--gr)' : n === 3 ? 'var(--am)' : 'var(--rd)';
              return (
                <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4, fontSize: 12 }}>
                  <span style={{ width: 36, color: c, fontWeight: 600 }}>
                    {n}<i className="fas fa-star" style={{ marginLeft: 2, fontSize: 10 }}></i>
                  </span>
                  <div style={{ flex: 1, height: 8, background: 'var(--bg3)', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{ width: pct + '%', height: '100%', background: c, transition: 'width 0.3s' }}></div>
                  </div>
                  <span style={{ width: 30, textAlign: 'right', color: 'var(--t2)' }}>{v}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {lowCount > 0 && (
        <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--bg1)', border: '1px solid var(--b1)', borderRadius: 'var(--r-input)', fontSize: 12, color: 'var(--t2)', lineHeight: 1.5 }}>
          <i className="fas fa-exclamation-triangle" style={{ color: 'var(--rd)', marginRight: 6 }}></i>
          <strong>{lowCount} resposta{lowCount === 1 ? '' : 's'} mal avaliada{lowCount === 1 ? '' : 's'}</strong>{' '}
          <span style={{ color: 'var(--t3)' }}>(1-2★) nos últimos 14 dias.</span>{' '}
          <a style={{ color: 'var(--or)', cursor: 'pointer' }} onClick={() => onRoute('history')}>ver histórico →</a>
        </div>
      )}
    </div>
  );
}

window.ScreenDashboard = ScreenDashboard;