// Sidebar + topbar layout

const NAV = [
{ id: 'dashboard', label: '대시보드', icon: 'dashboard' },
{ id: 'biz-group', label: '사업자/매장', icon: 'building', children: [
  { id: 'businesses', label: '사업자 관리' },
  { id: 'stores', label: '매장 관리' }]
},
{ id: 'approvals', label: '승인 관리', icon: 'checkCircle', badge: 6 },
{ id: 'orders', label: '주문/매출', icon: 'cart' },
{ id: 'settlements', label: '정산 관리', icon: 'won' },
{ id: 'members', label: '회원 관리', icon: 'user' },
{ id: 'reviews', label: '리뷰 관리', icon: 'star' },
{ id: 'admins', label: '관리자 관리', icon: 'users' },
{ id: 'service-group', label: '서비스 관리', icon: 'settings', children: [
  { id: 'svc-categories', label: '카테고리' },
  { id: 'svc-banners', label: '배너/공지' },
  { id: 'svc-policies', label: '약관/FAQ' }]
}];


const Sidebar = ({ route, setRoute }) => {
  const [openGroup, setOpenGroup] = React.useState(() => {
    if (route.startsWith('svc')) return 'service-group';
    if (['businesses', 'stores'].includes(route)) return 'biz-group';
    return 'biz-group';
  });
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="logo">Y</div>
        <div className="name">냠냠픽업 Admin<small>냠냠픽업 운영관리</small></div>
      </div>
      <nav className="nav">
        {NAV.map((item) => {
          if (item.children) {
            const isExpanded = openGroup === item.id;
            const childActive = item.children.some((c) => c.id === route);
            return (
              <div key={item.id}>
                <button
                  className={`nav-item ${isExpanded ? 'expanded' : ''}`}
                  onClick={() => setOpenGroup(isExpanded ? null : item.id)}
                  style={childActive && !isExpanded ? { color: 'white' } : {}}>
                  
                  <Icon name={item.icon} size={18} />
                  <span>{item.label}</span>
                  <Icon name="chevDown" size={14} className="chev" />
                </button>
                {isExpanded &&
                <div className="nav-sub">
                    {item.children.map((c) =>
                  <button key={c.id} className={route === c.id ? 'active' : ''} onClick={() => setRoute(c.id)}>{c.label}</button>
                  )}
                  </div>
                }
              </div>);

          }
          return (
            <button key={item.id} className={`nav-item ${route === item.id ? 'active' : ''}`} onClick={() => setRoute(item.id)}>
              <Icon name={item.icon} size={18} />
              <span>{item.label}</span>
              {item.badge &&
              <span style={{
                marginLeft: 'auto',
                background: route === item.id ? 'rgba(255,255,255,0.25)' : 'var(--brand)',
                color: 'white',
                fontSize: 11, fontWeight: 700,
                padding: '1px 7px', borderRadius: 999
              }}>{item.badge}</span>
              }
            </button>);

        })}
      </nav>
      <div className="sidebar-footer">
        <div className="env"><span className="dot"></span>운영서버 · v1.4.2</div>
        <div style={{ marginTop: 4, opacity: 0.5 }}>© 2026 YumYum</div>
      </div>
    </aside>);

};

const ROUTE_TITLES = {
  dashboard: '대시보드',
  businesses: '사업자 관리',
  stores: '매장 관리',
  approvals: '승인 관리',
  orders: '주문/매출',
  settlements: '정산 관리',
  members: '회원 관리',
  reviews: '리뷰 관리',
  admins: '관리자 관리',
  'svc-categories': '서비스 관리 · 카테고리',
  'svc-banners': '서비스 관리 · 배너/공지',
  'svc-policies': '서비스 관리 · 약관/FAQ'
};

const Topbar = ({ route, session, onLogout }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);
  const name = session?.name || '관리자';
  return (
<header className="topbar">
    <div className="crumbs">
      <span>운영관리</span>
      <Icon name="chevRight" size={14} />
      <span className="now">{ROUTE_TITLES[route] || ''}</span>
    </div>
    <div className="spacer"></div>
    <div className="search">
      <Icon name="search" size={16} />
      <input placeholder="매장, 주문번호, 회원으로 검색" />
      <span style={{ fontSize: 11, padding: '2px 5px', border: '1px solid var(--border)', borderRadius: 4, color: 'var(--text-3)' }}>⌘K</span>
    </div>
    <button className="iconbtn"><Icon name="refresh" size={18} /></button>
    <button className="iconbtn"><Icon name="bell" size={18} /><span className="badge"></span></button>
    <div className="kbd-divider"></div>
    <div className="me" ref={ref} onClick={() => setOpen(!open)} style={{ cursor: 'pointer', position: 'relative' }}>
      <Avatar name={name[0]} tone="brand" size={30} />
      <div className="meta">
        <div className="role">슈퍼관리자</div>
        <div className="who">{name}</div>
      </div>
      <Icon name="chevDown" size={14} />
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 6px)', right: 0,
          background: 'var(--color-bg-base)',
          border: '1px solid var(--color-line-normal)',
          borderRadius: 'var(--radius-3)',
          boxShadow: 'var(--shadow-normal-medium, 0 8px 24px rgba(0,0,0,0.08))',
          minWidth: 220, padding: 6, zIndex: 20,
        }}>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--color-line-normal)' }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{name}</div>
            <div style={{ fontSize: 12, color: 'var(--color-fg-alt)' }}>{session?.email || ''}</div>
          </div>
          <button onClick={(e) => { e.stopPropagation(); onLogout && onLogout(); }} style={{
            width: '100%', padding: '10px 12px', textAlign: 'left',
            borderRadius: 6, fontSize: 13, fontWeight: 500,
            color: 'var(--b-red-base, #E52222)',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--b-surface-strong-l)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
          >로그아웃</button>
        </div>
      )}
    </div>
  </header>);
};


Object.assign(window, { Sidebar, Topbar, ROUTE_TITLES });