// Kiosk screens — flow-based layout (no absolute positioning)

const LANGS = [
  { code:'SI', label:'Slovenščina' },
  { code:'GB', label:'English' },
  { code:'DE', label:'Deutsch' },
  { code:'IT', label:'Italiano' },
];

function ScreenLanguage({ onPick }) {
  const [sel, setSel] = React.useState('SI');
  return (
    <KioskShell hideLang>
      <KioskStack gap={72} justify="center">
        <KioskHero size={96}>Jezik / Language</KioskHero>
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr',
          columnGap:120, rowGap:80,
          padding:'0 40px',
        }}>
          {LANGS.map(l => (
            <div key={l.code} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:28}}>
              <FlagCircle code={l.code} selected={sel===l.code} onClick={()=>setSel(l.code)} size={240} />
              <div style={{fontSize:38, fontWeight:600, letterSpacing:'-.01em'}}>{l.label}</div>
            </div>
          ))}
        </div>
      </KioskStack>
      <KioskActionBar>
        <KioskButton variant="primary" onClick={onPick}>Naprej →</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenWelcome({ onStart, onStaff }) {
  return (
    <KioskShell>
      <KioskStack gap={32}>
        <KioskHero size={140}>DOBRODOŠLI</KioskHero>
        <KioskSubhead size={44}>Dobrodošli v Hotel Triglav</KioskSubhead>
        <KioskSubhead size={24}>Dotaknite se zaslona za začetek</KioskSubhead>
      </KioskStack>
      <KioskActionBar>
        <KioskButton variant="primary" onClick={onStart}>ZAČNI</KioskButton>
      </KioskActionBar>
      {/* Discreet staff entry — visible only if you look for it */}
      <button onClick={onStaff} style={{
        position:'absolute', top:48, right:48, zIndex:10,
        width:96, height:96, borderRadius:'50%',
        background:'rgba(0,0,0,.35)', backdropFilter:'blur(10px)',
        border:'1px solid rgba(255,255,255,.22)',
        color:'#fff', fontSize:13, fontWeight:600, letterSpacing:'.1em',
        fontFamily:'inherit', cursor:'pointer',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        gap:2,
      }}
        title="Osebje · skeniranje QR kartice"
      >
        <div style={{fontSize:28, lineHeight:1}}>⌂</div>
        <div style={{fontSize:11, opacity:.85}}>OSEBJE</div>
      </button>
    </KioskShell>
  );
}

