/* shell.jsx — SD-0001 admin shell: dark cosmic sidebar nav + top header
   (storefront name left, signed-in email + sign out right), light paper canvas.
   Exported to window as AdminShell. */

var { Notice, Soul } = window.WiggleverseDesignSystem_94cd80 || {};

const NAV_ITEMS = [
  { id: 'home', label: 'Home', icon: 'home' },
  { id: 'products', label: 'Products', icon: 'products' },
  { id: 'orders', label: 'Orders', icon: 'cart', soon: true },
  { id: 'customers', label: 'Customers', icon: 'tag', soon: true },
  { id: 'analytics', label: 'Analytics', icon: 'gauge', soon: true },
  { id: 'settings', label: 'Settings', icon: 'gauge', soon: true },
];

function SidebarItem({ item, active, onClick }) {
  const [hover, setHover] = _shUseState(false);
  return (
    <button
      onClick={() => !item.soon && onClick(item.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      disabled={item.soon}
      style={{
        display: 'flex', alignItems: 'center', gap: '.7rem', width: '100%',
        padding: '.6rem .8rem', borderRadius: '10px', border: '1px solid transparent',
        font: 'inherit', textAlign: 'left', cursor: item.soon ? 'default' : 'pointer',
        fontFamily: 'var(--font-body)', fontSize: '.95rem', fontWeight: active ? 600 : 500,
        color: active ? 'var(--wv-starlight)' : item.soon ? 'var(--wv-starlight-55)' : 'var(--wv-starlight-78)',
        background: active ? 'var(--wv-lilac-16)' : hover && !item.soon ? 'var(--wv-lilac-08)' : 'transparent',
        borderColor: active ? 'var(--wv-lilac-32)' : 'transparent',
        transition: 'background var(--dur-fast), color var(--dur-fast)',
      }}>
      <Icon name={item.icon} size={18} stroke={active ? 1.9 : 1.6}
        style={{ color: active ? 'var(--wv-lilac)' : 'inherit' }} />
      <span style={{ flex: 1 }}>{item.label}</span>
      {item.soon && <Notice>Soon</Notice>}
    </button>
  );
}

function AdminShell({ current, onNav, storefront, children }) {
  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--surface-paper)' }}>
      {/* ---- Sidebar ---- */}
      <aside style={{
        width: 248, flexShrink: 0, position: 'sticky', top: 0, alignSelf: 'flex-start',
        height: '100vh', display: 'flex', flexDirection: 'column',
        background: 'var(--wv-midnight)',
        backgroundImage:
          'radial-gradient(1px 1px at 38px 60px, rgba(237,234,255,.5), transparent),' +
          'radial-gradient(1px 1px at 180px 130px, rgba(237,234,255,.35), transparent),' +
          'radial-gradient(1.4px 1.4px at 90px 320px, rgba(244,199,107,.45), transparent),' +
          'radial-gradient(1px 1px at 200px 460px, rgba(237,234,255,.4), transparent),' +
          'radial-gradient(1px 1px at 50px 540px, rgba(155,140,255,.5), transparent)',
        borderRight: '1px solid var(--wv-lilac-16)',
      }}>
        {/* brand lockup */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', padding: '1.25rem 1.25rem 1.1rem' }}>
          <CircleMark size={30} />
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '.98rem', color: 'var(--wv-starlight)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{storefront.name}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: '.6rem', fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--wv-starlight-55)', marginTop: '.12rem' }}>ecomm · admin</div>
          </div>
        </div>

        <nav style={{ display: 'flex', flexDirection: 'column', gap: '.2rem', padding: '0 .7rem', marginTop: '.3rem' }}>
          {NAV_ITEMS.map((it) => (
            <SidebarItem key={it.id} item={it} active={current === it.id} onClick={onNav} />
          ))}
        </nav>

        <div style={{ marginTop: 'auto', padding: '1.1rem 1.25rem 1.25rem', borderTop: '1px solid var(--wv-lilac-12)' }}>
          <Soul size="sm">Your catalog is yours — it can leave whole, any time.</Soul>
        </div>
      </aside>

      {/* ---- Main column ---- */}
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        {/* top header */}
        <header style={{
          position: 'sticky', top: 0, zIndex: 20,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '.85rem 2rem', background: 'rgba(246,244,251,.86)', backdropFilter: 'blur(10px)',
          borderBottom: '1px solid var(--paper-line)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', minWidth: 0 }}>
            <span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--st-add)', boxShadow: '0 0 0 3px rgba(31,138,91,.15)' }} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '.98rem', color: 'var(--text-on-light)', whiteSpace: 'nowrap' }}>{storefront.name}</span>
            <span style={{ fontSize: '.85rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap' }}>· live storefront</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <span style={{ fontSize: '.88rem', color: 'var(--text-on-light-soft)' }}>{storefront.email}</span>
            <button style={{
              display: 'inline-flex', alignItems: 'center', gap: '.4em', font: 'inherit',
              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.85rem',
              color: 'var(--text-on-light)', background: 'transparent',
              border: '1.5px solid var(--paper-line-strong)', borderRadius: 999,
              padding: '.4rem .9rem', cursor: 'pointer',
            }}>
              <Icon name="signout" size={15} /> Sign out
            </button>
          </div>
        </header>

        <main style={{ flex: 1, padding: '2.2rem 2rem 4rem' }}>
          <div style={{ maxWidth: 1080, margin: '0 auto' }}>
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

const { useState: _shUseState } = React;
window.AdminShell = AdminShell;
