// App shell — упрощённый роутинг: home → catalog → cart → checkout → success.

// City picker modal (доступен из шапки в любой момент).
const CityPickerModal = ({ open, onClose, navigate }) => {
  const { city, setCity } = useStore();
  if (!open) return null;
  return (
    <Modal open={open} onClose={onClose} size="sm">
      <div className="p-6">
        <div className="flex items-center justify-between mb-6">
          <h2 className="font-display font-bold text-2xl text-ink-900">Выберите город</h2>
          <button onClick={onClose} className="w-9 h-9 rounded-full hover:bg-paper-100 flex items-center justify-center" aria-label="Закрыть">
            <Icon name="close" size={18} />
          </button>
        </div>
        <div className="grid grid-cols-2 gap-2.5">
          <button
            onClick={() => { setCity(null); onClose(); navigate({ name: 'catalog' }); }}
            className={`p-4 rounded-xl text-left transition ${!city ? 'bg-brand-500 text-white' : 'bg-paper-50 hover:bg-paper-100'}`}
          >
            <div className="text-2xl mb-1">🌍</div>
            <div className="font-semibold">Все города</div>
          </button>
          {window.DATA.CITIES.map((c) => (
            <button
              key={c.id}
              onClick={() => { setCity(c.id); onClose(); navigate({ name: 'catalog' }); }}
              className={`p-4 rounded-xl text-left transition ${city === c.id ? 'bg-brand-500 text-white' : 'bg-paper-50 hover:bg-paper-100'}`}
            >
              <div className="text-2xl mb-1">{c.emoji}</div>
              <div className="font-semibold">{c.name}</div>
            </button>
          ))}
        </div>
      </div>
    </Modal>
  );
};

// Cookie consent banner — показывается один раз, закрывается навсегда
const CookieBanner = () => {
  const [visible, setVisible] = useState(() => !localStorage.getItem('fair:cookie-ok'));
  if (!visible) return null;
  const accept = () => { localStorage.setItem('fair:cookie-ok', '1'); setVisible(false); };
  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4">
      <div className="max-w-3xl mx-auto bg-ink-900 text-white rounded-2xl px-5 py-4 flex flex-col sm:flex-row items-start sm:items-center gap-3 shadow-pop animate-slide-up">
        <p className="text-sm flex-1 leading-relaxed text-white/80">
          Мы используем localStorage для работы корзины. Никаких рекламных трекеров.{' '}
          <a href="/legal/cookies.html" target="_blank" className="underline text-white/60 hover:text-white">Подробнее</a>
        </p>
        <button onClick={accept} className="btn-primary shrink-0 text-sm py-2.5 px-4 whitespace-nowrap">
          Понятно
        </button>
      </div>
    </div>
  );
};

const Footer = () => (
  <footer className="border-t border-paper-200 mt-8">
    <div className="max-w-7xl mx-auto px-4 md:px-8 py-6 flex flex-col gap-4">
      <div className="flex items-center justify-between gap-3 text-sm text-ink-500 flex-wrap">
        <div className="flex items-center gap-2.5">
          <img src="/img/logo.png" alt="Уфанет" className="h-7 w-auto opacity-60" />
          <span>Ярмарка · 2026</span>
        </div>
        <span className="text-xs text-ink-300">Сайт сделан сотрудником Уфанет</span>
      </div>
      <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-ink-400">
        <a href="/legal/oferta.html"  target="_blank" className="hover:text-brand-700 transition">Публичная оферта</a>
        <a href="/legal/privacy.html" target="_blank" className="hover:text-brand-700 transition">Политика конфиденциальности</a>
        <a href="/legal/cookies.html" target="_blank" className="hover:text-brand-700 transition">Политика cookies</a>
      </div>
      <p className="text-[11px] text-ink-300 leading-snug max-w-2xl">
        Сервис предназначен для сотрудников Уфанет. Размещение заявки не является договором купли-продажи и не влечёт онлайн-оплаты. Расчёты производятся напрямую между покупателем и продавцом.
      </p>
    </div>
  </footer>
);

const App = () => {
  const [route, setRoute] = useState({ name: 'home' });
  const [filters, setFilters] = useState({});
  const [cityPickerOpen, setCityPickerOpen] = useState(false);
  const [productModal, setProductModal] = useState(null);
  const [successOrder, setSuccessOrder] = useState(null);

  const navigate = (next) => {
    setRoute(next);
    if (next.filters) setFilters(next.filters);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  const handleCheckout = () => {
    setRoute({ name: 'checkout' });
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  const handleSuccess = (order) => {
    setSuccessOrder(order);
    setRoute({ name: 'success' });
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  return (
    <div className="min-h-screen flex flex-col bg-paper">
      <Header
        navigate={navigate}
        onOpenCityPicker={() => setCityPickerOpen(true)}
      />

      <main className="flex-1">
        {route.name === 'home'     && <Home navigate={navigate} />}
        {route.name === 'catalog'  && (
          <Catalog
            filters={filters}
            setFilters={setFilters}
            navigate={navigate}
            onOpenProduct={setProductModal}
          />
        )}
        {route.name === 'cart'     && (
          <CartPage navigate={navigate} onCheckout={handleCheckout} />
        )}
        {route.name === 'checkout' && (
          <Checkout
            onCancel={() => navigate({ name: 'cart' })}
            onSuccess={handleSuccess}
          />
        )}
        {route.name === 'success'  && (
          <SuccessScreen
            order={successOrder}
            onBack={() => navigate({ name: 'catalog' })}
          />
        )}
      </main>

      <Footer />
      <CookieBanner />

      <CityPickerModal
        open={cityPickerOpen}
        onClose={() => setCityPickerOpen(false)}
        navigate={navigate}
      />
      <ProductModal product={productModal} onClose={() => setProductModal(null)} />
      <Toast />
    </div>
  );
};

const Root = () => (
  <StoreProvider>
    <App />
  </StoreProvider>
);

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