// ============ Layout: Sidebar + TopBar ============

const NAV = [
  { id: "inicio", label: "Inicio", icon: "home" },
  { id: "cursos", label: "Mis Cursos", icon: "book" },
  { id: "calendario", label: "Calendario", icon: "calendar" },
  { id: "tareas", label: "Tareas", icon: "task" },
  { id: "certificados", label: "Certificados", icon: "award" },
  { id: "progreso", label: "Mi progreso", icon: "trending" },
];

function Logo({ light }) {
  return (
    <div className="logo">
      <div className="logo-mark"><span>ia</span></div>
      <div className="logo-txt">
        <strong style={{ color: light ? "#fff" : "var(--navy)" }}>Academia</strong>
        <span>Adopción en IA</span>
      </div>
    </div>
  );
}

function Sidebar({ route, go, pendingTasks, onSupport }) {
  const user = window.DATA && window.DATA.user ? window.DATA.user : { name: "", company: "DataVoices" };
  const companyLogo = user.company ? user.company.split(" ").slice(0, 2).map(n => n[0]).join("").toUpperCase() : "DV";

  return (
    <aside className="sidebar">
      <div className="sidebar-top">
        <Logo light />
      </div>
      <nav className="nav">
        {NAV.map((n) => (
          <button key={n.id} className={"nav-item" + (route.screen === n.id ? " active" : "")}
            onClick={() => go(n.id)}>
            <Icon name={n.icon} size={20} />
            <span>{n.label}</span>
            {n.id === "tareas" && pendingTasks > 0 && <span className="nav-count">{pendingTasks}</span>}
          </button>
        ))}
      </nav>
      <div className="sidebar-foot">
        <div className="company-card">
          <div className="company-logo">{companyLogo}</div>
          <div>
            <strong>{user.company || "DataVoices"}</strong>
            <span>{user.program || "Programa de IA"}</span>
          </div>
        </div>
        <button className="help-link" onClick={onSupport} style={{ background: "none", border: "none", width: "100%", textAlign: "left", cursor: "pointer", color: "inherit", font: "inherit" }}>
          <Icon name="chat" size={16} /> Soporte DataVoices
        </button>
      </div>
    </aside>
  );
}

function TopBar({ title, crumb, onSearch, query }) {
  const [open, setOpen] = useState(false);
  const u = DATA.user;
  return (
    <header className="topbar">
      <div className="tb-left">
        {crumb}
        <h1 className="tb-title">{title}</h1>
      </div>
      <div className="tb-right">
        <div className="search">
          <Icon name="search" size={18} />
          <input placeholder="Buscar cursos, materiales…" value={query}
            onChange={(e) => onSearch(e.target.value)} />
        </div>
        <button className="icon-btn" title="Notificaciones">
          <Icon name="bell" size={20} />
          <span className="dot-badge" />
        </button>
        <div className="user-chip" onClick={() => setOpen((o) => !o)}>
          <Avatar text={u.avatar} size={36} />
          <div className="user-meta">
            <strong>{u.name}</strong>
            <span>{u.company}</span>
          </div>
          <Icon name="chevD" size={16} />
          {open && (
            <div className="user-menu" onClick={(e) => e.stopPropagation()}>
              <div className="um-head">
                <Avatar text={u.avatar} size={40} />
                <div><strong>{u.name}</strong><span>{u.role}</span></div>
              </div>
              <button className="um-item"><Icon name="user" size={17} /> Mi perfil</button>
              <button className="um-item"><Icon name="award" size={17} /> Mis certificados</button>
              <button className="um-item"><Icon name="bell" size={17} /> Notificaciones</button>
              <div className="um-sep" />
              <button className="um-item danger" onClick={API.logout}><Icon name="logout" size={17} /> Cerrar sesión</button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { NAV, Logo, Sidebar, TopBar });