/**
 * 사이드바 + 탑바 (끼니저 어드민)
 * 색상 테마 토글 가능
 */

const SIDEBAR_THEMES = {
  'dark-green': {
    name: '다크 그린',
    bg: '#0f2318', hover: '#1a3325', text: '#86b09a',
    active: '#4ade80', activeText: '#fff',
    submenuBg: '#0a1a10', submenuHover: '#061109',
    border: 'rgba(255,255,255,0.07)',
    accentLine: ['#16a34a', '#0d9488'],
    tone: 'dark',
  },
  'pure-dark': {
    name: '순 다크',
    bg: '#1a1d23', hover: '#2a2e36', text: '#9ca3af',
    active: '#4ade80', activeText: '#fff',
    submenuBg: '#13161b', submenuHover: '#0d0f13',
    border: 'rgba(255,255,255,0.06)',
    accentLine: ['#16a34a', '#0d9488'],
    tone: 'dark',
  },
  'navy': {
    name: '네이비',
    bg: '#0f172a', hover: '#1e293b', text: '#94a3b8',
    active: '#22d3ee', activeText: '#fff',
    submenuBg: '#0a1020', submenuHover: '#060914',
    border: 'rgba(255,255,255,0.07)',
    accentLine: ['#16a34a', '#22d3ee'],
    tone: 'dark',
  },
  'light': {
    name: '라이트',
    bg: '#ffffff', hover: '#f1f5f9', text: '#475569',
    active: '#16a34a', activeText: '#16a34a',
    submenuBg: '#f8fafc', submenuHover: '#eef2f7',
    border: '#e2e8f0',
    accentLine: ['#16a34a', '#0d9488'],
    tone: 'light',
  },
};

const NAV_ITEMS = [
  { key: 'dashboard', label: '대시보드', icon: '◼' },
  { key: 'onbab', label: '배송 관리', icon: '🍱', children: [
    { key: 'company-list', label: '업체 리스트' },
    { key: 'delivery', label: '배송 순서' },
    { key: 'memo', label: '메모 관리' },
    { key: 'diet', label: '지점용 식단' },
    { key: 'business-diet', label: '업체용 식단' },
    { key: 'products', label: '메뉴 관리' },
  ]},
  { key: 'sales', label: '매출 관리', icon: '📊', children: [
    { key: 'sales-monthly', label: '월별 매출' },
    { key: 'branch-stats', label: '지점별 통계' },
  ]},
  { key: 'hr', label: 'HR 관리', icon: '👥', children: [
    { key: 'employee-list', label: '직원 목록' },
    { key: 'attendance', label: '출퇴근 기록' },
    { key: 'schedule', label: '스케줄 캘린더' },
    { key: 'payroll', label: '급여 관리' },
  ]},
  { key: 'baro', label: '바로빌', icon: '📄', children: [
    { key: 'tax-invoice', label: '세금계산서' },
    { key: 'cash-bill', label: '현금영수증' },
  ]},
];

/* 끼니저 로고 */
const KinigerLogo = ({ size=32, light=false }) => (
  <svg width={size} height={size} viewBox="0 0 52 52">
    <rect width="52" height="52" rx="12" fill={light ? '#16a34a' : '#16a34a'}/>
    <rect x="10" y="18" width="32" height="3" rx="1.5" fill="white" opacity="0.95"/>
    <path d="M12 24 Q26 36 40 24" stroke="white" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
    <rect x="18" y="38" width="16" height="3" rx="1.5" fill="white" opacity="0.85"/>
  </svg>
);

