// dash-shell.jsx — the full dashboard experience, houses all tabs

function DashShell({ onExit }) {
  const [tab, setTab] = React.useState('home');
  const [wallet, setWallet] = React.useState(null); // 'btc' | 'usd' | null
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [settingsInitial, setSettingsInitial] = React.useState(null);
  const btcPrice = useBtcPrice(MOCK.btcPriceSeed);
  const [transKey, setTransKey] = React.useState(0);

  React.useEffect(() => {
    const h = () => { setSettingsInitial('creditincome'); setSettingsOpen(true); };
    window.addEventListener('__openCreditIncome', h);
    return () => window.removeEventListener('__openCreditIncome', h);
  }, []);

  const go = (t) => {
    setWallet(null);
    setTab(t);
    setTransKey(k => k + 1);
  };

  const openWallet = (kind) => {
    setWallet(kind);
    setTransKey(k => k + 1);
  };

  const renderTab = () => {
    if (wallet) return <WalletDetail kind={wallet} btcPrice={btcPrice} onBack={() => { setWallet(null); setTransKey(k => k + 1); }} />;
    switch (tab) {
      case 'home':      return <HomeTab btcPrice={btcPrice} onNavigate={go} onOpenWallet={openWallet} onOpenSettings={() => setSettingsOpen(true)} />;
      case 'card':      return <CardTab btcPrice={btcPrice} />;
      case 'invest':    return <InvestTab btcPrice={btcPrice} />;
      case 'loans':     return <LoansTab btcPrice={btcPrice} />;
      case 'concierge': return <ConciergeTab />;
      default: return null;
    }
  };

  const labels = { home: 'Home', card: 'Card', invest: 'Invest', loans: 'Loans', concierge: 'Concierge' };

  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: '#050507' }}
         data-screen-label={wallet ? `DASH · ${wallet.toUpperCase()} Wallet` : `DASH · ${labels[tab]}`}>
      <div key={transKey} style={{
        width: '100%', height: '100%',
        animation: 'dashTabIn 0.35s cubic-bezier(0.16,1,0.3,1)',
      }}>
        {renderTab()}
      </div>
      <TabBar active={tab} onChange={go} />

      {settingsOpen && <SettingsSheet initial={settingsInitial} onClose={() => { setSettingsOpen(false); setSettingsInitial(null); }} />}

      {/* quiet back-to-onboarding (hidden when a wallet is open) */}
      {onExit && !wallet && (
        <button onClick={onExit} title="Back to onboarding" style={{
          position: 'absolute', top: 58, left: 16, zIndex: 30,
          width: 32, height: 32, borderRadius: '50%',
          background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
          color: 'rgba(245,245,247,0.7)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          backdropFilter: 'blur(10px)',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
      )}

      <style>{`
        @keyframes dashTabIn {
          0% { opacity: 0; transform: translateY(6px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        /* Scrollbar styling inside dashboard */
        .dash-scroll::-webkit-scrollbar { width: 0; }
      `}</style>
    </div>
  );
}

Object.assign(window, { DashShell });