// Visões principais: Demanda (mapa + hospitais) e Pacientes (série + funil + coorte)
const { useState: useS, useMemo: useM } = React;

const fmt = (n) => n.toLocaleString("pt-BR");
const fmtCompact = (n) => {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1).replace(".", ",") + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(n >= 10_000 ? 0 : 1).replace(".", ",") + "k";
  return n.toString();
};

// ─── Visão Demanda ────────────────────────────────────────────
function DemandaView({ market, period, showInsight = true }) {
  const { stateData, hospitals, kpis, monthly } = window.FARMA_DATA;
  const [metric, setMetric] = useS("dispensed");
  const [selectedUF, setSelectedUF] = useS("SP");

  const stateSel = stateData.find(s => s.uf === selectedUF);
  const hospitalsInState = hospitals.filter(h => h.uf === selectedUF);
  const hospitalsToShow = useM(() => {
    const base = selectedUF ? hospitalsInState : hospitals;
    return base.slice(0, 8);
  }, [selectedUF]);

  const sparkAtivos = monthly.slice(-12).map(m => m.ativos);
  const sparkCaixas = monthly.slice(-12).map(m => m.caixas);

  const ufRuptura = stateData.filter(s => s.ruptureRate >= 0.18).sort((a, b) => b.ruptureRate - a.ruptureRate);
  const topRupturaUF = ufRuptura[0];

  return (
    <>
      <div className="canvas__head">
        <div>
          <div className="pill">Demanda &amp; abastecimento · {kpis.competencia}</div>
          <h1 className="canvas__title" style={{ marginTop: 10 }}>
            Onde a <em className="serif" style={{ fontStyle: "italic", color: "var(--accent-ink)" }}>Pancreatina</em> é dispensada
          </h1>
          <p className="canvas__sub">
            Cada quadrado é um estado. Cor mais intensa = mais demanda. Pontos amarelos sinalizam UFs onde 18% ou mais dos estabelecimentos estão em ruptura.
          </p>
        </div>
        <div className="segmented" role="tablist">
          <button className={metric === "dispensed" ? "is-active" : ""} onClick={() => setMetric("dispensed")}>Cápsulas</button>
          <button className={metric === "patients" ? "is-active" : ""} onClick={() => setMetric("patients")}>Pacientes</button>
          <button className={metric === "ruptureRate" ? "is-active" : ""} onClick={() => setMetric("ruptureRate")}>Ruptura</button>
        </div>
      </div>

      {showInsight && topRupturaUF && (
        <div className="insight">
          <div className="insight__mark">!</div>
          <div className="insight__body">
            <strong>{topRupturaUF.name} ({topRupturaUF.uf})</strong> lidera ruptura nesta competência —{" "}
            <strong>{topRupturaUF.ruptureEstabs} de {topRupturaUF.estabs} estabelecimentos</strong> com dispensação abaixo de 60% da média de 6 meses.
          </div>
        </div>
      )}

      <div className="kpi-row">
        <div className="kpi kpi--hero">
          <div className="kpi__label">Cápsulas dispensadas — {kpis.competencia}</div>
          <div className="kpi__value num">{fmtCompact(kpis.capsulas)}<span className="kpi__unit">cáps.</span></div>
          <div className="kpi__trend">
            <span className="delta up">▲ 2,3%</span>
            <span>vs. mês anterior</span>
          </div>
          <div className="kpi__spark">
            <Sparkline data={sparkCaixas} width={260} height={42} stroke="var(--accent-2)" />
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Caixas / mês</div>
          <div className="kpi__value num">{fmtCompact(kpis.caixas)}</div>
          <div className="kpi__trend"><span className="delta up">▲ 2,3%</span><span>vs. mês anterior</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Estabelecimentos ativos</div>
          <div className="kpi__value num">{fmt(kpis.estabsAtivos)}</div>
          <div className="kpi__trend"><span className="delta up">▲ 12</span><span>desde dezembro</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Em ruptura</div>
          <div className="kpi__value num" style={{ color: "var(--warn)" }}>
            {kpis.estabsRuptura}
            <sup className="num">{((kpis.estabsRuptura / kpis.estabsAtivos) * 100).toFixed(1).replace(".", ",")}%</sup>
          </div>
          <div className="kpi__trend"><span className="delta down">▼ 3 estab.</span><span>vs. mês anterior</span></div>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__title">Brasil em quadrados</div>
              <div className="card__sub">Clique em um estado para detalhar.</div>
            </div>
            <span className="card__meta">{kpis.ufsAtendidas} UFs · {kpis.estabsAtivos} estab.</span>
          </div>
          <BrazilCartogram data={stateData} metric={metric} selected={selectedUF} onSelect={setSelectedUF} />
        </div>

        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__meta">Estado selecionado</div>
              <div className="state-detail__name" style={{ marginTop: 4 }}>
                {stateSel.name}<span className="state-detail__uf">{stateSel.uf}</span>
              </div>
            </div>
            <span className="pill green">{stateSel.region === "SE" ? "Sudeste" : stateSel.region === "S" ? "Sul" : stateSel.region === "NE" ? "Nordeste" : stateSel.region === "N" ? "Norte" : "Centro-Oeste"}</span>
          </div>
          <div className="metric-pair">
            <div className="metric">
              <div className="metric__label">Pacientes ativos</div>
              <div className="metric__value num">{fmt(stateSel.patients)}</div>
              <div className="metric__hint">{((stateSel.patients / kpis.pacientesAtivos) * 100).toFixed(1).replace(".", ",")}% do total</div>
            </div>
            <div className="metric">
              <div className="metric__label">Cápsulas / mês</div>
              <div className="metric__value num">{fmtCompact(stateSel.dispensed)}</div>
              <div className="metric__hint">{fmt(stateSel.caixas)} caixas</div>
            </div>
            <div className="metric">
              <div className="metric__label">Estabelecimentos</div>
              <div className="metric__value num">{stateSel.estabs}</div>
              <div className="metric__hint">{stateSel.ruptureEstabs} em ruptura</div>
            </div>
            <div className="metric">
              <div className="metric__label">Taxa de ruptura</div>
              <div className={"metric__value num " + (stateSel.ruptureRate > 0.15 ? "warn" : "")}>
                {(stateSel.ruptureRate * 100).toFixed(0)}%
              </div>
              <div className="metric__hint">
                {stateSel.ruptureRate > 0.2 ? "Atenção crítica" : stateSel.ruptureRate > 0.1 ? "Monitorar" : "Saudável"}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card__head">
          <div>
            <div className="card__title">Dispensação × Ruptura no tempo</div>
            <div className="card__sub">Caixas dispensadas por mês vs. taxa de ruptura nacional.</div>
          </div>
          <div className="row gap-sm">
            <span className="pill green"><span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--accent)", display: "inline-block", marginRight: 4 }} />Caixas</span>
            <span className="pill warn"><span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--warn)", display: "inline-block", marginRight: 4 }} />Ruptura</span>
          </div>
        </div>
        <DispensacaoRupturaChart months={monthly} />
      </div>

      <div className="card">
        <div className="card__head">
          <div>
            <div className="card__title">Hospitais {selectedUF ? `em ${stateSel.name}` : "no Brasil"}</div>
            <div className="card__sub">Ordenados por dispensação. Barra = indicador qt_atual ÷ média 6m.</div>
          </div>
        </div>
        <div className="table-head">
          <span>#</span><span>Estabelecimento</span><span>UF</span><span>Dispensação vs. média 6m</span><span>Status</span>
        </div>
        <div className="hosp-list">
          {(hospitalsToShow.length ? hospitalsToShow : hospitals.slice(0, 8)).map((h, i) => {
            let text = "Saudável", tone = "ok";
            if (h.indicator === 0 || h.indicator < 0.6) { text = "Ruptura"; tone = "danger"; }
            else if (h.indicator < 0.85) { text = "Atenção"; tone = "warn"; }
            return (
              <div key={h.cnes} className="hosp-row">
                <span className="hosp-row__rank">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="hosp-row__name">{h.name}</div>
                  <div className="hosp-row__meta">{h.city} · CNES {h.cnes} · {fmt(h.patients)} pac · {fmt(h.caixas)} caixas</div>
                </div>
                <span className="hosp-row__uf">{h.uf}</span>
                <IndicatorBar indicator={h.indicator} />
                <span className={`hosp-row__flag ${tone}`}><span className="d" /> {text}</span>
              </div>
            );
          })}
        </div>
        {selectedUF && hospitalsInState.length === 0 && (
          <div style={{ padding: "20px 0", color: "var(--ink-3)", fontSize: 13, textAlign: "center" }}>
            Sem hospitais no top 20 para {stateSel.name}.{" "}
            <button onClick={() => setSelectedUF("SP")} style={{ background: "transparent", border: 0, color: "var(--accent-ink)", cursor: "pointer", textDecoration: "underline" }}>
              Ver Brasil
            </button>
          </div>
        )}
      </div>
    </>
  );
}

