/* ============================================================
   SYMPHO — workspace-level views
   Login · Hub · Módulos · Admin
   ============================================================ */

// ---------------- LOGIN / workspace entry ----------------
function LoginView() {
  const nav = useNav();
  const W = window.WORKSPACE;
  return (
    <div className="login">
      <div className="login-aside">
        <div className="login-brand">
          <div className="rail-logo" style={{ width: 44, height: 44, cursor: "default" }}><Icon name="sparkle" size={22} stroke={1.6} /></div>
          <div><b className="disp" style={{ fontSize: 19, letterSpacing: "-0.02em" }}>Sympho</b>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>by Luxerv Co//Labs</div></div>
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 26, maxWidth: 420 }}>
          <h1 className="disp" style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.05 }}>
            Un solo workspace<br />para todo tu stack.
          </h1>
          <p style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.6, maxWidth: 380 }}>
            CRM, facturación, custodia de activos e inventario — conectados o por separado. Activas solo lo que usas, cuando lo usas.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {window.APPS.map(a => (
              <div key={a.id} className="chip" style={{ paddingLeft: 5 }}>
                <Glyph app={a} size={18} radius={5} /> {a.name}
              </div>
            ))}
          </div>
        </div>
        <div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>SaaS · Multiplataforma · 100% en la nube</div>
      </div>
      <div className="login-form-wrap">
        <div className="login-card rise">
          <div className="eyebrow" style={{ marginBottom: 10 }}>Acceder al workspace</div>
          <div className="ws-pick" >
            <span className="ws-mark" style={{ width: 38, height: 38 }}><Icon name="sparkle" size={18} stroke={1.6} /></span>
            <div style={{ flex: 1 }}>
              <b style={{ fontSize: 15 }}>{W.name}</b>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--text-4)" }}>{W.domain} · Ecosystem</div>
            </div>
            <span className="badge ok dot">activo</span>
          </div>
          <label className="lbl">Correo corporativo</label>
          <input className="field" defaultValue="david@luxerv.io" />
          <label className="lbl">Contraseña</label>
          <input className="field" type="password" defaultValue="••••••••••" />
          <button className="btn btn-primary" style={{ width: "100%", height: 44, marginTop: 18, justifyContent: "center" }}
            onClick={() => nav.go({ view: "hub" })}>
            Entrar como {window.USER.short} <Icon name="arrowr" size={16} />
          </button>
          <div className="login-sso">
            <button className="btn" style={{ flex: 1, justifyContent: "center" }}><Icon name="globe" size={15} /> Google</button>
            <button className="btn" style={{ flex: 1, justifyContent: "center" }}><Icon name="grid" size={15} /> Microsoft</button>
          </div>
          <p className="muted" style={{ fontSize: 11.5, textAlign: "center", marginTop: 16 }}>
            Acceso protegido · SSO + verificación de dominio
          </p>
        </div>
      </div>
    </div>
  );
}

