// Skupna lupina za hotelske vloge (Hotel Admin, Receptionist, Front Desk, Hotel IT)
// Sidebar + topbar + skupni primitivi (Card, Btn, Badge, PageHeader, Table, FilterBar, StatCard, Sparkline)

const HIcon = ({name, size=18, color='currentColor'}) => {
  const p = {
    dashboard: <><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"/></>,
    calendar:  <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    bed:       <><path d="M3 19V8M3 14h18M21 14v5M3 11a3 3 0 0 1 3-3h6v6"/><circle cx="7" cy="11" r="1.5"/></>,
    users:     <><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.5-3.5 3.3-6 6.5-6s6 2.5 6.5 6"/><circle cx="17" cy="8" r="2.5"/><path d="M16 14c2.8.3 5 2.5 5.5 6"/></>,
    money:     <><circle cx="12" cy="12" r="9"/><path d="M15 9h-4a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4H9M12 7v10"/></>,
    chart:     <><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-7"/></>,
    sparkle:   <><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></>,
    cogs:      <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    cleaning:  <><path d="M9 11V4a3 3 0 0 1 6 0v7"/><path d="M5 11h14l-1.5 9a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7z"/></>,
    wrench:    <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"/></>,
    plug:      <><path d="M9 2v6M15 2v6M5 8h14v3a7 7 0 0 1-7 7 7 7 0 0 1-7-7z"/><path d="M12 18v4"/></>,
    activity:  <><path d="M3 12h4l3-8 4 16 3-8h4"/></>,
    shield:    <><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    bell:      <><path d="M18 16v-5a6 6 0 0 0-12 0v5l-2 2h16z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
    search:    <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    plus:      <><path d="M12 5v14M5 12h14"/></>,
    check:     <><path d="M5 12l5 5 9-11"/></>,
    x:         <><path d="M5 5l14 14M19 5L5 19"/></>,
    chevdown:  <><path d="M6 9l6 6 6-6"/></>,
    chevright: <><path d="M9 6l6 6-6 6"/></>,
    chevleft:  <><path d="M15 6l-6 6 6 6"/></>,
    sun:       <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></>,
    moon:      <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
    arrowup:   <><path d="M12 19V5"/><path d="M5 12l7-7 7 7"/></>,
    arrowdown: <><path d="M12 5v14"/><path d="M5 12l7 7 7-7"/></>,
    download:  <><path d="M12 3v13"/><path d="M7 12l5 5 5-5"/><path d="M4 21h16"/></>,
    filter:    <><path d="M3 4h18l-7 9v6l-4 2v-8z"/></>,
    key:       <><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9 3 3-3 3-2-2-2 2-2-2-3 3"/></>,
    door:      <><path d="M4 21V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v17"/><path d="M3 21h18"/><circle cx="15" cy="13" r="1"/></>,
    headset:   <><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="6" rx="1.5"/><rect x="17" y="13" width="4" height="6" rx="1.5"/><path d="M20 19v1a3 3 0 0 1-3 3h-3"/></>,
    chat:     <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    home:     <><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H10v7H4a1 1 0 0 1-1-1z"/></>,
    monitor:  <><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></>,
    printer:  <><rect x="6" y="3" width="12" height="6" rx="1"/><rect x="3" y="9" width="18" height="9" rx="2"/><rect x="6" y="14" width="12" height="6" rx="1"/></>,
    wifi:     <><path d="M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19.5" r="1"/></>,
    box:      <><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v9"/></>,
    flag:     <><path d="M4 22V4M4 4h13l-2 4 2 4H4"/></>,
    star:     <><path d="M12 2 15 9l7 .5-5.5 5 1.5 7L12 17.5 6 21.5l1.5-7L2 9.5 9 9z"/></>,
    eye:      <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    logout:   <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></>,
    dot:      <circle cx="12" cy="12" r="3"/>,
    calendar2: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4M7 13h2M11 13h2M15 13h2M7 17h2M11 17h2"/></>,
    fire:     <><path d="M12 2s4 4 4 8a4 4 0 0 1-8 0c0-2 1-3 1-3s-3 2-3 6a6 6 0 0 0 12 0c0-5-6-11-6-11z"/></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>{p[name]||null}</svg>;
};

function HSidebar({ items, active, onNav, collapsed, dark, brand, role, user, hotelName }) {
  const w = collapsed ? 72 : 248;
  const bg = dark ? '#1A1A1A' : '#FFFFFF';
  const border = dark ? '#2B2B2B' : '#E5E5E5';
  const fg = dark ? '#C8C8C8' : '#333';
  const muted = dark ? '#707070' : '#9A9A9A';
  return (
    <aside style={{width:w, background:bg, borderRight:`1px solid ${border}`,
      display:'flex', flexDirection:'column', position:'sticky', top:0, height:'100vh', zIndex:10, flexShrink:0,
      transition:'width 220ms cubic-bezier(.2,0,0,1)'}}>
      <div style={{padding: collapsed?'22px 0':'22px 18px 18px',
        display:'flex', alignItems:'center', gap:10, justifyContent: collapsed?'center':'flex-start',
        borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
        <img src={collapsed ? 'assets/logo-mark.svg' : (dark?'assets/logo-clickinpms-inverse.svg':'assets/logo-clickinpms.svg')} style={{height:26}}/>
      </div>
      {!collapsed && hotelName && (
        <div style={{padding:'14px 18px 8px'}}>
          <div style={{fontSize:10, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:muted, marginBottom:4}}>{role}</div>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{hotelName}</div>
        </div>
      )}
      <nav style={{padding:'8px 10px', flex:1, overflowY:'auto'}}>
        {items.map(it => {
          if (it.section) return !collapsed && <div key={'s-'+it.section} style={{padding:'14px 12px 6px', fontSize:10, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:muted}}>{it.section}</div>;
          const a = active === it.k;
          return (
            <button key={it.k} onClick={()=>onNav(it.k)} title={collapsed?it.lbl:undefined} style={{
              display:'flex', alignItems:'center', gap:12, width:'100%',
              padding: collapsed?'11px 0':'10px 12px', justifyContent: collapsed?'center':'flex-start',
              marginBottom:1, borderRadius:10, border:'none',
              background: a ? (dark?'rgba(33,150,243,.15)':'#E3F2FD') : 'transparent',
              color: a ? '#2196F3' : fg,
              fontWeight: a?600:500, fontSize:13, fontFamily:'inherit', cursor:'pointer', textAlign:'left', transition:'background 120ms',
            }}
              onMouseEnter={e=>{ if(!a) e.currentTarget.style.background = dark?'#2B2B2B':'#F5F5F5'; }}
              onMouseLeave={e=>{ if(!a) e.currentTarget.style.background = 'transparent'; }}>
              <HIcon name={it.icon} size={18} color={a?'#2196F3':muted}/>
              {!collapsed && <>
                <span style={{flex:1}}>{it.lbl}</span>
                {it.badge && <span style={{background:it.badgeColor||'#FF9800', color:'#fff', fontSize:10, fontWeight:700, padding:'2px 7px', borderRadius:999}}>{it.badge}</span>}
              </>}
            </button>
          );
        })}
      </nav>
      <div style={{padding:collapsed?'12px 0':'14px 16px', borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`,
        display:'flex', alignItems:'center', gap:10, justifyContent:collapsed?'center':'flex-start'}}>
        <div style={{width:34, height:34, borderRadius:'50%', background:'linear-gradient(135deg,#00BCD4,#2196F3)',
          color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12}}>{user?.initials||'MK'}</div>
        {!collapsed && <div style={{minWidth:0}}>
          <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{user?.name||'Marko Kranjc'}</div>
          <div style={{fontSize:11, color:muted}}>{role||'Hotel Admin'}</div>
        </div>}
      </div>
    </aside>
  );
}

function HTopbar({ dark, onToggleDark, onToggleSidebar, search, badges, hotelName }) {
  const bg = dark ? '#1A1A1A' : '#fff';
  const border = dark ? '#2B2B2B' : '#E5E5E5';
  const fg = dark ? '#E5E5E5' : '#333';
  const muted = dark ? '#9A9A9A' : '#707070';
  return (
    <header style={{height:60, borderBottom:`1px solid ${border}`, background:bg,
      display:'flex', alignItems:'center', padding:'0 24px', gap:14, position:'sticky', top:0, zIndex:9}}>
      <button onClick={onToggleSidebar} style={{background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:muted, display:'flex'}}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>
      <div style={{position:'relative', flex:1, maxWidth:420}}>
        <div style={{position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:muted}}><HIcon name="search" size={16}/></div>
        <input placeholder={search||'Iskanje rezervacij, gostov, sob…'} style={{
          width:'100%', padding:'9px 12px 9px 36px',
          background:dark?'#2B2B2B':'#F5F5F5', border:`1px solid ${dark?'#333':'transparent'}`,
          borderRadius:10, fontSize:13, fontFamily:'inherit', color:fg, outline:'none',
        }}/>
      </div>
      <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:6}}>
        <div style={{display:'flex', alignItems:'center', gap:8, padding:'6px 12px', border:`1px solid ${border}`, borderRadius:999, fontSize:12, fontWeight:600, color:muted}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#2DD164'}}/>
          {badges?.system||'Vsi sistemi delujejo'}
        </div>
        <button onClick={onToggleDark} style={{background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:fg}}>
          <HIcon name={dark?'sun':'moon'} size={18}/>
        </button>
        <button style={{background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:fg, position:'relative'}}>
          <HIcon name="bell" size={18}/>
          {badges?.notif && <span style={{position:'absolute', top:6, right:6, width:8, height:8, borderRadius:'50%', background:'#FF9800', border:`2px solid ${bg}`}}/>}
        </button>
        <a href="index.html" title="Vse vloge" style={{background:'transparent', border:`1px solid ${border}`, padding:'6px 10px', borderRadius:10, color:muted, display:'flex', alignItems:'center', gap:6, fontSize:12, fontFamily:'inherit', textDecoration:'none', cursor:'pointer'}}>
          <HIcon name="logout" size={14}/> Vloge
        </a>
      </div>
    </header>
  );
}

function HCard({ children, dark, padding=20, style={} }) {
  return <div style={{
    background: dark?'#1A1A1A':'#fff',
    border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`,
    borderRadius:16, padding,
    boxShadow: dark?'none':'0 1px 2px rgba(15,23,42,.04)',
    ...style,
  }}>{children}</div>;
}

function HBtn({ children, variant='primary', size='md', onClick, icon, dark, style={} }) {
  const base = {fontFamily:'inherit', fontWeight:600, border:'none', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:8, transition:'all 120ms', borderRadius:10, whiteSpace:'nowrap'};
  const sz = {sm:{padding:'6px 12px', fontSize:13}, md:{padding:'9px 16px', fontSize:14}, lg:{padding:'12px 22px', fontSize:15}};
  const v = {
    primary:{background:'#2196F3', color:'#fff'},
    cyan:{background:'#00BCD4', color:'#fff'},
    ghost:{background: dark?'#2B2B2B':'#fff', color: dark?'#E5E5E5':'#333', border:`1px solid ${dark?'#333':'#E5E5E5'}`},
    danger:{background:'#fff', color:'#E53935', border:'1px solid #E53935'},
    subtle:{background: dark?'rgba(33,150,243,.15)':'#E3F2FD', color:'#2196F3'},
    success:{background:'#2DD164', color:'#fff'},
  };
  return <button onClick={onClick} style={{...base, ...sz[size], ...v[variant], ...style}}>
    {icon && <HIcon name={icon} size={14}/>} {children}
  </button>;
}

function HBadge({ children, tone='neutral' }) {
  const t = {
    cyan:{bg:'#E0F7FA', fg:'#006064', dot:'#00BCD4'},
    blue:{bg:'#E3F2FD', fg:'#0D47A1', dot:'#2196F3'},
    orange:{bg:'#FFF3E0', fg:'#E65100', dot:'#FF9800'},
    success:{bg:'#E6F9EC', fg:'#117A34', dot:'#2DD164'},
    danger:{bg:'#FDECEA', fg:'#B71C1C', dot:'#E53935'},
    neutral:{bg:'#F5F5F5', fg:'#4D4D4D', dot:'#9A9A9A'},
    purple:{bg:'#F3E5F5', fg:'#4A148C', dot:'#9C27B0'},
  }[tone] || {bg:'#F5F5F5', fg:'#4D4D4D', dot:'#9A9A9A'};
  return <span style={{display:'inline-flex', alignItems:'center', gap:6, padding:'3px 9px', borderRadius:999, fontSize:11, fontWeight:600, background:t.bg, color:t.fg, whiteSpace:'nowrap'}}>
    <span style={{width:6, height:6, borderRadius:'50%', background:t.dot}}/>{children}
  </span>;
}

function HPageHeader({ title, subtitle, actions, dark, breadcrumbs }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:24}}>
    <div style={{minWidth:0}}>
      {breadcrumbs && <div style={{display:'flex', alignItems:'center', gap:6, fontSize:12, color:muted, marginBottom:8}}>
        {breadcrumbs.map((b,i)=><React.Fragment key={i}><span>{b}</span>{i<breadcrumbs.length-1 && <HIcon name="chevright" size={12}/>}</React.Fragment>)}
      </div>}
      <h1 style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, letterSpacing:'-0.015em', margin:0, color:dark?'#fff':'#1A1A1A'}}>{title}</h1>
      {subtitle && <div style={{color:muted, fontSize:14, marginTop:6, maxWidth:760}}>{subtitle}</div>}
    </div>
    {actions && <div style={{display:'flex', gap:10, flexShrink:0}}>{actions}</div>}
  </div>;
}

