/* Desktop admin panel — platform owner view */

const AdminDesktop = () => {
  const stats = [
    { label: "Negocios activos", value: "47", delta: "+12 este mes", color: OBSIDIA.gold },
    { label: "Usuarios", value: "184", delta: "+38", color: "#0f766e" },
    { label: "Pedidos totales", value: "2,341", delta: "+423", color: "#1a237e" },
    { label: "Revenue plataforma", value: "$84.2K", delta: "MXN · +28%", color: "#c2185b" },
  ];
  const businesses = [
    { name: "Mariana Rivas Hair", vertical: "wig", users: 2, orders: 38, revenue: "12,400", state: "active" },
    { name: "Andrea Solís · Postres", vertical: "bake", users: 1, orders: 24, revenue: "8,920", state: "active" },
    { name: "JM Imports MX-USA", vertical: "trade", users: 4, orders: 87, revenue: "47,300", state: "active" },
    { name: "Lorena Castaño Studio", vertical: "lens", users: 1, orders: 12, revenue: "9,600", state: "trial" },
    { name: "Diego Aramburo · Ink", vertical: "ink", users: 1, orders: 6, revenue: "3,200", state: "trial" },
    { name: "Sofía Hair Atelier", vertical: "wig", users: 2, orders: 19, revenue: "7,800", state: "active" },
    { name: "Patricia Bakery", vertical: "bake", users: 3, orders: 41, revenue: "14,200", state: "paused" },
  ];

  return (
    <div style={{ width: 1440, height: 900, display: "flex", background: "#fafaf7", fontFamily: "'Inter', sans-serif", color: OBSIDIA.ink, overflow: "hidden" }}>
      {/* sidebar */}
      <aside style={{ width: 240, background: OBSIDIA.carbon, color: OBSIDIA.surface, padding: "24px 18px", display: "flex", flexDirection: "column", gap: 24 }}>
        <ObsidiaLockup size={20} color={OBSIDIA.surface} />
        <div style={{ fontSize: 9, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(247,244,239,0.4)", padding: "0 6px" }}>Plataforma</div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {[
            ["Dashboard", true], ["Negocios", false], ["Usuarios", false], ["Métricas Beta", false],
            ["Suscripciones", false], ["Reportes", false],
          ].map(([l, active], i) => (
            <div key={i} style={{
              padding: "10px 12px", borderRadius: 8,
              background: active ? "rgba(212,168,83,0.12)" : "transparent",
              color: active ? OBSIDIA.gold : "rgba(247,244,239,0.7)",
              fontSize: 13, fontWeight: active ? 600 : 500,
              borderLeft: active ? `2px solid ${OBSIDIA.gold}` : "2px solid transparent",
            }}>{l}</div>
          ))}
        </nav>
        <div style={{ marginTop: "auto", padding: 12, borderRadius: 10, background: "rgba(247,244,239,0.04)", border: "1px solid rgba(247,244,239,0.06)" }}>
          <div style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: OBSIDIA.gold }}>Beta · v0.9</div>
          <div style={{ fontSize: 11, color: "rgba(247,244,239,0.6)", marginTop: 6, lineHeight: 1.5 }}>3 testers activos. Próximo build viernes.</div>
        </div>
      </aside>

      {/* main */}
      <main style={{ flex: 1, padding: "28px 36px", overflow: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: OBSIDIA.mute }}>Vista global · 06 mayo 2026</div>
            <h1 style={{ fontFamily: "'Fraunces', serif", fontSize: 40, fontWeight: 400, margin: "6px 0 0", letterSpacing: "-0.02em" }}>Buenas tardes, Roberto</h1>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button style={{ background: "transparent", border: `1px solid ${OBSIDIA.line}`, padding: "9px 16px", borderRadius: 8, fontSize: 12, fontWeight: 500 }}>Exportar CSV</button>
            <button style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, border: "none", padding: "9px 16px", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>+ Crear negocio</button>
          </div>
        </div>

        {/* stats */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 24 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 14, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <span style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.mute }}>{s.label}</span>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.color }} />
              </div>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 38, marginTop: 10, letterSpacing: "-0.03em" }}>{s.value}</div>
              <div style={{ fontSize: 11, color: OBSIDIA.mute, marginTop: 4 }}>{s.delta}</div>
            </div>
          ))}
        </div>

        {/* charts row */}
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14, marginBottom: 24 }}>
          <div style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 14, padding: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: OBSIDIA.mute }}>Crecimiento</div>
                <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>Negocios por vertical · 90 días</div>
              </div>
              <div style={{ display: "flex", gap: 8, fontSize: 10 }}>
                {Object.entries(VERTICALS).map(([k, v]) => (
                  <div key={k} style={{ display: "flex", alignItems: "center", gap: 4 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: v.accent }} />
                    <span style={{ color: OBSIDIA.mute }}>{v.name}</span>
                  </div>
                ))}
              </div>
            </div>
            {/* stacked bars */}
            <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height: 220 }}>
              {[0.5, 0.6, 0.7, 0.65, 0.75, 0.8, 0.85, 0.9, 0.95, 1, 0.92, 1].map((h, i) => (
                <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 1, height: `${h * 100}%` }}>
                  {Object.values(VERTICALS).map((v, j) => (
                    <div key={j} style={{ height: `${[36, 22, 18, 14, 10][j]}%`, background: v.accent, borderRadius: j === 0 ? "3px 3px 0 0" : 0, opacity: 0.8 + (i / 30) }} />
                  ))}
                </div>
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 9, color: OBSIDIA.mute, letterSpacing: "0.05em" }}>
              {["Feb", "Mar", "Abr", "May"].map(m => <span key={m}>{m}</span>)}
            </div>
          </div>

          <div style={{ background: OBSIDIA.carbon, color: OBSIDIA.surface, borderRadius: 14, padding: 22 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(247,244,239,0.5)" }}>Conversión</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>Cotización → Pedido</div>
            <div style={{ fontFamily: "'Fraunces', serif", fontSize: 56, marginTop: 16, color: OBSIDIA.gold, letterSpacing: "-0.04em" }}>62%</div>
            <div style={{ fontSize: 11, color: "rgba(247,244,239,0.5)", marginTop: 4 }}>Meta · 40% · superada por 22pts</div>
            {/* funnel */}
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                ["Cotizaciones", 100, "1,847"],
                ["Aceptadas", 68, "1,256"],
                ["Pagadas", 62, "1,145"],
                ["Entregadas", 58, "1,071"],
              ].map(([l, p, n], i) => (
                <div key={i}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "rgba(247,244,239,0.7)" }}>
                    <span>{l}</span><span>{n}</span>
                  </div>
                  <div style={{ height: 5, background: "rgba(247,244,239,0.08)", borderRadius: 999, marginTop: 4, overflow: "hidden" }}>
                    <div style={{ width: `${p}%`, height: "100%", background: OBSIDIA.gold, opacity: 1 - i * 0.18 }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* table */}
        <div style={{ background: "#fff", border: `1px solid ${OBSIDIA.line}`, borderRadius: 14, overflow: "hidden" }}>
          <div style={{ padding: "16px 22px", borderBottom: `1px solid ${OBSIDIA.line}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Negocios</div>
            <div style={{ display: "flex", gap: 6 }}>
              {["Todos", "Wig", "Bake", "Trade", "Lens", "Ink"].map((f, i) => (
                <span key={i} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, background: i === 0 ? OBSIDIA.carbon : "transparent", color: i === 0 ? "#fff" : OBSIDIA.mute, fontWeight: 600, border: i === 0 ? "none" : `1px solid ${OBSIDIA.line}` }}>{f}</span>
              ))}
            </div>
          </div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
            <thead>
              <tr style={{ background: "#fafaf7" }}>
                {["Negocio", "Vertical", "Usuarios", "Pedidos", "Revenue MXN", "Estado", ""].map((h, i) => (
                  <th key={i} style={{ textAlign: i >= 2 && i <= 4 ? "right" : "left", padding: "10px 22px", fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: OBSIDIA.mute, fontWeight: 600 }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {businesses.map((b, i) => {
                const v = VERTICALS[b.vertical];
                const stateColor = b.state === "active" ? "#16a34a" : b.state === "trial" ? "#d97706" : "#6b7280";
                return (
                  <tr key={i} style={{ borderTop: `1px solid ${OBSIDIA.line}` }}>
                    <td style={{ padding: "12px 22px" }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <div style={{ width: 28, height: 28, borderRadius: 8, background: `${v.accent}15`, color: v.accent, display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11 }}>{b.name.split(" ").map(w => w[0]).join("").slice(0, 2)}</div>
                        <span style={{ fontWeight: 500 }}>{b.name}</span>
                      </div>
                    </td>
                    <td style={{ padding: "12px 22px" }}>
                      <span style={{ fontSize: 10, padding: "3px 9px", borderRadius: 999, background: `${v.accent}15`, color: v.accent, fontWeight: 600, letterSpacing: "0.05em", textTransform: "uppercase" }}>{v.name}</span>
                    </td>
                    <td style={{ padding: "12px 22px", textAlign: "right", fontFamily: "'JetBrains Mono', monospace" }}>{b.users}</td>
                    <td style={{ padding: "12px 22px", textAlign: "right", fontFamily: "'JetBrains Mono', monospace" }}>{b.orders}</td>
                    <td style={{ padding: "12px 22px", textAlign: "right", fontFamily: "'JetBrains Mono', monospace", fontWeight: 600 }}>${b.revenue}</td>
                    <td style={{ padding: "12px 22px" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: stateColor, fontWeight: 600 }}>
                        <span style={{ width: 6, height: 6, borderRadius: "50%", background: stateColor }} />
                        {b.state === "active" ? "Activo" : b.state === "trial" ? "Trial" : "Pausado"}
                      </span>
                    </td>
                    <td style={{ padding: "12px 22px", textAlign: "right", color: OBSIDIA.mute }}>···</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
};

Object.assign(window, { AdminDesktop });