// ────────────────────────────────────────────────────────────────────
// KARE AW · AdminLayout chrome (Topbar 60 + Sidebar 240)
// ────────────────────────────────────────────────────────────────────

const KareAdminLogo = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: 26, height: 26, borderRadius: 5,
      background: 'var(--primary)',
      display: 'grid', placeItems: 'center',
      fontFamily: 'Inter', fontWeight: 700, fontSize: 13, color: '#fff',
      letterSpacing: '-0.02em',
    }}>K</div>
    <div style={{
      fontFamily: 'Inter', fontWeight: 700, fontSize: 16,
      letterSpacing: '-0.02em', color: 'var(--n-900)',
    }}>KARE</div>
    <div style={{
      padding: '2px 6px',
      border: '1px solid var(--n-300)',
      borderRadius: 3,
      fontFamily: 'Inter', fontSize: 10, fontWeight: 600,
      letterSpacing: '0.05em', color: 'var(--n-700)',
      textTransform: 'uppercase',
    }}>Admin</div>
  </div>
);

// Inline SVG icons — tiny, stroked
const icon = (path, size = 16) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{path}</svg>
);
const Icons = {
  dashboard: icon(<><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>),
  users: icon(<><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2.2"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><path d="M15 20c0-2 1.5-3.5 4-3.5"/></>),
  product: icon(<><path d="M4 7l8-4 8 4-8 4-8-4z"/><path d="M4 12l8 4 8-4"/><path d="M4 17l8 4 8-4"/></>),
  voucher: icon(<><path d="M3 8v8a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2z"/><path d="M8 12h8M8 15h5"/></>),
  settlement: icon(<><path d="M3 6h18M3 12h18M3 18h12"/><circle cx="19" cy="18" r="2"/></>),
  channel: icon(<><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7l3 9M16 7l-3 9"/></>),
  booking: icon(<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>),
  physical: icon(<><rect x="4" y="7" width="16" height="13" rx="1.5"/><path d="M8 11h8M8 15h5"/><path d="M9 7V4h6v3"/></>),
  support: icon(<><path d="M4 12a8 8 0 1116 0v4a2 2 0 01-2 2h-1v-6h3"/><path d="M4 12v4a2 2 0 002 2h1v-6H4"/></>),
  promo: icon(<><path d="M4 8l8-5 8 5v8l-8 5-8-5V8z"/><path d="M12 3v18"/></>),
  settings: icon(<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-1.8-.3 1.6 1.6 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.6 1.6 0 00-1-1.5 1.6 1.6 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.6 1.6 0 00.3-1.8 1.6 1.6 0 00-1.5-1H3a2 2 0 110-4h.1a1.6 1.6 0 001.5-1 1.6 1.6 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9a1.6 1.6 0 001-1.5V3a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8V9a1.6 1.6 0 001.5 1H21a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z"/></>),
  ops: icon(<><path d="M4 6h16M4 12h16M4 18h10"/><circle cx="18" cy="18" r="2"/></>),
  bell: icon(<><path d="M6 10a6 6 0 1112 0c0 4 2 5 2 5H4s2-1 2-5z"/><path d="M10 20a2 2 0 004 0"/></>),
  chevron: icon(<><path d="M6 9l6 6 6-6"/></>, 14),
  search: icon(<><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>, 14),
  arrowUp: icon(<><path d="M12 19V5M5 12l7-7 7 7"/></>, 12),
  arrowDown: icon(<><path d="M12 5v14M5 12l7 7 7-7"/></>, 12),
  refresh: icon(<><path d="M4 4v6h6"/><path d="M20 20v-6h-6"/><path d="M4 10a8 8 0 0114-4M20 14a8 8 0 01-14 4"/></>, 14),
  external: icon(<><path d="M7 17L17 7"/><path d="M8 7h9v9"/></>, 12),
  warn: icon(<><path d="M12 4l10 17H2L12 4z"/><path d="M12 10v5M12 18v.5"/></>, 14),
  err: icon(<><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 16v.5"/></>, 14),
  info: icon(<><circle cx="12" cy="12" r="9"/><path d="M12 10v7M12 7v.5"/></>, 14),
};

const SIDEBAR_GROUPS = [
  { id: 'dashboard', label: '대시보드', icon: 'dashboard', href: 'AW-002' },
  { id: 'member',    label: '회원·파트너 관리', icon: 'users', href: 'AW-005' },
  { id: 'product',   label: '상품 관리', icon: 'product', href: 'AW-010' },
  { id: 'voucher',   label: '바우처 관리', icon: 'voucher', href: 'AW-015' },
  { id: 'settle',    label: '정산 관리', icon: 'settlement', href: 'AW-018' },
  { id: 'channel',   label: '채널 관리', icon: 'channel', href: 'AW-022' },
  { id: 'booking',   label: '예약 관리', icon: 'booking', href: 'AW-025' },
  { id: 'physical',  label: '실물 상품', icon: 'physical', href: 'AW-028' },
  { id: 'support',   label: '고객 지원', icon: 'support', href: 'AW-032' },
  { id: 'promo',     label: '프로모션', icon: 'promo', href: 'AW-034' },
  { id: 'system',    label: '시스템 설정', icon: 'settings', href: 'AW-036' },
  { id: 'ops',       label: '운영 도구', icon: 'ops', href: 'AW-038' },
];

const Topbar = ({ adminEmail = 'ops.kim@kare.co.kr' }) => (
  <div style={{
    height: 60,
    background: '#fff',
    borderBottom: '1px solid var(--n-200)',
    display: 'flex',
    alignItems: 'center',
    padding: '0 24px',
    flexShrink: 0,
  }}>
    <div style={{ width: 216 }}><KareAdminLogo /></div>

    {/* center search */}
    <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
      <div style={{
        width: 380, height: 34, background: 'var(--n-100)',
        borderRadius: 6, display: 'flex', alignItems: 'center',
        padding: '0 10px', color: 'var(--n-500)', gap: 8,
      }}>
        {Icons.search}
        <span style={{ fontSize: 13, color: 'var(--n-500)' }}>검색 · Voucher / Partner / Booking ID…</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 3 }}>
          <kbd style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
            padding: '1px 5px', border: '1px solid var(--n-300)',
            borderRadius: 3, background: '#fff', color: 'var(--n-500)',
          }}>⌘</kbd>
          <kbd style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
            padding: '1px 5px', border: '1px solid var(--n-300)',
            borderRadius: 3, background: '#fff', color: 'var(--n-500)',
          }}>K</kbd>
        </div>
      </div>
    </div>

    {/* right: email / bell / profile */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <div style={{
        position: 'relative',
        width: 34, height: 34, borderRadius: 6,
        display: 'grid', placeItems: 'center', color: 'var(--n-700)',
        background: 'var(--n-100)',
      }}>
        {Icons.bell}
        <div style={{
          position: 'absolute', top: 6, right: 7,
          width: 7, height: 7, borderRadius: '50%',
          background: 'var(--error)', border: '1.5px solid var(--n-100)',
        }}/>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
        <div style={{
          width: 30, height: 30, borderRadius: '50%',
          background: 'var(--primary)', color: '#fff',
          fontFamily: 'Inter', fontWeight: 600, fontSize: 12,
          display: 'grid', placeItems: 'center',
        }}>OK</div>
        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--n-700)' }}>{adminEmail}</div>
        <div style={{ color: 'var(--n-500)' }}>{Icons.chevron}</div>
      </div>
    </div>
  </div>
);

