/* global React, IOSDevice, IOSStatusBar */

const { useState } = React;

// =====================================================================
// Shared chrome: status bar (navy theme, white icons), home indicator
// =====================================================================
function ScreenShell({ children, vignette = false, statusDark = false }) {
  return (
    <div className="sg-screen">
      <div className="sg-checker" />
      {vignette && <div className="sg-vignette" />}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <IOSStatusBar dark={true} />
      </div>
      <div className="sg-content">{children}</div>
      <div
        style={{
          position: 'absolute',
          bottom: 0, left: 0, right: 0, zIndex: 60,
          height: 34, display: 'flex',
          justifyContent: 'center', alignItems: 'flex-end',
          paddingBottom: 8, pointerEvents: 'none',
        }}
      >
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.7)' }} />
      </div>
    </div>
  );
}

// =====================================================================
// SCREEN 1 — Welcome / Setup Start
// =====================================================================
function ScreenWelcome() {
  return (
    <ScreenShell vignette>
      <div style={{ flex: 1, padding: '90px 28px 28px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="sg-eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>
            Scroll Gambit
          </div>
          <div className="sg-eyebrow" style={{ color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em' }}>
            01 · 05
          </div>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 28 }}>
          <div className="sg-glow" style={{ marginTop: -40 }}>
            <img
              src={(typeof window !== 'undefined' && window.__resources && window.__resources.logoImg) || "assets/logo.png"}
              alt="Scroll Gambit"
              width={188}
              height={188}
              style={{ borderRadius: 42, boxShadow: '0 0 0 1px rgba(255,255,255,0.06)' }}
            />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '0 6px' }}>
            <h1 className="sg-h1" style={{ margin: 0, fontSize: 32 }}>
              Solve a chess puzzle <br />before you scroll.
            </h1>
            <p className="sg-body" style={{ margin: 0, fontSize: 17 }}>
              Put Instagram behind one quick tactic.
            </p>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <button className="sg-btn sg-btn-primary">
            Set up Instagram
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M5 3l5 5-5 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button className="sg-btn sg-btn-link" style={{ textAlign: 'center' }}>
            How it works
          </button>
        </div>
      </div>
    </ScreenShell>
  );
}

// =====================================================================
// SCREEN 2 — Choose App to Block
// =====================================================================
const APPS = [
  { id: 'ig', name: 'Instagram', sub: 'Recommended first gate', icon: 'ig' },
  { id: 'tt', name: 'TikTok',    sub: 'Short video',            icon: 'tt' },
];

function AppIcon({ kind, size = 44 }) {
  const radius = size * 0.27;
  const common = {
    width: size, height: size, borderRadius: radius,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  };
  if (kind === 'ig') {
    return (
      <div style={{ ...common, background: 'linear-gradient(135deg, #FFC83D 0%, #E1306C 50%, #833AB4 100%)' }}>
        <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="18" height="18" rx="5" stroke="#fff" strokeWidth="2"/>
          <circle cx="12" cy="12" r="4" stroke="#fff" strokeWidth="2"/>
          <circle cx="17.5" cy="6.5" r="1.2" fill="#fff"/>
        </svg>
      </div>
    );
  }
  if (kind === 'tt') {
    return (
    <div style={{ width: size, height: size, borderRadius: radius, overflow: 'hidden', background: '#000', flexShrink: 0 }}>
      <img
        src={(typeof window !== 'undefined' && window.__resources && window.__resources.tiktokIcon) || 'assets/app-tiktok.png'}
        alt="TikTok"
        draggable={false}
        style={{ width: '100%', height: '100%', display: 'block', userSelect: 'none' }}
      />
    </div>
    );
  }
  if (kind === 'yt') {
    return (
      <div style={{ ...common, background: '#FF0033' }}>
        <svg width={size*0.55} height={size*0.4} viewBox="0 0 24 18">
          <path d="M10 6l6 3-6 3z" fill="#fff"/>
        </svg>
      </div>
    );
  }
  if (kind === 'x') {
    return (
      <div style={{ ...common, background: '#000' }}>
        <svg width={size*0.45} height={size*0.45} viewBox="0 0 24 24">
          <path d="M3 3l8 11L3 21h2.5l6.7-7 5.3 7H22l-8.6-11.4L21 3h-2.5l-6 6.3L7.6 3z" fill="#fff"/>
        </svg>
      </div>
    );
  }
  if (kind === 'rd') {
    return (
      <div style={{ ...common, background: '#FF4500' }}>
        <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="#fff">
          <circle cx="12" cy="13" r="7.5" fill="#fff"/>
          <circle cx="9" cy="13" r="1.1" fill="#FF4500"/>
          <circle cx="15" cy="13" r="1.1" fill="#FF4500"/>
          <path d="M9 16c1 0.8 2 1.2 3 1.2s2-0.4 3-1.2" stroke="#FF4500" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
          <circle cx="17" cy="6" r="1.5" fill="#fff"/>
          <path d="M14 7l3-1" stroke="#fff" strokeWidth="1.2"/>
        </svg>
      </div>
    );
  }
  return null;
}

