// Front Desk Manager — vodja recepcije: smene, eskalacije, dnevni izkaz, performance

function FDDashboard({ dark, onNav }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark}
      title="Vodja recepcije"
      subtitle="Hotel Triglav Bled · torek, 28. april · 13:42"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Predaja smene</HBtn>
        <HBtn variant="primary" icon="download">Dnevni izkaz</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Zasedenost" value="82%" delta="+4 %"/>
      <HStat dark={dark} tone="cyan"   label="Check-in danes" value="9/14" delta="64%"/>
      <HStat dark={dark} tone="green"  label="Promet smene" value="€4.280"/>
      <HStat dark={dark} tone="orange" label="Eskalacije" value="3"/>
      <HStat dark={dark} tone="purple" label="NPS · 7d" value="9,2"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 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'}}>Trenutna smena</div>
          <HBadge tone="success">Vsi prisotni</HBadge>
        </div>
        <HTable dark={dark} compact columns={[
          {key:'name', label:'Oseba', render:s=><div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{width:30, height:30, borderRadius:'50%', background:'linear-gradient(135deg,#64B5F6,#2196F3)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{s.name.split(' ').map(w=>w[0]).join('')}</div>
            <div style={{fontWeight:600}}>{s.name}</div>
          </div>},
          {key:'role', label:'Vloga'},
          {key:'shift',label:'Smena', render:s=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{s.shift}</span>},
          {key:'tasks',label:'Naloge', align:'center', render:s=><span style={{fontWeight:700}}>{s.tasks}</span>},
          {key:'status',label:'Status', render:s=><HBadge tone={s.status==='na delu'?'success':'orange'}>{s.status}</HBadge>},
        ]} rows={STAFF_ON_DUTY}/>
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Eskalacije</div>
        {[
          ['urgent','TV ne dela · soba 418','Hans Schneider · pred 25 min','#E53935'],
          ['high','Pritožba o hrupu · soba 207','Pred 1 ur · čaka odgovor','#FF9800'],
          ['med','Pozni check-out (do 14h)','Ana Novak · soba 213 · čaka odobritev','#2196F3'],
        ].map(([p,t,d,c],i)=>
          <div key={i} style={{padding:'12px', borderRadius:10, background:dark?'#2B2B2B':'#FAFAFA', borderLeft:`3px solid ${c}`, marginBottom:10}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4}}>
              <div style={{fontSize:13, fontWeight:600}}>{t}</div>
              <HBadge tone={p==='urgent'?'danger':p==='high'?'orange':'blue'}>{p}</HBadge>
            </div>
            <div style={{fontSize:11, color:muted}}>{d}</div>
          </div>
        )}
      </HCard>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: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 %</div>
        <div style={{height:120}}><HSpark data={OCCUPANCY_30D} color="#2196F3" height={120}/></div>
      </HCard>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Status sob</div>
        {[['clean','Čiste',ROOMS.filter(r=>r.status==='clean').length,'#2DD164'],
          ['occupied','Zasedene',ROOMS.filter(r=>r.status==='occupied').length,'#2196F3'],
          ['dirty','Umazane',ROOMS.filter(r=>r.status==='dirty').length,'#FF9800'],
          ['out_of_order','Izven',ROOMS.filter(r=>r.status==='out_of_order').length,'#E53935']].map(([k,l,n,c])=>
          <div key={k} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
            <div style={{width:8, height:8, borderRadius:'50%', background:c}}/>
            <div style={{flex:1, fontSize:13}}>{l}</div>
            <div style={{fontSize:14, fontWeight:700}}>{n}</div>
          </div>
        )}
      </HCard>
    </div>
  </>;
}

