/* metrics.jsx — Relatório por cliente */

const MetricsPage = ({ clients, metrics, onToast }) => {
  const [clientId, setClientId] = React.useState(clients[0].id);
  const [period, setPeriod] = React.useState(30);
  const client = clients.find(c => c.id === clientId);
  const m = metrics[clientId];

  const goodOpen = m.aberturaPct >= 60;
  const goodStreak = m.sequencia > 0;

  return (
    <div className="page page--wide">
      <div className="page__head">
        <div>
          <h1>Métricas — relatório por cliente</h1>
          <p>Valor entregue e engajamento · prova de leitura para o cliente final</p>
        </div>
        <div className="page__actions">
          <button className="btn btn--primary" onClick={() => onToast(`Gerando relatório PDF de ${client.name}…`)}>
            <Icon name="download" /> Exportar Relatório PDF
          </button>
        </div>
      </div>

      <div className="mx-toolbar">
        <div className="row" style={{ gap: 8 }}>
          <span className="muted" style={{ fontSize: 12.5 }}>Cliente</span>
          <select className="select" style={{ width: 230 }} value={clientId} onChange={e => setClientId(e.target.value)}>
            {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <span className="muted" style={{ fontSize: 12.5 }}>Período</span>
          <div className="tabs">
            {[7, 30, 90].map(p => (
              <button key={p} className={period === p ? "is-active" : ""} onClick={() => setPeriod(p)}>{p} dias</button>
            ))}
          </div>
        </div>
        <div className="spacer" />
        <div className="row" style={{ gap: 8 }}>
          <div className="cl-card__badge" style={{ background: client.color, width: 30, height: 30, borderRadius: 7, fontSize: 11 }}>{client.short}</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-900)" }}>{client.name}</div>
        </div>
      </div>

      {/* BLOCO 1 — Presença na Mídia */}
      <div className="mx-block">
        <div className="mx-block__title"><span className="n">1</span> Presença na mídia</div>
        <div className="mx-grid mx-grid--hero">
          <div className="mx-card">
            <h4>Matérias entregues · {period} dias</h4>
            <div className="mx-big">{m.entregues}</div>
            <div className="mx-split">
              <div className="seg midia"><div className="n">{m.saiu}</div><div className="l">Saiu na Mídia</div></div>
              <div className="seg clip"><div className="n">{m.clipping}</div><div className="l">Clipping</div></div>
            </div>
          </div>
          <div className="mx-card">
            <h4>Matérias por semana</h4>
            <div className="mx-legend">
              <span className="key"><span className="sw" style={{ background: "var(--brand)" }} /> Saiu na Mídia</span>
              <span className="key"><span className="sw" style={{ background: "var(--ink-300)" }} /> Clipping</span>
            </div>
            <StackedBars data={m.semanas} />
          </div>
        </div>
        <div className="mx-card" style={{ marginTop: 14 }}>
          <h4>Fontes mais frequentes para {client.name}</h4>
          <div className="rank">
            {m.fontes.map(f => {
              const max = m.fontes[0].n;
              return (
                <div key={f.name} className="rank__row">
                  <span className="rank__name">{f.name}</span>
                  <span className="rank__bar"><i style={{ width: (f.n / max * 100) + "%" }} /></span>
                  <span className="rank__n">{f.n}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* BLOCO 2 — Engajamento */}
      <div className="mx-block">
        <div className="mx-block__title"><span className="n">2</span> Engajamento · abertura de e-mail</div>
        <div className="mx-grid mx-grid--3">
          <div className="mx-card">
            <h4>Taxa de abertura</h4>
            <div className="mx-big" style={{ color: goodOpen ? "var(--ok-700)" : "var(--err-700)" }}>{m.aberturaPct}<small>%</small></div>
            <div className="mx-sub">dos clippings enviados foram abertos</div>
          </div>
          <div className="mx-card">
            <h4>Abertura ao longo do tempo</h4>
            <LineChart series={m.aberturaSerie} />
            <div className="mx-sub">{goodOpen ? "Leitura consistente semana a semana." : "Tendência de queda — vale um contato."}</div>
          </div>
          <div className="mx-card">
            <h4>Horário médio de abertura</h4>
            <div style={{ fontSize: 26, fontWeight: 600, color: "var(--ink-900)", marginBottom: 10 }}>{m.horaMedia}</div>
            <div className="hourbar">
              {Array.from({ length: 24 }).map((_, h) => {
                const dist = Math.abs(h - m.horaPico);
                const v = Math.max(4, 60 - dist * 14);
                return <div key={h} className={"h" + (h === m.horaPico ? " peak" : "")} style={{ height: v + "%" }} />;
              })}
            </div>
            <div className="hourbar-axis"><span>0h</span><span>6h</span><span>12h</span><span>18h</span><span>23h</span></div>
          </div>
        </div>
        <div className="mx-grid mx-grid--2" style={{ marginTop: 14 }}>
          <div className="mx-card">
            <h4>Sequência atual</h4>
            <div className={"streak " + (goodStreak ? "good" : "bad")}>
              <div className="streak__ico"><Icon name={goodStreak ? "flame" : "alert"} style={{ width: 18, height: 18 }} /></div>
              <div className="streak__txt">
                <b>{m.sequenciaTexto}</b>
                <span>{goodStreak ? "Cliente engajado e fiel ao recebimento." : "Reengajamento recomendado pela equipe."}</span>
              </div>
            </div>
          </div>
          <div className="mx-card" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <h4>Sobre a medição</h4>
            <p className="muted" style={{ fontSize: 12.5, margin: 0, lineHeight: 1.5 }}>
              A abertura é medida por pixel de rastreamento no e-mail. Use como tendência, não como número absoluto.
            </p>
            <div className="footnote">* Aberturas via Apple Mail podem estar superestimadas.</div>
          </div>
        </div>
      </div>

      {/* BLOCO 3 — Qualidade da IA */}
      <div className="mx-block">
        <div className="mx-block__title">
          <span className="n">3</span> Qualidade da IA
          <span className="int">Interno VER MKT</span>
        </div>
        <div className="mx-grid mx-grid--3">
          <div className="mx-card">
            <h4>Taxa de rejeição</h4>
            <div className="mx-big">{m.rejeicaoPct}<small>%</small></div>
            <div style={{ marginTop: 10 }}>
              <span className={"meta-pill " + (m.rejeicaoPct < 15 ? "good" : "bad")}>
                <Icon name={m.rejeicaoPct < 15 ? "check" : "alert"} style={{ width: 12, height: 12 }} /> Meta &lt; 15%
              </span>
            </div>
            <div className="mx-sub">itens removidos pela equipe na revisão</div>
          </div>
          <div className="mx-card">
            <h4>Taxa de adição manual</h4>
            <div className="mx-big">{m.adicaoPct}<small>%</small></div>
            <div style={{ marginTop: 10 }}>
              <span className={"meta-pill " + (m.adicaoPct < 10 ? "good" : "bad")}>
                <Icon name={m.adicaoPct < 10 ? "check" : "alert"} style={{ width: 12, height: 12 }} /> Meta &lt; 10%
              </span>
            </div>
            <div className="mx-sub">itens incluídos à mão pela equipe</div>
          </div>
          <div className="mx-card">
            <h4>Tendência de rejeição</h4>
            <LineChart series={m.qualidadeSerie} color="#7a4f1f" />
            <div className="mx-sub">{m.qualidadeSerie[0] > m.qualidadeSerie[m.qualidadeSerie.length - 1] ? "A IA está melhorando para este cliente." : "Atenção: rejeição subindo."}</div>
          </div>
        </div>
      </div>

      {/* BLOCO 4 — Comparativo de clientes */}
      <div className="mx-block">
        <div className="mx-block__title">
          <span className="n">4</span> Comparativo de clientes · taxa de abertura
          <span className="int">Interno VER MKT</span>
        </div>
        <div className="mx-card">
          <h4>Ranking de abertura entre todos os clientes</h4>
          <div className="rank">
            {clients
              .map(c => ({ c, pct: metrics[c.id].aberturaPct }))
              .sort((a, b) => b.pct - a.pct)
              .map(({ c, pct }) => {
                const top = Math.max(...clients.map(x => metrics[x.id].aberturaPct), 1);
                const isCurrent = c.id === clientId;
                return (
                  <div key={c.id} className="rank__row" style={{ fontWeight: isCurrent ? 600 : 400 }}>
                    <span className="rank__name" style={{ display: "flex", alignItems: "center", gap: 8, color: isCurrent ? "var(--ink-900)" : "var(--ink-700)" }}>
                      <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color, flex: "0 0 auto" }} />
                      {c.name}
                    </span>
                    <span className="rank__bar"><i style={{ width: (pct / top * 100) + "%", background: c.color }} /></span>
                    <span className="rank__n">{pct}%</span>
                  </div>
                );
              })}
          </div>
          <div className="mx-sub">Cada barra usa a cor do cliente · destaque para o cliente selecionado acima.</div>
        </div>
      </div>
    </div>
  );
};

window.MetricsPage = MetricsPage;