const { BottomTabBar, Header } = window.PryzeDesignSystem_b2bad9;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "platform": "ios", "primaryColor": "var(--orange-500)", "cardLevel": "auto", "brandAlign": "center", "mode": "dark", "profileGradient": "Violet Pop", "startAt": "app", "boostLive": false, "rocketPreview": "auto" }/*EDITMODE-END*/;
const { WalletHomeScreen, AdRewardsScreen, RewardDetailScreen, RedeemConfirmSheet, RedeemSuccessSheet, ComingSoonScreen, LeaderboardScreen } = window.PryzeScreens;
const { ProfileScreen, LoginScreen } = window.PryzeProfile;
const { OrbitScreen } = window.PryzeOrbit;
const { OnboardingFlow } = window.PryzeOnboarding;
const { BragScreen } = window.PryzeBrag;
const { LockedScreen } = window.PryzeLocked;
const { LockedInScreen } = window.PryzeShift;
const { WrapFlow } = window.PryzeWrap;
const { ManagerScreen } = window.PryzeManager;
const { HomeScreen, GoldListScreen, GoalPickerScreen, CalendarScreen, NotificationsScreen, ShiftScreen } = window.PryzeHome;

const TABS = [
  { key: 'home', label: 'Home', icon: 'house' },
  { key: 'rewards', label: 'Rewards', icon: 'gift' },
  { key: 'orbit', label: 'Orbit', icon: 'sparkle' },
  { key: 'leaderboard', label: 'Leaderboard', icon: 'trophy' },
  { key: 'profile', label: 'Profile', icon: 'user-circle' },
];

