/* ============================================================
   SKYVIDYA v4 — Relatórios · biblioteca INSIGHTS™
   Workflow: rascunho → aprovado → publicado.
   Cliente vê apenas publicados; Gestor aprova/publica.
   ============================================================ */
const { useState, useMemo } = React;

const RP_FLOW = { rascunho: "aprovado", aprovado: "publicado" };
const RP_ACTION = { rascunho: "Aprovar", aprovado: "Publicar" };

function ReportsView({ access, chat, reports: extReports, setReports: extSet }) {
  const [localReports, setLocal] = useState(() => SKY.REPORTS.map((r) => ({ ...r })));
  const reports = extReports || localReports;
  const setReports = extSet || setLocal;
  const [filter, setFilter] = useState("todos");
  const isCliente = access.id === "cliente";
  const canApprove = access.id === "gestor" || access.id === "admin";
  const canDraft = access.id !== "cliente";

  const visible = reports
    .filter((r) => (isCliente ? r.status === "publicado" : true))
    .filter((r) => filter === "todos" || r.status === filter);

  function advance(id) {
    setReports((rs) => rs.map((r) => r.id === id && RP_FLOW[r.status] ? { ...r, status: RP_FLOW[r.status] } : r));
  }
  function addDraft() {
    const n = reports.length + 1;
    setReports((rs) => [{ id: "rp-0" + n, title: "Novo relatório · sem título", modulo: "agro", tipo: "Diagnóstico",
      status: "rascunho", date: "02 JUN 2026", author: "Você", assets: 0 }, ...rs]);
  }

  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow="// Biblioteca INSIGHTS™"
        title="Relatórios"
        sub={isCliente
          ? "Relatórios publicados sobre as suas propriedades — prontos para baixar ou compartilhar."
          : "Fluxo editorial: rascunho → aprovado → publicado. Clientes só recebem o que for publicado."}
        right={canDraft && <button className="btn btn-primary" onClick={addDraft}><Icon name="plus" size={13} /> Novo relatório</button>} />

      {!isCliente && (
        <div className="seg" style={{ margin: "0 0 14px", width: "fit-content" }}>
          {["todos", "rascunho", "aprovado", "publicado"].map((s) => (
            <button key={s} className={filter === s ? "on" : ""} onClick={() => setFilter(s)}>
              {s === "todos" ? "Todos" : s.charAt(0).toUpperCase() + s.slice(1)}
            </button>
          ))}
        </div>
      )}

      <div className="rp-grid">
        {visible.map((r) => {
          const mod = SKY.MODULES.find((m) => m.id === r.modulo);
          return (
            <div className="v2-card rp-card" key={r.id}>
              <div className="rp-top">
                <span className={"rp-status mono " + r.status}>{r.status.toUpperCase()}</span>
                <span className="mono rp-date">{r.date}</span>
              </div>
              <b className="rp-title">{r.title}</b>
              <span className="mono rp-meta">{r.tipo} · {mod ? mod.name : r.modulo} · {r.assets} ativos · {r.author}</span>
              <div className="rp-actions">
                {r.status === "publicado" && <button className="btn" style={{ padding: "6px 11px" }}><Icon name="download" size={12} /> PDF</button>}
                {r.status === "publicado" && <button className="btn" style={{ padding: "6px 11px" }}><Icon name="share" size={12} /> Compartilhar</button>}
                {canApprove && RP_ACTION[r.status] && (
                  <button className="btn btn-primary" style={{ padding: "6px 11px" }} onClick={() => advance(r.id)}>
                    <Icon name="check" size={12} /> {RP_ACTION[r.status]}
                  </button>
                )}
                {!canApprove && r.status === "rascunho" && <span className="mono rp-wait">aguardando aprovação do gestor</span>}
                <button className="btn btn-cyan" style={{ padding: "6px 11px" }}
                  onClick={() => chat.askFree("Resuma o relatório: " + r.title)}>
                  <Icon name="sparkles" size={12} /> IA
                </button>
              </div>
            </div>
          );
        })}
        {visible.length === 0 && (
          <div className="v2-card" style={{ padding: 28, textAlign: "center", color: "var(--fg-mute)", fontSize: 13, gridColumn: "1/-1" }}>
            Nenhum relatório {isCliente ? "publicado ainda" : "neste filtro"}.
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ReportsView });