/* dashboard.jsx — status do dia por cliente */

const statusMeta = {
  pending: { kind: "warn", label: "Aguardando revisão" },
  sent:    { kind: "ok",   label: "Enviado" },
  empty:   { kind: "err",  label: "Sem matérias hoje" },
  error:   { kind: "err",  label: "Erro na coleta" },
};

const ClientStatusCard = ({ client, clip, onReview }) => {
  const meta = statusMeta[clip.status];
  const nSaiu = clip.saiu.filter(i => i.kept).length;
  const nClip = clip.clipping.filter(i => i.kept).length;
  return (
    <div className={"cl-card" + (clip.status === "pending" ? " cl-card--pending" : "")}>
      <div className="cl-card__top">
        <div className="cl-card__badge" style={{ background: client.color }}>{client.short}</div>
        <div style={{ flex: 1 }}>
          <div className="cl-card__name">{client.name}</div>
          <div className="cl-card__setor">{client.setor}</div>
        </div>
        {clip.status === "sent"
          ? <Status kind="ok">Enviado às {clip.sentAt}</Status>
          : <Status kind={meta.kind}>{meta.label}</Status>}
      </div>

      <div className="cl-card__body">
        {clip.status === "empty" ? (
          <div className="muted" style={{ fontSize: 12.5 }}>Nenhuma notícia encontrada hoje para as palavras-chave deste cliente.</div>
        ) : (
          <div className="cl-card__count">
            <div className="c midia">
              <div className="n">{nSaiu}</div>
              <div className="l">Saiu na Mídia</div>
            </div>
            <div className="c">
              <div className="n">{nClip}</div>
              <div className="l">Clipping</div>
            </div>
          </div>
        )}
      </div>

      <div className="cl-card__foot">
        <span className="muted" style={{ fontSize: 12 }}>
          {clip.status === "sent"
            ? <>Aprovado por <b style={{ color: "var(--ink-700)" }}>{clip.approvedBy}</b></>
            : clip.status === "empty"
              ? "Nada a enviar"
              : <>{nSaiu + nClip} matérias montadas</>}
        </span>
        {clip.status === "pending" ? (
          <button className="btn btn--primary btn--sm" onClick={() => onReview(client.id)}>
            <Icon name="review" /> Revisar
          </button>
        ) : clip.status === "sent" ? (
          <button className="btn btn--sm" onClick={() => onReview(client.id)}>
            <Icon name="eye" /> Ver envio
          </button>
        ) : (
          <button className="btn btn--sm" disabled>Sem ação</button>
        )}
      </div>
    </div>
  );
};

const Dashboard = ({ clients, clippings, onReview, coletaHora }) => {
  const total = clients.length;
  const approved = clients.filter(c => clippings[c.id].status === "sent").length;
  const pending  = clients.filter(c => clippings[c.id].status === "pending").length;
  const empty    = clients.filter(c => clippings[c.id].status === "empty").length;
  const pct = Math.round((approved / total) * 100);

  return (
    <div className="page page--wide">
      <div className="page__head">
        <div>
          <h1>Resumo de hoje</h1>
          <p>{HOJE_LABEL} · pipeline executado às 06h — revisão da equipe até o meio-dia</p>
        </div>
        <div className="page__actions">
          <span className="status status--mute"><Icon name="bot" style={{ width: 14, height: 14 }} /> Coletado às {coletaHora}</span>
        </div>
      </div>

      <div className="progress-card">
        <div className="progress-card__main">
          <div className="progress-card__top">
            <span className="progress-card__big"><b>{approved}</b> de {total}</span>
            <span className="progress-card__label">clientes aprovados e enviados</span>
          </div>
          <div className="progress-bar">
            {clients.map(c => {
              const st = clippings[c.id].status;
              return <i key={c.id} className={st === "sent" ? "ok" : ""} style={{ flex: 1, background: st === "sent" ? "" : st === "pending" ? "var(--warn-100)" : "var(--err-100)" }} />;
            })}
          </div>
        </div>
        <div className="progress-card__legend">
          <div><span className="k">Aprovados</span><span className="v" style={{ color: "var(--ok-700)" }}>{approved}</span></div>
          <div><span className="k">Pendentes</span><span className="v" style={{ color: "var(--warn-700)" }}>{pending}</span></div>
          <div><span className="k">Sem matérias</span><span className="v" style={{ color: empty ? "var(--err-700)" : "var(--ink-900)" }}>{empty}</span></div>
        </div>
        <div className="progress-card__meta">
          <div className="k">Próximo envio</div>
          <div className="v">até 12h00 de hoje</div>
        </div>
      </div>

      {pending > 0 ? (
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, padding: "11px 16px", background: "var(--warn-100)", border: "1px solid #ecd9a8", borderRadius: 8, fontSize: 13, color: "var(--warn-700)" }}>
          <Icon name="alert" style={{ width: 16, height: 16 }} />
          <span><b>{pending} clipping{pending > 1 ? "s" : ""}</b> aguardando sua revisão antes do envio. Abra cada cliente, confira as matérias e clique em “Aprovar e Enviar”.</span>
        </div>
      ) : approved === total ? (
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, padding: "11px 16px", background: "var(--ok-100)", border: "1px solid #b8e0c8", borderRadius: 8, fontSize: 13, color: "var(--ok-700)" }}>
          <Icon name="checkCircle" style={{ width: 16, height: 16 }} />
          <span><b>Todos os clippings do dia foram aprovados e enviados.</b> Nada pendente — bom trabalho.</span>
        </div>
      ) : null}

      <div className="client-grid">
        {clients.map(c => (
          <ClientStatusCard key={c.id} client={c} clip={clippings[c.id]} onReview={onReview} />
        ))}
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;