/* Stratiphy demo — APP SHELL / orchestrator. Loads LAST. Feature-detects which
   use-case modules are present on window and wires only those:
     - window.PortfolioHome      → Portfolio home screen (base shell)
     - window.IsaTransferFlow    → ISA transfer journey
     - window.StratiphyChatScreen / window.TransferScreen → AI assistant
     - window.CollectWidget      → connect-investments widget
   Launch buttons + overlay panes appear only when their module is loaded, so a
   demo HTML composes a journey simply by including (or omitting) its <script>.
   If no PortfolioHome is loaded, the single present journey renders full-screen. */

const PortfolioHome = window.PortfolioHome;
const IsaTransferFlow = window.IsaTransferFlow;
const StratiphyChatScreen = window.StratiphyChatScreen;
const TransferScreen = window.TransferScreen;
const CollectWidget = window.CollectWidget;

function App() {
  const [linked, setLinked] = React.useState([]);
  const [widgetOpen, setWidgetOpen] = React.useState(false);
  const [widgetSeq, setWidgetSeq] = React.useState(0);
  const [chatOpen, setChatOpen] = React.useState(false);
  const [chatSeq, setChatSeq] = React.useState(0);
  const [transfer, setTransfer] = React.useState(null);
  const [isaFlow, setIsaFlow] = React.useState(false);
  const [isaSeq, setIsaSeq] = React.useState(0);
  const [isaTransfer, setIsaTransfer] = React.useState(() => {
    try {const v = localStorage.getItem('stratiphy_transfer');return v ? JSON.parse(v) : null;} catch (e) {return null;}
  });

  const startTransfer = (t) => {
    setIsaTransfer(t);
    try {localStorage.setItem('stratiphy_transfer', JSON.stringify(t));} catch (e) {}
  };
  const dismissTransfer = () => {
    setIsaTransfer(null);
    try {localStorage.removeItem('stratiphy_transfer');} catch (e) {}
  };

  const openIsaFlow = () => {setIsaSeq((s) => s + 1);setIsaFlow(true);};
  const openWidget = () => {setWidgetSeq((s) => s + 1);setWidgetOpen(true);};
  const openChat = () => {setChatSeq((s) => s + 1);setChatOpen(true);};
  const finishCollect = (providers) => {setLinked(providers);setWidgetOpen(false);};

  // ----- overlay panes shared by both modes (each guarded by module presence) -----
  const transferPane = TransferScreen &&
    <div className="pane" style={{ position: 'absolute', inset: 0, zIndex: 48, transform: transfer ? 'translateX(0)' : 'translateX(100%)' }}>
      {transfer && <TransferScreen data={transfer} onClose={() => setTransfer(null)} />}
    </div>;

  const collectPane = CollectWidget &&
    <React.Fragment>
      <div onClick={() => setWidgetOpen(false)} style={{ position: 'absolute', inset: 0, zIndex: 49, background: 'rgba(30,20,60,0.4)', opacity: widgetOpen ? 1 : 0, pointerEvents: widgetOpen ? 'auto' : 'none', transition: 'opacity 380ms cubic-bezier(0.2,0.7,0.2,1)' }} />
      <div className="pane" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: '25%', zIndex: 50, borderRadius: '26px 26px 0 0', overflow: 'hidden', boxShadow: '0 -12px 44px rgba(0,0,0,0.28)', transform: widgetOpen ? 'translateY(0)' : 'translateY(101%)' }}>
        {widgetOpen && <CollectWidget key={widgetSeq} initial={linked} onDone={finishCollect} onCancel={() => setWidgetOpen(false)} accent={STR_PURPLE} />}
      </div>
    </React.Fragment>;

  let body;
  if (PortfolioHome) {
    // ----- HOME MODE: portfolio base + journeys as overlays -----
    body = (
      <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
        <PortfolioHome
          connected={linked.length > 0}
          accounts={linked}
          transfer={isaTransfer}
          onDismissTransfer={dismissTransfer}
          onOpenCollect={CollectWidget ? openWidget : undefined}
          onOpenChat={StratiphyChatScreen ? openChat : undefined}
          onOpenTransfer={IsaTransferFlow ? openIsaFlow : undefined} />

        {IsaTransferFlow &&
        <div className="pane" style={{ position: 'absolute', inset: 0, zIndex: 52, transform: isaFlow ? 'translateX(0)' : 'translateX(100%)' }}>
          {isaFlow && <IsaTransferFlow key={isaSeq} onClose={() => setIsaFlow(false)} onComplete={startTransfer} />}
        </div>}

        {StratiphyChatScreen &&
        <div className="pane" style={{ position: 'absolute', inset: 0, zIndex: 45, transform: chatOpen ? 'translateX(0)' : 'translateX(100%)' }}>
          {chatOpen && <StratiphyChatScreen key={chatSeq} accounts={linked} onBack={() => setChatOpen(false)} onConnect={CollectWidget ? () => {setChatOpen(false);openWidget();} : undefined} onTransfer={TransferScreen ? (data) => setTransfer(data) : undefined} />}
        </div>}

        {transferPane}
        {collectPane}
      </div>);

  } else if (IsaTransferFlow) {
    // ----- SOLO: ISA transfer journey full-screen, re-mounts on close -----
    body = (
      <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
        <IsaTransferFlow key={isaSeq} onClose={() => setIsaSeq((s) => s + 1)} onComplete={() => {}} />
      </div>);

  } else if (StratiphyChatScreen) {
    // ----- SOLO: AI assistant full-screen (+ transfer/collect overlays if present) -----
    body = (
      <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
        <StratiphyChatScreen key={chatSeq} accounts={linked} onBack={() => setChatSeq((s) => s + 1)} onConnect={CollectWidget ? openWidget : undefined} onTransfer={TransferScreen ? (data) => setTransfer(data) : undefined} />
        {transferPane}
        {collectPane}
      </div>);

  } else if (CollectWidget) {
    // ----- SOLO: connect-investments widget full-screen, re-mounts on close -----
    body = (
      <div style={{ position: 'relative', height: '100%', overflow: 'hidden', background: '#fff' }}>
        <CollectWidget key={widgetSeq} initial={[]} onDone={() => setWidgetSeq((s) => s + 1)} onCancel={() => setWidgetSeq((s) => s + 1)} accent={STR_PURPLE} />
      </div>);

  } else {
    body = (
      <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center', fontFamily: 'var(--font-body)', color: STR_INK }}>
        No use-case module loaded. Include at least one usecases/*.jsx script.
      </div>);

  }

  return (
    <div className="fit">
      <PhoneFrame>
        <IOSDevice dark={false} homeDark={false}>
          {body}
        </IOSDevice>
      </PhoneFrame>
    </div>);

}

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