function ScreenChooseApp() {
  const [selected, setSelected] = useState('ig');
  return (
    <ScreenShell>
      <div style={{ flex: 1, padding: '80px 22px 28px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
          <button
            style={{
              width: 36, height: 36, borderRadius: 12,
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
            }}
          >
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M8 2L3 6l5 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div className="sg-eyebrow" style={{ color: 'rgba(255,255,255,0.4)' }}>Step 1 of 3</div>
        </div>

        <h1 className="sg-h1" style={{ margin: '0 0 6px', maxWidth: 320 }}>
          Choose your first scroll gate.
        </h1>
        <p className="sg-body" style={{ margin: '0 0 22px' }}>
          One app to start. You can add more later.
        </p>

        {/* Featured Instagram card */}
        <div
          onClick={() => setSelected('ig')}
          className={`sg-card ${selected === 'ig' ? 'sg-card-selected' : ''}`}
          style={{ display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', padding: 18 }}
        >
          <AppIcon kind="ig" size={58} />
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 19, fontWeight: 600 }}>Instagram</span>
              <span className="sg-pill sg-pill-blue" style={{ padding: '3px 9px', fontSize: 10.5 }}>
                Recommended
              </span>
            </div>
            <div className="sg-body" style={{ fontSize: 13.5, marginTop: 4 }}>
              Most users gate this one first.
            </div>
          </div>
          <div className={`sg-radio ${selected === 'ig' ? 'sg-radio-on' : ''}`} />
        </div>

        <div className="sg-eyebrow" style={{ margin: '22px 4px 10px', color: 'rgba(255,255,255,0.35)' }}>
          Or pick another
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {APPS.slice(1).map(a => (
            <div
              key={a.id}
              onClick={() => setSelected(a.id)}
              className={`sg-card ${selected === a.id ? 'sg-card-selected' : ''}`}
              style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '12px 14px', cursor: 'pointer',
              }}
            >
              <AppIcon kind={a.icon} size={40} />
              <div style={{ flex: 1, fontSize: 16, fontWeight: 500 }}>{a.name}</div>
              <div className={`sg-radio ${selected === a.id ? 'sg-radio-on' : ''}`} />
            </div>
          ))}
        </div>

        <div style={{ flex: 1 }} />
        <button className="sg-btn sg-btn-primary">Continue</button>
      </div>
    </ScreenShell>
  );
}

// =====================================================================
// SCREEN 3 — Choose Chess Level + Gate Rules
// =====================================================================
const LEVELS = [
  { id: 'new',  label: 'New to chess',    rating: '< 800' },
  { id: 'beg',  label: 'Beginner',         rating: '800–1100' },
  { id: 'cas',  label: 'Casual player',    rating: '1100–1400' },
  { id: 'int',  label: 'Intermediate',     rating: '1400–1700' },
  { id: 'str',  label: 'Strong player',    rating: '1700+' },
  { id: 'kn',   label: 'I know my rating', rating: 'Enter it' },
];

