import React, { lazy, Suspense } from 'react';

/**
 * router.tsx — Client-side routing config for ShophyFast React SPA
 */

// ── Lazy load heavy page components ─────────────────────────────────────────
export const LazyMainLanding       = lazy(() => import('./components/MainLanding'));
export const LazyAdminDashboard    = lazy(() => import('./components/AdminDashboard'));
export const LazySuperAdmin        = lazy(() => import('./components/SuperAdminDashboard'));
export const LazyFacebookAds       = lazy(() => import('./components/FacebookAdsPanel'));
export const LazyUbaidiAdsMarketer = lazy(() => import('./components/UbaidiAdsMarketer'));
export const LazyUbaidiChat        = lazy(() => import('./components/UbaidiChat'));

// ── Page route map ───────────────────────────────────────────────────────────
export const ROUTES = {
  HOME:        '/',
  SHOP:        '/shop',
  ABOUT:       '/about',
  CONTACT:     '/contact',
  ADMIN:       '/admin',
  SUPER_ADMIN: '/super-admin',
} as const;

// ── Scroll restoration ───────────────────────────────────────────────────────
export function scrollToTop(smooth = false) {
  window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
}

// ── Loading fallback ─────────────────────────────────────────────────────────
export function PageLoader() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      minHeight: '100vh', background: '#0a0814',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          border: '3px solid rgba(139,92,246,0.2)',
          borderTop: '3px solid #7c3aed',
          animation: 'spin 0.8s linear infinite',
        }} />
        <p style={{ color: '#64748b', fontSize: 13, fontWeight: 600, margin: 0 }}>
          লোড হচ্ছে...
        </p>
        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    </div>
  );
}

// ── Suspense wrapper ─────────────────────────────────────────────────────────
export function WithSuspense({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<PageLoader />}>
      {children}
    </Suspense>
  );
}
