// ────────────────────────────────────────────────────────────
// Nukus 89 — Telegram Mini App shell
// ────────────────────────────────────────────────────────────

const { useState, useEffect } = React;

const THEME = {
  id: 'white',
  bg: '#ffffff',
  ink: '#0a0a0a',
  mute: '#7a7a7a',
  hover: 'rgba(0,0,0,0.04)',
  invertLogo: false,
  statusDark: false,
};

const FONT = 'IBM Plex Mono';

function makeT(lang) {
  return (key) => (T[lang] && T[lang][key]) || key;
}

// Detect Telegram WebApp environment
const tg = window.Telegram && window.Telegram.WebApp;

// fetch с подписью Telegram — сервер проверяет initData (личные данные только владельцу)
const nkFetch = (url, opts = {}) => fetch(url, {
  ...opts,
  headers: { ...(opts.headers || {}), 'x-tg-init-data': (tg && tg.initData) || '' },
});
window.nkFetch = nkFetch;

function App() {
  const theme = THEME;
  const [lang, setLang] = useState(() => {
    // Try to pick lang from Telegram user language
    if (tg && tg.initDataUnsafe && tg.initDataUnsafe.user) {
      const l = tg.initDataUnsafe.user.language_code;
      if (l === 'uz') return 'uz';
      if (l === 'en') return 'en';
    }
    return 'ru';
  });
  const t = makeT(lang);

  const [screen, setScreen] = useState('home');
  const [bookings, setBookings] = useState([]);

  // Подгружаем активные брони с сервера — фикс исчезания при перезаходе
  useEffect(() => {
    const chatId = tg && tg.initDataUnsafe && tg.initDataUnsafe.user
      ? tg.initDataUnsafe.user.id : 0;
    if (!chatId) return;
    nkFetch('/api/bookings/' + chatId)
      .then(r => r.json())
      .then(rows => {
        if (!Array.isArray(rows)) return;
        setBookings(rows.map(r => {
          const [y, m, d] = (r.date_str || '').split('-').map(Number);
          return { code: r.code, date: { y, m: m - 1, d }, time: r.time_str, guests: r.guests, table: r.table_id, status: r.status };
        }));
      })
      .catch(() => {});
  }, []);

  const go = (s) => setScreen(s);
  // Возвращает true только если сервер реально сохранил бронь
  const onConfirm = async (b) => {
    try {
      const res = await nkFetch('/api/booking', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          code: b.code,
          date_str: b.date ? `${b.date.y}-${String(b.date.m+1).padStart(2,'0')}-${String(b.date.d).padStart(2,'0')}` : '',
          time_str: b.time,
          guests: b.guests,
          table_id: b.table,
          comment: b.comment || '',
        }),
      });
      if (!res.ok) return false;
      setBookings(prev => [{ ...b, status: 'pending' }, ...prev]);
      return true;
    } catch (e) {
      console.error('Не удалось сохранить бронь:', e);
      return false;
    }
  };

  useEffect(() => {
    document.documentElement.style.setProperty('--mono', `"${FONT}", ui-monospace, monospace`);
    document.documentElement.style.setProperty('--display', `"${FONT}", ui-monospace, monospace`);
    document.body.style.background = theme.bg;
    document.body.style.color = theme.ink;

    if (tg) {
      tg.ready();
      tg.expand();
      tg.setHeaderColor(theme.bg);
      tg.setBackgroundColor(theme.bg);
    }
  }, []);

  // Wire Telegram back button to app navigation
  useEffect(() => {
    if (!tg) return;
    if (screen === 'home') {
      tg.BackButton.hide();
    } else {
      tg.BackButton.show();
      const handler = () => go('home');
      tg.BackButton.onClick(handler);
      return () => tg.BackButton.offClick(handler);
    }
  }, [screen]);

  const renderScreen = () => {
    switch (screen) {
      case 'home':
        return <HomeScreen go={go} theme={theme} t={t} lang={lang} setLang={setLang} />;
      case 'book':
        return <BookingFlow go={go} theme={theme} t={t} lang={lang}
          onConfirm={onConfirm} />;
      case 'kitchen':
        return <MenuScreen kind="kitchen" theme={theme} t={t} lang={lang} go={go} />;
      case 'bar':
        return <MenuScreen kind="bar" theme={theme} t={t} lang={lang} go={go} />;
      case 'events':
        return <EventsScreen theme={theme} t={t} lang={lang} go={go} />;
      case 'my':
        return <MyScreen theme={theme} t={t} lang={lang} go={go} bookings={bookings} />;
      case 'loyalty': // NUKUS CLUB временно скрыт (LOYALTY_ENABLED в data.jsx)
        return LOYALTY_ENABLED ? <LoyaltyScreen theme={theme} t={t} lang={lang} go={go} /> : null;
      default:
        return null;
    }
  };

  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: theme.bg, color: theme.ink,
      display: 'flex', flexDirection: 'column',
      fontFamily: 'var(--mono)',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)',
    }}>
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {renderScreen()}
      </div>
    </div>
  );
}

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