/* ──────────────────────────────────────────────────────────────
   Staff scanner — /staff/scan
   Same DNA, inverted canvas: warm-charcoal background so it
   feels like an operator tool, with the brand pink/gold/cobalt
   used as accents and active states.
   ────────────────────────────────────────────────────────────── */

const StaffStatusBar = () => (
  <div style={{
    height: 50, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    padding: '0 28px 8px', color: '#fff',
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15,
    position: 'relative', zIndex: 5,
  }}>
    <span>9:41</span>
    <div style={{ display: 'flex', gap: 5, alignItems: 'center', opacity: 0.9 }}>
      <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="0.5"/><rect x="4.5" y="4" width="3" height="7" rx="0.5"/><rect x="9" y="2" width="3" height="9" rx="0.5"/><rect x="13.5" y="0" width="3" height="11" rx="0.5"/></svg>
      <svg width="16" height="11" viewBox="0 0 16 11" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M1 4a10 10 0 0 1 14 0M3.5 6.5a6.5 6.5 0 0 1 9 0M6 9a3 3 0 0 1 4 0" /></svg>
      <svg width="26" height="12" viewBox="0 0 26 12"><rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5"/><rect x="2" y="2" width="18" height="8" rx="1.5" fill="currentColor"/><rect x="23.5" y="4" width="1.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"/></svg>
    </div>
  </div>
);

/* ── Header strip ─────────────────────────────────────────────────── */
const StaffHeader = ({ shift }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '6px 22px 18px', position: 'relative', zIndex: 4,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <SakuraGlyph size={20} color="var(--sakura-gold)" />
      <div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 16, color: '#fff', lineHeight: 1, letterSpacing: '-0.01em',
        }}>sakura<span style={{ color: 'var(--sakura-gold)', fontWeight: 500, marginLeft: 6, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>· personal</span></div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 500,
          color: 'rgba(255,253,251,0.55)', marginTop: 3,
        }}>{shift}</div>
      </div>
    </div>
    <button style={{
      width: 38, height: 38, borderRadius: 19,
      background: 'rgba(255,253,251,0.07)',
      border: '1px solid rgba(255,253,251,0.12)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--sakura-gold)', cursor: 'pointer',
    }}>
      <Icon name="history" size={18} />
    </button>
  </div>
);

/* ── Viewfinder with animated corner brackets + scan line ─────────── */
const Viewfinder = ({ scanning }) => {
  const size = 250;
  const cornerLen = 36;
  const stroke = 3;
  return (
    <div style={{
      position: 'relative',
      width: size, height: size,
      margin: '0 auto',
      borderRadius: 28,
      background: '#0A0805',
      boxShadow:
        'inset 0 0 0 1px rgba(184,153,104,0.18),' +
        '0 0 0 6px rgba(255,253,251,0.04),' +
        '0 30px 60px -20px rgba(47,91,170,0.35)',
      overflow: 'hidden',
    }}>
      {/* faint camera feed gradient */}
      <div style={{
        position: 'absolute', inset: 0,
        background:
          'radial-gradient(80% 60% at 50% 50%, rgba(47,91,170,0.18) 0%, transparent 70%),' +
          'radial-gradient(120% 90% at 50% 100%, rgba(232,154,160,0.12) 0%, transparent 60%)',
      }} />

      {/* corner brackets in gold */}
      {[
        { top: 14, left: 14, bw: stroke, bh: stroke, br: stroke, bl: stroke, w: cornerLen, h: cornerLen, top1: true, left1: true },
      ].map((_, i) => null)}
      {/* Top-left */}
      <div style={{ position: 'absolute', top: 14, left: 14, width: cornerLen, height: cornerLen, borderTop: `${stroke}px solid var(--sakura-gold)`, borderLeft: `${stroke}px solid var(--sakura-gold)`, borderTopLeftRadius: 10 }} />
      {/* Top-right */}
      <div style={{ position: 'absolute', top: 14, right: 14, width: cornerLen, height: cornerLen, borderTop: `${stroke}px solid var(--sakura-gold)`, borderRight: `${stroke}px solid var(--sakura-gold)`, borderTopRightRadius: 10 }} />
      {/* Bottom-left */}
      <div style={{ position: 'absolute', bottom: 14, left: 14, width: cornerLen, height: cornerLen, borderBottom: `${stroke}px solid var(--sakura-gold)`, borderLeft: `${stroke}px solid var(--sakura-gold)`, borderBottomLeftRadius: 10 }} />
      {/* Bottom-right */}
      <div style={{ position: 'absolute', bottom: 14, right: 14, width: cornerLen, height: cornerLen, borderBottom: `${stroke}px solid var(--sakura-gold)`, borderRight: `${stroke}px solid var(--sakura-gold)`, borderBottomRightRadius: 10 }} />

      {/* corner pulse glow */}
      <div style={{
        position: 'absolute', inset: 14,
        borderRadius: 14,
        boxShadow: 'inset 0 0 32px rgba(184,153,104,0.18)',
        pointerEvents: 'none',
      }} />

      {/* scanning line */}
      {scanning && (
        <div style={{
          position: 'absolute', left: 14, right: 14, top: 14,
          height: 2,
          background: 'linear-gradient(90deg, transparent 0%, var(--sakura-rose) 50%, transparent 100%)',
          boxShadow: '0 0 18px var(--sakura-petal), 0 0 6px #fff',
          animation: 'scan-sweep 2.2s ease-in-out infinite',
          borderRadius: 2,
        }} />
      )}

      {/* QR ghost in centre — hint */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: 0.18,
      }}>
        <FakeQR size={140} fg="#F4C5C7" bg="transparent" />
      </div>
    </div>
  );
};

