// Interactive role switcher: 4 tabs, each shows a different product surface.

const { Icon: RIcon } = window;
const { useState: rUseState } = React;

const ROLES = [
  {
    key: "morador",
    title: "Morador",
    desc: "Tudo do seu apartamento na palma da mão.",
    icon: "Home",
  },
  {
    key: "sindico",
    title: "Síndico",
    desc: "Painel financeiro, ocorrências e decisões.",
    icon: "Briefcase",
  },
  {
    key: "portaria",
    title: "Portaria",
    desc: "Visitantes, encomendas e rondas em tempo real.",
    icon: "Shield",
  },
  {
    key: "admin",
    title: "Administradora",
    desc: "Vários condomínios em uma visão única.",
    icon: "Building",
  },
];

// ── Showcase: Morador ────────────────────────────────────────
function ShowMorador() {
  return (
    <div style={{ padding: 32, height: "100%" }} className="showcase-fade">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
        <div>
          <div className="overline">Painel do morador</div>
          <h3 style={{ marginTop: 6 }}>Olá, Laura. Tudo certo hoje?</h3>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-outline" style={{ padding: "10px 14px", fontSize: 13 }}>
            <RIcon.Calendar size={15}/> Reservar
          </button>
          <button className="btn btn-primary" style={{ padding: "10px 14px", fontSize: 13 }}>
            <RIcon.Bell size={15}/> Avisar
          </button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 18 }}>
        {[
          { ic: "Package", tone: "purple", num: "2", lbl: "Encomendas\nesperando" },
          { ic: "Calendar", tone: "blue", num: "1", lbl: "Reserva\nconfirmada" },
          { ic: "Card", tone: "cyan", num: "R$ 487", lbl: "Boleto\ndo mês" },
        ].map((s, i) => {
          const C = RIcon[s.ic];
          return (
            <div key={i} style={{
              padding: 18, background: "var(--paper-2)", borderRadius: 14,
              display: "flex", flexDirection: "column", gap: 12,
            }}>
              <div className={"ic ic-" + s.tone} style={{
                width: 36, height: 36, borderRadius: 10,
                display: "grid", placeItems: "center",
                background: `var(--brand-${s.tone === 'cyan' ? 'cyan' : s.tone === 'blue' ? 'blue' : 'purple'}-50)`,
                color: `var(--brand-${s.tone === 'cyan' ? 'cyan' : s.tone === 'blue' ? 'blue' : 'purple'}-600)`,
              }}>
                <C size={18}/>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, letterSpacing: "-.02em" }}>{s.num}</div>
                <div style={{ fontSize: 11.5, color: "var(--fg-muted)", whiteSpace: "pre-line", lineHeight: 1.35 }}>{s.lbl}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ background: "var(--white)", border: "1px solid var(--hairline)", borderRadius: 14, padding: 18 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <h4 style={{ fontSize: 14 }}>Suas próximas reservas</h4>
          <a href="#" style={{ fontSize: 12, color: "var(--link)" }}>Ver todas →</a>
        </div>
        {[
          ["Churrasqueira coletiva", "Domingo, 7 dez · 12h–18h", "confirmada"],
          ["Salão de festas", "Sábado, 13 dez · 19h–23h", "aguardando"],
        ].map(([t, sub, status], i) => (
          <div key={i} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "12px 0", borderTop: i ? "1px solid var(--hairline)" : "none",
          }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t}</div>
              <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 2 }}>{sub}</div>
            </div>
            <span style={{
              fontSize: 10, padding: "4px 10px", borderRadius: 999, fontWeight: 600,
              background: status === "confirmada" ? "var(--success-50)" : "var(--warning-50)",
              color: status === "confirmada" ? "var(--success-500)" : "var(--warning-500)",
            }}>{status}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Showcase: Síndico ────────────────────────────────────────
function ShowSindico() {
  // Mini sparkline for receitas
  const bars = [40, 56, 48, 70, 62, 88, 76, 92];
  return (
    <div style={{ padding: 32, height: "100%" }} className="showcase-fade">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
        <div>
          <div className="overline">Painel do síndico</div>
          <h3 style={{ marginTop: 6 }}>Edifício Aurora · novembro</h3>
        </div>
        <span style={{
          fontSize: 11, padding: "5px 12px", borderRadius: 999,
          background: "var(--success-50)", color: "var(--success-500)", fontWeight: 600,
        }}>● Operação saudável</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 16 }}>
        <div style={{ background: "var(--navy-800)", color: "white", borderRadius: 16, padding: 22, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, background:
            "radial-gradient(60% 70% at 100% 0%, rgba(124,58,237,.30), transparent 60%)" }}></div>
          <div style={{ position: "relative" }}>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,.55)", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600 }}>Receita do mês</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 800, letterSpacing: "-.03em", marginTop: 8 }}>R$ 184.720</div>
            <div style={{ fontSize: 12, color: "var(--brand-cyan-300)", marginTop: 4 }}>↑ 8,4% vs out · 96 unidades pagas</div>
            <div style={{ display: "flex", gap: 4, alignItems: "flex-end", height: 60, marginTop: 16 }}>
              {bars.map((h, i) => (
                <div key={i} style={{
                  width: 14, height: `${h}%`, borderRadius: 4,
                  background: i === bars.length - 1 ? "var(--brand-cyan-400)" : "rgba(255,255,255,.16)",
                }}></div>
              ))}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            ["Inadimplência", "3,1%", "down", "var(--success-500)"],
            ["Ocorrências abertas", "5", "warn", "var(--warning-500)"],
            ["Reservas no mês", "47", "up", "var(--brand-blue-500)"],
          ].map(([lbl, val, dir, color], i) => (
            <div key={i} style={{
              background: "var(--paper-2)", padding: "14px 18px", borderRadius: 12,
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{lbl}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: color, letterSpacing: "-.02em" }}>{val}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ background: "white", border: "1px solid var(--hairline)", borderRadius: 14, padding: 18 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <h4 style={{ fontSize: 14 }}>Decisões pendentes</h4>
          <a href="#" style={{ fontSize: 12, color: "var(--link)" }}>Ver tudo →</a>
        </div>
        {[
          ["Orçamento da pintura externa", "3 propostas · economia até R$ 18 mil", "alta"],
          ["Renovação do contrato de jardinagem", "Vence em 18 dias", "média"],
        ].map(([t, s, p], i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                                padding: "12px 0", borderTop: i ? "1px solid var(--hairline)" : "none" }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t}</div>
              <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 2 }}>{s}</div>
            </div>
            <button className="btn btn-outline" style={{ padding: "8px 14px", fontSize: 12 }}>Decidir</button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Showcase: Portaria ───────────────────────────────────────
function ShowPortaria() {
  return (
    <div style={{ padding: 32, height: "100%", background: "var(--navy-800)", color: "white", borderRadius: 24 }} className="showcase-fade">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
        <div>
          <div className="overline" style={{ color: "var(--brand-cyan-300)" }}>Sala da portaria</div>
          <h3 style={{ marginTop: 6, color: "white" }}>Atendimento ao vivo</h3>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "rgba(255,255,255,.62)" }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--brand-cyan-400)", boxShadow: "0 0 10px var(--brand-cyan-500)" }}></span>
          3 atendentes online · 02h12 desde a última ronda
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 14 }}>
        <div style={{ background: "rgba(255,255,255,.06)", borderRadius: 16, padding: 18, border: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, color: "var(--brand-cyan-300)", marginBottom: 14 }}>
            Aguardando liberação
          </div>
          {[
            ["MS", "Mariana Souza", "Visita · Apto 1204", "agora"],
            ["RC", "Rafael Costa", "Entrega Rappi · Apto 0807", "há 1 min"],
          ].map(([ini, nome, info, t], i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "12px 0", borderTop: i ? "1px solid rgba(255,255,255,.06)" : "none",
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 999,
                background: "var(--grad-brand-2)", display: "grid", placeItems: "center",
                fontWeight: 700, fontSize: 13, color: "white",
              }}>{ini}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: "white" }}>{nome}</div>
                <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", marginTop: 2 }}>{info} · {t}</div>
              </div>
              <button style={{
                padding: "8px 14px", borderRadius: 999, border: "none", cursor: "pointer",
                background: "var(--brand-cyan-500)", color: "var(--navy-800)", fontWeight: 700, fontSize: 12,
              }}>Liberar</button>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ background: "rgba(124,58,237,.16)", border: "1px solid rgba(124,58,237,.3)", borderRadius: 14, padding: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <RIcon.Package size={20} color="var(--brand-purple-300)"/>
              <span style={{ fontSize: 10, color: "var(--brand-purple-300)", fontWeight: 700, letterSpacing: ".08em" }}>EM ESPERA</span>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 800, marginTop: 8, letterSpacing: "-.02em" }}>14</div>
            <div style={{ fontSize: 12, color: "rgba(255,255,255,.62)", marginTop: 4 }}>encomendas para retirar</div>
          </div>
          <div style={{ background: "rgba(0,194,171,.12)", border: "1px solid rgba(0,194,171,.28)", borderRadius: 14, padding: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <RIcon.Camera size={20} color="var(--brand-cyan-300)"/>
              <span style={{ fontSize: 10, color: "var(--brand-cyan-300)", fontWeight: 700, letterSpacing: ".08em" }}>AO VIVO</span>
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 800, marginTop: 8, letterSpacing: "-.02em" }}>8 câmeras</div>
            <div style={{ fontSize: 12, color: "rgba(255,255,255,.62)", marginTop: 4 }}>cobertura 100% do edifício</div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 14, background: "rgba(255,255,255,.04)", borderRadius: 14, padding: 16, border: "1px solid rgba(255,255,255,.08)" }}>
        <div style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, color: "rgba(255,255,255,.5)", marginBottom: 10 }}>
          Última hora
        </div>
        <div style={{ display: "flex", gap: 18, fontSize: 12.5, color: "rgba(255,255,255,.72)", flexWrap: "wrap" }}>
          <span>21:48 · Ronda no térreo concluída</span>
          <span>21:34 · Entrega liberada — Apto 0807</span>
          <span>21:21 · Visitante saiu — Apto 1502</span>
        </div>
      </div>
    </div>
  );
}