function HTable({ columns, rows, dark, onRowClick, compact }) {
  const muted = dark?'#9A9A9A':'#707070';
  const border = dark?'#2B2B2B':'#F0F0F0';
  return <div style={{overflow:'auto'}}>
    <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
      <thead><tr style={{background:dark?'#1A1A1A':'#FAFAFA'}}>
        {columns.map(c=><th key={c.key} style={{padding: compact?'8px 14px':'12px 18px', textAlign:c.align||'left', fontWeight:600, fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:muted, borderBottom:`1px solid ${border}`, whiteSpace:'nowrap'}}>{c.label}</th>)}
      </tr></thead>
      <tbody>{rows.map((r,i)=>
        <tr key={i} onClick={()=>onRowClick && onRowClick(r)} style={{borderBottom:`1px solid ${border}`, cursor:onRowClick?'pointer':'default', transition:'background 80ms'}}
          onMouseEnter={e=>{ if(onRowClick) e.currentTarget.style.background=dark?'#222':'#FAFAFA';}}
          onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
          {columns.map(c=><td key={c.key} style={{padding: compact?'9px 14px':'13px 18px', color:dark?'#E5E5E5':'#1A1A1A', verticalAlign:'middle', textAlign:c.align||'left'}}>{c.render?c.render(r):r[c.key]}</td>)}
        </tr>)}
      </tbody>
    </table>
  </div>;
}