/* ── Customer info card that slides up after scan ─────────────────── */
const CustomerInfoCard = ({ user, stampCount, total, onAddStamp, onRedeem, justScanned }) => {
  const complete = stampCount >= total;
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background:
        'linear-gradient(180deg, rgba(28,22,16,0) 0%, var(--staff-bg-2) 12%, var(--staff-bg-2) 100%)',
      paddingTop: 30,
      animation: justScanned ? 'slide-up 0.5s cubic-bezier(.2,.9,.3,1.1)' : 'none',
    }}>
      <div style={{
        margin: '0 14px',
        background: 'linear-gradient(180deg, #221C15 0%, #1A1611 100%)',
        borderRadius: 26,
        border: '1px solid rgba(184,153,104,0.18)',
        padding: '18px 18px 18px',
        boxShadow: '0 -10px 40px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,253,251,0.04)',
      }}>
        {/* drag handle */}
        <div style={{
          width: 36, height: 4, background: 'rgba(184,153,104,0.4)',
          borderRadius: 2, margin: '0 auto 14px',
        }} />

        {/* scan-success chip */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: 'rgba(47,91,170,0.18)',
          border: '1px solid rgba(47,91,170,0.4)',
          padding: '4px 10px', borderRadius: 100,
          fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.15em', textTransform: 'uppercase',
          color: '#9DBAF0',
          marginBottom: 12,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#9DBAF0', boxShadow: '0 0 6px #9DBAF0' }} />
          QR verificado
        </div>

        {/* customer row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 26,
            background: 'linear-gradient(135deg, #F8D7D9 0%, #E89AA0 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20,
            color: 'var(--sakura-rose)',
            boxShadow: '0 0 0 2px rgba(184,153,104,0.4)',
          }}>{user.initial}</div>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 18, color: '#fff', letterSpacing: '-0.01em',
            }}>{user.name} {user.lastName}</div>
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 12,
              color: 'rgba(255,253,251,0.55)', marginTop: 2,
              fontVariantNumeric: 'tabular-nums',
            }}>ID · {user.id} · cliente desde {user.since}</div>
          </div>
        </div>

        {/* progress mini-grid */}
        <div style={{
          background: 'rgba(244,197,199,0.06)',
          border: '1px solid rgba(244,197,199,0.12)',
          borderRadius: 18,
          padding: '14px 14px 12px',
          marginBottom: 14,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            marginBottom: 10,
          }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--sakura-gold)',
            }}>Progreso</span>
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 22, color: '#fff', letterSpacing: '-0.02em',
            }}>{stampCount}<span style={{ color: 'rgba(255,253,251,0.4)', fontWeight: 500 }}>/{total}</span></span>
          </div>

          {/* compact 10-cell row */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 4,
          }}>
            {Array.from({ length: total }, (_, i) => (
              <div key={i} style={{
                aspectRatio: '1 / 1',
                borderRadius: 6,
                background: i < stampCount
                  ? 'linear-gradient(180deg, #3F6EC0 0%, var(--sakura-ink) 100%)'
                  : 'rgba(255,253,251,0.05)',
                border: i < stampCount
                  ? '1px solid rgba(157,186,240,0.5)'
                  : '1px dashed rgba(184,153,104,0.3)',
                boxShadow: i < stampCount ? '0 0 10px rgba(47,91,170,0.4)' : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {i < stampCount && (
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* action buttons */}
        <div style={{ display: 'flex', gap: 10 }}>
          <button
            onClick={onAddStamp}
            disabled={complete}
            style={{
              flex: 1.4,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              height: 56, borderRadius: 16, border: 'none', cursor: complete ? 'not-allowed' : 'pointer',
              background: complete
                ? 'rgba(47,91,170,0.25)'
                : 'linear-gradient(180deg, #3F6EC0 0%, var(--sakura-ink) 100%)',
              color: '#fff',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15,
              letterSpacing: '-0.01em',
              opacity: complete ? 0.5 : 1,
              boxShadow: complete ? 'none'
                : '0 8px 20px -6px rgba(47,91,170,0.6), inset 0 1px 0 rgba(255,255,255,0.2)',
              transition: 'transform .1s',
            }}
            onMouseDown={(e) => !complete && (e.currentTarget.style.transform = 'scale(0.97)')}
            onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
            onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
          >
            <Icon name="plus" size={20} color="#fff" />
            Añadir sello
          </button>
          <button
            onClick={onRedeem}
            disabled={!complete}
            style={{
              flex: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              height: 56, borderRadius: 16, cursor: complete ? 'pointer' : 'not-allowed',
              background: complete
                ? 'linear-gradient(180deg, #D9B477 0%, var(--sakura-gold) 100%)'
                : 'rgba(184,153,104,0.10)',
              color: complete ? '#1A1815' : 'rgba(184,153,104,0.6)',
              border: complete ? 'none' : '1px solid rgba(184,153,104,0.25)',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
              letterSpacing: '-0.01em',
              boxShadow: complete
                ? '0 8px 20px -6px rgba(184,153,104,0.5), inset 0 1px 0 rgba(255,255,255,0.3)'
                : 'none',
            }}
          >
            <Icon name="gift" size={18} color={complete ? '#1A1815' : 'rgba(184,153,104,0.6)'} />
            Canjear
          </button>
        </div>

        {/* tiny meta row */}
        <div style={{
          marginTop: 14, paddingTop: 12,
          borderTop: '1px solid rgba(184,153,104,0.15)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-body)', fontSize: 11,
          color: 'rgba(255,253,251,0.4)',
        }}>
          <span>Última visita · hace 4 días</span>
          <span style={{ color: 'var(--sakura-gold)', fontWeight: 600 }}>2 canjes históricos</span>
        </div>
      </div>
    </div>
  );
};

/* ── Staff bottom bar (minimal — single context) ──────────────────── */
const StaffBottomBar = () => (
  <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0,
    paddingTop: 8, paddingBottom: 22,
    background: 'rgba(10,8,5,0.85)',
    backdropFilter: 'blur(12px)',
    borderTop: '1px solid rgba(184,153,104,0.18)',
    display: 'flex', justifyContent: 'space-around', zIndex: 60,
  }}>
    {[
      { icon: 'qr',      label: 'Escanear', on: true },
      { icon: 'history', label: 'Sellos' },
      { icon: 'gift',    label: 'Canjes' },
      { icon: 'user',    label: 'Turno' },
    ].map((it, i) => (
      <div key={i} style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
        color: it.on ? 'var(--sakura-gold)' : 'rgba(255,253,251,0.4)',
        position: 'relative',
      }}>
        {it.on && <span style={{
          position: 'absolute', top: -8, width: 24, height: 3, borderRadius: 2,
          background: 'var(--sakura-gold)',
        }} />}
        <Icon name={it.icon} size={22} />
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 10, fontWeight: 600,
        }}>{it.label}</span>
      </div>
    ))}
  </div>
);

