/* admin-shell.jsx — admin panel shell + sub-router */

function adminSection() {
  const h = (location.hash || '').replace(/^#\/?/, '');
  const parts = h.split('/'); // admin / <section>
  return parts[1] || 'dashboard';
}

function AdminApp({ onExit }) {
  const [section, setSection] = useState(adminSection());
  const [navOpen, setNavOpen] = useState(false);

  useEffect(() => {
    const onHash = () => { setSection(adminSection()); setNavOpen(false); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (id) => { location.hash = '#/admin/' + id; };
  const current = ADMIN_NAV.find(n => n.id === section) || ADMIN_NAV[0];
  const groups = [...new Set(ADMIN_NAV.map(n => n.group))];

  let screen;
  switch (section) {
    case 'analytics': screen = <AdminAnalytics />; break;
    case 'audit': screen = <AdminAudit />; break;
    case 'seiten': screen = <AdminPages go={go} />; break;
    case 'builder': screen = <AdminBuilder />; break;
    case 'wiki': screen = <AdminWiki />; break;
    case 'kurse': screen = <AdminKurse />; break;
    case 'shop': screen = <AdminShopLinks />; break;
    case 'medien': screen = <AdminMedia />; break;
    case 'uebersetzungen': screen = <AdminTranslations />; break;
    case 'rollen': screen = <AdminRoles />; break;
    default: screen = <AdminDashboard go={go} />;
  }

  const isBuilder = section === 'builder';

  return (
    <div className={`admin ${navOpen ? 'nav-open' : ''}`}>
      <aside className="asb">
        <div className="asb__brand">
          <BrandMark size={30} />
          <div className="asb__brand-txt">
            <strong>Rekruten-Schmiede</strong>
            <span className="mono">Admin · CMS</span>
          </div>
        </div>
        <nav className="asb__nav">
          {groups.map(g => (
            <div key={g} className="asb__group">
              <span className="asb__group-h">{g}</span>
              {ADMIN_NAV.filter(n => n.group === g).map(n => (
                <button key={n.id} className={`asb__link ${section === n.id ? 'is-active' : ''}`} onClick={() => go(n.id)}>
                  <Icon name={n.icon} size={18} />
                  <span>{n.label}</span>
                  {n.id === 'builder' && <span className="asb__tag mono">Baukasten</span>}
                </button>
              ))}
            </div>
          ))}
        </nav>
        <div className="asb__foot">
          <button className="asb__exit" onClick={onExit}>
            <Icon name="external" size={16} /> Zur Website
          </button>
        </div>
      </aside>

      <div className="amain">
        <header className="atop">
          <button className="atop__burger" aria-label="Menü" onClick={() => setNavOpen(o => !o)}>
            <Icon name={navOpen ? 'x' : 'menu'} size={20} />
          </button>
          <div className="atop__crumb mono">
            <span>Admin</span><Icon name="chevronRight" size={13} /><b>{current.label}</b>
          </div>
          <label className="atop__search">
            <Icon name="search" size={16} />
            <input placeholder="Suchen … (Ctrl+K)" />
          </label>
          <div className="atop__right">
            <button className="atop__icon" aria-label="Benachrichtigungen"><Icon name="bell" size={18} /><span className="atop__badge">3</span></button>
            <div className="atop__user">
              <span className="atop__avatar" style={{ background: 'var(--user-1)' }}>MK</span>
              <span className="atop__user-txt">
                <strong>M. Krause</strong>
                <span className="mono">Super Admin</span>
              </span>
            </div>
          </div>
        </header>

        <div className={`acontent ${isBuilder ? 'acontent--flush' : ''}`}>
          {screen}
        </div>
      </div>

      {navOpen && <div className="asb__scrim" onClick={() => setNavOpen(false)} />}
    </div>
  );
}

/* ---- shared admin building blocks ---- */
function AScreenHead({ title, sub, children }) {
  return (
    <div className="ascreen-head">
      <div>
        <h1>{title}</h1>
        {sub && <p className="muted">{sub}</p>}
      </div>
      {children && <div className="ascreen-head__actions">{children}</div>}
    </div>
  );
}

function StatusPill({ status }) {
  const s = STATUS_LABEL[status] || STATUS_LABEL.draft;
  return <span className={`chip chip--${s.cls === 'neutral' ? 'neutral' : s.cls}`}>{s.de}</span>;
}

function MiniBar({ data, max, tint }) {
  const m = max || Math.max(...data);
  return (
    <div className="minibar">
      {data.map((v, i) => (
        <span key={i} className="minibar__col" style={{ height: `${(v / m) * 100}%`, background: tint ? `var(--${tintHex(tint)})` : 'var(--accent)' }} />
      ))}
    </div>
  );
}
function tintHex(t) { return ({ oliv: 'tint-oliv', stahlblau: 'tint-stahl', sandgrau: 'tint-sand' })[t] || 'accent'; }

Object.assign(window, { AdminApp, AScreenHead, StatusPill, MiniBar });