// Sidebar + Topbar + small shared pieces.
const { useState } = React;

function Sidebar({ page, onNav, role, onLogout }) {
  const { t } = useApp();

  const Item = ({ id, label, icon: Ico, count }) => (
    <button className={`nav-item ${page === id ? "active" : ""}`} onClick={() => onNav(id)}>
      <Ico size={18} sw={1.7}/>
      <span>{label}</span>
      {count != null && <span className="count">{count}</span>}
    </button>
  );

  const isDir  = role === "directeur";
  const isProf = role === "professeur";
  const isPar  = role === "parent";

  const user = isDir  ? { name: "Sophie Marchand", role: "Direction · École Tournesol", img: "https://i.pravatar.cc/120?img=48" }
             : isProf ? { name: "Marie Lambert",   role: "Enseignante · CE1 Camélia",    img: "https://i.pravatar.cc/120?img=47" }
             :          { name: "Marc Martin",     role: "Parent · Léo Martin",           img: "https://i.pravatar.cc/120?img=12" };

  return (
    <aside className="sidebar">
      <div className="brand-mark">
        <ScoliaMark size={26}/>
        <span className="name">scolia</span>
      </div>

      {!isPar && (
        <div className="search" style={{maxWidth: "none"}}>
          <Icons.Search size={16}/>
          <input placeholder={t("search")}/>
          <span className="kbd">⌘K</span>
        </div>
      )}

      {isDir && (
        <div className="nav-section">
          <div className="nav-label">{t("nav_section_espace")}</div>
          <Item id="pilotage" label={t("nav_pilotage")}  icon={Icons.Home}/>
          <Item id="classes"  label={t("nav_classes")}   icon={Icons.Classes} count={4}/>
          <Item id="equipe"   label={t("nav_equipe")}    icon={Icons.Team}    count={4}/>
          <Item id="ecole"    label={t("nav_ecole")}     icon={Icons.School}/>
        </div>
      )}

      {isProf && (
        <div className="nav-section">
          <div className="nav-label">{t("nav_section_ma_classe")}</div>
          <Item id="classes" label={t("nav_mes_classes")} icon={Icons.Classes} count={1}/>
          <Item id="equipe"  label={t("nav_equipe")}      icon={Icons.Team}/>
        </div>
      )}

      {isPar && (
        <div className="nav-section">
          <div className="nav-label">{t("nav_section_monenfant")}</div>
          <Item id="child" label="Léo Martin" icon={Icons.Classes}/>
        </div>
      )}

      <div className="nav-section">
        <div className="nav-label">{isPar ? t("nav_section_communication") : t("nav_section_gestion")}</div>
        {isDir && <Item id="inscriptions" label={t("nav_inscriptions")}  icon={Icons.Doc}       count={12}/>}
        <Item id="annonces"      label={t("nav_annonces")}       icon={Icons.Megaphone} count={3}/>
        <Item id="conversations" label={t("nav_conversations")}  icon={Icons.Msg}       count={3}/>
        <Item id="agenda"        label={t("nav_agenda")}         icon={Icons.Cal}/>
      </div>

      <div style={{flex: 1}}/>

      <Item id="parametres" label={t("nav_parametres")} icon={Icons.Settings}/>

      <div className="side-user">
        <div className="avatar" style={{backgroundImage: `url(${user.img})`}}/>
        <div style={{minWidth: 0}}>
          <div className="name">{user.name}</div>
          <div className="role">{user.role}</div>
        </div>
        <button onClick={onLogout}
                style={{
                  background: "transparent", border: "none", cursor: "pointer",
                  padding: 6, borderRadius: 8, color: "var(--ink-4)",
                  flexShrink: 0, display: "grid", placeItems: "center",
                }}
                title="Changer de rôle">
          <Icons.X size={14}/>
        </button>
      </div>
    </aside>
  );
}

function Topbar({ left, right }) {
  return (
    <div className="topbar">
      <div style={{flex: 1, minWidth: 0}}>{left}</div>
      <div className="row gap-3" style={{alignItems: "center"}}>{right}</div>
    </div>
  );
}

function Initials({ name, size = 36, color }) {
  const parts = name.split(/\s+/);
  const i = (parts[0]?.[0] || "") + (parts[1]?.[0] || "");
  return (
    <div className="avatar" style={{
      width: size, height: size, fontSize: size * 0.36,
      background: color || "var(--brand-soft)",
      color: "var(--brand-ink)",
    }}>
      {i.toUpperCase()}
    </div>
  );
}

function Photo({ src, size = 36 }) {
  return <div className="avatar" style={{width: size, height: size, backgroundImage: `url(${src})`}}/>;
}

window.Sidebar  = Sidebar;
window.Topbar   = Topbar;
window.Initials = Initials;
window.Photo    = Photo;