/* global React */
const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ============================================================
// SCREEN 1: LOGIN — name input
// ============================================================
function LoginScreen({ onLogin, savedName }) {
  const [name, setName] = useState(savedName || "");
  const inputRef = useRef(null);

  useEffect(() => { inputRef.current?.focus(); }, []);

  const submit = (e) => {
    e?.preventDefault?.();
    const n = name.trim();
    if (n.length < 1) return;
    onLogin(n);
  };

  return (
    <div className="screen login-screen">
      <div className="bg-grid" />
      <div className="login-card">
        <img src="assets/chabad-logo.png" alt="בית חינוך חב״ד" className="org-logo org-logo-lg" />
        <div className="brand-mark">
          <h1 className="brand-title">NEON BEAT</h1>
          <div className="brand-sub">משחק קצב</div>
        </div>

        <form onSubmit={submit} className="login-form">
          <label className="input-label">
            <span>השם שלך</span>
            <input
              ref={inputRef}
              type="text"
              className="neon-input"
              value={name}
              onChange={(e) => setName(e.target.value.slice(0, 16))}
              placeholder="הקלד את שמך"
              maxLength={16}
              dir="rtl"
            />
          </label>

          <button type="submit" className="btn-neon btn-neon-primary" disabled={!name.trim()}>
            <span>התחל לשחק</span>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M14 6 L8 12 L14 18 Z"/></svg>
          </button>
        </form>

        <p className="login-hint">השם שלך יישמר לכניסות הבאות</p>
      </div>
    </div>
  );
}

// ============================================================
// SCREEN 2: HUB — main menu after login
// ============================================================
function HubScreen({ name, onPlay, onSongs, onLeaderboard, onLogout, songCount }) {
  return (
    <div className="screen hub-screen">
      <div className="bg-grid" />

      <header className="hub-header">
        <div className="hub-greet">
          <div className="hud-label">שלום</div>
          <div className="hub-name">{name}</div>
        </div>
        <button className="btn-ghost-sm" onClick={onLogout}>
          <span>התנתק</span>
        </button>
      </header>

      <div className="hub-brand">
        <img src="assets/chabad-logo.png" alt="בית חינוך חב״ד" className="org-logo org-logo-md" />
        <h1 className="brand-title-xl">NEON BEAT</h1>
        <div className="brand-sub">משחק קצב</div>
      </div>

      <div className="hub-menu">
        <button className="menu-tile menu-tile-primary" onClick={onPlay} disabled={songCount === 0}>
          <div className="menu-icon">
            <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M16 6 L8 12 L16 18 Z M5 5 V19" /></svg>
          </div>
          <div className="menu-text">
            <div className="menu-title">שחק עכשיו</div>
            <div className="menu-sub">{songCount === 0 ? "אין שירים זמינים" : "המשך עם המשנה שנבחרה"}</div>
          </div>
        </button>

        <button className="menu-tile" onClick={onSongs}>
          <div className="menu-icon">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2.2">
              <path d="M9 18 V5 L21 3 V16" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
            </svg>
          </div>
          <div className="menu-text">
            <div className="menu-title">בחר משנה</div>
            <div className="menu-sub">{songCount} פרקים זמינים</div>
          </div>
        </button>

        <button className="menu-tile" onClick={onLeaderboard}>
          <div className="menu-icon">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2.2">
              <path d="M5 21 V11 H10 V21 Z M10 21 V5 H14 V21 Z M14 21 V14 H19 V21 Z" />
            </svg>
          </div>
          <div className="menu-text">
            <div className="menu-title">לוח שיאים</div>
            <div className="menu-sub">10 התוצאות הטובות ביותר</div>
          </div>
        </button>
      </div>

      <footer className="hub-footer">
        <span>{ '{ בדוק קצב }' }</span>
      </footer>
    </div>
  );
}