const PROFILE_GRADIENTS = {
  'Violet Pop': 'linear-gradient(135deg,#6C5CE7 0%,#4B3FC4 60%,#3730A3 100%)',
  'Violet Night': 'linear-gradient(150deg,#2A2360,#1B1740)',
  'Lime Ember': 'radial-gradient(120% 140% at 100% 0%,rgba(226,255,23,.22),transparent 55%),linear-gradient(160deg,#2B3410 0%,#141B0A 60%,#0E1408 100%)',
  'Orange Blaze': 'linear-gradient(150deg,#4A2A18,#241208)',
  'Plum Berry': 'linear-gradient(150deg,#4A1E3A,#1F0F1D)',
  'Charcoal': 'linear-gradient(150deg,#2E2C33,#1E1D22)',
  'Violet-Lime': 'linear-gradient(150deg,#2A2360 0%,#3C4A16 100%)',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { document.documentElement.style.setProperty('--color-primary', t.primaryColor); }, [t.primaryColor]);
  /* app-main is the single owner of data-theme. The in-app Appearance setting and the
     designer tweak both write here; 'system' tracks the OS live. */
  const [appearance, setAppearance] = React.useState(() => {
    try { return localStorage.getItem('pryze.appearance') || t.mode; } catch (e) { return t.mode; }
  });
  const modeFirst = React.useRef(true);
  React.useEffect(() => {
    if (modeFirst.current) { modeFirst.current = false; return; }
    setAppearance(t.mode);
  }, [t.mode]);
  const [resolvedTheme, setResolvedTheme] = React.useState('dark');
  React.useEffect(() => {
    const mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
    const apply = () => {
      const r = appearance === 'system' ? (mq && mq.matches ? 'dark' : 'light') : appearance;
      document.documentElement.setAttribute('data-theme', r);
      setResolvedTheme(r);
    };
    apply();
    try { localStorage.setItem('pryze.appearance', appearance); } catch (e) {}
    if (appearance !== 'system' || !mq) return;
    mq.addEventListener('change', apply);
    return () => mq.removeEventListener('change', apply);
  }, [appearance]);
  React.useEffect(() => { document.documentElement.style.setProperty('--pf-hero-gradient', PROFILE_GRADIENTS[t.profileGradient] || PROFILE_GRADIENTS['Violet Night']); }, [t.profileGradient]);
  const platform = t.platform;
  const [tab, setTab] = React.useState(() => {
    const h = (location.hash || '').replace('#', '');
    return (h === 'rewards' || h === 'leaderboard' || h === 'orbit' || h === 'profile') ? h : 'home';
  });
  const [accountDeleted, setAccountDeleted] = React.useState(false);
  const [route, setRoute] = React.useState(() => {
    /* deep link for design review: #shift, #wrap, #manager */
    const h = (location.hash || '').replace('#', '');
    if (h === 'shift') return { name: 'shift', goals: window.PryzeData.TODAY_GOALS.slice(0, 4) };
    if (h === 'manager') return { name: 'manager' };
    if (h === 'picker') return { name: 'picker' };
    if (h === 'wrap') return { name: 'wrap', stats: { total: 420, batteries: 26, bottles: 9, streak: 7, vsAvg: 18, mins: 312, goals: 3, lifts: 4 } };
    return { name: 'list' };
  });
  const [earned, setEarned] = React.useState(0);
  const [confirmVisible, setConfirmVisible] = React.useState(false);
  const [pending, setPending] = React.useState(null);
  const [successInfo, setSuccessInfo] = React.useState(null);
  const [pinnedIds, setPinnedIds] = React.useState({ starbucks: true });
  const pinnedReward = window.PryzeData.REWARDS.find(r => pinnedIds[r.id]);
  const [toast, setToast] = React.useState(null);
  const fireToast = msg => { setToast({ msg, key: Date.now() }); };
  React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 3000); return () => clearTimeout(t); }, [toast]);
  const [setupDone, setSetupDone] = React.useState(t.startAt !== 'setup' && (location.hash || '') !== '#setup');
  const [goalPlan, setGoalPlan] = React.useState(null);
  const startFirst = React.useRef(true);
  React.useEffect(() => { if (startFirst.current) { startFirst.current = false; return; } setSetupDone(t.startAt !== 'setup'); }, [t.startAt]);

  const [boostOffer, setBoostOffer] = React.useState(null);
  const [boostOn, setBoostOn] = React.useState(false);

  function onTabChange(key) {
    setTab(key);
    setRoute({ name: 'list' });
  }

  const [notes, setNotes] = React.useState(window.PryzeData.NOTIFICATIONS);
  const unreadCount = notes.filter(n => n.unread).length;

  function screenTitle() {
    if (tab === 'rewards') return 'Rewards';
    return TABS.find(t => t.key === tab).label;
  }

  const showChromeHeader = !['rewards', 'leaderboard', 'profile', 'orbit', 'home'].includes(tab);

  let body;
  if (tab === 'rewards') {
    if (route.name === 'detail') {
      body = <RewardDetailScreen reward={route.reward} pinned={!!pinnedIds[route.reward.id]}
        onTogglePin={amount => setPinnedIds(p => {
          const willUnpin = !!p[route.reward.id];
          fireToast(willUnpin ? `Removed ${route.reward.title} from Home` : `Pinned ${route.reward.title} to Home at $${amount}`);
          return willUnpin ? {} : { [route.reward.id]: amount };
        })}
        onBack={() => setRoute({ name: 'list' })}
        onRedeem={(amount, cost) => { setPending({ amount, cost }); setConfirmVisible(true); }} />;
    } else {
      body = <WalletHomeScreen onOpenReward={r => setRoute({ name: 'detail', reward: r })} align={t.brandAlign} />;
    }
  } else if (tab === 'leaderboard') {
    body = <LeaderboardScreen />;
  } else if (tab === 'orbit') {
    body = <OrbitScreen />;
  } else if (tab === 'profile') {
    body = accountDeleted ? <LoginScreen /> : <ProfileScreen appearance={appearance} onAppearance={setAppearance} onAccountDeleted={() => setAccountDeleted(true)} onOpenCard={() => setRoute({ name: 'card' })} />;
  } else if (tab === 'home') {
    body = <HomeScreen boostLive={t.boostLive || boostOn} boostOffer={boostOffer} onAcceptBoost={() => { setBoostOn(true); setBoostOffer(null); fireToast('2× boost live — everything pays double'); }} onDeclineBoost={() => setBoostOffer(null)} pinnedReward={pinnedReward} rocketPreview={t.rocketPreview} onLaunch={() => setRoute({ name: 'picker' })} onOpenList={() => setRoute({ name: 'gold' })} onOpenCalendar={() => setRoute({ name: 'calendar' })} onOpenNotes={() => setRoute({ name: 'notes' })} onOpenManager={() => setRoute({ name: 'manager' })} unread={unreadCount} onOpenReward={r => { setTab('rewards'); setRoute({ name: 'detail', reward: r }); }} earned={earned} onEarnedShown={() => setEarned(0)} />;
  } else {
    body = <ComingSoonScreen label={TABS.find(t => t.key === tab).label} />;
  }
  if (tab === 'profile' && route.name === 'card') {
    body = <BragScreen level={t.cardLevel === 'auto' ? null : t.cardLevel} onBack={() => setRoute({ name: 'list' })} />;
  }
  if (tab === 'home' && route.name === 'gold') {
    body = <GoldListScreen onBack={() => setRoute({ name: 'list' })} />;
  }
  if (tab === 'home' && route.name === 'picker') {
    body = <GoalPickerScreen onBack={() => setRoute({ name: 'list' })} onStart={gs => setRoute({ name: 'shift', goals: gs })} />;
  }
  if (tab === 'home' && route.name === 'shift') {
    body = <LockedInScreen goals={route.goals || []} onEnd={s => setRoute({ name: 'wrap', stats: s })} onOrbit={() => { setTab('orbit'); setRoute({ name: 'list' }); }} />;
  }
  if (tab === 'home' && route.name === 'wrap') {
    body = <WrapFlow stats={route.stats} onDone={() => { setEarned(route.stats.total); setRoute({ name: 'list' }); }} />;
  }
  if (tab === 'home' && route.name === 'notes') {
    body = <NotificationsScreen items={notes} onBack={() => setRoute({ name: 'list' })}
      onReadAll={() => setNotes(ns => ns.map(n => ({ ...n, unread: false })))}
      onRead={id => setNotes(ns => ns.map(n => n.id === id ? { ...n, unread: false } : n))} />;
  }
  if (tab === 'home' && route.name === 'manager') {
    body = <ManagerScreen onBack={() => setRoute({ name: 'list' })} onBoostSent={o => setBoostOffer(o)} />;
  }
  if (tab === 'home' && route.name === 'calendar') {
    body = <CalendarScreen onBack={() => setRoute({ name: 'list' })} />;
  }

  const content = setupDone ? (
    <div data-tab={tab} style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-app)', position: 'relative' }}>
      {platform === 'ios' && <div className="statusbar-spacer" style={{ height: 62 }} />}
      {platform === 'android' && <div className="statusbar-spacer" style={{ height: 32 }} />}
      {toast && <div className="pz-toast-wrap"><div key={toast.key} className="pz-toast"><span className="pz-toast-icon"><Icon name="push-pin" size={15} weight="fill" color="var(--color-primary)" /></span><span className="pz-toast-text">{toast.msg}</span></div></div>}
      {showChromeHeader && <Header title={screenTitle()} onBack={route.name === 'success' ? () => setRoute({ name: 'list' }) : undefined} platform={platform} />}
      <div className="route-fade" key={route.name + (route.reward ? route.reward.id : '')} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: (route.name === 'detail' || tab === 'leaderboard' || tab === 'home') ? 'hidden' : 'auto', paddingTop: showChromeHeader ? 0 : 10, minHeight: 0 }}>{body}</div>
      {route.name !== 'detail' && route.name !== 'picker' && route.name !== 'shift' && route.name !== 'wrap' && route.name !== 'card' && route.name !== 'manager' && <BottomTabBar tabs={TABS} activeKey={tab} onChange={onTabChange} platform={platform} />}
      {tab === 'rewards' && confirmVisible && route.reward && pending && (
        <RedeemConfirmSheet reward={route.reward} amount={pending.amount} cost={pending.cost} visible={confirmVisible}
          onClose={() => setConfirmVisible(false)}
          onConfirm={() => { setConfirmVisible(false); setSuccessInfo({ reward: route.reward, amount: pending.amount }); setPending(null); }} />
      )}
      {tab === 'rewards' && successInfo && (
        <RedeemSuccessSheet key={successInfo.reward.id + successInfo.amount} visible={!!successInfo} reward={successInfo.reward} amount={successInfo.amount}
          onDone={() => { setSuccessInfo(null); setRoute({ name: 'list' }); }} />
      )}
    </div>
  ) : (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-app)', position: 'relative' }}>
      {platform === 'ios' && <div className="statusbar-spacer" style={{ height: 62 }} />}
      {platform === 'android' && <div className="statusbar-spacer" style={{ height: 32 }} />}
      <OnboardingFlow onDone={r => { setPinnedIds(r.picks || {}); setGoalPlan(r); setSetupDone(true); setTab('home'); setToast('+' + (r.bonusPoints || 0) + ' setup bonus banked'); }} />
    </div>
  );

  const Device = platform === 'ios' ? window.IOSDevice : window.AndroidDevice;

  return (
    <React.Fragment>
      <Device dark={resolvedTheme === 'dark' || tab === 'orbit'}>{content}</Device>
      <p className="phase-note">Rewards Wallet and Leaderboard are fully built. Home now carries the identity block, points, notification center, pinned reward, boost banner, manager note, and the rotary swipe-up start dial. Gold list and focus session are next: next phases will fill them in and link check-in → points → redemption end to end.</p>
      <TweaksPanel>
        <TweakSection label="Device" />
        <TweakRadio label="Platform" value={t.platform} options={['ios', 'android']} onChange={(v) => setTweak('platform', v)} />
        <TweakSection label="Flow" />
        <TweakRadio label="Start at" value={t.startAt} options={['app', 'setup']} onChange={(v) => setTweak('startAt', v)} />
        <TweakToggle label="2× boost live (admin)" value={t.boostLive} onChange={(v) => setTweak('boostLive', v)} />
        <TweakToggle label="Boost offer popup" value={!!boostOffer} onChange={(v) => setBoostOffer(v ? { label: '2× multiplier', goal: 'Curbside handoffs', pts: '2×', from: 'Your manager' } : null)} />
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.mode} options={['dark', 'light']} onChange={(v) => setTweak('mode', v)} />
        <TweakColor label="Primary" value={t.primaryColor} options={['var(--orange-500)', 'var(--violet-700)', 'var(--pantone-sun-glare)', 'var(--green-600)']} onChange={(v) => setTweak('primaryColor', v)} />
        <TweakSection label="Profile card" />
        <TweakRadio label="Gradient" value={t.profileGradient} options={Object.keys(PROFILE_GRADIENTS)} onChange={(v) => setTweak('profileGradient', v)} />
        <TweakSection label="Brag card" />
        <TweakRadio label="Level" value={t.cardLevel} options={['auto', 'starter', 'regular', 'allstar']} onChange={(v) => setTweak('cardLevel', v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Brand grid align" value={t.brandAlign} options={['center', 'left']} onChange={(v) => setTweak('brandAlign', v)} />
        <TweakSection label="Rocket" />
        <TweakRadio label="Idle state preview" value={t.rocketPreview} options={['auto', 'active', 'nudge']} onChange={(v) => setTweak('rocketPreview', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);