// KioskStaffScreens.jsx — Receptionist mode on the self check-in kiosk.
// Flow:
//   1. ScreenStaffScan  – receptionist scans employee QR
//   2. ScreenStaffMenu  – quick actions + today's activity
//   3. Sub-modals for the actions (handled inline by parent state)
//
// Style: matches brand kiosk aesthetic but with a distinct amber/gold treatment
// to make "staff mode" visually unmistakable at a glance. Cyan is for guests.

function ScreenStaffScan({ onBack, onSuccess }) {
  // Simulate a QR scan succeeding after ~2s
  React.useEffect(() => {
    const t = setTimeout(onSuccess, 2400);
    return () => clearTimeout(t);
  }, [onSuccess]);

  return (
    <KioskShell hideLang>
      {/* Amber overlay to distinguish staff mode */}
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at 50% 30%, rgba(255,179,0,.28) 0%, rgba(0,0,0,0) 55%)',
        pointerEvents:'none', zIndex:1,
      }}/>
      {/* Staff mode badge */}
      <div style={{
        position:'absolute', top:48, left:'50%', transform:'translateX(-50%)',
        zIndex:4, padding:'12px 28px', borderRadius:999,
        background:'rgba(255,179,0,.18)', border:'1.5px solid rgba(255,179,0,.55)',
        color:'#FFB300', fontSize:22, fontWeight:700, letterSpacing:'.18em',
        textTransform:'uppercase', backdropFilter:'blur(10px)',
      }}>OSEBJE · STAFF</div>

      <KioskStack gap={72} justify="center" style={{zIndex:2}}>
        <KioskHero size={72}>{'Skenirajte\nzaposleno QR kartico'}</KioskHero>

        {/* Scanner square */}
        <div style={{
          position:'relative',
          width:520, height:520, borderRadius:32,
          background:'rgba(255,255,255,.06)', backdropFilter:'blur(16px)',
          border:'2px solid rgba(255,179,0,.45)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          {[[0,0],[1,0],[0,1],[1,1]].map(([x,y],i)=>(
            <div key={i} style={{
              position:'absolute', width:90, height:90,
              borderTop: y===0 ? '6px solid #FFB300' : 'none',
              borderBottom: y===1 ? '6px solid #FFB300' : 'none',
              borderLeft: x===0 ? '6px solid #FFB300' : 'none',
              borderRight: x===1 ? '6px solid #FFB300' : 'none',
              top: y===0?24:'auto', bottom:y===1?24:'auto',
              left: x===0?24:'auto', right:x===1?24:'auto',
            }} />
          ))}
          {/* Pulsing scan line */}
          <div style={{
            position:'absolute', left:40, right:40, height:4,
            background:'linear-gradient(90deg, transparent, #FFB300, transparent)',
            boxShadow:'0 0 20px #FFB300',
            borderRadius:999,
            animation:'staffScan 2s ease-in-out infinite',
          }}/>
          <div style={{fontSize:26, opacity:.7, textAlign:'center', color:'#FFB300', fontWeight:600, letterSpacing:'.08em'}}>
            SKENIRANJE…
          </div>
        </div>

        <KioskSubhead size={26}>
          Samo pooblaščeno osebje hotela
        </KioskSubhead>
      </KioskStack>

      <KioskActionBar back={onBack} style={{zIndex:2}}/>

      <style>{`
        @keyframes staffScan {
          0%   { top: 60px; opacity:0; }
          50%  { opacity:1; }
          100% { top: calc(100% - 60px); opacity:0; }
        }
      `}</style>
    </KioskShell>
  );
}