function ScreenScanQR({ onManual, onBack }) {
  return (
    <KioskShell>
      <KioskStack gap={72} justify="flex-start" style={{paddingTop:40}}>
        <KioskHero size={88}>{'Prosim skenirajte\nQR kodo'}</KioskHero>
        <div style={{
          position:'relative',
          width:560, height:560, borderRadius:32,
          background:'rgba(255,255,255,.08)', backdropFilter:'blur(16px)',
          border:'2px solid rgba(255,255,255,.4)',
          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 #00BCD4' : 'none',
              borderBottom: y===1 ? '6px solid #00BCD4' : 'none',
              borderLeft: x===0 ? '6px solid #00BCD4' : 'none',
              borderRight: x===1 ? '6px solid #00BCD4' : 'none',
              top: y===0?24:'auto', bottom:y===1?24:'auto',
              left: x===0?24:'auto', right:x===1?24:'auto',
            }} />
          ))}
          <div style={{fontSize:28, opacity:.78, textAlign:'center', lineHeight:1.3}}>Usmerite QR<br/>v okvir</div>
        </div>
      </KioskStack>
      <KioskActionBar back={onBack}>
        <KioskButton variant="ghost" size="lg" onClick={onManual}>✎ Vpiši ročno</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenReservation({ onConfirm, onBack }) {
  const [val, setVal] = React.useState('RES-48210');
  return (
    <KioskShell>
      <KioskStack gap={40} justify="flex-start" style={{paddingTop:24}}>
        <KioskHero size={80}>{'Vnesite številko\nrezervacije'}</KioskHero>
        <div style={{
          width:'100%',
          padding:'34px 40px', borderRadius:28,
          background:'rgba(255,255,255,.96)', color:'#111',
          fontSize:68, fontWeight:600, letterSpacing:'.04em', textAlign:'center',
          boxShadow:'0 30px 60px rgba(0,0,0,.3)',
        }}>{val || <span style={{color:'#9A9A9A'}}>RES-…</span>}</div>

        <div style={{
          width:'100%',
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)',
          gap:18,
        }}>
          {['1','2','3','4','5','6','7','8','9','←','0','✓'].map(k => (
            <button key={k} onClick={()=>{
              if(k==='←') setVal(v=>v.slice(0,-1));
              else if(k==='✓') onConfirm();
              else setVal(v=>v+k);
            }} style={{
              height:116, fontSize:48, fontWeight:600, fontFamily:'inherit',
              color: k==='✓' ? '#fff' : '#fff', cursor:'pointer',
              background: k==='✓' ? '#00BCD4' : k==='←' ? 'rgba(255,255,255,.08)' : 'rgba(255,255,255,.14)',
              border: k==='✓' ? '2px solid rgba(0,188,212,.8)' : '2px solid rgba(255,255,255,.22)', borderRadius:20,
              backdropFilter:'blur(10px)',
              boxShadow: k==='✓' ? '0 12px 32px rgba(0,188,212,.4)' : 'none',
              transition:'background 150ms, transform 80ms',
            }}
            onMouseEnter={e => e.currentTarget.style.background = k==='✓' ? '#0097A7' : k==='←' ? 'rgba(255,255,255,.16)' : 'rgba(255,255,255,.24)'}
            onMouseLeave={e => e.currentTarget.style.background = k==='✓' ? '#00BCD4' : k==='←' ? 'rgba(255,255,255,.08)' : 'rgba(255,255,255,.14)'}
            >{k}</button>
          ))}
        </div>
      </KioskStack>
      <KioskActionBar back={onBack}/>
    </KioskShell>
  );
}

