/* Club FRESH — app shell, 5 tabs, Daily Five model */

/* Real-day defaults: the lens rotates with the weekday, the freedom day
   defaults to Friday (weekends rest on the freedom treatment too). The
   tweaks panel can still override both for previewing. */
const CF_DOW = new Date().getDay(); // Sun=0
const CF_LENS_BY_DOW = ['self', 'fitness', 'relationships', 'environment', 'self', 'hustle', 'relationships'];
const TWEAK_DEFAULTS = {
  lens: CF_LENS_BY_DOW[CF_DOW],
  freedom: CF_DOW === 5 || CF_DOW === 6 || CF_DOW === 0,
  headings: 'editorial',
};

const HEAD_FONT = {
  editorial: "'Editors Note', Georgia, 'Times New Roman', serif",
  modern: "'Poppins', system-ui, sans-serif",
};
const ANCHOR_KEYS = ['fitness', 'relationships', 'environment', 'self', 'hustle'];

const TABS = [
  { key:'today',  icon:'sun',      label:'Today' },
  { key:'club',   icon:'chat',     label:'Club' },
  { key:'rhythm', icon:'activity', label:'Rhythm' },
  { key:'season', icon:'compass',  label:'Season' },
  { key:'shop',   icon:'bag',      label:'Shop' },
];

function TabBar({ active, onTab }) {
  const { CF_Icon: Icon } = window;
  return (
    <nav className="cf-tabbar">
      {TABS.map(t => {
        const on = t.key === active;
        return (
          <button key={t.key} className={'cf-tab' + (on ? ' is-active' : '')} onClick={() => onTab(t.key)}>
            <span className="cf-tabtop">
              {on && <span className="cf-tabdot" />}
              <Icon name={t.icon} size={21} sw={on ? 2.2 : 1.85} />
            </span>
            <span>{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lens = window.CF_LENSES[t.lens] || window.CF_LENSES.environment;
  const freedom = !!t.freedom;

  const [tab, setTab] = React.useState(() =>
    new URLSearchParams(location.search).get('tab') || localStorage.getItem('cf_tab') || 'today');
  const [view, setView] = React.useState(null);
  const [sweep, setSweep] = React.useState(() => window.CFLive.loadSweep());
  const [deckRevealed, setDeckRevealed] = React.useState(() => window.CFLive.deckRevealedToday());
  const [tracks, setTracks] = React.useState(() => window.CFLive.loadTracks(window.CF_TRACKABLES));
  const [modal, setModal] = React.useState(null);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    window.cfModal = { open: (render) => setModal(() => render), close: () => setModal(null) };
  }, []);
  React.useEffect(() => { localStorage.setItem('cf_tab', tab); }, [tab]);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [tab, view]);

  const onMark = (anchor, level) => setSweep(s => {
    const next = { ...s, [anchor]: level };
    window.CFLive.saveSweep(next);
    return next;
  });
  React.useEffect(() => { window.CFLive.saveTracks(tracks); }, [tracks]);

  const avatar = window.CF_ME;
  const deckCard = window.CF_DECK_CARDS.find(c => c.anchor === lens.anchor) || window.CF_DECK_CARDS[0];
  const dailyAudio = freedom ? window.CF_FREEDOM_DAY.audio : (window.CF_WELL.byAnchor.find(a => a.anchor === lens.anchor) || {}).lift;
  const audioAnchor = freedom ? 'relationships' : lens.anchor;
  const openSetWeek = () => window.cfModal.open(close => <window.CFMinMaxSheet tracks={tracks} onClose={(s) => { if (s) setTracks(s); close(); }} />);
  const openAudio = () => window.cfModal.open(close => <window.CFWellPlayer title={dailyAudio} anchor={audioAnchor} rail="lift" onClose={close} />);

  const go = (name) => {
    if (TABS.some(x => x.key === name)) { setView(null); setTab(name); }
    else setView(name);
  };
  const back = () => setView(null);

  const rootStyle = {
    '--cf-accent': '#c07152',
    '--cf-accent-ink': '#ffffff',
    '--cf-head': HEAD_FONT[t.headings],
    height: '100%', position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden',
  };

  let screen;
  if (view === 'settings') screen = <window.CFSettings back={back} avatar={avatar} />;
  else if (view === 'door') screen = <window.CFDoor back={back} />;
  else if (view === 'well') screen = <window.CFWell back={back} />;
  else if (view === 'foundations') screen = <window.CFFoundations back={back} go={go} />;
  else if (tab === 'today') screen = <window.CFToday lens={lens} freedom={freedom} freedomDay={window.CF_FREEDOM_DAY}
    sweep={sweep} onMark={onMark} tracks={tracks} onSetWeek={openSetWeek}
    dailyAudio={dailyAudio} onAudio={openAudio}
    deckRevealed={deckRevealed} onRevealDeck={() => { window.CFLive.revealDeck(deckCard.prompt); setDeckRevealed(true); }} deckCard={deckCard}
    avatar={avatar} go={go} />;
  else if (tab === 'club') screen = <window.CFClub go={go} avatar={avatar} />;
  else if (tab === 'rhythm') screen = <window.CFRhythm sweep={sweep} onSetWeek={openSetWeek} />;
  else if (tab === 'season') screen = <window.CFSeason avatar={avatar} go={go} />;
  else if (tab === 'shop') screen = <window.CFShop go={go} />;

  // Real phones get the app full-screen; desktop keeps the framed prototype.
  const Frame = window.CF_PHONE
    ? ({ children }) => <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>{children}</div>
    : window.IOSDevice;

  return (
    <Frame width={402} height={874}>
      <div className="cf-root" style={rootStyle} data-mode={t.headings}>
        <div ref={scrollRef} className="cf-scroll" style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          <div className="cf-screen" key={view || tab}>{screen}</div>
        </div>
        <TabBar active={tab} onTab={go} />

        {modal && <div style={{ position: 'absolute', inset: 0, zIndex: 80 }}>{modal(() => setModal(null))}</div>}

        <TweaksPanel>
          <TweakSection label="Today preview" />
          <TweakSelect label="Tracy's lens" value={t.lens}
            options={['fitness', 'relationships', 'environment', 'self', 'hustle']}
            onChange={(v) => setTweak('lens', v)} />
          <TweakToggle label="Freedom day" value={t.freedom}
            onChange={(v) => setTweak('freedom', v)} />
          <TweakSection label="Type" />
          <TweakRadio label="Headings" value={t.headings}
            options={['editorial', 'modern']}
            onChange={(v) => setTweak('headings', v)} />
        </TweaksPanel>
      </div>
    </Frame>
  );
}

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