// Loop — root app. Routes between onboarding and main tabs.
// Exports (window): LoopApp

const { useState: aState, useMemo: aMemo, useEffect: aEffect } = React;

function LoopApp() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "dark": false,
    "accent": "blue",
    "density": "comfortable",
    "hero": "ring",
    "showOnboarding": false
  }/*EDITMODE-END*/;

  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const T = aMemo(() => window.LoopTheme(tw), [tw]);

  const [onboarding, setOnboarding] = aState(tw.showOnboarding);
  aEffect(() => { setOnboarding(tw.showOnboarding); }, [tw.showOnboarding]);

  const [tab, setTab] = aState('home');
  const [openId, setOpenId] = aState(null);  // editor item
  const [personId, setPersonId] = aState(null); // relationship screen
  const [queue, setQueue] = aState(window.LoopData.QUEUE);
  const [cleared, setCleared] = aState(0);

  const openItem = (id) => setOpenId(id);
  const closeItem = () => setOpenId(null);

  const approve = (id) => {
    setQueue(q => q.filter(x => x.id !== id));
    setCleared(c => c + 1);
    closeItem();
  };
  const archive = (id) => {
    setQueue(q => q.filter(x => x.id !== id));
    closeItem();
  };
  const snooze = (id) => {
    setQueue(q => q.filter(x => x.id !== id));
    closeItem();
  };

  const openPerson = (id) => { setPersonId(id); };
  const closePerson = () => setPersonId(null);

  // ─ Render ──────────────────────────────────────────────────────
  if (onboarding) {
    return (
      <>
        <IOSDevice dark={T.dark} width={402} height={874}>
          <div style={{ position: 'absolute', inset: 0, background: T.bg }}>
            <Onboarding T={T} onDone={() => setOnboarding(false)} />
          </div>
        </IOSDevice>
        <LoopTweaks tw={tw} setTweak={setTweak} />
        <LoopStyles T={T}/>
      </>
    );
  }

  const item = openId ? queue.find(x => x.id === openId) : null;
  const itemPerson = item ? window.LoopData.PEOPLE.find(p => p.id === item.personId) : null;
  const focusedPerson = personId ? window.LoopData.PEOPLE.find(p => p.id === personId) : null;

  let content;
  if (item) {
    content = <EditorScreen T={T} item={item} person={itemPerson}
      onBack={closeItem}
      onSend={(text) => approve(item.id)}
      onSnooze={() => snooze(item.id)}
      onArchive={() => archive(item.id)}
    />;
  } else if (focusedPerson) {
    content = <RelationshipScreen T={T} person={focusedPerson} onBack={closePerson} />;
  } else if (tab === 'home')     content = <HomeScreen T={T} hero={tw.hero} queue={queue} goQueue={() => setTab('queue')} openItem={openItem}/>;
  else if (tab === 'queue')      content = <QueueScreen T={T} queue={queue} cleared={cleared} openItem={openItem} approve={approve} archive={archive} snooze={snooze}/>;
  else if (tab === 'summary')    content = <SummaryScreen T={T}/>;
  else if (tab === 'people')     content = <PeopleScreen T={T} openPerson={openPerson}/>;
  else                            content = <ActivityScreen T={T}/>;

  const hideTabs = !!item || !!focusedPerson;

  return (
    <>
      <IOSDevice dark={T.dark} width={402} height={874}>
        <div style={{ position: 'absolute', inset: 0, background: T.bg }}>
          {content}
          {!hideTabs && <TabBar T={T} tab={tab} setTab={setTab}/>}
        </div>
      </IOSDevice>
      <LoopTweaks tw={tw} setTweak={setTweak} onShowOnboarding={() => setOnboarding(true)} />
      <LoopStyles T={T}/>
    </>
  );
}

// Global keyframes via injected style tag (T-aware: refreshes per theme)
function LoopStyles({ T }) {
  const css = `
    @keyframes loop-shimmer {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.35); }
    }
    @keyframes loop-breathe {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.15); opacity: 1; }
    }
    @keyframes loop-pulse {
      0%, 100% { transform: scale(1); opacity: 0.4; }
      50% { transform: scale(1.05); opacity: 0.9; }
    }
    button { font-feature-settings: "ss01" on, "cv11" on; }
    textarea::placeholder { color: ${T.textMuted}; }
    *::-webkit-scrollbar { width: 0; height: 0; display: none; }
  `;
  return <style dangerouslySetInnerHTML={{ __html: css }}/>;
}

function LoopTweaks({ tw, setTweak, onShowOnboarding }) {
  return (
    <TweaksPanel>
      <TweakSection label="Mode" />
      <TweakToggle label="Dark mode" value={tw.dark} onChange={v => setTweak('dark', v)} />

      <TweakSection label="Accent" />
      <TweakColor label="Accent" value={window.LOOP_ACCENTS[tw.accent].hex}
        options={Object.values(window.LOOP_ACCENTS).map(a => a.hex)}
        onChange={hex => {
          const k = Object.keys(window.LOOP_ACCENTS).find(k => window.LOOP_ACCENTS[k].hex === hex);
          if (k) setTweak('accent', k);
        }}
      />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={tw.density}
        options={['cozy', 'comfortable', 'spacious']}
        onChange={v => setTweak('density', v)} />
      <TweakRadio label="Home hero" value={tw.hero}
        options={['ring', 'number', 'gradient', 'stack']}
        onChange={v => setTweak('hero', v)} />

      <TweakSection label="Flow" />
      <TweakButton label="Replay onboarding" onClick={onShowOnboarding} />
    </TweaksPanel>
  );
}

window.LoopApp = LoopApp;