function ScreenStaffMenu({ onExit, onAction, employee }) {
  const e = employee || { name:'Marko Horvat', role:'Receptor', shift:'Dnevna izmena · 07:00–15:00', id:'EMP-042' };

  const actions = [
    { k:'walkin',     icon:'👤', title:'Walk-in prijava',       sub:'Gost brez rezervacije' },
    { k:'duplicate',  icon:'🔑', title:'Podvojen ključ',          sub:'Natisni dodaten ključ' },
    { k:'override',   icon:'✔︎', title:'Ročna prijava',           sub:'Obidi samopostrežno' },
    { k:'lookup',     icon:'🔍', title:'Iskanje rezervacije',    sub:'Po imenu ali št. sobe' },
    { k:'maintenance',icon:'🛠', title:'Vzdrževanje',              sub:'Zakleni kiosk za servis' },
    { k:'closed',     icon:'✕',  title:'Zapri kiosk',              sub:'Prikaži "Ni samoprijave"' },
  ];

  const today = [
    { t:'14:32', title:'A. Novak · Walk-in',       meta:'Soba 204 · 2 gostje', status:'active' },
    { t:'13:18', title:'M. Horvat · Podvojen ključ',meta:'Soba 312',           status:'done' },
    { t:'11:05', title:'Kiosk · Samoprijava',      meta:'3 gostje · Res-47219',status:'done' },
    { t:'09:42', title:'Kiosk · Samoprijava',      meta:'2 gosta · Res-47201', status:'done' },
  ];

  return (
    <KioskShell hideLang>
      {/* Staff mode tint */}
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 100%)',
        pointerEvents:'none', zIndex:1,
      }}/>

      <div style={{position:'relative', zIndex:2, flex:1, display:'flex', flexDirection:'column',
        paddingTop:0}}>

        {/* Staff mode badge + employee card */}
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          marginBottom:40,
        }}>
          <div style={{
            padding:'12px 28px', borderRadius:999,
            background:'rgba(255,179,0,.18)', border:'1.5px solid rgba(255,179,0,.55)',
            color:'#FFB300', fontSize:22, fontWeight:700, letterSpacing:'.18em',
            textTransform:'uppercase',
          }}>OSEBJE · RECEPCIJA</div>

          <div style={{
            padding:'16px 24px', borderRadius:20,
            background:'rgba(255,255,255,.08)', border:'1px solid rgba(255,255,255,.15)',
            display:'flex', alignItems:'center', gap:16,
          }}>
            <div style={{
              width:56, height:56, borderRadius:'50%',
              background:'linear-gradient(135deg, #FFB300 0%, #FB8C00 100%)',
              display:'flex', alignItems:'center', justifyContent:'center',
              color:'#1A1A1A', fontSize:22, fontWeight:700,
            }}>{e.name.split(' ').map(n=>n[0]).join('')}</div>
            <div>
              <div style={{fontSize:22, fontWeight:600, lineHeight:1.2}}>{e.name}</div>
              <div style={{fontSize:16, opacity:.7, marginTop:2}}>{e.role} · {e.id}</div>
            </div>
          </div>
        </div>

        <KioskHero size={64} style={{textAlign:'left'}}>{`Živijo, ${e.name.split(' ')[0]}.`}</KioskHero>
        <div style={{fontSize:28, opacity:.7, marginTop:12, marginBottom:48}}>{e.shift}</div>

        {/* Action grid */}
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:48,
        }}>
          {actions.map(a => (
            <StaffActionCard key={a.k} {...a} onClick={()=>onAction(a.k)} />
          ))}
        </div>

        {/* Today's activity log */}
        <div style={{flex:1, minHeight:0}}>
          <div style={{
            fontSize:20, fontWeight:600, letterSpacing:'.12em',
            textTransform:'uppercase', opacity:.55, marginBottom:18,
          }}>Današnja aktivnost</div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {today.map((it,i) => (
              <div key={i} style={{
                display:'flex', alignItems:'center', gap:20,
                padding:'16px 24px', borderRadius:16,
                background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.08)',
              }}>
                <div style={{
                  fontSize:18, fontFamily:'ui-monospace, monospace',
                  opacity:.6, letterSpacing:'.05em', width:60,
                }}>{it.t}</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:22, fontWeight:600}}>{it.title}</div>
                  <div style={{fontSize:16, opacity:.6, marginTop:2}}>{it.meta}</div>
                </div>
                <div style={{
                  fontSize:13, fontWeight:700, letterSpacing:'.12em',
                  textTransform:'uppercase', padding:'6px 14px', borderRadius:999,
                  background: it.status==='active' ? 'rgba(45,209,100,.2)' : 'rgba(255,255,255,.08)',
                  color: it.status==='active' ? '#4CD37D' : 'rgba(255,255,255,.55)',
                  border:`1px solid ${it.status==='active' ? 'rgba(45,209,100,.4)' : 'rgba(255,255,255,.1)'}`,
                }}>{it.status==='active' ? 'aktivno' : 'zaključeno'}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <KioskActionBar style={{zIndex:2}}>
        <KioskButton variant="staff" size="lg" onClick={onExit}>IZPIS / ODJAVA</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function StaffActionCard({ icon, title, sub, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
      style={{
        display:'flex', alignItems:'center', gap:20,
        padding:'28px 28px', borderRadius:20, textAlign:'left',
        background: h ? 'rgba(255,179,0,.15)' : 'rgba(255,255,255,.06)',
        border:`1.5px solid ${h ? 'rgba(255,179,0,.55)' : 'rgba(255,255,255,.12)'}`,
        color:'#fff', fontFamily:'inherit', cursor:'pointer',
        transition:'background 200ms, border-color 200ms, transform 80ms',
        transform: h ? 'translateY(-2px)' : 'none',
      }}>
      <div style={{
        width:72, height:72, borderRadius:18, flexShrink:0,
        background: h ? 'rgba(255,179,0,.25)' : 'rgba(255,255,255,.08)',
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize:36, transition:'background 200ms',
      }}>{icon}</div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:26, fontWeight:700, lineHeight:1.15}}>{title}</div>
        <div style={{fontSize:18, opacity:.6, marginTop:6}}>{sub}</div>
      </div>
      <div style={{fontSize:28, opacity: h ? 1 : .35, color: h ? '#FFB300' : '#fff'}}>→</div>
    </button>
  );
}