// ============================================================
// SCREEN 3: SONG SELECT — carousel
// ============================================================
function SongSelectScreen({ songs, selected, onSelect, onPlay, onBack }) {
  const [index, setIndex] = useState(() => Math.max(0, songs.findIndex(s => s.id === selected?.id)));

  // Empty state — no songs in /songs/
  if (!songs || songs.length === 0) {
    return (
      <div className="screen songs-screen">
        <div className="bg-grid" />
        <header className="page-header">
          <button className="btn-back" onClick={onBack}>
            <span>חזרה</span>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 6 L9 12 L15 18" /></svg>
          </button>
          <h2 className="page-title">בחר משנה</h2>
          <div style={{ width: 80 }} />
        </header>
        <div className="songs-empty">
          <div className="songs-empty-card">
            <div className="songs-empty-icon">
              <svg viewBox="0 0 64 64" width="56" height="56" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M20 50 V18 L48 12 V42" /><circle cx="14" cy="50" r="6" /><circle cx="42" cy="42" r="6" />
              </svg>
            </div>
            <div className="songs-empty-title">אין שירים עדיין</div>
            <div className="songs-empty-sub">
              הוסף קבצי <code>.mp3</code> לתיקייה <code>songs/</code> עם שמות אסקי (כמו <code>01.mp3</code>)<br/>
              ועדכן את <code>songs/manifest.json</code> עם <code>title</code>, <code>bpm</code>, <code>difficulty</code>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const current = songs[index];

  const prev = () => setIndex(i => (i - 1 + songs.length) % songs.length);
  const next = () => setIndex(i => (i + 1) % songs.length);

  useEffect(() => { onSelect?.(songs[index]); }, [index, songs]);

  // Keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight") prev();
      else if (e.key === "ArrowLeft") next();
      else if (e.key === "Enter") onPlay(current);
      else if (e.key === "Escape") onBack();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [index, current]);

  // Compute relative offsets for carousel
  const items = songs.map((s, i) => {
    let off = i - index;
    if (off > songs.length / 2) off -= songs.length;
    if (off < -songs.length / 2) off += songs.length;
    return { song: s, offset: off };
  });

  return (
    <div className="screen songs-screen" style={{ "--current-color": current.color, "--current-accent": current.accent }}>
      <div className="bg-grid" />
      <div className="songs-aura" />

      <header className="page-header">
        <button className="btn-back" onClick={onBack}>
          <span>חזרה</span>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 6 L9 12 L15 18" /></svg>
        </button>
        <h2 className="page-title">בחר משנה</h2>
        <div style={{ width: 80 }} />
      </header>

      <div className="carousel">
        {items.map(({ song, offset }) => {
          const visible = Math.abs(offset) <= 2;
          if (!visible) return null;
          const scale = 1 - Math.abs(offset) * 0.18;
          const opacity = 1 - Math.abs(offset) * 0.35;
          const x = offset * 60;
          const z = -Math.abs(offset) * 100;
          return (
            <div
              key={song.id}
              className={`carousel-card ${offset === 0 ? "is-current" : ""}`}
              onClick={() => setIndex(songs.indexOf(song))}
              style={{
                transform: `translateX(${x}%) translateZ(${z}px) scale(${scale})`,
                opacity,
                zIndex: 20 - Math.abs(offset),
                "--card-color": song.color,
                "--card-accent": song.accent,
                pointerEvents: offset === 0 ? "none" : "auto",
              }}
            >
              <div className="card-art">
                <div className="card-art-glow" />
                <svg className="card-note-icon" viewBox="0 0 64 64" fill="currentColor">
                  <path d="M48 6 L24 14 V44 A10 10 0 1 1 18 36 V20 L42 13 V40 A10 10 0 1 1 36 32 Z" />
                </svg>
                <div className="card-stripes">
                  {Array.from({ length: 4 }).map((_, i) => <span key={i} />)}
                </div>
              </div>
              <div className="card-body">
                <div className="card-num">פרק {song.id}</div>
                <div className="card-title">{song.title}</div>
                <div className="card-subtitle">{song.subtitle}</div>
                <div className="card-meta">
                  <span className="chip"><b>{song.bpm}</b> BPM</span>
                  <span className="chip"><b>{song.duration}s</b></span>
                  <span className="chip difficulty">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <i key={i} className={i < song.difficulty ? "on" : ""} />
                    ))}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="carousel-controls">
        <button className="nav-btn" onClick={next} aria-label="Next">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 6 L15 12 L9 18" /></svg>
        </button>

        <button className="btn-neon btn-neon-primary play-btn" onClick={() => onPlay(current)}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M8 5 V19 L19 12 Z" /></svg>
          <span>נגן</span>
        </button>

        <button className="nav-btn" onClick={prev} aria-label="Prev">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 6 L9 12 L15 18" /></svg>
        </button>
      </div>

      <div className="carousel-pager">
        {songs.map((s, i) => (
          <span key={s.id} className={i === index ? "on" : ""} onClick={() => setIndex(i)} />
        ))}
      </div>
    </div>
  );
}

// ============================================================
// SCREEN 4: LEADERBOARD
// ============================================================
function LeaderboardScreen({ entries, currentName, onBack }) {
  const sorted = [...entries].sort((a, b) => b.score - a.score).slice(0, 10);
  return (
    <div className="screen leaderboard-screen">
      <div className="bg-grid" />

      <header className="page-header">
        <button className="btn-back" onClick={onBack}>
          <span>חזרה</span>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 6 L9 12 L15 18" /></svg>
        </button>
        <h2 className="page-title">לוח שיאים</h2>
        <div style={{ width: 80 }} />
      </header>

      <div className="leaderboard-card">
        <div className="lb-head">
          <div className="lb-col rank">דירוג</div>
          <div className="lb-col score">ניקוד</div>
          <div className="lb-col acc">דיוק</div>
        </div>

        {sorted.length === 0 && (
          <div className="lb-empty">
            <div className="lb-empty-icon">
              <svg viewBox="0 0 64 64" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M16 50 V32 H28 V50 Z M28 50 V18 H40 V50 Z M40 50 V36 H52 V50 Z M12 56 H56" />
              </svg>
            </div>
            <div className="lb-empty-title">הלוח עדיין ריק</div>
            <div className="lb-empty-sub">סיים שיר כדי להופיע כאן</div>
          </div>
        )}

        {sorted.map((e, i) => {
          const isMe = e.name === currentName;
          const isPodium = i < 3;
          return (
            <div key={e.id} className={`lb-row ${isMe ? "is-me" : ""} ${isPodium ? `podium-${i+1}` : ""}`}>
              <div className="lb-col rank">
                <span className="rank-num">{i + 1}</span>
                {isPodium && <span className="podium-badge" />}
              </div>
              <div className="lb-col score">
                <div className="lb-name">{e.name}{isMe && <em>אתה</em>}</div>
                <div className="lb-score-num">{e.score.toLocaleString()}</div>
              </div>
              <div className="lb-col acc">
                <span className="acc-num">{e.accuracy}<i>%</i></span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// SCREEN 5: RESULTS — after a song
// ============================================================
function ResultsScreen({ result, song, name, onAgain, onSongs, onHub }) {
  const stars = result.stars;

  const [shownScore, setShownScore] = useState(0);
  useEffect(() => {
    const start = performance.now();
    const dur = 1200;
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / dur);
      const eased = 1 - Math.pow(1 - t, 3);
      setShownScore(Math.floor(result.score * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [result.score]);

  const grade = stars >= 5 ? "S" : stars >= 4 ? "A" : stars >= 3 ? "B" : stars >= 2 ? "C" : "D";

  return (
    <div className="screen results-screen" style={{ "--current-color": song.color, "--current-accent": song.accent }}>
      <div className="bg-grid" />
      <div className="results-aura" />

      <div className="results-card">
        <div className="results-banner">
          <div className="results-song-num">פרק {song.id}</div>
          <div className="results-song-title">{song.title}</div>
        </div>

        <div className={`grade-badge grade-${grade}`}>
          <div className="grade-letter">{grade}</div>
          <div className="grade-stars">
            {Array.from({ length: 5 }).map((_, i) => (
              <span key={i} className={i < stars ? "on" : ""}>
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 L15 9 L22 9.5 L17 14.5 L18.5 22 L12 18 L5.5 22 L7 14.5 L2 9.5 L9 9 Z"/></svg>
              </span>
            ))}
          </div>
        </div>

        <div className="results-score-block">
          <div className="hud-label">ניקוד סופי</div>
          <div className="results-score">{shownScore.toLocaleString()}</div>
        </div>

        <div className="results-stats">
          <div className="stat-tile">
            <div className="stat-label">קומבו מקסימלי</div>
            <div className="stat-value">{result.maxCombo}</div>
          </div>
          <div className="stat-tile">
            <div className="stat-label">דיוק</div>
            <div className="stat-value">{result.accuracy}<i>%</i></div>
          </div>
          <div className="stat-tile">
            <div className="stat-label">פגיעות</div>
            <div className="stat-value">{result.hits}<i>/{result.totalNotes}</i></div>
          </div>
        </div>

        <div className="results-actions">
          <button className="btn-neon btn-neon-ghost" onClick={onSongs}>
            <span>בחר שיר אחר</span>
          </button>
          <button className="btn-neon btn-neon-primary" onClick={onAgain}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 12 A9 9 0 0 1 21 12 M21 12 L17 8 M21 12 L17 16" /></svg>
            <span>שחק שוב</span>
          </button>
          <button className="btn-neon btn-neon-ghost" onClick={onHub}>
            <span>תפריט</span>
          </button>
        </div>

        {result.isNewBest && (
          <div className="new-best-banner">שיא אישי חדש!</div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  LoginScreen, HubScreen, SongSelectScreen, LeaderboardScreen, ResultsScreen,
});