/* global React, window */
// Logiq Kidz · screens.jsx — Onboarding / Home / Course / Puzzle / Reward / Achievements / Parent / Break
const { Icon, MobileHeader } = window.WFMobile;
const { Mascot } = window.LKMascots;
const LK = window.LK;

// ─── Shape SVG used in puzzle cells ──────────────────────────────────────────
function Shape({ kind, color, size = 36 }) {
  const s = size;
  const half = s / 2;
  if (kind === 'circle') {
    return (
      <svg className="lk-shape" width={s} height={s} viewBox="0 0 40 40">
        <circle cx="20" cy="20" r="14" fill={color} stroke="#1A1B3A" strokeOpacity=".15" strokeWidth="1"/>
      </svg>
    );
  }
  if (kind === 'square') {
    return (
      <svg className="lk-shape" width={s} height={s} viewBox="0 0 40 40">
        <rect x="6" y="6" width="28" height="28" rx="6" fill={color} stroke="#1A1B3A" strokeOpacity=".15" strokeWidth="1"/>
      </svg>
    );
  }
  if (kind === 'triangle') {
    return (
      <svg className="lk-shape" width={s} height={s} viewBox="0 0 40 40">
        <path d="M20 6 L34 32 L6 32 z" fill={color} stroke="#1A1B3A" strokeOpacity=".15" strokeWidth="1" strokeLinejoin="round"/>
      </svg>
    );
  }
  return null;
}

// ─── Shared header ───────────────────────────────────────────────────────────
function LKHeader({ voice, onVoice, onParentGate, minutesToday, minutesLimit }) {
  const pct = Math.min(100, Math.round((minutesToday / minutesLimit) * 100));
  const meterClass = pct >= 100 ? 'full' : pct >= 70 ? 'warn' : '';
  return (
    <MobileHeader
      title={
        <div className="lk-hd">
          <div className="lk-hd-avatar">
            <Mascot which={LK.player.avatar} size={36}/>
          </div>
          <div className="lk-hd-meta">
            <div className="name">Hai, {LK.player.name}!</div>
            <div className="sub">Usia {LK.player.age} · hari ke-{LK.player.streak}</div>
          </div>
          <div className="lk-hd-chips">
            <span className="lk-pill" title="Bintang">
              <Icon name="star" size={11}/>
              <span className="num">{LK.player.stars}</span>
            </span>
            <span className={'lk-time-meter ' + meterClass} title="Waktu hari ini">
              <span className="bar"><i style={{ width: pct + '%' }}/></span>
              <span>{minutesToday}/{minutesLimit}</span>
            </span>
          </div>
        </div>
      }
      right={
        <button className="wm-icon-btn" aria-label="Pengaturan untuk orang tua" onClick={onParentGate} style={{ background: 'transparent' }}>
          <Icon name="lock" size={18}/>
        </button>
      }
    />
  );
}

// ─── 1. Onboarding ───────────────────────────────────────────────────────────
function ScreenOnboarding({ age, onAge, avatar, onAvatar, name, onName, onStart }) {
  return (
    <div className="wm-stack" style={{ padding: '18px 18px 28px' }}>
      <div className="lk-onb-hero">
        <div className="eyebrow">Logiq Kidz</div>
        <div className="title">Siap bermain &amp; belajar?</div>
        <div className="sub">Pilih usia dan kawan mascotmu. Pelajaran akan menyesuaikan secara otomatis.</div>
      </div>

      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>BERAPA USIAMU?</div>
        <div className="lk-age-row">
          {[5, 6, 7].map((n) => (
            <button key={n} className={'lk-age' + (age === n ? ' active' : '')} onClick={() => onAge(n)} style={{ background: age === n ? 'var(--lk-purple-50)' : '#fff' }}>
              <div className="n">{n}</div>
              <div className="lbl">tahun</div>
            </button>
          ))}
        </div>
      </div>

      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>PILIH KAWANMU</div>
        <div className="lk-avatar-row">
          {LK.avatars.map((a) => (
            <button key={a} className={'lk-avatar-slot' + (avatar === a ? ' active' : '')} onClick={() => onAvatar(a)} style={{ border: 0 }}>
              <Mascot which={a} size={avatar === a ? 64 : 52}/>
            </button>
          ))}
        </div>
      </div>

      <div className="lk-name-field">
        <span className="lbl">Nama</span>
        <input value={name} onChange={(e) => onName(e.target.value)} placeholder="Bima" aria-label="Nama kamu"/>
      </div>

      <button className="lk-btn-primary" onClick={onStart}>
        Mulai belajar
      </button>
    </div>
  );
}