function ScreenScanId({ guestNum=1, onManual, onBack }) {
  return (
    <KioskShell>
      <KioskStack gap={56} justify="flex-start" style={{paddingTop:24}}>
        <KioskHero size={64}>{`Prosimo skenirajte\nosebni dokument ${guestNum}. gosta`}</KioskHero>
        <div style={{
          width:'100%', flex:1, minHeight:640,
          borderRadius:24,
          background:'rgba(0,0,0,.55)', border:'2px dashed rgba(255,255,255,.5)',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:40,
        }}>
          <div style={{width:440, height:276, border:'3px solid #00BCD4', borderRadius:18, opacity:.9,
            boxShadow:'inset 0 0 0 2px rgba(0,188,212,.3), 0 0 40px rgba(0,188,212,.25)'}} />
          <div style={{fontSize:30, opacity:.85, fontWeight:500}}>Skeniranje…</div>
          <div style={{width:340, height:10, background:'rgba(255,255,255,.18)', borderRadius:999, overflow:'hidden'}}>
            <div style={{width:'65%', height:'100%', background:'#00BCD4',
              boxShadow:'0 0 20px #00BCD4'}} />
          </div>
        </div>
      </KioskStack>
      <KioskActionBar back={onBack}>
        <KioskButton variant="ghost" size="lg" onClick={onManual}>✎ Vpiši ročno</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenProcessing({ label='Obdelujem…\n\nProsimo počakajte' }) {
  return (
    <KioskShell>
      <KioskStack gap={56}>
        <KioskHero size={88}>{label}</KioskHero>
        <div style={{
          width:440, height:10, background:'rgba(255,255,255,.18)', borderRadius:999, overflow:'hidden',
        }}>
          <div style={{
            height:'100%', width:'40%', background:'#00BCD4',
            borderRadius:999,
            animation:'sweep 1.4s ease-in-out infinite',
          }} />
        </div>
      </KioskStack>
      <KioskActionBar/>
      <style>{`@keyframes sweep{0%{margin-left:-40%}100%{margin-left:100%}}`}</style>
    </KioskShell>
  );
}

function ScreenGuestForm({ guestNum=1, onCapture, onBack }) {
  const defaults = [
    { k:'Ime', v:'Ana' },
    { k:'Priimek', v:'Novak' },
    { k:'Datum rojstva', v:'14. 06. 1992' },
    { k:'Dokument', v:'SI 123 456 789' },
    { k:'Državljanstvo', v:'Slovenija' },
    { k:'Naslov', v:'Trubarjeva 12, Ljubljana' },
  ];
  const [fields, setFields] = React.useState(defaults);
  const [editing, setEditing] = React.useState(null);
  const update = (idx, val) => setFields(f => f.map((x,i) => i===idx ? {...x, v:val} : x));

  return (
    <KioskShell>
      <KioskStack gap={40} justify="flex-start" style={{paddingTop:24}}>
        <KioskHero size={56}>{`Preverite podatke ${guestNum}. gosta`}</KioskHero>
        <KioskSubhead size={28}>Pritisnite na polje za popravek</KioskSubhead>
        <div style={{
          width:'100%',
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
        }}>
          {fields.map((f,idx) => (
            <div key={f.k} onClick={()=>setEditing(idx)} style={{
              background:'rgba(255,255,255,.96)', color:'#111', borderRadius:20, padding:'22px 28px',
              boxShadow: editing===idx ? '0 0 0 4px #00BCD4, 0 10px 30px rgba(0,0,0,.2)' : '0 10px 30px rgba(0,0,0,.2)',
              cursor:'pointer', transition:'box-shadow 200ms',
            }}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <div style={{fontSize:17, fontWeight:600, color:'#707070',
                  letterSpacing:'.1em', textTransform:'uppercase'}}>{f.k}</div>
                <div style={{fontSize:18, color:'#00BCD4', fontWeight:600}}>✎</div>
              </div>
              {editing===idx ? (
                <input
                  autoFocus
                  value={f.v}
                  onChange={e=>update(idx, e.target.value)}
                  onBlur={()=>setEditing(null)}
                  onKeyDown={e=>e.key==='Enter'&&setEditing(null)}
                  style={{
                    width:'100%', fontSize:34, fontWeight:600, marginTop:6,
                    border:'none', borderBottom:'3px solid #00BCD4',
                    background:'transparent', outline:'none', fontFamily:'inherit',
                    padding:'4px 0', color:'#111',
                  }}
                />
              ) : (
                <div style={{fontSize:34, fontWeight:600, marginTop:6,
                  borderBottom:'3px solid transparent', padding:'4px 0'}}>{f.v}</div>
              )}
            </div>
          ))}
        </div>
      </KioskStack>
      <KioskActionBar back={onBack}>
        <KioskButton variant="primary" onClick={onCapture}>POTRDI PODATKE</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenAllRegistered({ guests, onYes, onAddMore, onBack }) {
  return (
    <KioskShell>
      <KioskStack gap={48} justify="flex-start" style={{paddingTop:24}}>
        <KioskHero size={64}>{'Ali so vsi gostje\nprijavljeni?'}</KioskHero>
        <KioskSubhead size={30}>{`${guests.length} ${guests.length===1?'gost prijavljen':'gostje prijavljeni'}`}</KioskSubhead>
        <div style={{
          width:'100%',
          display:'flex', flexDirection:'column', gap:18,
        }}>
          {guests.map((g,i) => (
            <div key={i} style={{
              display:'flex', alignItems:'center', gap:24,
              background:'rgba(255,255,255,.96)', color:'#111', borderRadius:20, padding:'24px 32px',
              boxShadow:'0 10px 30px rgba(0,0,0,.2)',
            }}>
              <div style={{
                width:64, height:64, borderRadius:'50%', background:'#E0F7FA',
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'#0097A7', fontSize:26, fontWeight:700, flexShrink:0,
              }}>{g.split(' ').map(n=>n[0]).join('')}</div>
              <div style={{flex:1}}>
                <div style={{fontSize:34, fontWeight:600}}>{g}</div>
                <div style={{fontSize:20, color:'#4D4D4D', marginTop:4}}>Dokument preverjen</div>
              </div>
              <div style={{
                width:48, height:48, borderRadius:'50%', background:'#2DD164',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:28, color:'#fff', flexShrink:0,
              }}>✓</div>
            </div>
          ))}
        </div>

        {/* Add another guest — prominent standalone button */}
        <button onClick={onAddMore} style={{
          width:'100%', padding:'28px 0', borderRadius:20,
          background:'rgba(255,255,255,.12)', backdropFilter:'blur(10px)',
          border:'2px dashed rgba(255,255,255,.5)',
          color:'#fff', fontSize:32, fontWeight:600, fontFamily:'inherit',
          cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:16,
          transition:'background 200ms',
        }}
        onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,.22)'}
        onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,.12)'}
        >
          <span style={{fontSize:40, lineHeight:1}}>+</span> Dodaj gosta
        </button>
      </KioskStack>
      <KioskActionBar back={onBack}>
        <KioskButton variant="primary" onClick={onYes}>DA, NADALJUJ</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenKeyDone({ onDone }) {
  return (
    <KioskShell>
      <KioskStack gap={56}>
        <KioskHero size={84}>{'Ključ izdan spodaj\nŽelimo vam prijetno\nbivanje'}</KioskHero>
        <div style={{
          width:180, height:180, borderRadius:'50%',
          background:'rgba(0,188,212,.25)',
          display:'flex', alignItems:'center', justifyContent:'center',
          border:'3px solid rgba(0,188,212,.5)',
          boxShadow:'0 0 60px rgba(0,188,212,.35)',
        }}>
          <div style={{fontSize:100}}>🔑</div>
        </div>
      </KioskStack>
      <KioskActionBar>
        <KioskButton variant="primary" onClick={onDone}>ZAKLJUČI</KioskButton>
      </KioskActionBar>
    </KioskShell>
  );
}

function ScreenClosed() {
  return (
    <KioskShell hideLang>
      <KioskStack>
        <div style={{
          width:'100%', maxWidth:880,
          borderRadius:80, background:'#FFFFFF', color:'#111',
          padding:'80px 60px',
          display:'flex', flexDirection:'column', alignItems:'center', gap:48,
          boxShadow:'0 30px 80px rgba(0,0,0,.45)',
        }}>
          <div style={{fontSize:110, fontWeight:700, color:'#1A1A1A', textAlign:'center',
            lineHeight:1, letterSpacing:'-0.02em', whiteSpace:'pre-line'}}>
            {'No self\ncheck-in'}
          </div>
          <div style={{
            width:220, height:220, borderRadius:'50%', background:'#E53935',
            display:'flex', alignItems:'center', justifyContent:'center',
            boxShadow:'0 10px 30px rgba(229,57,53,.45)',
          }}>
            <div style={{width:140, height:18, background:'#fff', borderRadius:6}} />
          </div>
          <div style={{fontSize:24, color:'#707070', textAlign:'center', fontWeight:500}}>
            Obrnite se na recepcijo · Visit the reception
          </div>
        </div>
      </KioskStack>
      <KioskActionBar/>
    </KioskShell>
  );
}

Object.assign(window, {
  ScreenLanguage, ScreenWelcome, ScreenScanQR, ScreenReservation, ScreenScanId,
  ScreenProcessing, ScreenGuestForm, ScreenAllRegistered, ScreenKeyDone, ScreenClosed,
});