/* global React, ReactDOM, window */
// Logiq Kidz · app.jsx — composition + tweaks + parent gate + break modal.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "iphone",
  "color": "natural",
  "wallpaper": "default",
  "secondary": "none",
  "screen": "home",
  "track": "logic",
  "age": 6,
  "avatar": "pico",
  "premium": false,
  "minutesToday": 12,
  "voice": true,
  "motion": true,
  "time": "9:41"
}/*EDITMODE-END*/;

const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakSegment, TweakText, TweakToggle,
        DeviceFrame, MobileShell, BottomTabs, Sheet, Toast, Icon } = window.WFMobile;
const { Mascot } = window.LKMascots;
const { LKHeader, ScreenOnboarding, ScreenHome, ScreenCourse, ScreenPuzzle,
        ScreenReward, ScreenAchievements, ScreenParent, BreakBody } = window.LKScreens;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const [name, setName] = React.useState(window.LK.player.name);
  const [sheet, setSheet] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  // Sync derived state back to LK.player so screens reflect tweaks.
  React.useEffect(() => {
    window.LK.player.age = t.age;
    window.LK.player.avatar = t.avatar;
    window.LK.player.name = name;
    window.LK.player.isPremium = !!t.premium;
    window.LK.player.minutesToday = Number(t.minutesToday) || 0;
  }, [t.age, t.avatar, name, t.premium, t.minutesToday]);

  // Auto-show break modal when minutesToday hits limit.
  React.useEffect(() => {
    if (Number(t.minutesToday) >= window.LK.player.minutesLimit && t.screen !== 'onboarding') {
      setSheet({ kind: 'break' });
    }
  }, [t.minutesToday, t.screen]);

  React.useEffect(() => {
    if (!toast) return;
    const id = setTimeout(() => setToast(null), 2400);
    return () => clearTimeout(id);
  }, [toast]);

  const tabs = [
    { key: 'home',         label: 'Beranda',  icon: 'home',  iconFill: 'homeFill' },
    { key: 'course',       label: 'Pelajaran', icon: 'star', iconFill: 'starFill' },
    { key: 'achievements', label: 'Bintangku', icon: 'star', iconFill: 'starFill' },
    { key: 'parent',       label: 'Profil',   icon: 'user',  iconFill: 'userFill' },
  ];

  // Map sub-screens back to their parent tab so the BottomTabs highlight stays correct.
  const activeTab = (() => {
    if (t.screen === 'home') return 'home';
    if (t.screen === 'course' || t.screen === 'puzzle' || t.screen === 'reward') return 'course';
    if (t.screen === 'achievements') return 'achievements';
    if (t.screen === 'parent') return 'parent';
    return 'home';
  })();

  const openParentGate = () => setSheet({ kind: 'gate' });

  const renderScreen = () => {
    switch (t.screen) {
      case 'onboarding':
        return <ScreenOnboarding
          age={t.age} onAge={(n) => setT('age', n)}
          avatar={t.avatar} onAvatar={(a) => setT('avatar', a)}
          name={name} onName={setName}
          onStart={() => { setT('screen', 'home'); setToast('Selamat datang, ' + (name || 'kawan') + '!'); }}
        />;
      case 'course':
        return <ScreenCourse trackKey={t.track} onPickLesson={() => setT('screen', 'puzzle')}/>;
      case 'puzzle':
        return <ScreenPuzzle
          voice={t.voice}
          onVoice={() => setT('voice', !t.voice)}
          onPick={(correct) => {
            if (correct) { setT('screen', 'reward'); }
            else { setToast('Coba lagi ya 🌱'); }
          }}
          onExit={() => setT('screen', 'course')}
        />;
      case 'reward':
        return <ScreenReward
          onNext={() => { setT('screen', 'puzzle'); setToast('+3 bintang · siap pelajaran berikutnya'); }}
          onHome={() => setT('screen', 'home')}
        />;
      case 'achievements':
        return <ScreenAchievements/>;
      case 'parent':
        return <ScreenParent onUpgrade={() => setToast('Halaman langganan dummy')}/>;
      default:
        return <ScreenHome
          voice={t.voice}
          onVoice={() => setT('voice', !t.voice)}
          onOpenTrack={(k) => { setT('track', k); setT('screen', 'course'); }}
        />;
    }
  };

  const showShell = t.screen !== 'onboarding';
  const appClass = (t.motion ? '' : 'lk-static');

  const secondaryDevice = t.secondary !== 'none' ? t.secondary : null;

  return (
    <>
      <DeviceFrame
        device={t.device}
        color={t.color}
        wallpaper={t.wallpaper}
        time={t.time}
        secondary={secondaryDevice}
      >
        <MobileShell
          header={showShell ? (
            <LKHeader
              voice={t.voice}
              onVoice={() => setT('voice', !t.voice)}
              onParentGate={openParentGate}
              minutesToday={Number(t.minutesToday) || 0}
              minutesLimit={window.LK.player.minutesLimit}
            />
          ) : null}
          tabs={showShell ? <BottomTabs items={tabs} active={activeTab} onChange={(k) => setT('screen', k)}/> : null}
          appProps={{ 'data-lk': '' }}
          sheet={
            <Sheet
              open={!!sheet}
              title={sheet?.kind === 'gate' ? 'Khusus orang tua' : sheet?.kind === 'break' ? 'Waktu istirahat' : ''}
              onClose={() => setSheet(null)}
              footer={
                sheet?.kind === 'gate' ? (
                  <div className="wm-stack-sm">
                    <button className="lk-btn-primary" onClick={() => { setSheet(null); setT('screen', 'parent'); setToast('Selamat datang di Parent Zone'); }}>Buka Parent Zone</button>
                    <button className="lk-btn-ghost" onClick={() => setSheet(null)}>Batal</button>
                  </div>
                ) : sheet?.kind === 'break' ? (
                  <div className="wm-stack-sm">
                    <button className="lk-btn-primary mint" onClick={() => { setSheet(null); setT('screen', 'achievements'); }}>Lihat bintangku</button>
                    <button className="lk-btn-ghost" onClick={() => setSheet(null)}>Tutup</button>
                  </div>
                ) : null
              }
            >
              {sheet?.kind === 'gate' ? (
                <div className="lk-gate">
                  <div className="ico"><Icon name="lock" size={24}/></div>
                  <div className="wm-h3">Tahan dan pilih angka empat (4)</div>
                  <div className="wm-muted" style={{ fontSize: 12 }}>Verifikasi cepat agar anak tidak masuk tanpa sengaja.</div>
                  <div className="num-row">
                    {[2, 4, 7].map((n) => (
                      <button key={n} className={'num' + (n === 4 ? ' target' : '')}>{n}</button>
                    ))}
                  </div>
                </div>
              ) : sheet?.kind === 'break' ? (
                <BreakBody/>
              ) : null}
            </Sheet>
          }
          toast={toast ? <Toast message={toast}/> : null}
        >
          <div className={appClass}>
            {renderScreen()}
          </div>
        </MobileShell>
      </DeviceFrame>

      <TweaksPanel title="Logiq Kidz · Mobile">
        <TweakSection label="Device" />
        <TweakSegment label="Frame" value={t.device} onChange={(v) => setT('device', v)}
          options={[{ value: 'iphone', label: 'iPhone' }, { value: 'android', label: 'Android' }, { value: 'tablet', label: 'iPad' }]} />
        <TweakSelect label="Warna Bezel" value={t.color} onChange={(v) => setT('color', v)}
          options={t.device === 'iphone'
            ? [{ value: 'natural', label: 'Natural Titanium' }, { value: 'black', label: 'Black Titanium' }, { value: 'desert', label: 'Desert Titanium' }]
            : t.device === 'android'
              ? [{ value: 'obsidian', label: 'Obsidian' }, { value: 'porcelain', label: 'Porcelain' }]
              : [{ value: 'natural', label: 'Space Black' }]
          } />
        <TweakSelect label="Tampilkan Kedua" value={t.secondary} onChange={(v) => setT('secondary', v)}
          options={[{ value: 'none', label: 'Tidak ada' }, { value: 'iphone', label: 'iPhone' }, { value: 'android', label: 'Android' }, { value: 'tablet', label: 'iPad' }]} />
        <TweakSelect label="Wallpaper Stage" value={t.wallpaper} onChange={(v) => setT('wallpaper', v)}
          options={[
            { value: 'default', label: 'Soft Cream' },
            { value: 'white', label: 'White' },
            { value: 'plain', label: 'Plain' },
            { value: 'sand', label: 'Warm Sand' },
            { value: 'sunset', label: 'Bali Sunset' },
            { value: 'grid', label: 'Grid' },
          ]} />
        <TweakText label="Jam Status" value={t.time} onChange={(v) => setT('time', v)} placeholder="9:41"/>

        <TweakSection label="Konten" />
        <TweakSelect label="Layar" value={t.screen} onChange={(v) => setT('screen', v)}
          options={[
            { value: 'onboarding',   label: 'Intro · Onboarding' },
            { value: 'home',         label: 'Home · Beranda' },
            { value: 'course',       label: 'Kursus · Daftar Pelajaran' },
            { value: 'puzzle',       label: 'Puzzle · Soal Logika' },
            { value: 'reward',       label: 'Reward · Selesai Pelajaran' },
            { value: 'achievements', label: 'Bintangku · Streak & Badge' },
            { value: 'parent',       label: 'Parent Zone' },
          ]} />
        <TweakSelect label="Mata Pelajaran" value={t.track} onChange={(v) => setT('track', v)}
          options={window.LK.tracks.map((tr) => ({ value: tr.key, label: tr.name }))} />
        <TweakSegment label="Usia" value={t.age} onChange={(v) => setT('age', Number(v))}
          options={[{ value: 5, label: '5' }, { value: 6, label: '6' }, { value: 7, label: '7' }]} />
        <TweakSelect label="Avatar" value={t.avatar} onChange={(v) => setT('avatar', v)}
          options={window.LK.avatars.map((a) => ({ value: a, label: a[0].toUpperCase() + a.slice(1) }))} />

        <TweakSection label="Demo" />
        <TweakToggle label="Akun Premium" value={t.premium} onChange={(v) => setT('premium', v)} />
        <TweakSelect label="Menit hari ini" value={String(t.minutesToday)} onChange={(v) => setT('minutesToday', Number(v))}
          options={[
            { value: '0',  label: '0 menit' },
            { value: '6',  label: '6 menit' },
            { value: '12', label: '12 menit' },
            { value: '18', label: '18 menit · hampir' },
            { value: '20', label: '20 menit · break' },
          ]} />
        <TweakToggle label="Voiceover Aktif" value={t.voice} onChange={(v) => setT('voice', v)} />
        <TweakToggle label="Animasi" value={t.motion} onChange={(v) => setT('motion', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
setTimeout(() => window.postMessage({ type: '__activate_edit_mode' }, '*'), 200);