// ─── 2. Home — Track map ─────────────────────────────────────────────────────
function ScreenHome({ onOpenTrack, voice, onVoice }) {
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="lk-home-hero">
        <div className="row">
          <Mascot which={LK.player.avatar} size={72}/>
          <div className="copy">
            <div className="eyebrow">PETUALANGAN HARI INI</div>
            <div className="ttl">Mau belajar apa, {LK.player.name}?</div>
            <div className="sub">Disesuaikan untuk usia {LK.player.age} tahun.</div>
            <span className="age-pill">5 mata pelajaran</span>
          </div>
        </div>
      </div>

      <div className="wm-stack-sm">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>MATA PELAJARAN</div>
          <button className={'lk-voice' + (voice ? '' : ' off')} onClick={onVoice} style={{ border: '1.5px solid var(--lk-purple-200)' }}>
            <span className="wave"><i/><i/><i/></span>
            <span>Suara</span>
          </button>
        </div>

        <div className="lk-track-grid">
          {LK.tracks.map((tr) => (
            <button
              key={tr.key}
              className={'lk-track' + (tr.recommended ? ' featured' : '') + (!tr.free && !LK.player.isPremium ? ' locked' : '')}
              onClick={() => onOpenTrack(tr.key)}
              style={{ '--track-color': tr.color, '--track-soft': tr.soft, border: 0 }}
            >
              {tr.free
                ? <span className="free-pill">Gratis</span>
                : <span className="lock-pill"><Icon name="lock" size={9}/> Premium</span>}
              <div className="face"><Mascot which={tr.mascot} size={48}/></div>
              <div className="lbl">{tr.name}</div>
              <div className="tag">{tr.tagline}</div>
              <div className="progress-row">
                <span>{tr.lessonsDone}/{tr.lessonsTotal}</span>
                <span>{Math.round(tr.progress * 100)}%</span>
              </div>
              <div className="progress"><i style={{ width: (tr.progress * 100) + '%' }}/></div>
            </button>
          ))}
        </div>
      </div>

      <div className="lk-recommend" onClick={() => onOpenTrack('logic')} role="button">
        <div className="face"><Mascot which="pico" size={56}/></div>
        <div className="body">
          <div className="lbl">LANJUTKAN</div>
          <div className="ttl">Pelajaran 4 · Lanjutkan Pola</div>
          <div className="sub">Bersama Pico · sekitar 3 menit</div>
        </div>
        <Icon name="chevron" size={22} color="var(--lk-purple)"/>
      </div>
    </div>
  );
}