const StaffScreen = ({ user, stampCount, total, onAddStamp, onRedeem, justScanned }) => (
  <PhoneFrame label="Personal · /staff/scan">
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      background: `
        radial-gradient(60% 40% at 50% 25%, rgba(47,91,170,0.15) 0%, transparent 70%),
        radial-gradient(50% 30% at 80% 80%, rgba(232,154,160,0.10) 0%, transparent 70%),
        linear-gradient(180deg, var(--staff-bg) 0%, #0E0B07 100%)
      `,
      overflow: 'hidden',
    }}>
      {/* subtle diagonal hairlines, like the printed card */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06, pointerEvents: 'none',
        backgroundImage:
          'repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 28px)',
      }} />

      <StaffStatusBar />
      <StaffHeader shift="Turno noche · Mesa 7" />

      {/* instruction */}
      <div style={{
        textAlign: 'center', padding: '6px 30px 22px', position: 'relative', zIndex: 3,
      }}>
        <div style={{
          fontFamily: 'var(--font-accent)', fontStyle: 'italic',
          fontSize: 13, color: 'var(--sakura-gold)', letterSpacing: '0.04em', marginBottom: 4,
        }}>スキャン</div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
          color: '#fff', letterSpacing: '-0.01em', lineHeight: 1.2,
        }}>Apunta al QR del cliente</div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 12,
          color: 'rgba(255,253,251,0.5)', marginTop: 6,
        }}>El sello se añade al detectar el código.</div>
      </div>

      <Viewfinder scanning={!justScanned || true} />

      <CustomerInfoCard
        user={user}
        stampCount={stampCount}
        total={total}
        onAddStamp={onAddStamp}
        onRedeem={onRedeem}
        justScanned={justScanned}
      />

      <StaffBottomBar />
    </div>
  </PhoneFrame>
);

window.StaffScreen = StaffScreen;