const Sidebar = ({ activeId = 'dashboard' }) => (
  <div style={{
    width: 240,
    background: '#fff',
    borderRight: '1px solid var(--n-200)',
    padding: '12px 0',
    flexShrink: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  }}>
    {SIDEBAR_GROUPS.map(g => {
      const active = g.id === activeId;
      return (
        <div key={g.id} style={{
          position: 'relative',
          margin: '0 8px',
          padding: '9px 12px 9px 14px',
          borderRadius: 6,
          display: 'flex', alignItems: 'center', gap: 10,
          background: active ? 'var(--primary-hover-bg)' : 'transparent',
          color: active ? 'var(--primary-pressed)' : 'var(--n-700)',
          fontFamily: 'Inter',
          fontSize: 13,
          fontWeight: active ? 600 : 500,
          cursor: 'pointer',
        }}>
          {active && (
            <div style={{
              position: 'absolute',
              left: -8, top: 6, bottom: 6,
              width: 3, borderRadius: 2,
              background: 'var(--primary)',
            }}/>
          )}
          <div style={{ color: active ? 'var(--primary)' : 'var(--n-500)', display: 'flex' }}>
            {Icons[g.icon]}
          </div>
          <div>{g.label}</div>
          {g.id === 'support' && (
            <div style={{
              marginLeft: 'auto',
              fontSize: 10,
              fontWeight: 700,
              color: '#fff',
              background: 'var(--error)',
              padding: '1px 5px',
              borderRadius: 9,
              fontFamily: 'Inter',
            }}>3</div>
          )}
        </div>
      );
    })}

    <div style={{ flex: 1 }}/>
    <div style={{
      margin: '8px 16px 0',
      paddingTop: 12,
      borderTop: '1px solid var(--n-200)',
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 10,
      color: 'var(--n-500)',
      lineHeight: 1.6,
      letterSpacing: '0.02em',
    }}>
      <div>env · prod-kr</div>
      <div>build · 2026.04.24-a7f3</div>
      <div>status · <span style={{ color: 'var(--success)' }}>● operational</span></div>
    </div>
  </div>
);

const AdminLayout = ({ activeId, children, pageBg = 'var(--n-100)' }) => (
  <div style={{
    width: '100%',
    height: '100%',
    minHeight: 900,
    background: '#fff',
    display: 'flex',
    flexDirection: 'column',
    fontFamily: '"Pretendard", "Inter", system-ui, sans-serif',
    color: 'var(--n-900)',
  }}>
    <Topbar />
    <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
      <Sidebar activeId={activeId}/>
      <div style={{
        flex: 1,
        background: pageBg,
        padding: 32,
        minWidth: 0,
      }}>
        {children}
      </div>
    </div>
  </div>
);

Object.assign(window, { AdminLayout, Topbar, Sidebar, Icons, KareAdminLogo });