// Embedded-site variant of the Claude Design app.jsx.
// Wraps the hub + per-assistant flows in a single compact "sheet" container.
// Sources: /tmp/hysio-demo-design/ui-mockup/project/src/app.jsx (standalone version).

const { useState, useEffect } = React;

function App() {
  const assistants = window.ASSISTANTS;

  const [currentId, setCurrentId] = useState(() => {
    try { return localStorage.getItem('hysio-demo-view') || 'hub'; } catch { return 'hub'; }
  });
  const [subId, setSubId] = useState(() => {
    try { return localStorage.getItem('hysio-demo-sub') || null; } catch { return null; }
  });

  const speedMul = 1;

  useEffect(() => {
    try { localStorage.setItem('hysio-demo-view', currentId); } catch {}
  }, [currentId]);
  useEffect(() => {
    try { if (subId) localStorage.setItem('hysio-demo-sub', subId); } catch {}
  }, [subId]);

  const scrollToSheet = () => {
    try {
      const el = document.querySelector('.hysio-demo-sheet');
      if (!el) return;
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      el.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
    } catch {}
  };

  const pickAssistant = (id) => {
    setCurrentId(id);
    if (id === 'hub') { setSubId(null); scrollToSheet(); return; }
    const a = assistants.find((x) => x.id === id);
    if (a) setSubId(a.sub[0].id);
    scrollToSheet();
  };

  const goHome = () => { setCurrentId('hub'); setSubId(null); scrollToSheet(); };

  const current = currentId === 'hub' ? null : assistants.find((a) => a.id === currentId);
  const currentSub = current
    ? (current.sub.find((s) => s.id === subId && s.processing) || current.sub.find((s) => s.processing) || current.sub[0])
    : null;

  const hubAssistants = assistants.map((a) => ({
    ...a,
    shortName: a.name.replace('Hysio ', ''),
    number: a.num,
    tagline: a.tagline,
    pillar: a.id === 'scribe' ? 'Flagship' : null,
    sub: a.sub.map((s) => s.name.replace('Hysio ', '').replace('SmartMail ', '')),
  }));

  const nextIdx = currentId !== 'hub' ? (assistants.findIndex((a) => a.id === currentId) + 1) % assistants.length : 0;
  const nextAssistant = assistants[nextIdx];

  return (
    <div style={{ color: window.DG, fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif" }}>
      <div className="hysio-demo-sheet">
        <window.TopTabs
          assistants={hubAssistants}
          currentId={currentId}
          onPick={pickAssistant}
        />
        <div style={{ minHeight: 420 }}>
          {currentId === 'hub' ? (
            <window.Hub assistants={hubAssistants} onPick={pickAssistant} />
          ) : (
            <window.AssistantFlow
              assistant={current}
              sub={currentSub}
              speed={speedMul}
              onPickSub={(id) => setSubId(id)}
            />
          )}
        </div>
        {currentId !== 'hub' && (
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid rgba(119,222,186,0.28)', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <window.GhostButton onClick={goHome} icon={window.Ic.Menu(13)}>Alle assistenten</window.GhostButton>
            <window.GhostButton onClick={() => pickAssistant(nextAssistant.id)} icon={window.Ic.ArrowRight(13)}>
              Volgende: {nextAssistant.name.replace('Hysio ', '')}
            </window.GhostButton>
          </div>
        )}
      </div>
    </div>
  );
}

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