const Sidebar = ({ active='dashboard', onNavigate=()=>{}, themeKey='dark-green' }) => {
  const T = SIDEBAR_THEMES[themeKey] || SIDEBAR_THEMES['dark-green'];
  const isLight = T.tone === 'light';
  const [expanded, setExpanded] = React.useState({ onbab:true, hr:false, sales:false, baro:false });
  const toggle = k => setExpanded(p=>({...p,[k]:!p[k]}));

  return <div style={{ width:210, background:T.bg, height:'100%', display:'flex', flexDirection:'column', flexShrink:0, overflowY:'auto', overflowX:'hidden', borderRight: isLight ? `1px solid ${T.border}` : '1px solid rgba(0,0,0,0.15)' }}>
    {/* Top accent */}
    <div style={{ height:3, background:`linear-gradient(90deg, ${T.accentLine[0]}, ${T.accentLine[1]})`, flexShrink:0 }}/>
    {/* Logo */}
    <div style={{ padding:'18px 16px 14px', borderBottom:`1px solid ${T.border}` }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <KinigerLogo size={32}/>
        <div>
          <div style={{ color: isLight ? '#0f172a' : '#fff', fontSize:16, fontWeight:800, letterSpacing:'-0.5px' }}>끼니저</div>
          <div style={{ color:T.text, fontSize:10, marginTop:1, letterSpacing:'1px' }}>KINIGER · 끼니 관리 플랫폼</div>
        </div>
      </div>
    </div>
    {/* Menu */}
    <nav style={{ flex:1, padding:'8px 0' }}>
      {NAV_ITEMS.map(item => (
        <div key={item.key}>
          <div onClick={()=>item.children?toggle(item.key):onNavigate(item.key)}
            style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 16px', cursor:'pointer', fontSize:13, fontWeight:500, color: active===item.key?T.active:T.text, background: active===item.key?T.hover:'transparent', transition:'background 0.15s' }}
            onMouseEnter={e=>e.currentTarget.style.background=T.hover}
            onMouseLeave={e=>e.currentTarget.style.background=active===item.key?T.hover:'transparent'}>
            <span style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontSize:14 }}>{item.icon}</span>{item.label}
            </span>
            {item.children && <span style={{ fontSize:9, color:T.text, transform:expanded[item.key]?'rotate(90deg)':'none', transition:'transform 0.2s' }}>▶</span>}
          </div>
          {item.children && expanded[item.key] && (
            <div style={{ background:T.submenuBg }}>
              {item.children.map(child=>(
                <div key={child.key} onClick={()=>onNavigate(child.key)}
                  style={{ padding:'8px 16px 8px 36px', fontSize:12, cursor:'pointer', color:active===child.key?(isLight?T.active:'#fff'):T.text, background:active===child.key?T.submenuHover:'transparent', fontWeight:active===child.key?600:400, borderLeft:active===child.key?`2px solid ${T.active}`:'2px solid transparent', transition:'background 0.15s' }}
                  onMouseEnter={e=>e.currentTarget.style.background=T.submenuHover}
                  onMouseLeave={e=>e.currentTarget.style.background=active===child.key?T.submenuHover:'transparent'}>
                  {child.label}
                </div>
              ))}
            </div>
          )}
        </div>
      ))}
    </nav>
    {/* User */}
    <div style={{ padding:'12px 16px', borderTop:`1px solid ${T.border}`, display:'flex', alignItems:'center', gap:8 }}>
      <div style={{ width:32, height:32, borderRadius:'50%', background:isLight?'#dcfce7':'rgba(74,222,128,0.15)', border:isLight?'1px solid #bbf7d0':'1px solid rgba(74,222,128,0.3)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, fontSize:12, fontWeight:800, color:isLight?'#15803d':'#4ade80' }}>김</div>
      <div>
        <div style={{ color:isLight?'#0f172a':'#fff', fontSize:12, fontWeight:600 }}>김매니저</div>
        <div style={{ color:T.text, fontSize:10 }}>admin@kiniger.kr</div>
      </div>
    </div>
  </div>;
};

const TopBar = ({ breadcrumb=['끼니저','대시보드'], tags=[{key:'dashboard',label:'대시보드'}], activeTag='dashboard', onTagClick=()=>{} }) => (
  <div style={{ background:'#fff', borderBottom:'1px solid #e2e8f0', flexShrink:0, boxShadow:'0 1px 4px rgba(0,0,0,0.06)' }}>
    <div style={{ display:'flex', alignItems:'center', padding:'0 20px', height:50, gap:8 }}>
      <div style={{ display:'flex', alignItems:'center', gap:4, fontSize:13, color:'#64748b', flex:1 }}>
        {breadcrumb.map((b,i)=>(
          <React.Fragment key={i}>
            {i>0&&<span style={{ color:'#94a3b8', margin:'0 2px' }}>/</span>}
            <span style={{ color:i===breadcrumb.length-1?'#0f172a':'#64748b', fontWeight:i===breadcrumb.length-1?600:400 }}>{b}</span>
          </React.Fragment>
        ))}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ fontSize:12, color:'#64748b' }}>2025-05-15</span>
        <div style={{ width:30, height:30, borderRadius:'50%', background:'#f0fdf4', border:'1px solid #dcfce7', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', fontSize:11, fontWeight:800, color:'#16a34a' }}>김</div>
      </div>
    </div>
    <div style={{ display:'flex', alignItems:'center', padding:'0 20px', height:34, overflowX:'auto', borderTop:'1px solid #f1f5f9' }}>
      {tags.map(tag=>(
        <div key={tag.key} onClick={()=>onTagClick(tag.key)} style={{ display:'flex', alignItems:'center', gap:6, padding:'0 14px', height:'100%', borderRight:'1px solid #f1f5f9', background:activeTag===tag.key?'#fff':'#f1f5f9', cursor:'pointer', fontSize:12, fontWeight:activeTag===tag.key?600:400, color:activeTag===tag.key?'#16a34a':'#64748b', borderBottom:activeTag===tag.key?'2px solid #16a34a':'2px solid transparent', whiteSpace:'nowrap', flexShrink:0 }}>
          {tag.label}
          {tag.key!=='dashboard'&&<span style={{ fontSize:9, color:'#94a3b8', marginLeft:2 }}>✕</span>}
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { Sidebar, TopBar, SIDEBAR_THEMES, KinigerLogo });