// Hotel IT — naprave, omrežje, integracije, varnost

function ITDashboard({ dark, onNav }){
  const muted = dark?'#9A9A9A':'#707070';
  const online = DEVICES.filter(d=>d.status==='online').length;
  const warn = DEVICES.filter(d=>d.status==='warning').length;
  const off = DEVICES.filter(d=>d.status==='offline').length;
  return <>
    <HPageHeader dark={dark} title="IT konzola" subtitle="Hotel Triglav Bled · 14 naprav · vse podsisteme upravlja clickinPMS"
      actions={<><HBtn variant="ghost" dark={dark} icon="download">Izvozi inventar</HBtn><HBtn variant="primary" icon="plus">Dodaj napravo</HBtn></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="green"  label="Online"   value={`${online}/${DEVICES.length}`}/>
      <HStat dark={dark} tone="orange" label="Opozorila" value={warn}/>
      <HStat dark={dark} tone="red"    label="Offline"  value={off}/>
      <HStat dark={dark} tone="blue"   label="WiFi gostje" value="142"/>
      <HStat dark={dark} tone="cyan"   label="Uptime"   value="99,94%"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16, marginBottom:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Naprave</div>
          <div style={{display:'flex', gap:6}}>
            {['Vse','Kioski','POS','Ključavnice','Tiskalniki','Omrežje'].map((t,i)=>
              <button key={t} style={{padding:'5px 12px', fontSize:11, fontWeight:600, fontFamily:'inherit',
                background: i===0?'#2196F3':'transparent', color:i===0?'#fff':muted,
                border:`1px solid ${i===0?'#2196F3':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:999, cursor:'pointer'}}>{t}</button>)}
          </div>
        </div>
        <HTable dark={dark} compact columns={[
          {key:'name', label:'Naprava', render:d=><div>
            <div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>{d.name}</div>
            <div style={{fontSize:11, color:muted}}>{d.id} · {d.location}</div>
          </div>},
          {key:'type', label:'Tip', render:d=><HBadge tone={{kiosk:'cyan',pos:'blue',lock:'purple',printer:'orange',network:'success',tablet:'neutral'}[d.type]||'neutral'}>{d.type}</HBadge>},
          {key:'ip',   label:'IP / Mreža', render:d=><span style={{fontFamily:'var(--font-mono)', fontSize:11, color:muted}}>{d.ip}</span>},
          {key:'ver',  label:'Različica', align:'center', render:d=><span style={{fontFamily:'var(--font-mono)', fontSize:11}}>{d.ver}</span>},
          {key:'battery', label:'Baterija', align:'center', render:d=>d.battery==null?<span style={{color:muted}}>—</span>:<div style={{display:'flex', alignItems:'center', gap:6}}>
            <div style={{width:30, height:8, border:`1px solid ${muted}`, borderRadius:2, position:'relative'}}>
              <div style={{position:'absolute', left:1, top:1, bottom:1, width:`${d.battery*0.27}px`, background: d.battery<20?'#E53935':d.battery<50?'#FF9800':'#2DD164', borderRadius:1}}/>
            </div>
            <span style={{fontSize:11, fontWeight:600}}>{d.battery}%</span>
          </div>},
          {key:'lastSeen', label:'Zadnji stik', render:d=><span style={{fontSize:12, color:muted}}>{d.lastSeen}</span>},
          {key:'status', label:'Status', render:d=><HBadge tone={d.status==='online'?'success':d.status==='warning'?'orange':'danger'}>{d.status==='online'?'Online':d.status==='warning'?(d.warn||'Opozorilo'):'Offline'}</HBadge>},
        ]} rows={DEVICES}/>
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Aktivna opozorila</div>
        {[
          ['danger','POS-03 offline','Restavracija · pred 14 min'],
          ['orange','LCK-418 šibka baterija','Soba 418 · 14 % · zamenjaj'],
          ['orange','PRT-02 malo papirja','Tiskalnik ključev recepcija'],
          ['orange','AP-03 visoka latenca','4. nadstropje · 220 ms'],
          ['blue','Posodobitev na voljo','Salto firmware 2.1.5'],
        ].map(([t,h,d],i)=>
          <div key={i} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', gap:10, alignItems:'flex-start'}}>
            <HBadge tone={t}>●</HBadge>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{h}</div>
              <div style={{fontSize:11, color:muted}}>{d}</div>
            </div>
          </div>
        )}
      </HCard>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Integracije</div>
        {[
          ['FURS davčna blagajna','poslovni prostor T-001','success'],
          ['AJPES poročanje gostov','avtomatsko','success'],
          ['Booking.com','channel manager','success'],
          ['Expedia','channel manager','success'],
          ['Salto Hotel','RFID ključavnice','success'],
          ['Stripe payments','plačilni gateway','success'],
          ['Google Hotel','Ad campaigns','danger'],
        ].map(([n,d,t],i)=>
          <div key={n} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:32, height:32, borderRadius:8, background:dark?'#2B2B2B':'#F5F5F5', color:dark?'#C8C8C8':'#4D4D4D', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="plug" size={14}/></div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600}}>{n}</div>
              <div style={{fontSize:11, color:muted}}>{d}</div>
            </div>
            <HBadge tone={t}>{t==='success'?'OK':'Napaka'}</HBadge>
          </div>
        )}
      </HCard>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Varnostni dogodki (24h)</div>
        {[
          ['12:14','Uspešna prijava','marko@hoteltriglav.si','#2DD164'],
          ['11:48','Master ključ izdan','Tomaž V. — 418','#9C27B0'],
          ['09:22','Kartica deaktivirana','Ključ 412 izgubljen','#E53935'],
          ['08:14','Posodobitev firmware','LCK-301..LCK-308','#2196F3'],
          ['07:00','Backup baze','PostgreSQL · 2,1 GB','#2DD164'],
          ['Včeraj','MFA omogočen','janez@hoteltriglav.si','#2DD164'],
        ].map(([t,h,d,c],i)=>
          <div key={i} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', gap:12, alignItems:'center'}}>
            <div style={{width:8, height:8, borderRadius:'50%', background:c}}/>
            <div style={{fontSize:11, fontFamily:'var(--font-mono)', color:muted, width:50}}>{t}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:12, fontWeight:600}}>{h}</div>
              <div style={{fontSize:11, color:muted}}>{d}</div>
            </div>
          </div>
        )}
      </HCard>
    </div>
  </>;
}

Object.assign(window, { ITDashboard });