// HIFA OIL Loyalty — app shell, routing, state
const { useState: useS } = React;

const PAGE_TITLES = { settings: 'Postavke', transactions: 'Transakcije', news: 'Novosti' };

// ── extra simple subpages ─────────────────────────────────────
function TransactionsScreen() {
  return (
    <div style={{ padding: '16px 18px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16,
        background: 'var(--surface)', borderRadius: 'var(--r-card)', padding: '16px 18px', border: '1px solid var(--border)' }}>
        <span className="t-body" style={{ color: 'var(--text-2)', fontWeight: 600 }}>Raspoloživo</span>
        <span className="t-num" style={{ fontSize: 22, color: 'var(--hifa-gold)' }}>{HIFA.user.available} KM</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {HIFA.transactions.map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface)',
            borderRadius: 'var(--r-input)', padding: '14px 15px', border: '1px solid var(--border)' }}>
            <div style={{ width: 40, height: 40, borderRadius: 11, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: t.type === 'earn' ? 'color-mix(in srgb, var(--hifa-gold) 18%, transparent)' : 'color-mix(in srgb, var(--hifa-red) 18%, transparent)' }}>
              <Icon name={t.type === 'earn' ? 'arrow-down-left' : 'arrow-up-right'} size={20}
                color={t.type === 'earn' ? 'var(--hifa-gold)' : 'var(--hifa-red)'} stroke={2.4} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t-body" style={{ color: 'var(--text)', fontWeight: 700, fontSize: 14 }}>Račun #{t.id}</div>
              <div className="t-small" style={{ color: 'var(--text-3)', fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.station} · {t.date}</div>
            </div>
            <span className="t-num" style={{ fontSize: 15, color: t.type === 'earn' ? 'var(--text)' : 'var(--text-3)' }}>
              {t.type === 'earn' ? '+' : '−'}{fmtL(t.litres)} L</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function NewsScreen() {
  return (
    <div style={{ padding: '16px 18px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {HIFA.news.map((n, i) => (
        <div key={i} style={{ borderRadius: 'var(--r-card)', overflow: 'hidden', background: 'var(--surface)',
          border: '1px solid var(--border)', boxShadow: 'var(--shadow-card)' }}>
          <div style={{ height: 150, backgroundImage: `url(${n.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ padding: '14px 16px 16px' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
              <span className="t-label" style={{ fontSize: 10, color: 'var(--hifa-red)' }}>{n.tag}</span>
              <span className="t-small" style={{ color: 'var(--text-3)', fontSize: 11 }}>{n.date}</span>
            </div>
            <div className="t-h3" style={{ color: 'var(--text)', fontSize: 16, lineHeight: 1.3 }}>{n.title}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── App ───────────────────────────────────────────────────────
function App() {
  const [theme, setTheme] = useS('dark');
  const [authed, setAuthed] = useS(false);
  const [tab, setTab] = useS('home');
  const [page, setPage] = useS(null);
  const [menu, setMenu] = useS(false);
  const [currency, setCurrency] = useS('KM');
  const [notif, setNotif] = useS(true);

  React.useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]);

  const goTab = (t) => { setTab(t); setPage(null); setMenu(false); };
  const goPage = (p) => { setPage(p); setMenu(false); };

  let body, barVariant = 'home', barTitle = null;
  if (page) {
    barVariant = 'page'; barTitle = PAGE_TITLES[page];
    body = page === 'settings'
      ? <SettingsScreen theme={theme} setTheme={setTheme} currency={currency} setCurrency={setCurrency} notif={notif} setNotif={setNotif} onLogout={() => { setAuthed(false); setPage(null); }} />
      : page === 'transactions' ? <TransactionsScreen />
      : <NewsScreen />;
  } else {
    body = tab === 'home' ? <HomeScreen onTab={goTab} onNews={() => goPage('news')} onTx={() => goPage('transactions')} />
      : tab === 'nearby' ? <NearbyScreen />
      : tab === 'card' ? <CardScreen />
      : tab === 'catalog' ? <CatalogScreen />
      : <ProfileScreen onTab={goTab} />;
  }

  return (
    <IOSDevice dark={theme === 'dark'}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
        {!authed ? (
          <div style={{ flex: 1, overflow: 'auto' }}><LoginScreen onLogin={() => setAuthed(true)} /></div>
        ) : (
          <React.Fragment>
            <AppBar variant={barVariant} title={barTitle} currency={currency}
              onMenu={() => setMenu(true)} onBack={() => setPage(null)}
              onCurrency={() => setCurrency(c => c === 'KM' ? 'EUR' : 'KM')}
              onSettings={() => goPage('settings')} onFav={() => goTab('profile')} />
            <div key={page || tab} style={{ flex: 1, overflow: 'auto' }}>{body}</div>
            <BottomNav active={tab} onChange={goTab} />

            {/* menu drawer */}
            <div style={{ position: 'absolute', inset: 0, zIndex: 70, pointerEvents: menu ? 'auto' : 'none' }}>
              <div onClick={() => setMenu(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)',
                opacity: menu ? 1 : 0, transition: 'opacity .28s ease' }} />
              <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: '86%', maxWidth: 360,
                boxShadow: 'var(--shadow-pop)', transform: menu ? 'translateX(0)' : 'translateX(-104%)',
                transition: 'transform .32s cubic-bezier(.32,.72,0,1)' }}>
                <MenuContent onClose={() => setMenu(false)} onLogout={() => { setAuthed(false); setMenu(false); }} onNav={goPage === undefined ? goTab : (t => (['catalog','nearby'].includes(t) ? goTab(t) : goPage(t)))} />
              </div>
            </div>
          </React.Fragment>
        )}
      </div>
    </IOSDevice>
  );
}

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