function FDShifts({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  const days = ['Po 28.','To 29.','Sr 30.','Če 01.','Pe 02.','So 03.','Ne 04.'];
  return <>
    <HPageHeader dark={dark} title="Urniki in smene" subtitle="Teden 28.04. – 04.05.2026"
      actions={<><HBtn variant="ghost" dark={dark} icon="download">Izvozi</HBtn><HBtn variant="primary" icon="plus">Nova smena</HBtn></>}/>

    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <div style={{display:'grid', gridTemplateColumns:`220px repeat(7,1fr)`, borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
        <div style={{padding:'14px 18px', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:muted}}>Oseba</div>
        {days.map(d=><div key={d} style={{padding:'14px 12px', textAlign:'center', fontSize:12, fontWeight:700, color:dark?'#E5E5E5':'#1A1A1A', borderLeft:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>{d}</div>)}
      </div>
      {STAFF_ON_DUTY.map((s,i)=>(
        <div key={s.name} style={{display:'grid', gridTemplateColumns:`220px repeat(7,1fr)`, borderBottom:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
          <div style={{padding:'14px 18px', 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}}>{s.name.split(' ').map(w=>w[0]).join('')}</div>
            <div><div style={{fontSize:13, fontWeight:600}}>{s.name}</div><div style={{fontSize:11, color:muted}}>{s.role}</div></div>
          </div>
          {days.map((d,j)=>{
            const shifts = ['07–15','15–23','08–16','09–17','12–22'];
            const has = (i+j)%4!==3;
            const sh = has ? shifts[(i+j*2)%shifts.length] : null;
            return <div key={j} style={{borderLeft:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`, padding:'10px', display:'flex', alignItems:'center', justifyContent:'center'}}>
              {sh ? <div style={{padding:'6px 10px', borderRadius:6, fontSize:11, fontFamily:'var(--font-mono)', fontWeight:700,
                background: sh.startsWith('07')?'#E0F7FA': sh.startsWith('15')||sh.startsWith('12')?'#FFF3E0': '#E3F2FD',
                color: sh.startsWith('07')?'#006064': sh.startsWith('15')||sh.startsWith('12')?'#E65100':'#0D47A1'}}>{sh}</div>
              : <span style={{fontSize:11, color:muted}}>—</span>}
            </div>;
          })}
        </div>
      ))}
    </HCard>
  </>;
}

function FDClosing({ dark }){
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} title="Dnevni izkaz" subtitle="Zaključek smene · 28.04.2026"
      actions={<HBtn variant="primary" icon="download">Tiskaj in zaključi</HBtn>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Promet po vrstah plačila</div>
        <HTable dark={dark} compact columns={[
          {key:'k', label:'Vrsta'},
          {key:'n', label:'Št.', align:'right'},
          {key:'v', label:'Znesek', align:'right', render:r=><span style={{fontWeight:700}}>{r.v}</span>},
        ]} rows={[
          {k:'Plačilna kartica', n:'24', v:'€2.840'},
          {k:'Gotovina',         n:'8',  v:'€680'},
          {k:'TRR / nakazilo',   n:'2',  v:'€760'},
          {k:'Booking.com (predplačilo)', n:'4', v:'€640 (poravnano)'},
          {k:'Skupaj',           n:'34', v:'€4.280'},
        ]}/>

        <div style={{marginTop:18, fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>FURS davčna blagajna</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
          {[['Računi',34,'#2196F3'],['Stornirani',1,'#FF9800'],['Promet','€4.280','#2DD164']].map(([l,v,c])=>
            <div key={l} style={{padding:'14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:10, borderTop:`3px solid ${c}`}}>
              <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase'}}>{l}</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, marginTop:6}}>{v}</div>
            </div>
          )}
        </div>
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Predaja smene</div>
        {[['Check-in opravljenih','9/14','#2DD164'],
          ['Še čakajo','5','#FF9800'],
          ['Posebne opombe','2','#2196F3'],
          ['VIP gosti v hiši','3','#FF9800'],
          ['Odprte prošnje','3','#E53935']].map(([l,v,c])=>
          <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'10px 0', borderTop:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
            <span style={{fontSize:13, color:dark?'#E5E5E5':'#4D4D4D'}}>{l}</span>
            <span style={{fontSize:14, fontWeight:700, color:c}}>{v}</span>
          </div>
        )}
        <div style={{marginTop:14, padding:'12px', background:dark?'#2B2B2B':'#FFF8E1', borderLeft:'3px solid #FF9800', borderRadius:8, fontSize:12, color:dark?'#FFD54F':'#E65100', fontWeight:500}}>
          ⚑ Hans Schneider (418) — TV servis prihaja jutri ob 9h
        </div>
      </HCard>
    </div>
  </>;
}

Object.assign(window, { FDDashboard, FDShifts, FDClosing });