/* ============================================================
   SKYVIDYA v4 — Home adaptativa por papel
   Cliente: cards grandes, zero jargão.
   Analista: fila de trabalho.
   Gestor/Admin: saúde do portfólio.
   ============================================================ */
const { useState, useEffect, useMemo } = React;

/* ---------- Cliente ---------- */
function HomeCliente({ access, onNav, chat, onVerify }) {
  const assets = SKY.assetPortfolio(access.assetScope);
  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow="// Bem-vindo de volta" title="Suas propriedades"
        sub="Tudo em dia aparece em verde. O que precisa de atenção aparece primeiro." />
      <div className="hc-grid">
        {assets.map((p) => {
          const selo = SKY.seloFor(p);
          const ok = p.esgOk && !p.anomalia;
          return (
            <div className={"hc-card" + (ok ? "" : " warn")} key={p.id}>
              <div className="hc-top">
                <div>
                  <b className="hc-name">{p.municipio}</b>
                  <span className="mono hc-id">{p.id}</span>
                </div>
                <span className="hc-gauge"><ResilienceGauge value={p.score} size={64} compact showLabel={false} showDots={false} /></span>
              </div>
              <div className="hc-rows">
                <div className="hc-row">
                  <span>Situação ambiental</span>
                  {ok ? <span className="esg-pill ok mono"><Icon name="check" size={10} /> em dia</span>
                      : <span className="esg-pill bad mono"><Icon name="alert" size={10} /> atenção</span>}
                </div>
                <div className="hc-row">
                  <span>Certificado da propriedade</span>
                  <span className={"selo-pill mono s-" + selo.state}>{selo.label}</span>
                </div>
                <div className="hc-row">
                  <span>Talhões monitorados</span>
                  <span className="mono">{p.parcelas}</span>
                </div>
              </div>
              <div className="hc-actions">
                <button className="btn" onClick={() => onNav("ativos")}>Ver propriedade</button>
                {selo.state === "ativo" && (
                  <button className="btn btn-cyan" onClick={() => onVerify(p)}>
                    <Icon name="share" size={13} /> Compartilhar selo
                  </button>
                )}
                {selo.state === "elegivel" && (
                  <button className="btn btn-primary" onClick={() => chat.askFree("Como emitir o selo da propriedade " + p.id + "?")}>
                    Solicitar selo
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- Analista ---------- */
function HomeAnalista({ onNav, chat, reports }) {
  const emAlerta = SKY.ALERTS.filter((a) => a.sev === "alta");
  const pendentes = reports.filter((r) => r.status === "rascunho");
  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow="// Fila de trabalho" title="Bom dia, analista"
        sub={emAlerta.length + " ativos em alerta · " + pendentes.length + " análises pendentes de envio"} />
      <div className="v2-grid-2">
        <div className="v2-card" style={{ overflow: "hidden" }}>
          <div className="v2-card-h"><span className="ctitle">Ativos em alerta</span>
            <button className="btn" style={{ padding: "5px 10px" }} onClick={() => onNav("alertas")}>Central de alertas</button></div>
          {emAlerta.map((a) => (
            <div className="wq-row" key={a.id} onClick={() => onNav("alertas")}>
              <span className={"al-dot sev-" + a.sev} />
              <div className="wq-main">
                <b>{a.title}</b>
                <span className="mono">{a.asset || a.municipio} · {a.date}</span>
              </div>
              <Icon name="arrowR" size={13} className="wq-go" />
            </div>
          ))}
        </div>
        <div className="v2-card" style={{ overflow: "hidden" }}>
          <div className="v2-card-h"><span className="ctitle">Análises pendentes</span>
            <button className="btn" style={{ padding: "5px 10px" }} onClick={() => onNav("relatorios")}>Relatórios</button></div>
          {pendentes.map((r) => (
            <div className="wq-row" key={r.id} onClick={() => onNav("relatorios")}>
              <span className="rp-status mono rascunho">RASCUNHO</span>
              <div className="wq-main">
                <b>{r.title}</b>
                <span className="mono">{r.tipo} · {r.assets} ativos · {r.date}</span>
              </div>
              <Icon name="arrowR" size={13} className="wq-go" />
            </div>
          ))}
          <div className="wq-row" onClick={() => chat.askPrompt("deteriorando")}>
            <span className="al-dot" style={{ background: "var(--sv-cyan)" }} />
            <div className="wq-main"><b>Resumo IA da carteira</b><span className="mono">6 agentes · 30s</span></div>
            <Icon name="sparkles" size={13} className="wq-go" style={{ color: "var(--sv-cyan)" }} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Gestor / Admin ---------- */
function HomeGestor({ access, onNav, reports }) {
  const dist = [
    { t: "A", pct: 31, color: "var(--risk-low)" },
    { t: "B", pct: 38, color: "var(--sv-warn)" },
    { t: "C", pct: 31, color: "var(--risk-critical)" },
  ];
  const aprovar = reports.filter((r) => r.status === "rascunho" || r.status === "aprovado");
  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow={"// Saúde do portfólio · " + access.label} title="Visão executiva"
        sub="Distribuição de risco, exposição climática e o que espera a sua aprovação." />
      <div className="hg-grid">
        <div className="v2-card hg-card">
          <span className="gik-l">Distribuição de score</span>
          <div className="hg-dist">
            {dist.map((d) => (
              <div className="hg-bar" key={d.t}>
                <span className="mono hg-bt">{d.t}</span>
                <div className="hg-track"><i style={{ width: d.pct + "%", background: d.color }} /></div>
                <span className="mono hg-bp">{d.pct}%</span>
              </div>
            ))}
          </div>
        </div>
        <div className="v2-card hg-card hg-click" onClick={() => onNav("modulos", "elnino")}>
          <span className="gik-l">Exposição ENSO · {SKY.ENSO.fase}</span>
          <span className="gik-v tnum" style={{ color: "var(--sv-warn)" }}>14 <small>ativos</small></span>
          <span className="mono hg-note">ONI {SKY.ENSO.oni} · prob. {SKY.ENSO.prob}% até DEZ <Icon name="arrowR" size={11} /></span>
        </div>
        <div className="v2-card hg-card hg-click" onClick={() => onNav("relatorios")}>
          <span className="gik-l">Relatórios a aprovar</span>
          <span className="gik-v tnum" style={{ color: "var(--sv-coral)" }}>{aprovar.length}</span>
          <span className="mono hg-note">{aprovar.filter(r=>r.status==="aprovado").length} prontos para publicar <Icon name="arrowR" size={11} /></span>
        </div>
        <div className="v2-card hg-card">
          <span className="gik-l">Consumo do plano</span>
          <span className="gik-v tnum">3.214 <small>/ 5.000 ativos</small></span>
          <div className="hg-track" style={{ marginTop: 8 }}><i style={{ width: "64%", background: "var(--sv-cyan)" }} /></div>
        </div>
      </div>

      <div className="v2-card" style={{ overflow: "hidden", marginTop: 16 }}>
        <div className="v2-card-h"><span className="ctitle">Aguardando sua ação</span>
          <button className="btn" style={{ padding: "5px 10px" }} onClick={() => onNav("relatorios")}>Abrir relatórios</button></div>
        {aprovar.map((r) => (
          <div className="wq-row" key={r.id} onClick={() => onNav("relatorios")}>
            <span className={"rp-status mono " + r.status}>{r.status.toUpperCase()}</span>
            <div className="wq-main"><b>{r.title}</b><span className="mono">{r.author} · {r.assets} ativos · {r.date}</span></div>
            <Icon name="arrowR" size={13} className="wq-go" />
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeView({ access, onNav, chat, reports, onVerify }) {
  if (access.id === "cliente") return <HomeCliente access={access} onNav={onNav} chat={chat} onVerify={onVerify} />;
  if (access.id === "analista") return <HomeAnalista onNav={onNav} chat={chat} reports={reports} />;
  return <HomeGestor access={access} onNav={onNav} reports={reports} />;
}

Object.assign(window, { HomeView });