// ─────────────────────────────────────────────────────────────────
// SIKKA ROYALE — Journey controller
// ─────────────────────────────────────────────────────────────────

function MotionStyles() {
  return <style dangerouslySetInnerHTML={{ __html: ROYAL_CSS }} />;
}

// Top-level screens that get the bottom tab nav
const TAB_SCREENS = new Set(['home', 'pay-merchant', 'marketplace', 'pay-bills', 'settings']);

function useJourney(initial = 'splash') {
  const [stack, setStack] = React.useState([{ name: initial, params: {} }]);
  const [direction, setDirection] = React.useState('fwd');
  const current = stack[stack.length - 1];

  const go = (name, params = {}) => {
    setDirection('fwd');
    setStack(s => [...s, { name, params }]);
  };
  const back = () => {
    if (stack.length <= 1) return;
    setDirection('back');
    setStack(s => s.slice(0, -1));
  };
  const reset = (name = 'splash', params = {}) => {
    setDirection('fwd');
    setStack([{ name, params }]);
  };
  const replace = (name, params = {}) => {
    setDirection('fwd');
    setStack(s => [...s.slice(0, -1), { name, params }]);
  };
  const tab = (name) => {
    // Tab swap: reset stack to that single screen — preserves direction guess
    setDirection('fwd');
    setStack([{ name, params: {} }]);
  };

  return { current, go, back, reset, replace, tab, direction, stack };
}

// LocalStorage-backed user — each visitor gets their own journey.
const SK_USER_KEY = 'sikka_noir_user_v1';
const SK_DEFAULT_USER = { name: '', phone: '', linked: [], onboarded: false };
function loadUser() {
  try {
    const raw = typeof localStorage !== 'undefined' && localStorage.getItem(SK_USER_KEY);
    return raw ? Object.assign({}, SK_DEFAULT_USER, JSON.parse(raw)) : { ...SK_DEFAULT_USER };
  } catch (e) { return { ...SK_DEFAULT_USER }; }
}
function saveUser(u) {
  try { localStorage.setItem(SK_USER_KEY, JSON.stringify(u)); } catch (e) {}
}

function RoyalApp() {
  const initialUser = loadUser();
  const J = useJourney(initialUser.onboarded ? 'home' : 'splash');
  const [modal, setModal] = React.useState(null);
  const [user, setUserRaw] = React.useState(initialUser);
  const setUser = React.useCallback((next) => {
    setUserRaw((prev) => {
      const v = typeof next === 'function' ? next(prev) : next;
      saveUser(v);
      return v;
    });
  }, []);

  const screen = J.current;
  const screenKey = JSON.stringify(screen) + '_' + J.stack.length + '_' + J.direction;

  const renderScreen = () => {
    switch (screen.name) {
      case 'splash':
        return <Splash
          name={user.name}
          hasSaved={user.onboarded && user.linked.length > 0}
          onStart={() => J.go('phone')}
          onSignIn={() => J.reset('home')}
        />;

      case 'phone':
        return <PhoneStep
          onBack={() => J.back()}
          onSkip={() => J.reset('home')}
          onContinue={(num) => {
            setUser(u => ({ ...u, phone: num }));
            J.go('otp', { phone: num });
          }}
        />;

      case 'otp':
        return <OtpStep
          phone={screen.params.phone || user.phone}
          onBack={() => J.back()}
          onVerify={() => J.go('name')}
        />;

      case 'name':
        return <NameStep
          initial={user.fullName || user.name || ''}
          onBack={() => J.back()}
          onContinue={(name) => {
            const first = name.trim().split(' ')[0] || name.trim();
            setUser(u => ({ ...u, name: first || u.name, fullName: name }));
            J.go('pick-cards');
          }}
        />;

      case 'pick-cards':
        return <PickCards
          name={user.name}
          linked={user.linked}
          onBack={() => J.back()}
          onLink={() => openSikkaWhatsapp({ name: user.name, linkedIds: user.linked, ask: 'I want to add another card to Sikka — can you help me link it?' })}
          onDone={(picked) => {
            setUser(u => ({ ...u, linked: picked }));
            J.go('linking', { cards: picked });
          }}
        />;

      case 'linking':
        return <LinkingScreen
          name={user.name}
          cards={screen.params.cards || user.linked}
          onDone={() => {
            setUser((u) => ({ ...u, onboarded: true }));
            J.reset('home');
          }}
        />;

      case 'home':
        return <HomeScreen
          name={user.name}
          linkedCount={user.linked.length}
          linked={user.linked}
          onPay={() => J.go('pay-merchant')}
          onSettings={() => J.tab('settings')}
          onMarketplace={() => J.tab('marketplace')}
          onPayBills={() => J.tab('pay-bills')}
          onWallet={() => J.go('pick-cards')}
        />;

      case 'settings':
        return <SettingsScreen
          name={user.name}
          mobile={user.phone}
          linkedCount={user.linked.length}
          linked={user.linked}
          onBack={() => J.tab('home')}
          onLogout={() => {
            setUser({ ...SK_DEFAULT_USER });
            try { localStorage.removeItem(SK_USER_KEY); } catch (e) {}
            J.reset('splash');
          }}
          onBrandKit={() => {}}
          onLinkedCards={() => J.go('pick-cards')}
        />;

      case 'pay-merchant':
        return <PayMerchantPicker
          onBack={() => J.tab('home')}
          onPick={(m) => J.go('pay-amount', { merchant: m })}
        />;

      case 'pay-amount':
        return <PayAmountKeypad
          merchant={screen.params.merchant}
          onBack={() => J.back()}
          onPay={(amount) => {
            J.go('pay-routing', { merchant: screen.params.merchant, amount });
          }}
        />;

      case 'pay-routing':
        return <PayRoutingLive
          merchant={screen.params.merchant}
          amount={screen.params.amount}
          linked={user.linked}
          onBack={() => J.back()}
          onComplete={(result) => {
            J.replace('pay-receipt', {
              ...screen.params,
              winner: (result && result.winner) || 'ADCB TouchPoints',
              earn: result && typeof result.earn === 'number' ? result.earn.toFixed(2) : '0.00',
              saved: result && typeof result.saved === 'number' ? result.saved.toFixed(2) : '0.00',
            });
          }}
        />;

      case 'pay-receipt':
        return <PayReceipt
          merchant={screen.params.merchant}
          amount={screen.params.amount}
          winner={screen.params.winner || 'ADCB TouchPoints'}
          earn={screen.params.earn || '0.00'}
          saved={screen.params.saved || '0.00'}
          onBack={() => J.tab('home')}
          onHome={() => J.tab('home')}
        />;

      case 'marketplace':
        return <Marketplace
          onBack={() => J.tab('home')}
          onOpenOffer={(o) => setModal({ type: 'voucher', payload: o })}
          onConvert={(d) => setModal({ type: 'converting', payload: d })}
        />;

      case 'pay-bills':
        return <PayBillsScreen
          onBack={() => J.tab('home')}
          onPaySomething={() => openSikkaWhatsapp({ name: user.name, linkedIds: user.linked, ask: 'I want to settle my UAE bills this cycle — which card should I use, and which balance should I clear first?' })}
        />;

      default:
        return <Splash onStart={() => J.go('phone')} />;
    }
  };

  const motion = J.direction === 'back' ? 'r-screen-back' : 'r-screen-in';
  const showTabs = TAB_SCREENS.has(screen.name);

  return (
    <React.Fragment>
      <MotionStyles />

      <div key={screenKey} style={{
        animation: `${motion} 320ms cubic-bezier(.2,.7,.2,1) both`,
        minHeight: '100dvh',
      }}>
        {renderScreen()}
      </div>

      {showTabs && (
        <BottomTabNav current={screen.name} onChange={(id) => J.tab(id)} />
      )}

      {modal && modal.type === 'voucher' && (
        <VoucherModal offer={modal.payload} onClose={() => setModal(null)} />
      )}
      {modal && modal.type === 'converting' && (
        <ConvertingOverlay deal={modal.payload} onDone={() => setModal(null)} />
      )}

      {/* Dev-only screen-jump pill. Only renders when ?dev=1 is in URL. */}
      {typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('dev') === '1' && (
        <DevNav J={J} />
      )}
    </React.Fragment>
  );
}

