// ============================================================
//  LAYOUT — Top bar desktop + Bottom tabs mobile
// ============================================================

const Layout = ({ children }) => {
  const { page, setPage, role, setRole, lang, setLang, t, openMenu, setOpenMenu } = useApp();

  const navMain = [
    { key: "home",   icon: "home",      label: t.nav.home,    roles: ["visitor","member","admin"] },
    { key: "trombi", icon: "users",     label: t.nav.trombi,  roles: ["member","admin"] },
    { key: "opps",   icon: "briefcase", label: t.nav.opps,    roles: ["visitor","member","admin"] },
    { key: "dash",   icon: "chart",     label: t.nav.dash,    roles: ["admin"] },
    { key: "about",  icon: "book",      label: t.nav.about,   roles: ["visitor","member","admin"] }
  ].filter(n => n.roles.includes(role));

  return (
    <div className="min-h-screen flex flex-col bg-ajc-cream">
      {/* Bandeau devise */}
      <div className="bg-ajc-blueDk text-white py-1.5 text-[11px] tracking-[0.22em] uppercase text-center font-medium">
        <span className="hidden sm:inline">{t.motto}</span>
        <span className="sm:hidden">{t.motto}</span>
      </div>

      {/* Top bar */}
      <header className="bg-white border-b border-ajc-blue/10 sticky top-0 z-30 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center h-16 gap-4">
          <button onClick={() => setPage("home")} className="flex items-center gap-2 group">
            <LogoAJC size={42}/>
          </button>

          <nav className="hidden md:flex items-center gap-1 ml-6 flex-1">
            {navMain.map(n => (
              <button
                key={n.key}
                onClick={() => setPage(n.key)}
                className={"px-3.5 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2 " +
                  (page === n.key ? "bg-ajc-blue/10 text-ajc-blue" : "text-ajc-mute hover:text-ajc-blue hover:bg-ajc-blue/5")}
              >
                <Icon name={n.icon} size={16}/>
                {n.label}
              </button>
            ))}
          </nav>

          <div className="flex items-center gap-2 ml-auto">
            {/* Selecteur langue */}
            <button
              onClick={() => setLang(lang === "fr" ? "en" : "fr")}
              className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-ajc-blue/15 text-xs font-semibold text-ajc-blue hover:bg-ajc-blue/5"
            >
              <Icon name="globe" size={14}/> {lang.toUpperCase()}
            </button>

            {/* Switch rôle */}
            <RoleSwitch role={role} setRole={setRole} t={t}/>

            {/* Menu mobile */}
            <button onClick={() => setOpenMenu(!openMenu)} className="md:hidden p-2 rounded-lg hover:bg-ajc-blue/5 text-ajc-blue">
              <Icon name="menu" size={20}/>
            </button>
          </div>
        </div>

        {/* Menu mobile déroulant */}
        {openMenu && (
          <div className="md:hidden border-t border-ajc-blue/10 bg-white">
            <div className="px-4 py-3 space-y-1">
              {navMain.map(n => (
                <button
                  key={n.key}
                  onClick={() => { setPage(n.key); setOpenMenu(false); }}
                  className={"w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium flex items-center gap-3 " +
                    (page === n.key ? "bg-ajc-blue/10 text-ajc-blue" : "text-ajc-ink hover:bg-ajc-blue/5")}
                >
                  <Icon name={n.icon} size={16}/> {n.label}
                </button>
              ))}
              <div className="border-t pt-2 mt-2 space-y-1">
                <button onClick={() => { setPage("login"); setOpenMenu(false); }} className="w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium flex items-center gap-3 text-ajc-ink hover:bg-ajc-blue/5">
                  <Icon name="user" size={16}/> {t.nav.login}
                </button>
                <button onClick={() => { setPage("contact"); setOpenMenu(false); }} className="w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium flex items-center gap-3 text-ajc-ink hover:bg-ajc-blue/5">
                  <Icon name="mail" size={16}/> {t.nav.contact}
                </button>
                <button onClick={() => setLang(lang === "fr" ? "en" : "fr")} className="w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium flex items-center gap-3 text-ajc-ink hover:bg-ajc-blue/5">
                  <Icon name="globe" size={16}/> {lang === "fr" ? "English" : "Français"}
                </button>
              </div>
            </div>
          </div>
        )}
      </header>

      <main className="flex-1 pb-tabs">{children}</main>

      {/* Sceau doré — devise Saint Camille */}
      {page === "home" && (
        <div className="relative -mt-8 mb-0 flex justify-center px-4 z-20">
          <div className="relative bg-gradient-to-br from-ajc-gold to-ajc-gold2 text-ajc-blueDk rounded-2xl px-8 md:px-12 py-5 md:py-6 shadow-cardHover border border-ajc-gold2/40 max-w-2xl w-full">
            {/* Coins décoratifs */}
            <div className="absolute top-2 left-2 w-3 h-3 border-t-2 border-l-2 border-ajc-blueDk/40"></div>
            <div className="absolute top-2 right-2 w-3 h-3 border-t-2 border-r-2 border-ajc-blueDk/40"></div>
            <div className="absolute bottom-2 left-2 w-3 h-3 border-b-2 border-l-2 border-ajc-blueDk/40"></div>
            <div className="absolute bottom-2 right-2 w-3 h-3 border-b-2 border-r-2 border-ajc-blueDk/40"></div>
            <div className="text-center">
              <div className="flex items-center justify-center gap-3 mb-1.5">
                <svg width="14" height="14" viewBox="0 0 14 14" className="opacity-70">
                  <rect x="5.5" y="1" width="3" height="12" rx="0.5" fill="currentColor"/>
                  <rect x="1" y="5.5" width="12" height="3" rx="0.5" fill="currentColor"/>
                </svg>
                <div className="text-[10px] uppercase tracking-[0.3em] font-bold opacity-70">Devise des Anciens Juvénistes de Saint Camille</div>
                <svg width="14" height="14" viewBox="0 0 14 14" className="opacity-70">
                  <rect x="5.5" y="1" width="3" height="12" rx="0.5" fill="currentColor"/>
                  <rect x="1" y="5.5" width="12" height="3" rx="0.5" fill="currentColor"/>
                </svg>
              </div>
              <div className="font-display italic text-2xl md:text-3xl font-semibold tracking-wide">
                Responsabilité · Abnégation · Excellence
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className={"bg-ajc-blueDk text-white/80 " + (page === "home" ? "pt-16" : "mt-12")}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
            <div className="flex items-center gap-3">
              <LogoAJC size={48}/>
            </div>
            <p className="mt-4 text-sm leading-relaxed max-w-md text-white/70">
              {t.appSub}. Une mémoire vivante au service de la fraternité, du réseautage et de la transmission entre générations.
            </p>
            <div className="mt-4 font-display italic text-ajc-gold">{t.motto}</div>
          </div>
          <div>
            <div className="text-xs uppercase tracking-wider font-semibold text-ajc-gold mb-3">Navigation</div>
            <ul className="space-y-2 text-sm">
              {navMain.map(n => <li key={n.key}><button onClick={() => setPage(n.key)} className="hover:text-white">{n.label}</button></li>)}
              <li><button onClick={() => setPage("contact")} className="hover:text-white">{t.nav.contact}</button></li>
              <li><button onClick={() => setPage("privacy")} className="hover:text-white">{t.nav.privacy}</button></li>
            </ul>
          </div>
          <div>
            <div className="text-xs uppercase tracking-wider font-semibold text-ajc-gold mb-3">Contact</div>
            <ul className="space-y-2 text-sm text-white/70">
              <li>Bureau AJC — IPSCA</li>
              <li>Ouagadougou, Burkina Faso</li>
              <li>contact@ajc-saintcamille.org</li>
            </ul>
          </div>
        </div>
        <div className="border-t border-white/10 py-4 text-center text-xs text-white/50">
          © 2026 Association des Anciens Juvénistes de Saint Camille — Prototype de démonstration
        </div>
      </footer>

      {/* Bottom tabs (mobile only) */}
      <BottomTabs page={page} setPage={setPage} t={t} role={role}/>
    </div>
  );
};

const RoleSwitch = ({ role, setRole, t }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
  }, []);
  const acc = AJC.DEMO_ACCOUNTS[role];
  const tones = { admin: "bg-ajc-red/10 text-ajc-red", member: "bg-ajc-green/15 text-emerald-800", visitor: "bg-gray-100 text-gray-700" };
  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen(!open)}
        className={"flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold border " + tones[role] + " border-current/20"}
      >
        <Icon name="user" size={14}/>
        <span className="hidden sm:inline">{t.roles[role]}</span>
        <Icon name="chevronDown" size={14}/>
      </button>
      {open && (
        <div className="absolute right-0 mt-2 w-72 bg-white rounded-xl shadow-cardHover border border-ajc-blue/10 overflow-hidden z-40">
          <div className="px-4 py-3 bg-ajc-blue/5 border-b border-ajc-blue/10">
            <div className="text-[11px] uppercase tracking-wider text-ajc-mute font-semibold">{t.login.pick}</div>
            <div className="text-sm font-medium text-ajc-blueDk mt-0.5">{acc.label}</div>
          </div>
          <div className="p-2">
            {["admin", "member", "visitor"].map(r => (
              <button key={r} onClick={() => { setRole(r); setOpen(false); }}
                className={"w-full text-left px-3 py-2.5 rounded-lg flex items-center gap-3 text-sm hover:bg-ajc-blue/5 " +
                  (role === r ? "bg-ajc-blue/10" : "")}>
                <div className={"w-8 h-8 rounded-full flex items-center justify-center " + tones[r]}>
                  <Icon name="user" size={14}/>
                </div>
                <div className="flex-1">
                  <div className="font-semibold text-ajc-ink">{t.roles[r]}</div>
                  <div className="text-[11px] text-ajc-mute">{AJC.DEMO_ACCOUNTS[r].label}</div>
                </div>
                {role === r && <Icon name="check" size={16} className="text-ajc-green"/>}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const BottomTabs = ({ page, setPage, t, role }) => {
  const tabs = [
    { key: "home",   icon: "home",      label: t.nav.home },
    { key: "trombi", icon: "users",     label: t.nav.trombi,  hidden: role === "visitor" },
    { key: "opps",   icon: "briefcase", label: t.nav.opps },
    { key: "dash",   icon: "chart",     label: t.nav.admin,   hidden: role !== "admin" },
    { key: "about",  icon: "book",      label: t.nav.about,   hidden: role === "admin" },
    { key: "login",  icon: "user",      label: t.nav.login,   hidden: role !== "visitor" }
  ].filter(x => !x.hidden).slice(0, 5);

  return (
    <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-ajc-blue/10 z-30" style={{ paddingBottom: "env(safe-area-inset-bottom)" }}>
      <div className="grid" style={{ gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }}>
        {tabs.map(tab => (
          <button key={tab.key} onClick={() => setPage(tab.key)}
            className={"py-2.5 flex flex-col items-center gap-1 transition " + (page === tab.key ? "text-ajc-blue" : "text-ajc-mute")}>
            <div className={"w-9 h-9 rounded-full flex items-center justify-center " + (page === tab.key ? "bg-ajc-blue/10" : "")}>
              <Icon name={tab.icon} size={18}/>
            </div>
            <span className={"text-[10px] font-medium " + (page === tab.key ? "font-semibold" : "")}>{tab.label}</span>
          </button>
        ))}
      </div>
    </nav>
  );
};

Object.assign(window, { Layout, RoleSwitch, BottomTabs });