// Check-in mode — scanner UI, manual lookup, offline fallback, live count
const CheckIn = ({ setRoute }) => {
  const [lastScan, setLastScan] = React.useState(null);
  const [count, setCount] = React.useState(1847);
  const [online, setOnline] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [pulse, setPulse] = React.useState(false);
  const [recentScans, setRecentScans] = React.useState([
    { name: 'Lena Weber', ticket: 'VIP', ts: '2m ago', ok: true, seat: 'V-12' },
    { name: 'Jonas Richter', ticket: 'GA', ts: '3m ago', ok: true, seat: null },
    { name: 'Mila Hofmann', ticket: 'GA', ts: '3m ago', ok: false, reason: 'Already checked in at 21:14' },
    { name: 'Finn Wagner', ticket: 'VIP', ts: '4m ago', ok: true, seat: 'V-08' },
    { name: 'Clara Schulz', ticket: 'GA', ts: '5m ago', ok: true, seat: null },
  ]);

  const simulateScan = () => {
    const names = ['Max Neumann', 'Sophie Köhler', 'Paul Schneider', 'Hannah Bauer', 'Luka Fischer', 'Emil Braun'];
    const name = names[Math.floor(Math.random() * names.length)];
    const tier = Math.random() > 0.6 ? 'VIP' : 'GA';
    const ok = Math.random() > 0.15;
    const entry = ok
      ? { name, ticket: tier, ts: 'just now', ok: true, seat: tier === 'VIP' ? `V-${Math.floor(Math.random()*40)+1}` : null }
      : { name, ticket: tier, ts: 'just now', ok: false, reason: 'Already checked in' };
    setLastScan(entry);
    setRecentScans(prev => [entry, ...prev].slice(0, 8));
    if (ok) setCount(c => c + 1);
    setPulse(true); setTimeout(() => setPulse(false), 600);
  };

  return (
    <div style={{ minHeight: '100vh', background: 'oklch(0.14 0.008 60)', color: 'oklch(0.95 0.005 70)', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{ display:'flex', alignItems:'center', padding: '14px 22px', borderBottom: '1px solid oklch(0.24 0.01 60)', background: 'oklch(0.17 0.008 60)', gap: 16 }}>
        <button onClick={() => setRoute('events')} style={{ background:'transparent', border:0, color:'oklch(0.75 0.01 60)', display:'flex', alignItems:'center', gap: 6, cursor:'pointer', fontFamily:'inherit', fontSize: 13 }}>
          <Icon name="arrow" size={14} style={{ transform: 'rotate(180deg)' }}/> Exit check-in
        </button>
        <Divider vertical style={{ background: 'oklch(0.25 0.01 60)', height: 20 }}/>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Apparat · Berghain</div>
          <div style={{ fontSize: 11.5, opacity: 0.6 }}>Gate A · 24. Mai · Scanner #2</div>
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 99, background: online ? 'oklch(0.7 0.18 150)' : 'oklch(0.7 0.18 40)', boxShadow: online ? '0 0 0 4px oklch(0.7 0.18 150 / 0.2)' : 'none' }}/>
          <span style={{ fontSize: 12, fontWeight: 500 }}>{online ? 'Online · synced' : 'Offline · 12 queued'}</span>
          <button onClick={() => setOnline(o => !o)} style={{ marginLeft: 6, padding: '3px 8px', fontSize: 11, background: 'transparent', border: '1px solid oklch(0.3 0.01 60)', borderRadius: 6, color: 'oklch(0.75 0.01 60)', cursor: 'pointer' }}>Toggle</button>
        </div>
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 1, background: 'oklch(0.22 0.01 60)' }}>
        {/* Scanner pane */}
        <div style={{ background: 'oklch(0.14 0.008 60)', padding: 32, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
          {/* Big scanner frame */}
          <div style={{ position: 'relative', width: 360, height: 360, marginBottom: 28 }}>
            <div style={{ position:'absolute', inset: 0, borderRadius: 24, background: 'oklch(0.11 0.005 60)', overflow:'hidden' }}>
              {/* simulated camera view — moving scanlines */}
              <div style={{ position:'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, oklch(0.22 0.01 60), oklch(0.11 0.005 60))' }}/>
              <div style={{
                position:'absolute', left: 0, right: 0, top: 0, height: 2,
                background: 'linear-gradient(90deg, transparent, oklch(0.7 0.18 150), transparent)',
                boxShadow: '0 0 16px oklch(0.7 0.18 150)',
                animation: 'scanline 2.4s linear infinite',
              }}/>
            </div>
            {/* Corner brackets */}
            {['tl','tr','bl','br'].map(pos => {
              const s = {
                position:'absolute', width: 44, height: 44, borderColor: 'oklch(0.7 0.18 150)',
                borderStyle: 'solid', borderWidth: 0,
              };
              if (pos.includes('t')) s.top = 16; else s.bottom = 16;
              if (pos.includes('l')) { s.left = 16; s.borderLeftWidth = 3; } else { s.right = 16; s.borderRightWidth = 3; }
              if (pos.includes('t')) s.borderTopWidth = 3; else s.borderBottomWidth = 3;
              s.borderRadius = pos === 'tl' ? '12px 0 0 0' : pos === 'tr' ? '0 12px 0 0' : pos === 'bl' ? '0 0 0 12px' : '0 0 12px 0';
              return <div key={pos} style={s}/>;
            })}
            {/* Pulse ring when scan happens */}
            {pulse && <div style={{
              position:'absolute', inset: 16, borderRadius: 16,
              border: `3px solid ${lastScan?.ok ? 'oklch(0.7 0.18 150)' : 'oklch(0.7 0.18 40)'}`,
              animation: 'pulse-ring 600ms ease-out',
            }}/>}
          </div>

          <Button variant="accent" size="lg" icon="sparkle" onClick={simulateScan} style={{ background: 'oklch(0.7 0.18 150)', color: 'oklch(0.15 0.02 150)', borderColor: 'oklch(0.7 0.18 150)', minWidth: 200 }}>Simulate scan</Button>
          <div style={{ marginTop: 14, fontSize: 12.5, opacity: 0.55 }}>Hold QR code within the frame · or use manual entry →</div>
        </div>

        {/* Sidebar: live count + manual + recent */}
        <div style={{ background: 'oklch(0.16 0.008 60)', padding: 24, display:'flex', flexDirection:'column', gap: 20, overflow: 'auto' }}>
          {/* Live count */}
          <div>
            <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', opacity: 0.5, fontWeight: 600 }}>Checked in</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 6 }}>
              <span className="display" style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.02em' }}>
                <AnimateNumber value={count}/>
              </span>
              <span style={{ fontSize: 16, opacity: 0.5 }}>/ 2.400</span>
            </div>
            <div style={{ height: 6, borderRadius: 99, background: 'oklch(0.22 0.01 60)', marginTop: 10, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${(count/2400)*100}%`, background: 'linear-gradient(90deg, oklch(0.7 0.18 150), oklch(0.75 0.18 130))', borderRadius: 99, transition: 'width 400ms ease' }}/>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', marginTop: 10, fontSize: 11.5, opacity: 0.6 }}>
              <span>{Math.round((count/2400)*100)}% capacity</span>
              <span className="mono">42/min · last 5m</span>
            </div>
          </div>

          {/* Last scan card */}
          {lastScan && <div key={lastScan.ts + lastScan.name} style={{
            padding: 16, borderRadius: 12,
            background: lastScan.ok ? 'oklch(0.25 0.08 150)' : 'oklch(0.25 0.1 40)',
            border: `1px solid ${lastScan.ok ? 'oklch(0.35 0.12 150)' : 'oklch(0.4 0.14 40)'}`,
            animation: 'slideInRight 260ms cubic-bezier(0.2, 0.9, 0.3, 1)',
          }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 99,
                background: lastScan.ok ? 'oklch(0.7 0.18 150)' : 'oklch(0.7 0.18 40)',
                color: lastScan.ok ? 'oklch(0.15 0.02 150)' : 'oklch(0.15 0.02 40)',
                display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 700,
              }}><Icon name={lastScan.ok ? 'check' : 'close'} size={18}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600 }}>{lastScan.name}</div>
                <div style={{ fontSize: 12, opacity: 0.75 }}>
                  {lastScan.ok
                    ? `Welcome · ${lastScan.ticket}${lastScan.seat ? ' · Seat ' + lastScan.seat : ''}`
                    : lastScan.reason}
                </div>
              </div>
            </div>
            {!lastScan.ok && <div style={{ display:'flex', gap: 6, marginTop: 12 }}>
              <button style={{ flex:1, padding: '8px', borderRadius: 7, background: 'oklch(0.95 0.005 60)', color: 'oklch(0.2 0.01 60)', border: 0, fontFamily: 'inherit', fontSize: 12, fontWeight: 600, cursor:'pointer' }}>Override & admit</button>
              <button style={{ flex:1, padding: '8px', borderRadius: 7, background: 'transparent', color: 'oklch(0.95 0.005 60)', border: '1px solid oklch(0.4 0.01 60)', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, cursor:'pointer' }}>Deny</button>
            </div>}
          </div>}

          {/* Manual entry */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8, opacity: 0.8 }}>Manual lookup</div>
            <div style={{
              display:'flex', alignItems:'center', gap: 8,
              background: 'oklch(0.11 0.005 60)', border: '1px solid oklch(0.26 0.01 60)',
              borderRadius: 8, padding: '0 12px', height: 40,
            }}>
              <Icon name="search" size={15} style={{ opacity: 0.5 }}/>
              <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Name, phone, or ticket ID"
                style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: 'inherit', fontFamily: 'inherit', fontSize: 13 }}/>
            </div>
            {search.length > 1 && <div style={{ marginTop: 8, background: 'oklch(0.11 0.005 60)', border: '1px solid oklch(0.22 0.01 60)', borderRadius: 8, overflow: 'hidden' }}>
              {[
                { name: 'Emil ' + search, tier: 'GA', id: 'TX-8847' },
                { name: 'Anna ' + search, tier: 'VIP', id: 'TX-9204' },
              ].map((r, i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap: 10, padding: '10px 12px', borderBottom: i===0?'1px solid oklch(0.22 0.01 60)':'none', cursor:'pointer' }}>
                  <Avatar name={r.name} size={28}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{r.name}</div>
                    <div style={{ fontSize: 11, opacity: 0.55 }} className="mono">{r.id} · {r.tier}</div>
                  </div>
                  <Icon name="arrow" size={13} style={{ opacity: 0.4 }}/>
                </div>
              ))}
            </div>}
          </div>

          {/* Recent */}
          <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8, opacity: 0.8 }}>Recent scans</div>
            <div style={{ display:'flex', flexDirection:'column', gap: 2, overflow: 'auto' }}>
              {recentScans.map((r, i) => (
                <div key={i} style={{
                  display:'flex', alignItems:'center', gap: 10,
                  padding: '10px 8px', borderRadius: 8,
                  background: i === 0 && r === lastScan ? 'oklch(0.2 0.01 60)' : 'transparent',
                }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: 99, flexShrink: 0,
                    background: r.ok ? 'oklch(0.3 0.1 150)' : 'oklch(0.3 0.1 40)',
                    color: r.ok ? 'oklch(0.8 0.18 150)' : 'oklch(0.8 0.18 40)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}><Icon name={r.ok ? 'check' : 'close'} size={13}/></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{r.name}</div>
                    <div style={{ fontSize: 10.5, opacity: 0.55 }}>{r.ok ? `${r.ticket}${r.seat ? ' · '+r.seat : ''}` : r.reason}</div>
                  </div>
                  <div style={{ fontSize: 10.5, opacity: 0.5 }}>{r.ts}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Team */}
          <div style={{ padding: 12, borderRadius: 10, background: 'oklch(0.13 0.005 60)', border: '1px solid oklch(0.22 0.01 60)' }}>
            <div style={{ fontSize: 11, opacity: 0.55, textTransform:'uppercase', letterSpacing:'0.08em', fontWeight: 600 }}>Scanning team</div>
            <div style={{ display:'flex', alignItems:'center', gap: 10, marginTop: 10 }}>
              <div style={{ display:'flex' }}>
                <Avatar name="Jakob Braun" size={28} style={{ border: '2px solid oklch(0.16 0.008 60)' }}/>
                <Avatar name="Mia Fischer" size={28} style={{ border: '2px solid oklch(0.16 0.008 60)', marginLeft: -8 }}/>
                <Avatar name="Tim Wolf" size={28} style={{ border: '2px solid oklch(0.16 0.008 60)', marginLeft: -8 }}/>
              </div>
              <div style={{ fontSize: 11.5, opacity: 0.65 }}>3 scanners active · 42/min</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes scanline { 0% { top: 16px; } 50% { top: calc(100% - 18px); } 100% { top: 16px; } }
        @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.08); opacity: 0; } }
      `}</style>
    </div>
  );
};

window.CheckIn = CheckIn;