function ScreenStaffConfirm({ action, onDone, onBack }) {
  const copy = {
    walkin:     { title:'Walk-in prijava zagnana', sub:'Nadaljujte pri recepcijskem pultu', color:'#00BCD4' },
    duplicate:  { title:'Ključ natisnjen',          sub:'Dvignite ključ iz avtomata',         color:'#00BCD4' },
    override:   { title:'Prijava potrjena ročno',  sub:'Gost lahko nadaljuje brez kioska',    color:'#2DD164' },
    lookup:     { title:'Rezervacija najdena',      sub:'RES-48210 · A. Novak · Soba 204',    color:'#00BCD4' },
    maintenance:{ title:'Kiosk v vzdrževanju',      sub:'Na zaslonu je prikazano obvestilo',  color:'#FFB300' },
    closed:     { title:'Kiosk zaklenjen',          sub:'Prikazano: "Ni samoprijave"',        color:'#E53935' },
  }[action] || { title:'Dokončano', sub:'', color:'#00BCD4' };

  return (
    <KioskShell hideLang>
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 100%)',
        pointerEvents:'none', zIndex:1,
      }}/>
      <KioskStack gap={56} style={{zIndex:2}}>
        <div style={{
          width:220, height:220, borderRadius:'50%',
          background:`${copy.color}33`,
          display:'flex', alignItems:'center', justifyContent:'center',
          border:`3px solid ${copy.color}80`,
          boxShadow:`0 0 80px ${copy.color}55`,
          fontSize:120, lineHeight:1,
        }}>✓</div>
        <KioskHero size={80}>{copy.title}</KioskHero>
        <KioskSubhead size={32}>{copy.sub}</KioskSubhead>
      </KioskStack>
      <KioskActionBar back={onBack} style={{zIndex:2}}>
        <KioskButton variant="staff" onClick={onDone}>NAZAJ NA MENI</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

Object.assign(window, {
  ScreenStaffScan, ScreenStaffMenu, ScreenStaffConfirm, StaffActionCard,
});