/* Econexa — App shell */

const NAV = [
  { group: "PRINCIPAL", items: [
    { id: "dashboard", num: "·", label: "Dashboard", icon: "home" },
  ]},
  { group: "MÓDULOS BASE", items: [
    { id: "caracterizacion", num: "2.1", label: "Caracterización", icon: "users", badge: "7,075" },
    { id: "diagnosticos",   num: "2.2", label: "Diagnósticos", icon: "clipboard", badge: "5" },
    { id: "networking",     num: "2.3", label: "Ecosistema & Networking", icon: "network", badge: "1.4k" },
    { id: "analitica",      num: "2.4", label: "Analítica & KPIs", icon: "chart" },
  ]},
  { group: "MÓDULOS COMPLEMENTARIOS", items: [
    { id: "proyectos", num: "2.5", label: "Banco de Proyectos", icon: "bank", badge: "312" },
    { id: "eventos",   num: "2.6", label: "Eventos & Formularios", icon: "calendar", badge: "7" },
    { id: "contenidos",num: "2.7", label: "Contenidos & Recursos", icon: "book" },
  ]},
  { group: "ADMINISTRACIÓN", items: [
    { id: "auditoria", num: "·", label: "Auditoría", icon: "shield" },
  ]},
];

const ROLES = {
  admin:         { label: "Administrador del programa", short: "Admin",         subtitle: "Gobernanza · Analítica · KPIs",            user: "M. Aristizábal · MinTIC", initials: "MA", color: "#1a3a6c" },
  emprendedor:   { label: "Emprendedora · Mercadia",    short: "Emprendedor",   subtitle: "Participante del ecosistema",              user: "Juliana Restrepo · Mercadia",  initials: "JR", color: "#1b7a4d" },
  inversionista: { label: "Inversionista · Capital Andino", short: "Inversionista", subtitle: "Descubrimiento de proyectos",           user: "Mauricio Tovar · Capital Andino", initials: "MT", color: "#a83a5b" },
};

// Determine initial role from (1) URL ?role=… (2) localStorage (3) default
function readInitialRole() {
  try {
    const url = new URLSearchParams(window.location.search);
    const fromUrl = url.get("role");
    if (fromUrl && ROLES[fromUrl]) return fromUrl;
    const fromStorage = localStorage.getItem("econexa.role");
    if (fromStorage && ROLES[fromStorage]) return fromStorage;
  } catch (e) {}
  return "admin";
}