// ── Showcase: Administradora ────────────────────────────────
function ShowAdmin() {
  const buildings = [
    ["Edifício Aurora", "São Paulo · SP", 96, "saudável", "var(--success-500)"],
    ["Residencial Vila Verde", "Campinas · SP", 124, "atenção", "var(--warning-500)"],
    ["Condomínio Jardins", "Santos · SP", 72, "saudável", "var(--success-500)"],
    ["Park Residence", "Guarulhos · SP", 156, "saudável", "var(--success-500)"],
  ];
  return (
    <div style={{ padding: 32, height: "100%" }} className="showcase-fade">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
        <div>
          <div className="overline">Visão da administradora</div>
          <h3 style={{ marginTop: 6 }}>12 condomínios · 1.420 unidades</h3>
        </div>
        <button className="btn btn-outline" style={{ padding: "10px 14px", fontSize: 13 }}>
          <RIcon.ChartBar size={15}/> Exportar relatório
        </button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          ["Faturamento consolidado", "R$ 2,4M", "↑ 12% no trimestre"],
          ["Inadimplência média", "2,8%", "Abaixo da meta de 4%"],
          ["NPS dos moradores", "84", "Excelente · top 5% do mercado"],
        ].map(([l, v, s], i) => (
          <div key={i} style={{ background: "var(--paper-2)", padding: 18, borderRadius: 14 }}>
            <div style={{ fontSize: 11.5, color: "var(--fg-muted)", fontWeight: 500 }}>{l}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 800, marginTop: 6,
                          letterSpacing: "-.025em",
                          background: "var(--grad-brand-2)", WebkitBackgroundClip: "text",
                          backgroundClip: "text", color: "transparent" }}>{v}</div>
            <div style={{ fontSize: 11.5, color: "var(--fg-subtle)", marginTop: 4 }}>{s}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "white", border: "1px solid var(--hairline)", borderRadius: 14, overflow: "hidden" }}>
        <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--hairline)",
                       fontSize: 13, fontWeight: 600, display: "flex", justifyContent: "space-between" }}>
          <span>Condomínios sob sua gestão</span>
          <span style={{ color: "var(--fg-muted)", fontWeight: 400, fontSize: 12 }}>4 de 12</span>
        </div>
        {buildings.map(([n, c, u, st, col], i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "2fr 1.4fr 1fr 1fr", alignItems: "center", gap: 12,
            padding: "13px 18px", borderTop: i ? "1px solid var(--hairline)" : "none",
            fontSize: 13,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--brand-purple-50)",
                            color: "var(--brand-purple-600)", display: "grid", placeItems: "center" }}>
                <RIcon.Building size={16}/>
              </div>
              <div style={{ fontWeight: 600 }}>{n}</div>
            </div>
            <div style={{ color: "var(--fg-muted)" }}>{c}</div>
            <div style={{ color: "var(--fg-muted)" }}>{u} unidades</div>
            <div>
              <span style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600,
                              background: st === "saudável" ? "var(--success-50)" : "var(--warning-50)",
                              color: col }}>{st}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const SHOWCASES = { morador: ShowMorador, sindico: ShowSindico, portaria: ShowPortaria, admin: ShowAdmin };

function RoleSwitcher() {
  const [active, setActive] = rUseState("morador");
  const Show = SHOWCASES[active];
  return (
    <div className="roles-grid">
      <div>
        {ROLES.map((r) => {
          const C = RIcon[r.icon];
          return (
            <button key={r.key} className={"role-tab " + (active === r.key ? "active" : "")}
                    onClick={() => setActive(r.key)}>
              <div className="ric"><C/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h4>{r.title}</h4>
                <p>{r.desc}</p>
              </div>
              {active === r.key && (
                <RIcon.ArrowRight size={16} color="var(--brand-purple-500)"/>
              )}
            </button>
          );
        })}
      </div>
      <div className="showcase" key={active}>
        <Show/>
      </div>
    </div>
  );
}

window.RoleSwitcher = RoleSwitcher;