// Scan screen — mock barcode scanner with viewfinder
function ScanScreen({ onDetect, onClose }) {
  const T = window.T;
  const { Icon } = window;
  const codes = ['40821', '32207', '20618', '55031'];

  return (
    <div style={{ width: '100%', height: '100%', background: '#0a0a0a', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* fake camera view */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, oklch(0.22 0.01 75) 0%, #000 80%)',
      }}>
        {/* scan-line animation */}
        <div style={{
          position: 'absolute', left: '12%', right: '12%', top: '50%', height: 2,
          background: T.accent, borderRadius: 999, opacity: 0.8,
          boxShadow: `0 0 24px ${T.accent}`,
          animation: 'scan 1.8s ease-in-out infinite',
        }} />
      </div>

      {/* viewfinder corners */}
      <div style={{
        position: 'absolute', left: '12%', right: '12%', top: '28%', bottom: '40%',
        pointerEvents: 'none',
      }}>
        {[['tl', 0, 0, 'top', 'left'], ['tr', 0, 0, 'top', 'right'], ['bl', 0, 0, 'bottom', 'left'], ['br', 0, 0, 'bottom', 'right']].map(([k, , , y, x]) => (
          <div key={k} style={{
            position: 'absolute', [y]: 0, [x]: 0, width: 28, height: 28,
            borderTop: y === 'top' ? `2px solid #fff` : 'none',
            borderBottom: y === 'bottom' ? `2px solid #fff` : 'none',
            borderLeft: x === 'left' ? `2px solid #fff` : 'none',
            borderRight: x === 'right' ? `2px solid #fff` : 'none',
            borderRadius: `${y === 'top' && x === 'left' ? '8px 0 0 0' : y === 'top' && x === 'right' ? '0 8px 0 0' : y === 'bottom' && x === 'left' ? '0 0 0 8px' : '0 0 8px 0'}`,
          }} />
        ))}
      </div>

      {/* header */}
      <div style={{ position: 'absolute', top: 58, left: 0, right: 0, padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
        <button onClick={onClose} style={{
          width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.15)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}><Icon name="close" size={16} color="#fff" /></button>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>
          Escáner
        </div>
        <div style={{ width: 36 }} />
      </div>

      {/* title */}
      <div style={{ position: 'absolute', top: 110, left: 24, right: 24, zIndex: 2 }}>
        <div style={{ fontFamily: T.serif, fontSize: 28, color: '#fff', letterSpacing: -0.6, lineHeight: 1.1 }}>
          Apunta al código
        </div>
        <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 18, color: 'rgba(255,255,255,0.6)', marginTop: 4, letterSpacing: -0.2 }}>
          del catálogo impreso
        </div>
      </div>

      {/* suggestion pills */}
      <div style={{ position: 'absolute', bottom: 140, left: 0, right: 0, padding: '0 24px', zIndex: 2 }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 10, textAlign: 'center' }}>
          o toca para simular
        </div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', flexWrap: 'wrap' }}>
          {codes.map(c => (
            <button key={c} onClick={() => onDetect(c)} style={{
              padding: '8px 14px', borderRadius: 999,
              background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(8px)',
              border: '1px solid rgba(255,255,255,0.2)', color: '#fff',
              fontFamily: T.mono, fontSize: 12, cursor: 'pointer', letterSpacing: 0.5,
            }}>{c}</button>
          ))}
        </div>
      </div>

      {/* torch button */}
      <div style={{ position: 'absolute', bottom: 58, left: 0, right: 0, display: 'flex', justifyContent: 'center', zIndex: 2 }}>
        <button style={{
          width: 56, height: 56, borderRadius: 999, background: 'rgba(255,255,255,0.12)',
          border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name="bolt" size={20} color="#fff" /></button>
      </div>

      <style>{`@keyframes scan { 0%, 100% { transform: translateY(-40px); opacity: 0.3 } 50% { transform: translateY(40px); opacity: 1 } }`}</style>
    </div>
  );
}

// Bottom tab bar
function TabBar({ tab, onChange, hidden }) {
  const T = window.T;
  const { Icon } = window;
  if (hidden) return null;
  const tabs = [
    { key: 'home', label: 'Inicio', icon: 'home' },
    { key: 'orders', label: 'Pedidos', icon: 'list' },
    { key: 'pagos', label: 'Pagos', icon: 'doc' },
    { key: 'new', label: 'Nuevo', icon: 'plus' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', zIndex: 40,
      background: T.ink, borderRadius: 999, padding: 6, display: 'flex', gap: 4,
      boxShadow: '0 10px 30px rgba(0,0,0,0.22)',
    }}>
      {tabs.map(t => {
        const active = tab === t.key;
        const isNew = t.key === 'new';
        return (
          <button key={t.key} onClick={() => onChange(t.key)} style={{
            padding: active ? '10px 16px' : '10px', borderRadius: 999,
            background: active ? (isNew ? T.accent : T.paper) : 'transparent',
            color: active ? (isNew ? T.paper : T.ink) : 'rgba(255,255,255,0.7)',
            border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: T.sans, fontSize: 12, fontWeight: 500,
            transition: 'all 0.2s',
          }}>
            <Icon name={t.icon} size={16} color={active ? (isNew ? T.paper : T.ink) : 'rgba(255,255,255,0.7)'} />
            {active && t.label}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { ScanScreen, TabBar });