/* global React, StatusBar, Wordmark, OnboardVisual, PrimaryButton */
const { useState: useStateOB } = React;

const ONBOARD_SLIDES = [
  {
    num: '01',
    kicker: 'Magic moment',
    title: 'BE THE\nPIXEL.',
    body: "Your phone is one pixel in a nation's choreography of light. Tens of thousands move as one.",
    accent: '#FFB300',
    gridVariant: 0,
    meta: [['SIM', '47,842'], ['AREA', '12 STANDS'], ['MODE', 'IDLE']],
  },
  {
    num: '02',
    kicker: 'Auto sync',
    title: 'ONE\nUNIVERSAL\nRHYTHM.',
    body: "Every time the app opens, it locks to server time. No coordination. We're just all in the same instant.",
    accent: '#22D3EE',
    gridVariant: 1,
    meta: [['NTP', '±00MS'], ['BEAT', '600 MS'], ['LAG', '< 8 MS']],
  },
  {
    num: '03',
    kicker: 'Get ready',
    title: 'MAX BRIGHT.\nSCREEN ON.',
    body: 'The screen stays on at full brightness. Keep your battery topped up — the show runs long.',
    accent: '#FB7185',
    gridVariant: 2,
    meta: [['BRGHT', '100%'], ['DRAW', '~6%/h'], ['LOCK', 'OFF']],
  },
];

function MetaCell({ label, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span className="mono" style={{
        fontSize: 9, color: 'var(--ink-3)',
        letterSpacing: '0.18em', fontWeight: 600,
      }}>
        {label}
      </span>
      <span className="mono" style={{
        fontSize: 12, color: 'var(--ink)',
        letterSpacing: '0.04em', fontWeight: 700,
      }}>
        {value}
      </span>
    </div>
  );
}

function ScreenOnboarding({ onDone }) {
  const [i, setI] = useStateOB(0);
  const slide = ONBOARD_SLIDES[i];
  const isLast = i === ONBOARD_SLIDES.length - 1;
  const next = () => isLast ? onDone() : setI(i + 1);

  return (
    <div className="phone-inner" style={{ background: 'var(--bg)', color: 'var(--ink)' }}>
      <StatusBar tone="dark" />
      <div className="island" />

      {/* Top bar */}
      <div style={{
        position: 'absolute', top: 60, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 10,
      }}>
        <Wordmark size={14} tone="light" />
        <div className="mono" style={{
          fontSize: 10, color: 'var(--ink-3)',
          letterSpacing: '0.22em', fontWeight: 700,
        }}>
          ONBOARDING / {slide.num}
        </div>
      </div>

      {/* Visual area */}
      <div
        key={`vis-${i}`}
        className="fade-in"
        style={{
          position: 'absolute',
          top: 100, left: 0, right: 0, height: 280,
          overflow: 'hidden',
        }}>
        <OnboardVisual variant={slide.gridVariant} accent={slide.accent} />
        {/* Bottom mask for clean text join */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 60,
          background: 'linear-gradient(180deg, transparent 0%, var(--bg) 100%)',
          pointerEvents: 'none',
        }} />
      </div>

      {/* Data strip */}
      <div
        key={`meta-${i}`}
        className="fade-in"
        style={{
          position: 'absolute',
          top: 388, left: 24, right: 24,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr 1fr',
          gap: 12,
          paddingBottom: 12,
          borderBottom: '1px solid var(--line)',
        }}>
        {slide.meta.map(([l, v]) => (
          <MetaCell key={l} label={l} value={v} />
        ))}
      </div>

      {/* Headline block */}
      <div
        key={`txt-${i}`}
        className="fade-in"
        style={{
          position: 'absolute',
          top: 440, left: 24, right: 24,
          display: 'flex',
          alignItems: 'flex-start',
          gap: 14,
        }}>
        {/* Giant outline numeral */}
        <div className="display" style={{
          fontSize: 110, lineHeight: 0.78,
          color: 'transparent',
          WebkitTextStroke: `1.5px ${slide.accent}`,
          letterSpacing: '-0.04em',
          flexShrink: 0,
          marginTop: 2,
        }}>
          {slide.num}
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mono" style={{
            fontSize: 10, color: slide.accent,
            letterSpacing: '0.22em', fontWeight: 700,
            textTransform: 'uppercase',
            marginBottom: 8,
          }}>
            {slide.kicker}
          </div>
          <h1 className="display" style={{
            fontSize: 44, lineHeight: 0.86,
            whiteSpace: 'pre-line',
            letterSpacing: '-0.005em',
          }}>
            {slide.title}
          </h1>
        </div>
      </div>

      {/* Body — sits at fixed bottom-text position */}
      <div
        key={`body-${i}`}
        className="fade-in"
        style={{
          position: 'absolute',
          left: 24, right: 24, bottom: 116,
        }}>
        <p style={{
          fontSize: 14, lineHeight: 1.5,
          color: 'var(--ink-2)',
          textWrap: 'pretty',
          maxWidth: 320,
        }}>
          {slide.body}
        </p>
      </div>

      {/* Bottom action row */}
      <div style={{
        position: 'absolute', bottom: 38, left: 24, right: 24,
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        {/* Skip button — text only, low key */}
        <button
          onClick={onDone}
          style={{
            fontFamily: 'var(--mono)',
            fontSize: 11, fontWeight: 700,
            letterSpacing: '0.2em',
            color: 'var(--ink-3)',
            padding: '8px 0',
            visibility: isLast ? 'hidden' : 'visible',
          }}
        >
          SKIP
        </button>

        {/* Segmented progress */}
        <div style={{
          flex: 1,
          display: 'flex', gap: 4,
        }}>
          {ONBOARD_SLIDES.map((_, k) => (
            <div key={k} style={{
              height: 3, flex: 1,
              background: k <= i ? slide.accent : 'var(--bg-3)',
              borderRadius: 1,
              transition: 'background-color .3s ease',
            }} />
          ))}
        </div>

        {/* Forward — circular CTA */}
        <button
          onClick={next}
          aria-label={isLast ? 'Start' : 'Next'}
          style={{
            width: 56, height: 56,
            borderRadius: '50%',
            background: slide.accent,
            color: i === 1 ? '#0a1416' : '#111',
            display: 'grid', placeItems: 'center',
            boxShadow: `0 12px 36px -8px ${slide.accent}aa`,
            transition: 'transform .15s ease',
            flexShrink: 0,
          }}
          onPointerDown={(e) => (e.currentTarget.style.transform = 'scale(0.94)')}
          onPointerUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
          onPointerLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
        >
          {isLast ? (
            // Power / start glyph
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M12 3v9" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
              <path d="M6 7a8 8 0 1012 0" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" fill="none" />
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          )}
        </button>
      </div>

      <div className="home-indicator" style={{ color: '#fff' }} />
    </div>
  );
}

window.ScreenOnboarding = ScreenOnboarding;