function App() {
  const [route, setRoute] = useState("dashboard");
  const [tweaks, setTweak] = window.useTweaks(/*EDITMODE-BEGIN*/{
    "role": "admin"
  }/*EDITMODE-END*/);

  // Role state — initialized from URL/localStorage, kept in sync with tweaks
  const [role, setRole] = useState(readInitialRole);
  const [roleMenuOpen, setRoleMenuOpen] = useState(false);

  // Persist role changes
  useEffect(() => {
    try {
      localStorage.setItem("econexa.role", role);
      const url = new URL(window.location.href);
      url.searchParams.set("role", role);
      window.history.replaceState({}, "", url);
    } catch (e) {}
  }, [role]);

  const changeRole = (r) => {
    setRole(r);
    setTweak("role", r); // keep designer panel in sync too
    setRoleMenuOpen(false);
  };

  const navItem = NAV.flatMap(g => g.items).find(i => i.id === route) || NAV[0].items[0];
  const roleInfo = ROLES[role];

  return (
    <window.ToastProvider>
      <div className="app">
        {/* TOP BAR */}
        <div className="topbar">
          <div className="brand">
            <window.BrandMark size={22}/>
            <span>Econexa</span>
          </div>
          <div className="crumb">
            <span>Plataforma del Ecosistema de Innovación Digital</span>
            <Icon name="chev_r" size={12}/>
            <strong>{navItem.label}</strong>
          </div>
          <div className="right">
            <input className="search" placeholder="Buscar actores, proyectos, eventos…"/>

            {/* Role switcher — works standalone, persists to localStorage + URL */}
            <div style={{ position: "relative" }}>
              <button
                className="role-badge"
                onClick={() => setRoleMenuOpen(o => !o)}
                style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.12)", color: "#fff", padding: "4px 10px 4px 8px", borderRadius: 999, cursor: "pointer", display: "flex", gap: 8, alignItems: "center", fontSize: 11 }}
                title="Cambiar rol de visualización"
              >
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: roleInfo.color, boxShadow: `0 0 0 2px rgba(255,255,255,0.2)` }}/>
                <span>{roleInfo.label}</span>
                <Icon name="chev_d" size={11}/>
              </button>
              {roleMenuOpen && (
                <>
                  <div onClick={() => setRoleMenuOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 100 }}/>
                  <div style={{
                    position: "absolute", top: "calc(100% + 6px)", right: 0,
                    background: "#fff", border: "1px solid var(--c-line)",
                    borderRadius: 8, boxShadow: "0 12px 32px rgba(0,0,0,0.18)",
                    width: 280, padding: 6, zIndex: 200
                  }}>
                    <div style={{ padding: "8px 10px 6px", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--c-ink-5)", fontWeight: 600 }}>
                      Cambiar vista por rol
                    </div>
                    {Object.entries(ROLES).map(([key, r]) => (
                      <button
                        key={key}
                        onClick={() => changeRole(key)}
                        style={{
                          display: "flex", gap: 10, alignItems: "center",
                          width: "100%", padding: "8px 10px", borderRadius: 6,
                          background: role === key ? "var(--c-primary-50)" : "transparent",
                          border: "none", textAlign: "left", cursor: "pointer"
                        }}>
                        <div style={{ width: 32, height: 32, borderRadius: "50%", background: r.color, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
                          {r.initials}
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--c-ink)" }}>{r.short}</div>
                          <div style={{ fontSize: 10.5, color: "var(--c-ink-4)" }}>{r.user}</div>
                        </div>
                        {role === key && <Icon name="check" size={14}/>}
                      </button>
                    ))}
                    <div style={{ borderTop: "1px solid var(--c-line-2)", marginTop: 4, padding: "8px 10px", fontSize: 10.5, color: "var(--c-ink-5)" }}>
                      <Icon name="info" size={10}/> En producción: el rol se asigna al iniciar sesión. Esta vista permite previsualizar las tres perspectivas.
                    </div>
                  </div>
                </>
              )}
            </div>

            <button className="iconbtn" title="Notificaciones"><Icon name="bell" size={16}/></button>
            <button className="iconbtn" title="Mensajes"><Icon name="msg" size={16}/></button>
            <div className="avatar" style={{ background: `linear-gradient(135deg, ${roleInfo.color}, ${roleInfo.color}cc)` }}>{roleInfo.initials}</div>
          </div>
        </div>

        {/* SIDEBAR */}
        <div className="sidebar">
          {NAV.map(g => (
            <div key={g.group}>
              <div className="group-label">{g.group}</div>
              {g.items.map(i => (
                <div key={i.id}
                     className={`nav-item ${route === i.id ? "active" : ""}`}
                     onClick={() => setRoute(i.id)}>
                  <span className="num">{i.num}</span>
                  <Icon name={i.icon} size={15}/>
                  <span className="label-text">{i.label}</span>
                  {i.badge && <span className="badge">{i.badge}</span>}
                </div>
              ))}
            </div>
          ))}
          <div className="footer">
            <div className="status"><span className="dot"/> Operativo · v1.4.2</div>
            <div>Última sinc · hace 2 min</div>
            <div className="mono" style={{ color: "var(--c-ink-5)" }}>2026 · Econexa</div>
          </div>
        </div>

        {/* CONTENT */}
        <div className="content" data-screen-label={navItem.label}>
          {route === "dashboard"      && <window.Dashboard role={role} onNav={setRoute}/>}
          {route === "caracterizacion"&& <window.Caracterizacion role={role}/>}
          {route === "diagnosticos"   && <window.Diagnosticos role={role}/>}
          {route === "networking"     && <window.Networking role={role}/>}
          {route === "analitica"      && <window.Analitica role={role}/>}
          {route === "proyectos"      && <window.Proyectos role={role}/>}
          {route === "eventos"        && <window.Eventos role={role}/>}
          {route === "contenidos"     && <window.Contenidos role={role}/>}
          {route === "auditoria"      && <window.Auditoria role={role}/>}
        </div>
      </div>

      {/* Tweaks panel — solo activo dentro del entorno de diseño */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Rol activo" subtitle="Cambia la perspectiva del usuario logueado">
          <window.TweakRadio
            label="Rol"
            value={role}
            onChange={v => changeRole(v)}
            options={[
              { value: "admin", label: "Admin" },
              { value: "emprendedor", label: "Emp." },
              { value: "inversionista", label: "Inv." },
            ]}/>
          <div style={{ fontSize: 11, color: "var(--c-ink-4)", marginTop: 8 }}>
            {ROLES[role].subtitle}
          </div>
        </window.TweakSection>
      </window.TweaksPanel>
    </window.ToastProvider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);