// ─── Visão Pacientes ──────────────────────────────────────────
function PacientesView() {
  const { monthly, markets, cohort, dropoutReasons, kpis } = window.FARMA_DATA;

  const last = monthly[monthly.length - 1];
  const prev = monthly[monthly.length - 2];
  const deltaAtivos = ((last.ativos - prev.ativos) / prev.ativos) * 100;
  const yearAgo = monthly[monthly.length - 13];
  const totalPatients = markets.reduce((a, m) => a + m.patients, 0);

  const funnel = [
    { label: "Novos tratamentos em 2025",   value: kpis.naive2025, tone: "green" },
    { label: "Pacientes ativos hoje",        value: kpis.pacientesAtivos, tone: "" },
    { label: "Retornaram após desistência",  value: kpis.retorno + 84, tone: "green" },
    { label: "Desistências neste mês",       value: kpis.dropoutMes, tone: "warn" },
  ];

  return (
    <>
      <div className="canvas__head">
        <div>
          <div className="pill">Jornada de pacientes · {kpis.competencia}</div>
          <h1 className="canvas__title" style={{ marginTop: 10 }}>
            <em className="serif" style={{ fontStyle: "italic", color: "var(--accent-ink)" }}>{fmt(last.ativos)}</em> pessoas em tratamento
          </h1>
          <p className="canvas__sub">
            Quem entrou, quem ficou e quem abandonou — desde a regulamentação pelo SUS em julho de 2025.
          </p>
        </div>
        <div className="segmented" role="tablist">
          <button className="is-active">24 meses</button>
          <button>12 meses</button>
          <button>YTD</button>
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi kpi--hero">
          <div className="kpi__label">Pacientes ativos</div>
          <div className="kpi__value num">{fmt(last.ativos)}</div>
          <div className="kpi__trend">
            <span className="delta up">▲ {deltaAtivos.toFixed(1).replace(".", ",")}%</span>
            <span>vs. mês anterior</span>
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Novos no mês</div>
          <div className="kpi__value num" style={{ color: "var(--accent-ink)" }}>+{fmt(last.novos)}</div>
          <div className="kpi__trend"><span>{fmt(kpis.naive2026)} desde jan/26</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Desistências no mês</div>
          <div className="kpi__value num" style={{ color: "var(--warn)" }}>−{last.dropout}</div>
          <div className="kpi__trend"><span className="delta up">▼ 4</span><span>vs. mês anterior</span></div>
        </div>
        <div className="kpi">
          <div className="kpi__label">Compliance médio</div>
          <div className="kpi__value num">{(kpis.complianceRate * 100).toFixed(1).replace(".", ",")}<span className="kpi__unit">%</span></div>
          <div className="kpi__trend"><span>{kpis.tempoMedioDias} dias entre dispensações</span></div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card__head">
          <div>
            <div className="card__title">Pacientes ativos ao longo do tempo</div>
            <div className="card__sub">Entrada de cobertura SUS em julho/2025 expandiu o mercado em ~120×.</div>
          </div>
          <span className="card__meta">{fmtMonth(monthly[0].c, true)} → {fmtMonth(monthly[monthly.length - 1].c, true)}</span>
        </div>
        <PatientsChart months={monthly} />
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__title">Funil do tratamento</div>
              <div className="card__sub">Da primeira dispensação ao abandono — última competência.</div>
            </div>
          </div>
          <Funnel rows={funnel} />
          <div className="divider" />
          <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-3)", fontSize: 12 }}>
            <span>Desistência = 4+ meses sem dispensação</span>
            <span className="num">Taxa: {((kpis.dropoutMes / kpis.pacientesAtivos) * 100).toFixed(2).replace(".", ",")}%</span>
          </div>
        </div>
        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__title">Retenção por coorte</div>
              <div className="card__sub">% dos pacientes que iniciaram em 2025 e continuam ativos.</div>
            </div>
          </div>
          <Cohort data={cohort} />
          <div className="divider" />
          <div style={{ display: "flex", gap: 24, fontSize: 12, color: "var(--ink-3)" }}>
            <span><span className="num" style={{ color: "var(--ink)" }}>{cohort[cohort.length - 1].pct}%</span> ativos após 12 meses</span>
          </div>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__title">Por mercado terapêutico</div>
              <div className="card__sub">Fibrose cística e insuficiência exócrina pancreática.</div>
            </div>
          </div>
          <div className="market-cards">
            {markets.map(m => (
              <div className="market" key={m.id}>
                <div className="market__pulse" style={{ background: m.color }} />
                <div className="market__name">{m.name}</div>
                <div className="market__cids">CID {m.cids.join(" · ")}</div>
                <div className="market__num num">{fmt(m.patients)}</div>
                <div className="market__row">
                  <span>Novos 2025 <strong>{fmt(m.naive2025)}</strong></span>
                  <span>Share <strong>{((m.patients / totalPatients) * 100).toFixed(0)}%</strong></span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card__head">
            <div>
              <div className="card__title">Por que abandonam?</div>
              <div className="card__sub">Distribuição dos motivos de desistência.</div>
            </div>
          </div>
          <ReasonsList rows={dropoutReasons} />
        </div>
      </div>
    </>
  );
}

Object.assign(window, { DemandaView, PacientesView });