/* global React, ReactDOM, window */
// Pradnya Bali · app.jsx — composition + tweaks + interactions.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "iphone",
  "color": "natural",
  "wallpaper": "default",
  "secondary": "none",
  "tab": "home",
  "cardMode": "qr",
  "tier": "Silver",
  "time": "9:41"
}/*EDITMODE-END*/;

const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakSegment, TweakText, TweakToggle,
        DeviceFrame, MobileShell, BottomTabs, Sheet, Toast, Icon } = window.WFMobile;
const { PBHeader, ScreenHome, ScreenCard, ScreenActivity, ScreenRewards, ScreenProfile } = window.PBScreens;

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

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

  // mutate member tier from tweaks
  React.useEffect(() => {
    if (window.PB && t.tier) window.PB.member.tier = t.tier;
  }, [t.tier]);

  const onCardTap = () => setT('tab', 'card');

  const tabs = [
    { key: 'home',     label: 'Home',     icon: 'home',    iconFill: 'homeFill' },
    { key: 'card',     label: 'Card',     icon: 'wallet',  iconFill: 'walletFill' },
    { key: 'activity', label: 'Aktivitas',icon: 'history', iconFill: 'historyFill' },
    { key: 'rewards',  label: 'Rewards',  icon: 'gift',    iconFill: 'giftFill' },
    { key: 'profile',  label: 'Profil',   icon: 'user',    iconFill: 'userFill' },
  ];

  const renderScreen = () => {
    switch (t.tab) {
      case 'card':
        return <ScreenCard mode={t.cardMode} onMode={(m) => setT('cardMode', m)} />;
      case 'activity':
        return <ScreenActivity />;
      case 'rewards':
        return <ScreenRewards onRedeem={(r) => setSheet({ kind: 'redeem', reward: r })} />;
      case 'profile':
        return <ScreenProfile />;
      default:
        return <ScreenHome onCardTap={onCardTap} />;
    }
  };

  const headerTitle = ({ home: 'Pradnya Bali', card: 'Kartu Member', activity: 'Aktivitas', rewards: 'Rewards', profile: 'Profil' })[t.tab];
  const headerSub   = t.tab === 'home' ? 'Stationery Member Club' : undefined;

  const screen = (
    <MobileShell
      header={<PBHeader title={headerTitle} sub={headerSub} onBell={() => setToast('Tidak ada notifikasi baru')} />}
      tabs={<BottomTabs items={tabs} active={t.tab} onChange={(k) => setT('tab', k)} />}
      sheet={
        <Sheet
          open={!!sheet}
          title="Konfirmasi Penukaran"
          onClose={() => setSheet(null)}
          footer={
            <div className="wm-stack-sm">
              <button className="wm-btn brand full" onClick={() => { setSheet(null); setToast('Voucher berhasil ditukar'); }}>
                Konfirmasi Tukar
              </button>
              <button className="wm-btn ghost full" onClick={() => setSheet(null)}>Batal</button>
            </div>
          }
        >
          {sheet?.reward ? (
            <div className="wm-stack-sm">
              <div className="wm-card flat" style={{ background: 'var(--brand-50)', padding: 16 }}>
                <div className="wm-eyebrow" style={{ color: 'var(--brand-700)' }}>Reward</div>
                <div className="wm-h3" style={{ marginTop: 4 }}>{sheet.reward.title}</div>
                <div className="wm-muted" style={{ fontSize: 13, marginTop: 4 }}>{sheet.reward.cost} poin akan dipotong</div>
              </div>
              <div className="wm-list">
                <div className="wm-list-row">
                  <div className="wm-list-body"><div className="wm-list-title">Poin saat ini</div></div>
                  <div className="wm-list-right">{window.PB.member.points} pts</div>
                </div>
                <div className="wm-list-row">
                  <div className="wm-list-body"><div className="wm-list-title">Setelah tukar</div></div>
                  <div className="wm-list-right">{window.PB.member.points - sheet.reward.cost} pts</div>
                </div>
              </div>
            </div>
          ) : null}
        </Sheet>
      }
      toast={toast ? <Toast message={toast} /> : null}
    >
      {renderScreen()}
    </MobileShell>
  );

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

  return (
    <>
      <DeviceFrame
        device={t.device}
        color={t.color}
        wallpaper={t.wallpaper}
        time={t.time}
        secondary={secondaryDevice}
      >
        {screen}
      </DeviceFrame>

      <TweaksPanel title="Pradnya · 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" />
        <TweakSegment label="Layar" value={t.tab} onChange={(v) => setT('tab', v)}
          options={[
            { value: 'home', label: 'Home' },
            { value: 'card', label: 'Card' },
            { value: 'activity', label: 'Aktiv.' },
            { value: 'rewards', label: 'Rewards' },
            { value: 'profile', label: 'Profil' },
          ]} />
        <TweakSegment label="Mode Kartu" value={t.cardMode} onChange={(v) => setT('cardMode', v)}
          options={[{ value: 'qr', label: 'QR' }, { value: 'bar', label: 'Barcode' }]} />
        <TweakSegment label="Tier Member" value={t.tier} onChange={(v) => setT('tier', v)}
          options={[{ value: 'Silver', label: 'Silver' }, { value: 'Gold', label: 'Gold' }, { value: 'Platinum', label: 'Plat.' }]} />
      </TweaksPanel>
    </>
  );
}

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