/* global React, IOSStatusBar, Chessboard, FORK_POSITION, ScreenShell, AppIcon */

const { useState: useState2 } = React;

function ScreenPuzzle() {
  const [state, setState] = useState2('idle');  // idle | hint | wrong | solved
  const [hintUsed, setHintUsed] = useState2(false);

  const reward = hintUsed ? '+3 min' : '+5 min';

  return (
    <ScreenShell vignette>
      {/* top vignette + spotlight */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(80% 50% at 50% 45%, rgba(40,86,255,0.16), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{ flex: 1, padding: '74px 0 24px', display: 'flex', flexDirection: 'column' }}>
        {/* Top row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, padding: '0 22px' }}>
          <div className="sg-pill sg-pill-locked">
            <svg width="11" height="13" viewBox="0 0 11 13" fill="none">
              <path d="M2 6V4a3.5 3.5 0 117 0v2" stroke="currentColor" strokeWidth="1.4" fill="none"/>
              <rect x="1" y="6" width="9" height="6.5" rx="1.4" fill="currentColor" opacity="0.9"/>
            </svg>
            Instagram locked
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <div className="sg-pill sg-pill-locked" style={{ padding: '5px 10px' }}>Puzzle 1 of 3</div>
            <div className="sg-pill sg-pill-reward" style={{ padding: '5px 10px' }}>{reward}</div>
          </div>
        </div>

        {/* Progress dots */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 22, padding: '0 22px' }}>
          <div style={{ flex: 1, height: 3, borderRadius: 2, background: '#4a73ff' }} />
          <div style={{ flex: 1, height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.12)' }} />
          <div style={{ flex: 1, height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.12)' }} />
        </div>

        {/* Instruction */}
        <div style={{ marginBottom: 16, padding: '0 22px' }}>
          <h2 className="sg-h2" style={{ margin: 0, fontSize: 28 }}>Find the best move.</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
            <span className="sg-eyebrow" style={{ color: 'rgba(255,255,255,0.4)' }}>White to move</span>
            <span style={{ width: 3, height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.2)' }} />
            <span className="sg-mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>Rating · 1350</span>
          </div>
        </div>

        {/* Board — full bleed, edge-to-edge */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Chessboard
            position={FORK_POSITION}
            size={402}
            selected={state === 'hint' ? 'e5' : null}
            highlightFrom={state === 'solved' ? 'e5' : null}
            highlightTo={state === 'solved' ? 'f7' : null}
            showCoords={false}
          />
        </div>

        {/* Status line */}
        <div style={{ minHeight: 26, textAlign: 'center', marginBottom: 14, padding: '0 22px' }}>
          {state === 'hint' && (
            <div style={{ fontSize: 13.5, color: 'rgba(255,210,74,0.95)', fontWeight: 500 }}>
              Hint used. Reward reduced to +3 min.
            </div>
          )}
          {state === 'wrong' && (
            <div style={{ fontSize: 13.5, color: 'rgba(255,140,140,0.95)', fontWeight: 500 }}>
              Not quite. Try again.
            </div>
          )}
          {state === 'solved' && (
            <div style={{ fontSize: 13.5, color: 'var(--sg-success)', fontWeight: 600 }}>
              Solved. +5 minutes earned.
            </div>
          )}
        </div>

        {/* Bottom action row */}
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', gap: 10, padding: '0 22px' }}>
          <button
            className="sg-btn sg-btn-ghost"
            style={{ flex: 1, height: 52, fontSize: 15 }}
            onClick={() => { setState('hint'); setHintUsed(true); }}
          >
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ marginRight: 2 }}>
              <path d="M7 1.5a4 4 0 00-2.5 7.2v1.6h5V8.7A4 4 0 007 1.5z" stroke="#ffd24a" strokeWidth="1.4" fill="none"/>
              <path d="M5 12h4M6 13.2h2" stroke="#ffd24a" strokeWidth="1.4" strokeLinecap="round"/>
            </svg>
            Hint
          </button>
          <button
            className="sg-btn sg-btn-ghost"
            style={{ flex: 1, height: 52, fontSize: 15, color: 'rgba(255,255,255,0.55)' }}
          >
            Give up
          </button>
        </div>
      </div>
    </ScreenShell>
  );
}

// =====================================================================
// SCREEN 5 — Unlock Success
// =====================================================================
function ScreenUnlock() {
  return (
    <ScreenShell>
      {/* success vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(70% 55% at 50% 32%, rgba(40,86,255,0.32), transparent 65%)',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', top: 70, left: '50%', transform: 'translateX(-50%)',
        width: 280, height: 280, borderRadius: 280,
        background: 'radial-gradient(circle, rgba(74,115,255,0.4) 0%, transparent 70%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
      }} />

      <div style={{ flex: 1, padding: '70px 26px 28px', display: 'flex', flexDirection: 'column' }}>
        {/* close-ish row */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
          <div className="sg-pill sg-pill-blue" style={{ padding: '5px 10px' }}>
            <span style={{ width: 6, height: 6, borderRadius: 4, background: '#4a73ff', boxShadow: '0 0 8px #4a73ff' }} />
            Earned
          </div>
        </div>

        {/* Logo + headline */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 22, marginTop: 10 }}>
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: -14, borderRadius: 40,
              background: 'radial-gradient(circle, rgba(74,115,255,0.55), transparent 65%)',
              filter: 'blur(8px)',
            }} />
            <img
              src={(typeof window !== 'undefined' && window.__resources && window.__resources.logoImg) || "assets/logo.png"}
              alt=""
              width={112}
              height={112}
              style={{ borderRadius: 26, position: 'relative', boxShadow: '0 12px 40px rgba(40,86,255,0.4)' }}
            />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <h1 style={{
              margin: 0, fontSize: 48, fontWeight: 800, letterSpacing: '-0.03em',
              background: 'linear-gradient(180deg, #ffffff 0%, #b8c8ff 100%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>Unlocked</h1>
            <p className="sg-body" style={{ margin: 0, fontSize: 16, maxWidth: 280 }}>
              Instagram is open for the next{' '}
              <span className="sg-mono" style={{ color: '#fff', fontWeight: 600 }}>5 minutes</span>.
            </p>
          </div>
        </div>

        {/* Stats row */}
        <div style={{
          display: 'flex',
          marginTop: 36,
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 18,
          overflow: 'hidden',
        }}>
          {[
            { value: '1',     label: 'puzzle solved', mono: false },
            { value: '+5',    label: 'min earned',   mono: true, accent: true },
            { value: '+6',    label: 'rating',        mono: true },
          ].map((s, i) => (
            <div key={i} style={{
              flex: 1, padding: '16px 8px', textAlign: 'center',
              borderLeft: i ? '1px solid rgba(255,255,255,0.08)' : 'none',
            }}>
              <div className={s.mono ? 'sg-mono' : ''} style={{
                fontSize: 24, fontWeight: 700,
                color: s.accent ? '#4a73ff' : '#fff',
                letterSpacing: '-0.02em',
              }}>{s.value}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 4, letterSpacing: '0.02em' }}>
                {s.label}
              </div>
            </div>
          ))}
        </div>

        <div style={{ flex: 1 }} />

        {/* Actions */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <button className="sg-btn sg-btn-primary">
            <AppIcon kind="ig" size={26} />
            <span style={{ marginLeft: 4 }}>Open Instagram</span>
          </button>
          <button className="sg-btn sg-btn-ghost" style={{ height: 56 }}>
            Solve another for +5 min
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M5 3l4 4-4 4" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div style={{ textAlign: 'center', fontSize: 12.5, color: 'rgba(255,255,255,0.4)', marginTop: 4 }}>
            Next puzzle gets harder.
          </div>
        </div>
      </div>
    </ScreenShell>
  );
}

Object.assign(window, { ScreenPuzzle, ScreenUnlock });