// Compact dev nav — floating chip at bottom-left
function DevNav({ J }) {
  const [open, setOpen] = React.useState(false);
  const screens = [
    ['splash', 'Splash'],
    ['phone', 'Phone'],
    ['otp', 'OTP'],
    ['name', 'Name'],
    ['pick-cards', 'Pick cards'],
    ['linking', 'Linking'],
    ['home', 'Home'],
    ['settings', 'Settings'],
    ['pay-merchant', 'Pay · pick'],
    ['pay-amount', 'Pay · amount'],
    ['pay-routing', 'Pay · routing'],
    ['pay-receipt', 'Pay · receipt'],
    ['marketplace', 'Souq'],
    ['pay-bills', 'Bills'],
  ];

  const paramsFor = (name) => {
    if (name === 'linking') return { cards: ['adcb', 'fab'] };
    if (name === 'pay-amount') return { merchant: { id: 'carrefour', name: 'Carrefour' } };
    if (name === 'pay-routing') return { merchant: { id: 'carrefour', name: 'Carrefour' }, amount: '320' };
    if (name === 'pay-receipt') return { merchant: { id: 'carrefour', name: 'Carrefour' }, amount: '320', winner: 'ADCB TouchPoints' };
    return {};
  };

  return (
    <div style={{
      position: 'fixed', left: 10, top: 10, zIndex: 200,
      fontFamily: FR.mono, fontSize: 10, letterSpacing: 1.4,
    }}>
      {open && (
        <div style={{
          marginTop: 36, padding: 8,
          background: 'rgba(13,9,19,0.95)',
          border: `0.5px solid ${R.hair2}`, borderRadius: 12,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4,
          maxWidth: 260, backdropFilter: 'blur(8px)',
          maxHeight: '70vh', overflowY: 'auto',
        }}>
          {screens.map(([n, label]) => (
            <button key={n} onClick={() => { J.reset(n, paramsFor(n)); setOpen(false); }}
              style={{
                padding: '6px 8px', background: J.current.name === n ? R.goldDim : R.ink2,
                color: J.current.name === n ? R.gold : R.pearl2,
                border: `0.5px solid ${J.current.name === n ? R.gold + '55' : R.hair}`,
                borderRadius: 6, cursor: 'pointer', textAlign: 'left',
                fontFamily: FR.mono, fontSize: 10, letterSpacing: 0.5,
              }}>{label}</button>
          ))}
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{
        position: 'absolute', top: 0, left: 0,
        padding: '6px 10px', background: 'rgba(13,9,19,0.85)',
        border: `0.5px solid ${R.hair2}`, borderRadius: 999,
        color: R.gold, cursor: 'pointer',
        fontFamily: FR.mono, fontSize: 9.5, letterSpacing: 1.6,
        backdropFilter: 'blur(8px)',
      }}>
        {open ? '× CLOSE' : '⋯ SCREENS'}
      </button>
    </div>
  );
}

Object.assign(window, { RoyalApp, useJourney, MotionStyles });