function HStat({ label, value, delta, tone='blue', dark }) {
  const c = {cyan:'#00BCD4', blue:'#2196F3', orange:'#FF9800', green:'#2DD164', purple:'#9C27B0', red:'#E53935'}[tone];
  const muted = dark?'#9A9A9A':'#707070';
  const up = delta && !delta.startsWith('-');
  return <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
    <div style={{height:3, background:c}}/>
    <div style={{padding:'16px 18px'}}>
      <div style={{fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:muted}}>{label}</div>
      <div style={{display:'flex', alignItems:'flex-end', gap:10, marginTop:8}}>
        <div style={{fontFamily:'var(--font-display)', fontSize:28, fontWeight:700, letterSpacing:'-0.01em', color:dark?'#fff':'#1A1A1A', lineHeight:1}}>{value}</div>
        {delta && <div style={{fontSize:11, color:up?'#117A34':'#E53935', fontWeight:600, paddingBottom:3}}>{up?'↑':'↓'} {delta.replace('-','')}</div>}
      </div>
    </div>
  </HCard>;
}

function HSpark({ data, color='#2196F3', height=40 }) {
  const max = Math.max(...data), min = Math.min(...data), r = max-min||1, w=100;
  const pts = data.map((v,i)=>`${(i/(data.length-1))*w},${height-((v-min)/r)*(height-4)-2}`).join(' ');
  return <svg width="100%" height={height} viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" style={{display:'block'}}>
    <polygon points={`0,${height} ${pts} ${w},${height}`} fill={color} opacity=".12"/>
    <polyline points={pts} fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>
  </svg>;
}

Object.assign(window, { HIcon, HSidebar, HTopbar, HCard, HBtn, HBadge, HPageHeader, HTable, HStat, HSpark });