// LINKONA prototype — desktop app shell + role switcher.
(function () {
  const { Logo, Card, Badge, Avatar, ProgressBar } = window.LINKONADesignSystem_465a88;
  const { Icon } = window;
  const MARK = 'assets/linkona-mark.png';

  // ---- Role switcher (prototype affordance) ----
  const ROLES = [
    { id: 'advertiser', label: '광고주' },
    { id: 'influencer', label: '인플루언서' },
    { id: 'admin', label: '관리자' },
  ];
  function RoleSwitcher({ role, onRole }) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--ink-100)', padding: 4, borderRadius: 'var(--r-full)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-muted)', padding: '0 6px 0 8px' }}>DEMO</span>
        {ROLES.map((r) => {
          const on = r.id === role;
          return (
            <button key={r.id} onClick={() => onRole(r.id)} style={{
              border: 'none', cursor: 'pointer', padding: '6px 13px', borderRadius: 'var(--r-full)',
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: on ? 600 : 500,
              background: on ? 'var(--bg-surface)' : 'transparent',
              color: on ? 'var(--text-primary)' : 'var(--text-secondary)',
              boxShadow: on ? 'var(--shadow-sm)' : 'none', transition: 'all var(--dur-base) var(--ease-out)',
            }}>{r.label}</button>
          );
        })}
      </div>
    );
  }

  // ---- Desktop sidebar shell ----
  function DeskShell({ nav, active, onNav, title, badge, headerRight, roleSwitcher, account, footer, children }) {
    return (
      <div style={{ display: 'flex', height: '100vh', background: 'var(--bg-page)', overflow: 'hidden' }}>
        <aside style={{ width: 240, flexShrink: 0, background: 'var(--bg-surface)', borderRight: '1px solid var(--border-default)', display: 'flex', flexDirection: 'column', padding: '20px 16px' }}>
          <div style={{ padding: '4px 8px 22px' }}><Logo variant="lockup" size={25} markSrc={MARK} /></div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            {nav.map((n) => {
              const on = n.id === active;
              return (
                <button key={n.id} className="lk-navbtn" onClick={() => onNav(n.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', border: 'none', cursor: 'pointer',
                  borderRadius: 'var(--r-md)', textAlign: 'left', fontSize: 14, fontWeight: on ? 600 : 500, fontFamily: 'var(--font-sans)',
                  background: on ? 'var(--blue-50)' : 'transparent', color: on ? 'var(--blue-700)' : 'var(--text-secondary)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }}>
                  <Icon name={n.icon} size={18} color={on ? 'var(--primary)' : 'var(--ink-400)'} />
                  <span style={{ flex: 1 }}>{n.label}</span>
                  {n.count != null && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: on ? 'var(--primary)' : 'var(--text-muted)', background: on ? 'var(--blue-100)' : 'var(--ink-100)', padding: '1px 7px', borderRadius: 'var(--r-full)' }}>{n.count}</span>}
                </button>
              );
            })}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
            {footer}
            {account && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 8px', borderTop: '1px solid var(--border-subtle)' }}>
                <Avatar name={account.name} size={34} ring status="online" />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{account.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{account.sub}</div>
                </div>
              </div>
            )}
          </div>
        </aside>
        <main style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <header style={{ height: 62, flexShrink: 0, borderBottom: '1px solid var(--border-default)', background: 'rgba(255,255,255,.72)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 28px', zIndex: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, whiteSpace: 'nowrap' }}>{title}</span>
              {badge}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              {headerRight}
              {roleSwitcher}
            </div>
          </header>
          <div style={{ flex: 1, overflowY: 'auto' }}>
            <div style={{ padding: '30px 34px', maxWidth: 1180, margin: '0 auto' }}>{children}</div>
          </div>
        </main>
      </div>
    );
  }

  Object.assign(window, { RoleSwitcher, DeskShell, ROLES, LK_MARK: MARK });
})();