// ─── 3. Course detail (lesson path) ──────────────────────────────────────────
function ScreenCourse({ trackKey, onPickLesson }) {
  const track = LK.findTrack(trackKey) || LK.tracks[0];
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="lk-course-hero">
        <div className="face"><Mascot which={track.mascot} size={68}/></div>
        <div className="copy">
          <div className="eyebrow">{LK.course.level.toUpperCase()}</div>
          <div className="ttl">{LK.course.title}</div>
          <div className="sub">{LK.course.subtitle}</div>
        </div>
      </div>

      <div className="lk-path">
        {LK.course.lessons.map((l, i) => {
          const right = i % 2 === 1;
          return (
            <div
              key={l.key}
              className={'node ' + l.state + (l.boss ? ' boss' : '') + (right ? ' right' : '')}
              onClick={() => l.state !== 'locked' && onPickLesson(l.key)}
              role="button"
              style={{ cursor: l.state === 'locked' ? 'default' : 'pointer' }}
            >
              <div className="dot">
                {l.state === 'done' ? <Icon name="check" size={26} color="#fff"/>
                  : l.state === 'locked' ? <Icon name="lock" size={20}/>
                  : l.boss ? <Icon name="star" size={22} color="#fff"/>
                  : (i + 1)}
              </div>
              <div className="meta" style={{ textAlign: right ? 'right' : 'left' }}>
                <div className="ttl">{l.name}</div>
                <div className="sub">{l.boss ? 'Ujian akhir level' : 'Sekitar 2–3 menit'}</div>
                {l.state === 'done' && (
                  <div className="stars" style={{ justifyContent: right ? 'flex-end' : 'flex-start', display: 'flex' }}>
                    {[1, 2, 3].map((n) => (
                      <Icon key={n} name="star" size={13}
                        className={n <= l.stars ? '' : 'empty'}/>
                    ))}
                  </div>
                )}
                {l.free
                  ? <span className="free-tag">Gratis</span>
                  : <span className="free-tag premium">Premium</span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── 4. Puzzle (active lesson) ───────────────────────────────────────────────
function ScreenPuzzle({ voice, onVoice, onPick, onExit }) {
  const p = LK.puzzle;
  const pct = Math.round((p.step / p.steps) * 100);
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="lk-puzzle-bar">
        <button className="close-btn" onClick={onExit} aria-label="Tutup">
          <Icon name="close" size={18}/>
        </button>
        <div className="progress"><i style={{ width: pct + '%' }}/></div>
        <button className="hint-btn">
          <Icon name="sparkle" size={13} color="#fff"/>
          <span>Petunjuk</span>
          <span className="num">· {p.hintsLeft}</span>
        </button>
      </div>

      <div className="lk-puzzle-card">
        <div className="lk-prompt">
          <div className="face"><Mascot which="pico" size={44}/></div>
          <div className="copy">
            <div className="ttl">{p.prompt}</div>
            <div className="help">{p.hint}</div>
          </div>
          <button className={'lk-voice' + (voice ? '' : ' off')} onClick={onVoice} aria-label="Putar suara">
            <span className="wave"><i/><i/><i/></span>
          </button>
        </div>

        <div className="lk-seq">
          {p.sequence.map((sh, i) => (
            <div key={i} className={'lk-seq-cell' + (sh ? '' : ' empty')}>
              {sh && <Shape kind={sh.kind} color={sh.color} size={28}/>}
            </div>
          ))}
        </div>

        <div className="lk-options-label">Pilih jawabannya</div>
        <div className="lk-options">
          {p.options.map((o, i) => (
            <button key={i} className="lk-option" onClick={() => onPick(o.correct)} style={{ border: 0 }}>
              <Shape kind={o.kind} color={o.color} size={56}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 5. Reward ───────────────────────────────────────────────────────────────
function ScreenReward({ onNext, onHome }) {
  return (
    <div className="wm-stack" style={{ padding: '16px 18px 24px' }}>
      <div className="lk-reward">
        <div className="stars-big">
          <Icon name="star" size={40}/>
          <Icon name="star" size={48}/>
          <Icon name="star" size={40}/>
        </div>
        <div className="face"><Mascot which="pico" size={92}/></div>
        <div className="ttl">Hebat sekali, {LK.player.name}!</div>
        <div className="sub">Pico bangga padamu. Pelajaran "Lanjutkan Pola" selesai.</div>
        <div className="rewards">
          <span className="chip"><Icon name="star" size={14}/> +3 bintang</span>
          <span className="chip purple"><Icon name="gift" size={14}/> +5 koin</span>
        </div>
      </div>

      <button className="lk-btn-primary yellow" onClick={onNext}>
        Pelajaran berikutnya →
      </button>
      <button className="lk-btn-ghost" onClick={onHome}>
        Kembali ke beranda
      </button>
    </div>
  );
}

// ─── 6. Achievements ─────────────────────────────────────────────────────────
function ScreenAchievements() {
  const days = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'];
  const activeDays = 4;
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>STREAK MINGGU INI</div>
        <div className="wm-h2">{LK.player.streak} hari berturut-turut 🔥</div>
        <div className="wm-muted" style={{ fontSize: 13 }}>Jaga semangatmu! Lihat lagi besok.</div>
      </div>

      <div className="lk-streak-cal">
        {days.map((d, i) => (
          <div key={d} className={'lk-streak-day' + (i < activeDays ? ' active' : '')}>
            <span className="lbl">{d}</span>
            <span className="icon-wrap"><Icon name="flame" size={14}/></span>
          </div>
        ))}
      </div>

      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>KAWAN MASCOT</div>
        <div className="lk-mascot-strip">
          {LK.tracks.map((tr) => (
            <div key={tr.key} className={'lk-mascot-card' + (tr.lessonsDone === 0 ? ' locked' : '')}>
              <Mascot which={tr.mascot} size={56}/>
              <div className="name">{tr.mascot[0].toUpperCase() + tr.mascot.slice(1)}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="wm-stack-sm">
        <div className="wm-eyebrow" style={{ color: 'var(--lk-purple-700)' }}>BADGE · {LK.player.badgesUnlocked}/{LK.player.badgesTotal}</div>
        <div className="lk-badges">
          {LK.badges.map((b) => (
            <div key={b.key} className={'lk-badge' + (b.unlocked ? '' : ' locked')} style={{ '--badge-color': b.color }}>
              <div className="medal"><Icon name={b.icon} size={26} color="#fff"/></div>
              <div className="name">{b.name}</div>
              <div className="desc">{b.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 7. Parent Zone ──────────────────────────────────────────────────────────
function ScreenParent({ onUpgrade }) {
  const totalWeekMin = LK.weekly.reduce((s, d) => s + d.minutes, 0);
  const totalWeekStars = LK.weekly.reduce((s, d) => s + d.stars, 0);
  return (
    <div className="wm-stack" style={{ padding: '12px 16px 24px' }}>
      <div className="lk-parent-hero">
        <div className="eyebrow">PARENT ZONE</div>
        <div className="ttl">Ringkasan {LK.player.name}</div>
        <div className="sub">Dipantau dengan dukungan tim psikolog &amp; pendidik.</div>
      </div>

      <div className="lk-stat-row">
        <div className="lk-stat"><div className="n">{totalWeekMin}</div><div className="lbl">menit/minggu</div></div>
        <div className="lk-stat"><div className="n">{totalWeekStars}</div><div className="lbl">bintang</div></div>
        <div className="lk-stat"><div className="n">{LK.player.streak}</div><div className="lbl">hari streak</div></div>
      </div>

      <div className="lk-week">
        <div className="title">Aktivitas minggu ini</div>
        <div className="bars">
          {LK.weekly.map((d) => {
            const pct = Math.round((d.minutes / LK.player.minutesLimit) * 100);
            const cls = d.minutes === 0 ? 'zero' : d.minutes >= LK.player.minutesLimit ? 'full' : '';
            return (
              <div key={d.day} className={'col ' + cls}>
                <div className="bar" style={{ height: Math.max(2, pct) + '%' }}/>
                <div className="lbl">{d.day}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="lk-paywall" onClick={onUpgrade} role="button">
        <div className="ico"><Icon name="sparkle" size={20} color="#fff"/></div>
        <div className="copy">
          <div className="ttl">Buka semua mata pelajaran</div>
          <div className="sub">Sains, Koding, dan Catur · tanpa iklan</div>
        </div>
        <div className="price">Rp 49rb<small style={{ fontSize: 10, color: 'var(--lk-ink-500)', marginLeft: 4 }}>/bln</small></div>
      </div>

      <button className="lk-btn-ghost">Pengaturan waktu &amp; istirahat</button>
    </div>
  );
}

// ─── 8. Break / Time-up — used as Sheet body ─────────────────────────────────
function BreakBody() {
  return (
    <div className="lk-break">
      <div className="face"><Mascot which="pico" size={120}/></div>
      <div className="ttl">Waktunya istirahat!</div>
      <div className="sub">Kamu sudah belajar {LK.player.minutesLimit} menit hari ini. Hebat! Sampai jumpa besok ya 🌟</div>
    </div>
  );
}

window.LKScreens = {
  LKHeader,
  ScreenOnboarding,
  ScreenHome,
  ScreenCourse,
  ScreenPuzzle,
  ScreenReward,
  ScreenAchievements,
  ScreenParent,
  BreakBody,
};