function ScreenLevel() {
  const [level, setLevel] = useState('cas');
  return (
    <ScreenShell>
      <div style={{ flex: 1, padding: '80px 22px 28px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <button
            style={{
              width: 36, height: 36, borderRadius: 12,
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
            }}
          >
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M8 2L3 6l5 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div className="sg-eyebrow" style={{ color: 'rgba(255,255,255,0.4)' }}>Step 2 of 3</div>
        </div>

        <h2 className="sg-h2" style={{ margin: '0 0 16px' }}>How strong are you at chess?</h2>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {LEVELS.map(l => (
            <div
              key={l.id}
              onClick={() => setLevel(l.id)}
              className={`sg-chip ${level === l.id ? 'sg-chip-selected' : ''}`}
              style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 4, padding: '12px 14px' }}
            >
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>{l.label}</div>
              <div className="sg-mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)' }}>
                {l.rating}
              </div>
            </div>
          ))}
        </div>

        <h2 className="sg-h2" style={{ margin: '28px 0 6px' }}>Choose your gate</h2>
        <p className="sg-body" style={{ margin: '0 0 16px', fontSize: 14.5 }}>
          Keep solving to earn more time. Each puzzle gets harder.
        </p>

        {/* Ladder visual */}
        <div style={{
          display: 'flex', alignItems: 'flex-end', gap: 6, marginBottom: 14,
          padding: '14px 14px 12px', background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16,
        }}>
          {[
            { lvl: 'Easy',   add: '+5',  total: 5,  h: 38 },
            { lvl: 'Your level', add: '+5',  total: 10, h: 60 },
            { lvl: 'Harder', add: '+7',  total: 17, h: 92 },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div className="sg-mono" style={{ fontSize: 16, fontWeight: 700, color: i === 2 ? '#fff' : 'rgba(255,255,255,0.85)' }}>
                {s.total}<span style={{ fontSize: 10, opacity: 0.5 }}>min</span>
              </div>
              <div style={{
                width: '100%', height: s.h, borderRadius: 8,
                background: i === 0
                  ? 'linear-gradient(180deg, rgba(40,86,255,0.35), rgba(40,86,255,0.15))'
                  : i === 1
                  ? 'linear-gradient(180deg, rgba(40,86,255,0.65), rgba(40,86,255,0.3))'
                  : 'linear-gradient(180deg, #4a73ff, #2856ff)',
                border: '1px solid rgba(255,255,255,0.08)',
              }} />
              <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>
                {s.lvl}
              </div>
              <div className="sg-mono" style={{ fontSize: 10.5, color: '#4a73ff', fontWeight: 600 }}>{s.add}</div>
            </div>
          ))}
        </div>

        {/* Rule rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
          {[
            { idx: 1, text: 'Easier than your level', reward: '+5 min' },
            { idx: 2, text: 'Your level',             reward: '+5 min' },
            { idx: 3, text: 'Harder',                 reward: '+7 min' },
          ].map(r => (
            <div key={r.idx} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.06)', borderRadius: 14,
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: 8,
                background: 'rgba(40,86,255,0.18)', color: '#7a9bff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
              }}>{r.idx}</div>
              <div style={{ flex: 1, fontSize: 14.5 }}>{r.text}</div>
              <div className="sg-mono" style={{ fontSize: 13, fontWeight: 600, color: '#4a73ff' }}>{r.reward}</div>
            </div>
          ))}
        </div>

        <button className="sg-btn sg-btn-primary">Use this gate</button>
      </div>
    </ScreenShell>
  );
}

Object.assign(window, { ScreenWelcome, ScreenChooseApp, ScreenLevel, ScreenShell, AppIcon });