// Hotel Admin PMS — strani: Dashboard, Koledar, Rezervacije, Sobe, Gostje, Cene/Kanali, Finance, Nastavitve

function HADashboard({ dark, onNav }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark}
      title="Dober dan, Marko"
      subtitle="Pregled hotela Triglav Bled · torek, 28. april 2026 · 13:42"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="download">Dnevni izkaz</HBtn>
        <HBtn variant="primary" icon="plus" onClick={()=>onNav('reservations')}>Nova rezervacija</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Zasedenost danes" value={`${HOTEL.occupancyToday}%`} delta="+4 %"/>
      <HStat dark={dark} tone="green"  label="V hiši"           value={HOTEL.inHouse} delta="+2"/>
      <HStat dark={dark} tone="cyan"   label="Prihodi"          value={HOTEL.arrivalsToday}/>
      <HStat dark={dark} tone="orange" label="Odhodi"           value={HOTEL.departuresToday}/>
      <HStat dark={dark} tone="purple" label="ADR · 30d"        value="€ 142" delta="+3,2 %"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16, marginBottom:16}}>
      <HCard dark={dark}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div>
            <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Zasedenost — naslednjih 14 dni</div>
            <div style={{fontSize:12, color:muted, marginTop:2}}>Vključuje vse kanale</div>
          </div>
          <HBtn dark={dark} variant="ghost" size="sm" onClick={()=>onNav('calendar')}>Odpri koledar →</HBtn>
        </div>
        <div style={{display:'flex', alignItems:'flex-end', gap:6, height:140}}>
          {CALENDAR_14D.map((d,i)=>{
            const isWk = d.weekday==='So'||d.weekday==='Ne';
            return <div key={i} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6, height:'100%', justifyContent:'flex-end'}}>
              <div style={{fontSize:10, fontWeight:600, color: d.occupancy>85?'#FF9800':muted}}>{d.occupancy}%</div>
              <div style={{width:'100%', height:`${d.occupancy}%`, borderRadius:'6px 6px 0 0',
                background: d.occupancy>85 ? 'linear-gradient(180deg,#FF9800,#F57C00)'
                  : isWk ? 'linear-gradient(180deg,#00BCD4,#2196F3)'
                  : (dark?'#333':'#E3F2FD'),
                minHeight:6, transition:'all 200ms'}}/>
              <div style={{fontSize:10, color:muted, fontWeight: isWk?700:400}}>{d.weekday}</div>
              <div style={{fontSize:11, fontWeight:600, color:dark?'#E5E5E5':'#1A1A1A'}}>{d.day}.</div>
            </div>;
          })}
        </div>
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Kanali — danes</div>
        {CHANNELS.slice(0,5).map((c,i)=>{
          const max = Math.max(...CHANNELS.map(x=>x.share));
          return <div key={c.name} style={{padding:'8px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
              <div style={{fontSize:13, fontWeight:500, color:dark?'#E5E5E5':'#1A1A1A'}}>{c.name}</div>
              <div style={{fontSize:13, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>{c.share}%</div>
            </div>
            <div style={{height:5, background:dark?'#2B2B2B':'#F5F5F5', borderRadius:999, overflow:'hidden'}}>
              <div style={{height:'100%', width:`${(c.share/max)*100}%`, background: c.status==='down'?'#E53935':'linear-gradient(90deg,#00BCD4,#2196F3)'}}/>
            </div>
          </div>;
        })}
      </HCard>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16}}>
      <HCard dark={dark}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Današnji prihodi</div>
          <HBtn dark={dark} variant="ghost" size="sm" onClick={()=>onNav('reservations')}>Vse →</HBtn>
        </div>
        {RESERVATIONS.filter(r=>r.checkin==='28.04.').slice(0,5).map((r,i)=>
          <div key={r.id} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none'}}>
            <div style={{width:36, height:36, borderRadius:'50%', background:'#E3F2FD', color:'#2196F3',
              display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12}}>
              {r.guest.split(' ').map(w=>w[0]).join('')}
            </div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{r.guest}</div>
                {r.vip && <HBadge tone="orange">VIP</HBadge>}
              </div>
              <div style={{fontSize:11, color:muted, marginTop:2}}>{r.id} · soba {r.room} · {r.nights} noči · {r.channel}</div>
            </div>
            <HBadge tone={r.status==='arriving'?'orange':'blue'}>{r.status==='arriving'?'Prihaja':'Potrjeno'}</HBadge>
          </div>
        )}
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Prošnje gostov</div>
        {GUEST_REQUESTS.map((g,i)=>{
          const pri = {urgent:'danger', high:'orange', med:'cyan', low:'neutral'}[g.priority];
          const stt = {open:['orange','Odprto'], in_progress:['blue','V obdelavi'], approved:['success','Odobreno']}[g.status];
          return <div key={g.id} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', gap:12, alignItems:'center'}}>
            <div style={{width:36, height:36, borderRadius:8, background:dark?'#2B2B2B':'#F5F5F5', color:dark?'#C8C8C8':'#4D4D4D', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12}}>{g.room}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13, color:dark?'#E5E5E5':'#1A1A1A'}}>{g.request}</div>
              <div style={{fontSize:11, color:muted, marginTop:2}}>{g.guest} · {g.time}</div>
            </div>
            <HBadge tone={stt[0]}>{stt[1]}</HBadge>
          </div>;
        })}
      </HCard>
    </div>
  </>;
}