// ---------------- HUB — workspace home ----------------
function HubView() {
  const nav = useNav();
  const active = window.APPS.filter(a => a.status === "active");
  const hour = new Date().getHours();
  const greet = hour < 12 ? "Buenos días" : hour < 19 ? "Buenas tardes" : "Buenas noches";
  const mods = window.MODULES;
  const onCount = mods.filter(m => m.on).length;
  const monthly = mods.filter(m => m.on && !m.locked).reduce((s, m) => s + m.price, 0);

  const feed = [
    { app: "kin", icon: "warn", text: "K'in detectó factor de potencia bajo en TD-Frío · Planta Celaya — recomendación de $612k/año", time: "hace 2 min", hue: "var(--kin)" },
    { app: "zamna", icon: "sparkle", text: "IA generó el reporte de la visita V-0142-3 · Flow Suites Condesa", time: "hace 6 min", hue: "var(--zamna)" },
    { app: "manik", icon: "camera", text: "Iván registró 10 dispositivos en CPD KIO MEX4", time: "hace 12 min", hue: "var(--manik)" },
    { app: "muluk", icon: "receipt", text: "Factura LXA-1042 timbrada · KIO Networks", time: "hace 38 min", hue: "var(--muluk)" },
    { app: "ek", icon: "target", text: "Deal 'Retiro CPD — KIO' pasó a Negociación", time: "hace 1 h", hue: "var(--ek)" },
    { app: "pakal", icon: "pkg", text: "120 activos marcados En retiro → sincronizado con Manik", time: "hace 2 h", hue: "var(--pakal)" },
  ];

  return (
    <div className="canvas-in rise">
      {/* hero */}
      <div className="hub-hero">
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>{window.WORKSPACE.name} · {window.WORKSPACE.region}</div>
          <h1 className="disp" style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.03em" }}>{greet}, {window.USER.short}.</h1>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 8 }}>
            {onCount} módulos activos · {active.length} aplicaciones · {window.WORKSPACE.seats.used} de {window.WORKSPACE.seats.total} asientos.
          </p>
        </div>
        <div className="hub-hero-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span className="eyebrow">Plan mensual</span>
            <span className="badge">{window.WORKSPACE.plan.split("·")[0].trim()}</span>
          </div>
          <div className="disp" style={{ fontSize: 30, fontWeight: 600, marginTop: 10 }}>{window.fmtMoney(monthly)}<span style={{ fontSize: 14, color: "var(--text-4)" }}> /mes</span></div>
          <div className="bar" style={{ marginTop: 14 }}><i style={{ width: (window.WORKSPACE.seats.used / window.WORKSPACE.seats.total * 100) + "%" }} /></div>
          <div className="muted" style={{ fontSize: 11.5, marginTop: 7, fontFamily: "var(--mono)" }}>{window.WORKSPACE.seats.used}/{window.WORKSPACE.seats.total} asientos usados</div>
          <button className="btn btn-sm" style={{ marginTop: 14, width: "100%", justifyContent: "center" }} onClick={() => nav.go({ view: "modules" })}>
            <Icon name="layers" size={14} /> Gestionar módulos
          </button>
        </div>
      </div>

      {/* your apps */}
      <Section eyebrow="Tus aplicaciones" title="Workspace" sub="Cada app es modular: ábrela sola o deja que comparta datos con las demás."
        right={<button className="btn btn-sm" onClick={() => nav.go({ view: "modules" })}>Explorar módulos <Icon name="arrowr" size={14} /></button>}
        style={{ marginTop: 38, marginBottom: 18 }} />
      <div className="app-cards">
        {window.APPS.map(a => {
          const appMods = mods.filter(m => m.app === a.id);
          const onMods = appMods.filter(m => m.on).length;
          return (
            <button key={a.id} className="app-card" data-soon={a.status === "soon"} onClick={() => a.status === "active" && nav.openApp(a.id)} style={{ "--c": a.hue }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <Glyph app={a} size={44} />
                {a.status === "soon"
                  ? <span className="badge">Pronto</span>
                  : <Icon name="arrowupr" size={17} style={{ color: "var(--text-4)" }} className="app-card-go" />}
              </div>
              <div style={{ marginTop: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <b className="disp" style={{ fontSize: 17, letterSpacing: "-0.01em" }}>{a.name}</b>
                  <span className="mono" style={{ fontSize: 10.5, color: a.hue }}>{a.tag}</span>
                </div>
                <p className="muted" style={{ fontSize: 12.5, marginTop: 6, lineHeight: 1.5 }}>{a.desc}</p>
              </div>
              <div className="app-card-foot">
                {a.status === "soon"
                  ? <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{a.deity}</span>
                  : <><span className="dot" style={{ background: a.hue }} /><span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>{onMods} módulo{onMods !== 1 ? "s" : ""} activo{onMods !== 1 ? "s" : ""}</span></>}
              </div>
            </button>
          );
        })}
      </div>

      {/* two columns: activity + collaboration */}
      <div className="hub-cols">
        <div className="card" style={{ padding: 0 }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Actividad reciente</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>cross-app</span></div>
          <div>
            {feed.map((f, i) => (
              <div key={i} className="feed-row" onClick={() => nav.openApp(f.app)}>
                <span className="feed-ic" style={{ "--c": f.hue }}><Icon name={f.icon} size={15} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, color: "var(--text)", lineHeight: 1.4 }}>{f.text}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 3 }}>{f.time}</div>
                </div>
                <Icon name="chevright" size={15} style={{ color: "var(--text-4)" }} />
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 0 }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Grupos de trabajo</b>
            <button className="btn btn-ghost btn-sm" onClick={() => nav.go({ view: "admin", sub: "groups" })}>Ver todos</button></div>
          <div style={{ padding: 8 }}>
            {window.GROUPS.map((g, i) => (
              <div key={i} className="grp-row" onClick={() => nav.go({ view: "admin", sub: "groups" })}>
                <span className="feed-ic" style={{ "--c": g.hue }}><Icon name={g.icon} size={15} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{g.name}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 2 }}>{g.members} miembros · {g.apps.length} apps</div>
                </div>
                <div style={{ display: "flex" }}>
                  {g.apps.map(aid => { const a = window.APPS.find(x => x.id === aid); return <span key={aid} className="dot" style={{ background: a.hue, marginLeft: 4 }} title={a.name} />; })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------- MÓDULOS — modular activation ----------------
function ModulesView() {
  const nav = useNav();
  const [mods, setMods] = useState(window.MODULES.map(m => ({ ...m })));
  const toggle = (id) => setMods(ms => ms.map(m => m.id === id && !m.locked && !m.soon ? { ...m, on: !m.on } : m));
  const monthly = mods.filter(m => m.on && !m.locked).reduce((s, m) => s + m.price, 0);
  const onCount = mods.filter(m => m.on).length;

  return (
    <div className="canvas-in rise">
      <div className="pagehead">
        <div style={{ width: 44, height: 44, borderRadius: 12, background: "var(--sympho-dim)", color: "var(--sympho)", display: "grid", placeItems: "center", border: "1px solid color-mix(in oklch, var(--sympho) 30%, transparent)" }}><Icon name="layers" size={22} /></div>
        <div style={{ flex: 1 }}>
          <h1 className="disp" style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.02em" }}>Módulos & activación</h1>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>Conecta funciones por app — concatenadas o standalone. Pagas solo por lo que activas.</p>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="disp" style={{ fontSize: 26, fontWeight: 600 }}>{window.fmtMoney(monthly)}<span style={{ fontSize: 13, color: "var(--text-4)" }}>/mes</span></div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{onCount} módulos activos</div>
        </div>
      </div>

      {window.APPS.map(a => {
        const list = mods.filter(m => m.app === a.id);
        if (!list.length) return null;
        return (
          <div key={a.id} style={{ marginBottom: 26 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 12 }}>
              <Glyph app={a} size={28} radius={8} />
              <b className="disp" style={{ fontSize: 16 }}>{a.name}</b>
              <span className="mono" style={{ fontSize: 11, color: a.hue }}>{a.tag}</span>
              <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
            </div>
            <div className="grid-3">
              {list.map(m => (
                <div key={m.id} className="mod-card" data-on={m.on} style={{ "--c": a.hue }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                        <b style={{ fontSize: 14, lineHeight: 1.3 }}>{m.name}</b>
                        {m.locked && <Icon name="lock" size={12} style={{ color: "var(--text-4)", flex: "none" }} />}
                      </div>
                      <p className="muted" style={{ fontSize: 12, marginTop: 6, lineHeight: 1.45 }}>{m.desc}</p>
                    </div>
                    <button className={"sw" + (m.on ? " on" : "")} disabled={m.locked || m.soon} onClick={() => toggle(m.id)}><span /></button>
                  </div>
                  <div className="mod-foot">
                    {m.soon ? <span className="badge">Pronto</span>
                      : m.locked ? <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>Incluido</span>
                      : <span className="mono" style={{ fontSize: 12, color: m.on ? "var(--text)" : "var(--text-4)" }}>{m.price === 0 ? "Gratis" : window.fmtMoney(m.price) + "/mes"}</span>}
                    <span className="mono" style={{ fontSize: 10.5, color: m.on ? a.hue : "var(--text-4)" }}>{m.on ? "● activo" : "○ inactivo"}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { LoginView, HubView, ModulesView });