function HACalendar({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  // Simple 14-day × room-type calendar grid
  return <>
    <HPageHeader dark={dark} title="Koledar zasedenosti" subtitle="14-dnevni horizont · vse sobe in tipi"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="filter">Filtri</HBtn>
        <HBtn variant="ghost" dark={dark} icon="download">Izvozi</HBtn>
        <HBtn variant="primary" icon="plus">Nova rezervacija</HBtn>
      </>}/>

    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <div style={{padding:'16px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{display:'flex', gap:6, alignItems:'center'}}>
          <HBtn variant="ghost" size="sm" dark={dark} icon="chevleft"></HBtn>
          <div style={{fontSize:14, fontWeight:600, padding:'0 12px', color:dark?'#fff':'#1A1A1A'}}>April – Maj 2026</div>
          <HBtn variant="ghost" size="sm" dark={dark} icon="chevright"></HBtn>
        </div>
        <div style={{display:'flex', gap:6}}>
          {['Dan','Teden','14d','Mesec'].map((v,i)=><button key={v} style={{padding:'6px 14px', fontSize:12, fontWeight:600, fontFamily:'inherit',
            background: i===2?'#E3F2FD':'transparent', color:i===2?'#2196F3':muted, border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, cursor:'pointer'}}>{v}</button>)}
        </div>
      </div>

      <div style={{overflowX:'auto'}}>
        <div style={{minWidth:1100, padding:'0 0 16px'}}>
          {/* Header row */}
          <div style={{display:'grid', gridTemplateColumns:`200px repeat(14,minmax(64px,1fr))`, borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, position:'sticky', top:0, background:dark?'#1A1A1A':'#fff'}}>
            <div style={{padding:'12px 16px', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:muted}}>Tip sobe</div>
            {CALENDAR_14D.map((d,i)=><div key={i} style={{padding:'10px 6px', textAlign:'center', borderLeft:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
              <div style={{fontSize:10, color: d.weekday==='So'||d.weekday==='Ne'?'#FF9800':muted, fontWeight:600}}>{d.weekday}</div>
              <div style={{fontSize:13, fontWeight:700, color:dark?'#fff':'#1A1A1A', marginTop:2}}>{d.day}</div>
            </div>)}
          </div>
          {/* Type rows */}
          {ROOM_TYPES.map(t=>(
            <div key={t.code} style={{display:'grid', gridTemplateColumns:`200px repeat(14,minmax(64px,1fr))`, borderBottom:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
              <div style={{padding:'14px 16px', display:'flex', flexDirection:'column', justifyContent:'center', borderRight:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
                <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{t.name}</div>
                <div style={{fontSize:11, color:muted}}>{t.count} sob · €{t.rate}/noč</div>
              </div>
              {CALENDAR_14D.map((d,i)=>{
                const occ = Math.round(t.count * d.occupancy/100);
                const free = t.count - occ;
                const pct = (occ/t.count)*100;
                const color = pct>90 ? '#FF9800' : pct>70 ? '#2DD164' : pct>40 ? '#2196F3' : '#9A9A9A';
                return <div key={i} style={{borderLeft:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`, padding:'8px 4px', textAlign:'center', position:'relative', cursor:'pointer'}}
                  onMouseEnter={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#FAFAFA'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <div style={{fontSize:13, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>{free}</div>
                  <div style={{fontSize:9, color:muted, marginTop:1}}>prosto</div>
                  <div style={{height:3, background:dark?'#2B2B2B':'#F0F0F0', borderRadius:999, marginTop:6}}>
                    <div style={{height:'100%', width:`${pct}%`, background:color, borderRadius:999}}/>
                  </div>
                </div>;
              })}
            </div>
          ))}
        </div>
      </div>
    </HCard>

    <div style={{display:'flex', gap:18, marginTop:16, padding:'12px 16px', background:dark?'#1A1A1A':'#fff', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:12, fontSize:12, color:muted, alignItems:'center', flexWrap:'wrap'}}>
      <span style={{fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Legenda:</span>
      <span style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:10, height:10, background:'#9A9A9A', borderRadius:2}}/>nizka zasedenost</span>
      <span style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:10, height:10, background:'#2196F3', borderRadius:2}}/>srednja</span>
      <span style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:10, height:10, background:'#2DD164', borderRadius:2}}/>visoka</span>
      <span style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:10, height:10, background:'#FF9800', borderRadius:2}}/>kritična (&gt;90%)</span>
    </div>
  </>;
}

function HAReservations({ dark }) {
  const chMap = {'Booking.com':'blue','Expedia':'orange','Airbnb':'danger','Direct':'cyan','Walk-in':'neutral','Hotelbeds':'purple'};
  const stMap = {confirmed:['blue','Potrjeno'], arriving:['orange','Prihaja'], in_house:['success','V hiši'], departed:['neutral','Odšel']};
  return <>
    <HPageHeader dark={dark} title="Rezervacije" subtitle={`${RESERVATIONS.length} rezervacij · ${RESERVATIONS.filter(r=>r.checkin==='28.04.').length} prihaja danes`}
      actions={<><HBtn variant="ghost" dark={dark} icon="download">Izvozi</HBtn><HBtn variant="primary" icon="plus">Nova rezervacija</HBtn></>}/>
    <div style={{display:'flex', gap:10, marginBottom:14, flexWrap:'wrap', alignItems:'center'}}>
      {['Vse','Prihodi danes','V hiši','Odhodi','Nepotrjene'].map((t,i)=>
        <button key={t} style={{padding:'7px 14px', fontSize:12, fontWeight:600, fontFamily:'inherit',
          background: i===0?'#2196F3':'transparent', color:i===0?'#fff':(dark?'#C8C8C8':'#4D4D4D'),
          border:`1px solid ${i===0?'#2196F3':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:999, cursor:'pointer'}}>{t}</button>
      )}
    </div>
    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <HTable dark={dark} columns={[
        {key:'id', label:'Rezervacija', render:r=><span style={{fontWeight:600, color:'#2196F3', fontFamily:'var(--font-mono)', fontSize:12}}>{r.id}</span>},
        {key:'guest', label:'Gost', render:r=><div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:32, height:32, borderRadius:'50%', background:'linear-gradient(135deg,#64B5F6,#2196F3)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{r.guest.split(' ').map(w=>w[0]).join('')}</div>
          <div><div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>{r.guest} {r.vip && <HBadge tone="orange">VIP</HBadge>}</div><div style={{fontSize:11, color:dark?'#9A9A9A':'#707070'}}>{r.email}</div></div>
        </div>},
        {key:'checkin', label:'Prihod / odhod', render:r=><div><div style={{fontWeight:600}}>{r.checkin} → {r.checkout}</div><div style={{fontSize:11, color:dark?'#9A9A9A':'#707070'}}>{r.nights} noči · {r.pax} oseb</div></div>},
        {key:'room', label:'Soba', render:r=><div><div style={{fontWeight:700, fontFamily:'var(--font-mono)'}}>{r.room}</div><div style={{fontSize:11, color:dark?'#9A9A9A':'#707070'}}>{r.type}</div></div>},
        {key:'channel', label:'Kanal', render:r=><HBadge tone={chMap[r.channel]||'neutral'}>{r.channel}</HBadge>},
        {key:'total', label:'Znesek', align:'right', render:r=><div><div style={{fontWeight:700}}>€{r.total}</div><div style={{fontSize:11, color:r.paid===r.total?'#117A34':r.paid===0?'#E53935':'#FF9800'}}>{r.paid===r.total?'plačano':r.paid===0?'neplačano':`-€${r.total-r.paid}`}</div></div>},
        {key:'status', label:'Status', render:r=><HBadge tone={stMap[r.status]?.[0]||'blue'}>{stMap[r.status]?.[1]||r.status}</HBadge>},
      ]} rows={RESERVATIONS}/>
    </HCard>
  </>;
}

function HARooms({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const stColor = {clean:'#2DD164', dirty:'#FF9800', inspected:'#00BCD4', occupied:'#2196F3', arriving:'#9C27B0', departing:'#FFB74D', out_of_order:'#E53935'};
  const stLbl   = {clean:'Čista', dirty:'Umazana', inspected:'Pregledana', occupied:'Zasedena', arriving:'Prihaja', departing:'Odhaja', out_of_order:'Izven'};
  const floors = [1,2,3,4];

  const summary = ROOM_STATUS.map(s=>({s, n: ROOMS.filter(r=>r.status===s).length}));
  return <>
    <HPageHeader dark={dark} title="Sobe" subtitle={`${ROOMS.length} sob · ${ROOMS.filter(r=>r.status==='occupied').length} zasedenih · ${ROOMS.filter(r=>r.status==='clean').length} pripravljenih`}
      actions={<><HBtn variant="ghost" dark={dark} icon="filter">Filtri</HBtn><HBtn variant="primary" icon="plus">Nova soba</HBtn></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:10, marginBottom:18}}>
      {summary.map(({s,n})=>
        <HCard key={s} dark={dark} padding={14}>
          <div style={{fontSize:11, fontWeight:600, color:muted, textTransform:'uppercase', letterSpacing:'.08em'}}>{stLbl[s]}</div>
          <div style={{display:'flex', alignItems:'baseline', gap:6, marginTop:6}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:700, color:dark?'#fff':'#1A1A1A', lineHeight:1}}>{n}</div>
            <div style={{width:8, height:8, borderRadius:'50%', background:stColor[s]}}/>
          </div>
        </HCard>
      )}
    </div>

    {floors.map(f=>(
      <HCard dark={dark} key={f} style={{marginBottom:14}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{f}. nadstropje</div>
          <div style={{fontSize:12, color:muted}}>{ROOMS.filter(r=>r.floor===f).length} sob</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(120px, 1fr))', gap:10}}>
          {ROOMS.filter(r=>r.floor===f).map(r=>(
            <div key={r.num} style={{
              padding:'12px 14px', borderRadius:10, cursor:'pointer',
              background: dark?'#2B2B2B':'#F8F9FA',
              border:`1px solid ${dark?'#333':'#E5E5E5'}`,
              borderLeft: `3px solid ${stColor[r.status]}`,
              transition:'all 120ms',
            }}
              onMouseEnter={e=>e.currentTarget.style.background=dark?'#333':'#fff'}
              onMouseLeave={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#F8F9FA'}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>{r.num}</div>
                <div style={{fontSize:10, fontWeight:700, color:muted, padding:'2px 6px', background:dark?'#1A1A1A':'#fff', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:4}}>{r.type}</div>
              </div>
              <div style={{fontSize:11, color:stColor[r.status], fontWeight:600, marginTop:6}}>{stLbl[r.status]}</div>
              {r.guest && <div style={{fontSize:11, color:dark?'#C8C8C8':'#4D4D4D', marginTop:4, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.guest}</div>}
              {r.guest && <div style={{fontSize:10, color:muted}}>{r.nights} {r.nights===1?'noč':r.nights<5?'noči':'noči'}</div>}
            </div>
          ))}
        </div>
      </HCard>
    ))}
  </>;
}

function HAGuests({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const guests = RESERVATIONS.map(r=>({...r, stays: ((r.guest.charCodeAt(0)*7)%6)+1, spend: r.total*(((r.guest.charCodeAt(0)%4)+1))})).slice(0,12);
  return <>
    <HPageHeader dark={dark} title="Gostje" subtitle="CRM baza · 1.842 unikatnih gostov · 312 ponavljajočih"
      actions={<><HBtn variant="ghost" dark={dark} icon="download">Izvozi</HBtn><HBtn variant="primary" icon="plus">Nov gost</HBtn></>}/>
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Vsi gostje" value="1.842"/>
      <HStat dark={dark} tone="cyan"   label="Vrnjeni"    value="312" delta="+18"/>
      <HStat dark={dark} tone="orange" label="VIP"        value="24"/>
      <HStat dark={dark} tone="green"  label="LTV avg"    value="€ 482"/>
    </div>
    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <HTable dark={dark} columns={[
        {key:'guest', label:'Gost', render:r=><div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:32, height:32, borderRadius:'50%', background:'linear-gradient(135deg,#64B5F6,#2196F3)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{r.guest.split(' ').map(w=>w[0]).join('')}</div>
          <div><div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>{r.guest} {r.vip && <HBadge tone="orange">VIP</HBadge>}</div><div style={{fontSize:11, color:muted}}>{r.email}</div></div>
        </div>},
        {key:'channel', label:'Vir', render:r=><HBadge tone="blue">{r.channel}</HBadge>},
        {key:'stays', label:'Bivanj', align:'center', render:r=><span style={{fontWeight:700}}>{r.stays}</span>},
        {key:'last', label:'Zadnje bivanje', render:r=><span style={{color:muted}}>{r.checkin}</span>},
        {key:'spend', label:'LTV', align:'right', render:r=><span style={{fontWeight:700}}>€{r.spend.toLocaleString('sl-SI')}</span>},
        {key:'note', label:'Opombe', render:r=><span style={{fontSize:12, color:muted}}>{r.note||<em>—</em>}</span>},
      ]} rows={guests}/>
    </HCard>
  </>;
}

function HAChannels({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const stMap = {ok:['success','Sinhronizirano'], syncing:['blue','Sinhronizira'], down:['danger','Nedosegljivo']};
  return <>
    <HPageHeader dark={dark} title="Kanali in cene" subtitle="Channel manager · sinhronizacija s portali"
      actions={<><HBtn variant="ghost" dark={dark} icon="download">Poročilo</HBtn><HBtn variant="primary" icon="plus">Dodaj kanal</HBtn></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Aktivni kanali" value={CHANNELS.filter(c=>c.status!=='down').length}/>
      <HStat dark={dark} tone="cyan"   label="Rezervacije ta teden" value={CHANNELS.reduce((s,c)=>s+c.live,0)}/>
      <HStat dark={dark} tone="green"  label="Prihodek ta mesec"   value={`€${CHANNELS.reduce((s,c)=>s+c.revenue,0).toLocaleString('sl-SI')}`} delta="+12,4 %"/>
      <HStat dark={dark} tone="orange" label="Napake (24h)"        value="3"/>
    </div>

    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <HTable dark={dark} columns={[
        {key:'name', label:'Kanal', render:c=><div style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{width:36, height:36, borderRadius:8, background:dark?'#2B2B2B':'#F5F5F5', color:dark?'#C8C8C8':'#4D4D4D', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{c.name.slice(0,2).toUpperCase()}</div>
          <div style={{fontWeight:600}}>{c.name}</div>
        </div>},
        {key:'live', label:'Aktivne rez.', align:'right', render:c=><span style={{fontWeight:700}}>{c.live}</span>},
        {key:'share', label:'Delež', render:c=><div style={{display:'flex', alignItems:'center', gap:8}}>
          <div style={{width:80, height:6, background:dark?'#2B2B2B':'#F0F0F0', borderRadius:999, overflow:'hidden'}}>
            <div style={{width:`${c.share*2}%`, height:'100%', background: c.status==='down'?'#E53935':'linear-gradient(90deg,#00BCD4,#2196F3)'}}/>
          </div>
          <span style={{fontSize:12, fontWeight:600, minWidth:32}}>{c.share}%</span>
        </div>},
        {key:'revenue', label:'Prihodek (mes.)', align:'right', render:c=><span style={{fontWeight:700}}>€{c.revenue.toLocaleString('sl-SI')}</span>},
        {key:'sync', label:'Sinhroniziran', render:c=><span style={{fontSize:12, color:muted}}>{c.sync}</span>},
        {key:'status', label:'Status', render:c=><HBadge tone={stMap[c.status][0]}>{stMap[c.status][1]}</HBadge>},
      ]} rows={CHANNELS}/>
    </HCard>

    <HCard dark={dark} style={{marginTop:16}}>
      <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Cene po tipu sobe — april 2026</div>
      <HTable dark={dark} compact columns={[
        {key:'name', label:'Tip', render:t=><span style={{fontWeight:600}}>{t.name}</span>},
        {key:'count', label:'Sob', align:'right'},
        {key:'rate', label:'Bazna cena', align:'right', render:t=><span style={{fontWeight:700}}>€{t.rate}</span>},
        {key:'wknd', label:'Vikend', align:'right', render:t=><span>€{Math.round(t.rate*1.25)}</span>},
        {key:'high', label:'Visoka sez.', align:'right', render:t=><span>€{Math.round(t.rate*1.5)}</span>},
        {key:'last', label:'Last-minute', align:'right', render:t=><span style={{color:'#FF9800'}}>€{Math.round(t.rate*0.85)}</span>},
      ]} rows={ROOM_TYPES}/>
    </HCard>
  </>;
}

function HAReports({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} title="Poročila in finance" subtitle="Mesečni in dnevni izkazi · KPI · primerjave"
      actions={<><HBtn variant="ghost" dark={dark} icon="download">PDF</HBtn><HBtn variant="primary" icon="download">Excel</HBtn></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="cyan"   label="Prihodek april"  value="€84.620" delta="+12,4 %"/>
      <HStat dark={dark} tone="blue"   label="ADR"             value="€142"  delta="+3,2 %"/>
      <HStat dark={dark} tone="green"  label="RevPAR"          value="€116"  delta="+8,1 %"/>
      <HStat dark={dark} tone="orange" label="Zasedenost 30d"  value="78,4%" delta="+4,2 pp"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:6, color:dark?'#fff':'#1A1A1A'}}>Zasedenost · 30 dni</div>
        <div style={{fontSize:12, color:muted, marginBottom:14}}>Povprečje 78,4 % · vrh 88 % (12. apr)</div>
        <div style={{height:140}}><HSpark data={OCCUPANCY_30D} color="#2196F3" height={140}/></div>
      </HCard>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:6, color:dark?'#fff':'#1A1A1A'}}>ADR · 30 dni</div>
        <div style={{fontSize:12, color:muted, marginBottom:14}}>Povprečje €142 · vrh €152</div>
        <div style={{height:140}}><HSpark data={ADR_30D} color="#00BCD4" height={140}/></div>
      </HCard>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Prihodek po tipu sobe</div>
        {ROOM_TYPES.map(t=>{
          const rev = t.count * t.rate * 22;
          const max = Math.max(...ROOM_TYPES.map(x=>x.count*x.rate*22));
          return <div key={t.code} style={{padding:'10px 0', borderTop:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{t.name} <span style={{color:muted, fontWeight:400}}>· {t.count} sob</span></div>
              <div style={{fontSize:13, fontWeight:700}}>€{rev.toLocaleString('sl-SI')}</div>
            </div>
            <div style={{height:8, background:dark?'#2B2B2B':'#F5F5F5', borderRadius:999, overflow:'hidden'}}>
              <div style={{height:'100%', width:`${(rev/max)*100}%`, background:'linear-gradient(90deg,#00BCD4,#2196F3)'}}/>
            </div>
          </div>;
        })}
      </HCard>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Poročila</div>
        {[
          ['Dnevni izkaz','Promet, plačila, zasedenost'],
          ['Mesečno poročilo','April 2026 · za upravo'],
          ['DDV obračun','Davčna evidenca FURS'],
          ['AJPES gostje','Tedensko poročilo'],
          ['Provizijski obračun','Booking.com, Expedia'],
          ['Plače / fond ur','Po oddelkih'],
        ].map(([n,d],i)=>
          <div key={n} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer'}}>
            <div style={{width:32, height:32, borderRadius:8, background:dark?'#2B2B2B':'#E3F2FD', color:'#2196F3', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="download" size={14}/></div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{n}</div>
              <div style={{fontSize:11, color:muted}}>{d}</div>
            </div>
            <HIcon name="chevright" size={14} color={muted}/>
          </div>
        )}
      </HCard>
    </div>
  </>;
}

function HASettings({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const [tab, setTab] = React.useState('hotel');
  const tabs = [['hotel','Hotel'],['rooms','Tipi sob'],['policies','Pravila'],['emails','E-mail predloge'],['integrations','Integracije'],['team','Ekipa']];
  return <>
    <HPageHeader dark={dark} title="Nastavitve hotela" subtitle="Konfiguracija hotela, sob, pravil in komunikacije"/>
    <div style={{display:'flex', gap:4, marginBottom:20, borderBottom:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, overflowX:'auto'}}>
      {tabs.map(([k,l])=>
        <button key={k} onClick={()=>setTab(k)} style={{padding:'10px 16px', border:'none', background:'transparent', fontSize:14, fontFamily:'inherit', cursor:'pointer',
          color: tab===k?'#2196F3':muted, fontWeight: tab===k?600:500,
          borderBottom: tab===k?'2px solid #2196F3':'2px solid transparent', marginBottom:-1, whiteSpace:'nowrap'}}>{l}</button>
      )}
    </div>

    {tab==='hotel' && <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Osnovni podatki</div>
        {[['Ime hotela','Hotel Triglav Bled'],['Naslov','Cesta svobode 33, 4260 Bled'],['Telefon','+386 4 579 1000'],['E-pošta','info@hoteltriglav.si'],['Davčna št.','SI12345678'],['Klasifikacija','★★★★ (4 zvezdice)']].map(([l,v])=>
          <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'10px 0', borderTop:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
            <div style={{fontSize:13, color:muted}}>{l}</div>
            <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{v}</div>
          </div>
        )}
      </HCard>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Slovenska zakonodaja</div>
        {[['FURS davčna blagajna','poslovni prostor T-001','success'],['AJPES poročanje gostov','avtomatsko ob check-in','success'],['Turistična taksa','€2,50 / odrasli / nočitev','success'],['Pravna obvestila','GDPR, ZVOP-2, ZGos','success']].map(([l,v,t])=>
          <div key={l} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderTop:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
            <HIcon name="check" size={16} color="#2DD164"/>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{l}</div>
              <div style={{fontSize:11, color:muted}}>{v}</div>
            </div>
            <HBadge tone={t}>OK</HBadge>
          </div>
        )}
      </HCard>
    </div>}

    {tab!=='hotel' && <HCard dark={dark}><div style={{fontSize:13, color:muted, padding:'20px 0', textAlign:'center'}}>Vsebina za zavihek "{tabs.find(t=>t[0]===tab)[1]}" — konfiguracija sob, pravil odpovedi, e-mail predlog ipd.</div></HCard>}
  </>;
}

// ─── PLAHTA — Gantt-style room rack calendar ─────────────────────────────────
function HAPlahta({ dark }) {
  const muted = dark ? '#9A9A9A' : '#707070';
  const border = dark ? '#2B2B2B' : '#F0F0F0';
  const cellBg = dark ? '#1A1A1A' : '#fff';

  // State: start date (default Apr 28 2026), view range, selected reservation popover
  const [startDate, setStartDate] = React.useState(new Date(2026, 3, 28));
  const [viewDays, setViewDays] = React.useState(14);
  const [selected, setSelected] = React.useState(null); // { res, cellEl }
  const [popoverPos, setPopoverPos] = React.useState({ top: 0, left: 0 });

  const ROOM_COL_W = 160;
  const CELL_W = 62;

  // Channel color map
  const CH_COLOR = {
    'Booking.com': '#2196F3',
    'Expedia':     '#FF9800',
    'Direct':      '#00BCD4',
    'Walk-in':     '#78909C',
    'Airbnb':      '#9C27B0',
    'Hotelbeds':   '#43A047',
  };
  const CH_TONE = {
    'Booking.com': 'blue',
    'Expedia':     'orange',
    'Direct':      'cyan',
    'Walk-in':     'neutral',
    'Airbnb':      'purple',
    'Hotelbeds':   'success',
  };

  // Build date columns
  const days = [];
  for (let i = 0; i < viewDays; i++) {
    const d = new Date(startDate);
    d.setDate(d.getDate() + i);
    days.push(d);
  }

  const fmtDay = d => d.getDate();
  const fmtWd = d => ['Ne','Po','To','Sr','Če','Pe','So'][d.getDay()];
  const isWknd = d => d.getDay() === 0 || d.getDay() === 6;

  // Parse reservation date strings like "28.04." into a Date object
  // Assumes year is 2026
  function parseResDate(str) {
    if (!str || str === '—') return null;
    const parts = str.replace(/\.$/, '').split('.');
    if (parts.length < 2) return null;
    const day = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10) - 1;
    return new Date(2026, month, day);
  }

  // For each room, find overlapping reservations within [startDate, startDate+viewDays)
  function getResForRoom(roomNum) {
    const endDate = new Date(startDate);
    endDate.setDate(endDate.getDate() + viewDays);
    return RESERVATIONS.filter(r => {
      if (!r.room || r.room === '—') return false;
      if (r.room !== roomNum) return false;
      const ci = parseResDate(r.checkin);
      const co = parseResDate(r.checkout);
      if (!ci || !co) return false;
      // overlaps if checkin < endDate AND checkout > startDate
      return ci < endDate && co > startDate;
    });
  }

  // Returns [startCol (0-based), spanCols] for a reservation within the visible window
  function getBarSpan(res) {
    const ci = parseResDate(res.checkin);
    const co = parseResDate(res.checkout);
    if (!ci || !co) return null;
    const windowStart = new Date(startDate);
    const windowEnd = new Date(startDate);
    windowEnd.setDate(windowEnd.getDate() + viewDays);

    const barStart = ci < windowStart ? windowStart : ci;
    const barEnd = co > windowEnd ? windowEnd : co;

    const startCol = Math.round((barStart - windowStart) / 86400000);
    const span = Math.round((barEnd - barStart) / 86400000);
    if (span <= 0) return null;
    return [startCol, span];
  }

  function navDate(delta) {
    const d = new Date(startDate);
    d.setDate(d.getDate() + delta * viewDays);
    setStartDate(d);
    setSelected(null);
  }

  function fmtRange() {
    const end = new Date(startDate);
    end.setDate(end.getDate() + viewDays - 1);
    const months = ['jan','feb','mar','apr','maj','jun','jul','avg','sep','okt','nov','dec'];
    const s = startDate;
    const e = end;
    if (s.getMonth() === e.getMonth()) return `${s.getDate()}. – ${e.getDate()}. ${months[s.getMonth()]} ${s.getFullYear()}`;
    return `${s.getDate()}. ${months[s.getMonth()]} – ${e.getDate()}. ${months[e.getMonth()]} ${e.getFullYear()}`;
  }

  function handleBarClick(e, res) {
    e.stopPropagation();
    const rect = e.currentTarget.getBoundingClientRect();
    setPopoverPos({ top: rect.bottom + window.scrollY + 4, left: Math.min(rect.left + window.scrollX, window.innerWidth - 280) });
    setSelected(selected && selected.id === res.id ? null : res);
  }

  // Group rooms by floor
  const floors = [1,2,3,4];

  const statusSl = {confirmed:'Potrjeno', arriving:'Prihaja', in_house:'V hiši', departed:'Odšel'};
  const statusTone = {confirmed:'blue', arriving:'orange', in_house:'success', departed:'neutral'};

  const totalWidth = ROOM_COL_W + viewDays * CELL_W;

  return <>
    <HPageHeader dark={dark}
      title="Plahta · Hotel Triglav Bled"
      subtitle={fmtRange()}
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="chevleft" onClick={()=>navDate(-1)}>Nazaj</HBtn>
        <HBtn variant="ghost" dark={dark} icon="chevright" onClick={()=>navDate(1)}>Naprej</HBtn>
        <HBtn variant="primary" dark={dark} icon="plus">Nova rezervacija</HBtn>
      </>}/>

    {/* View range toggle */}
    <div style={{display:'flex', gap:6, marginBottom:14, alignItems:'center'}}>
      <span style={{fontSize:12, color:muted, fontWeight:600, marginRight:4}}>Prikaz:</span>
      {[['7d',7],['14d',14],['30d',30]].map(([lbl,v])=>(
        <button key={v} onClick={()=>{ setViewDays(v); setSelected(null); }}
          style={{padding:'6px 14px', fontSize:12, fontWeight:600, fontFamily:'inherit',
            background: viewDays===v ? '#E3F2FD' : 'transparent',
            color: viewDays===v ? '#2196F3' : muted,
            border:`1px solid ${viewDays===v ? '#2196F3' : (dark?'#2B2B2B':'#E5E5E5')}`,
            borderRadius:8, cursor:'pointer'}}>
          {lbl}
        </button>
      ))}
    </div>

    <HCard dark={dark} padding={0} style={{overflow:'hidden', position:'relative'}}
      onClick={()=>setSelected(null)}>
      <div style={{overflowX:'auto', overflowY:'auto', maxHeight:'72vh'}}>
        <div style={{minWidth: totalWidth}}>

          {/* Sticky header row */}
          <div style={{
            display:'grid',
            gridTemplateColumns: `${ROOM_COL_W}px repeat(${viewDays}, ${CELL_W}px)`,
            position:'sticky', top:0, zIndex:5,
            background: dark?'#1A1A1A':'#fff',
            borderBottom:`2px solid ${border}`,
            boxShadow:'0 2px 6px rgba(0,0,0,.06)',
          }}>
            <div style={{padding:'10px 16px', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:muted, borderRight:`1px solid ${border}`, position:'sticky', left:0, background:dark?'#1A1A1A':'#fff', zIndex:6}}>Soba</div>
            {days.map((d,i)=>(
              <div key={i} style={{
                padding:'8px 4px', textAlign:'center',
                borderLeft:`1px solid ${border}`,
                background: isWknd(d) ? (dark?'rgba(255,152,0,.07)':'#FFF8E1') : 'transparent',
              }}>
                <div style={{fontSize:10, fontWeight:700, color: isWknd(d)?'#FF9800':muted}}>{fmtWd(d)}</div>
                <div style={{fontSize:13, fontWeight:700, color:dark?'#fff':'#1A1A1A', marginTop:2, lineHeight:1}}>{fmtDay(d)}</div>
              </div>
            ))}
          </div>

          {/* Room rows grouped by floor */}
          {floors.map(floor=>{
            const floorRooms = ROOMS.filter(r=>r.floor===floor);
            return <React.Fragment key={floor}>
              {/* Floor label row */}
              <div style={{
                display:'grid',
                gridTemplateColumns:`${ROOM_COL_W}px 1fr`,
                background: dark?'#222':'#F8F9FA',
                borderBottom:`1px solid ${border}`,
                position:'sticky', top:52, zIndex:4,
              }}>
                <div style={{padding:'6px 16px', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'#2196F3', gridColumn:'1/-1'}}>
                  {floor}. nadstropje · {floorRooms.length} sob
                </div>
              </div>

              {/* Individual room rows */}
              {floorRooms.map((room, ri)=>{
                const reservations = getResForRoom(room.num);
                const rowBg = ri%2===0 ? cellBg : (dark?'#161616':'#FAFAFA');

                // Build bar map: colIndex -> reservation
                const barMap = {};
                reservations.forEach(res=>{
                  const span = getBarSpan(res);
                  if (span) barMap[span[0]] = { res, span: span[1] };
                });

                return (
                  <div key={room.num} style={{
                    display:'grid',
                    gridTemplateColumns:`${ROOM_COL_W}px repeat(${viewDays}, ${CELL_W}px)`,
                    borderBottom:`1px solid ${border}`,
                    minHeight:44,
                  }}>
                    {/* Sticky left: room info */}
                    <div style={{
                      padding:'8px 12px', display:'flex', alignItems:'center', gap:8,
                      borderRight:`1px solid ${border}`,
                      position:'sticky', left:0, background:rowBg, zIndex:2,
                    }}>
                      <span style={{fontFamily:'var(--font-mono)', fontSize:14, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>{room.num}</span>
                      <span style={{fontSize:10, fontWeight:700, padding:'2px 6px',
                        background: dark?'#2B2B2B':'#F0F0F0',
                        color: dark?'#C8C8C8':'#555',
                        border:`1px solid ${dark?'#333':'#E5E5E5'}`,
                        borderRadius:4}}>
                        {room.type}
                      </span>
                    </div>

                    {/* Date cells with reservation bars */}
                    {days.map((d,ci)=>{
                      const bar = barMap[ci];
                      const wknd = isWknd(d);
                      const baseCellBg = wknd ? (dark?'rgba(255,152,0,.04)':'#FFFDE7') : rowBg;
                      return (
                        <div key={ci} style={{
                          borderLeft:`1px solid ${border}`,
                          background: baseCellBg,
                          position:'relative',
                          overflow:'visible',
                          minHeight:44,
                        }}>
                          {bar && (
                            <div
                              onClick={e=>handleBarClick(e, bar.res)}
                              style={{
                                position:'absolute',
                                top:'50%', transform:'translateY(-50%)',
                                left:2, height:28,
                                width: `calc(${bar.span * CELL_W}px - 4px)`,
                                background: CH_COLOR[bar.res.channel] || '#9A9A9A',
                                borderRadius:6,
                                cursor:'pointer',
                                zIndex:3,
                                display:'flex', alignItems:'center', paddingLeft:8,
                                overflow:'hidden',
                                boxShadow:'0 1px 4px rgba(0,0,0,.18)',
                                transition:'filter 120ms',
                                opacity: 0.92,
                              }}
                              onMouseEnter={e=>e.currentTarget.style.filter='brightness(1.12)'}
                              onMouseLeave={e=>e.currentTarget.style.filter='none'}
                            >
                              <span style={{fontSize:11, fontWeight:600, color:'#fff', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', maxWidth: bar.span*CELL_W - 16}}>
                                {bar.res.guest}
                              </span>
                              {bar.span > 1 && (
                                <span style={{fontSize:10, color:'rgba(255,255,255,.8)', marginLeft:6, whiteSpace:'nowrap'}}>
                                  {bar.res.nights}n
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </React.Fragment>;
          })}
        </div>
      </div>
    </HCard>

    {/* Popover for selected reservation */}
    {selected && (
      <div style={{
        position:'fixed',
        top: popoverPos.top,
        left: popoverPos.left,
        zIndex:9999,
        background: dark?'#1A1A1A':'#fff',
        border:`1px solid ${border}`,
        borderRadius:12,
        boxShadow:'0 8px 24px rgba(0,0,0,.18)',
        padding:'14px 16px',
        minWidth:240,
        maxWidth:280,
      }}
        onClick={e=>e.stopPropagation()}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10}}>
          <div style={{fontSize:14, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>{selected.guest}</div>
          <button onClick={()=>setSelected(null)} style={{background:'transparent', border:'none', cursor:'pointer', color:muted, padding:0, display:'flex'}}>
            <HIcon name="x" size={14}/>
          </button>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:5}}>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:12, color:muted}}>Rezervacija</span>
            <span style={{fontSize:12, fontWeight:700, fontFamily:'var(--font-mono)', color:'#2196F3'}}>{selected.id}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:12, color:muted}}>Soba</span>
            <span style={{fontSize:12, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{selected.room} ({selected.type})</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:12, color:muted}}>Prihod</span>
            <span style={{fontSize:12, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{selected.checkin}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:12, color:muted}}>Odhod</span>
            <span style={{fontSize:12, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{selected.checkout}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{fontSize:12, color:muted}}>Kanal</span>
            <HBadge tone={CH_TONE[selected.channel]||'neutral'}>{selected.channel}</HBadge>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span style={{fontSize:12, color:muted}}>Status</span>
            <HBadge tone={statusTone[selected.status]||'neutral'}>{statusSl[selected.status]||selected.status}</HBadge>
          </div>
          {selected.note && (
            <div style={{marginTop:4, padding:'7px 10px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:8, fontSize:12, color:dark?'#C8C8C8':'#4D4D4D', fontStyle:'italic'}}>
              {selected.note}
            </div>
          )}
        </div>
      </div>
    )}

    {/* Legend */}
    <div style={{display:'flex', gap:16, marginTop:14, padding:'12px 16px',
      background:dark?'#1A1A1A':'#fff',
      border:`1px solid ${border}`,
      borderRadius:12, fontSize:12, color:muted, alignItems:'center', flexWrap:'wrap'}}>
      <span style={{fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>Kanali:</span>
      {Object.entries(CH_COLOR).map(([name, color])=>(
        <span key={name} style={{display:'flex', alignItems:'center', gap:6}}>
          <span style={{width:10, height:10, background:color, borderRadius:2}}/>
          {name}
        </span>
      ))}
    </div>
  </>;
}

Object.assign(window, { HADashboard, HACalendar, HAReservations, HARooms, HAGuests, HAChannels, HAReports, HASettings, HAPlahta });