import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { Toaster } from '@/components/ui/toaster';
import { SupabaseAuthProvider } from '@/contexts/SupabaseAuthContext';
import { TenantProvider } from '@/contexts/TenantContext';
import ScrollToTop from '@/components/common/ScrollToTop';
import LoadingSpinner from '@/components/common/LoadingSpinner';

// Layout Components
const PublicLayout = lazy(() => import('@/components/layout/PublicLayout'));
const DashboardLayout = lazy(() => import('@/components/layout/DashboardLayout'));
const AdminLayout = lazy(() => import('@/components/layout/AdminLayout'));
const ProtectedRoute = lazy(() => import('@/components/auth/ProtectedRoute'));

// Public Pages
const LandingPage = lazy(() => import('@/pages/LandingPage.jsx'));
const AboutPage = lazy(() => import('@/pages/AboutPage.jsx'));
const ContactPage = lazy(() => import('@/pages/ContactPage.jsx'));
const FAQPage = lazy(() => import('@/pages/FAQPage.jsx'));
const AddressesPage = lazy(() => import('@/pages/AddressesPage.jsx'));
const PricingPage = lazy(() => import('@/pages/PricingPage.jsx'));
const LoginPage = lazy(() => import('@/pages/LoginPage.jsx'));
const SignupPage = lazy(() => import('@/pages/SignupPage.jsx'));
const TermsPage = lazy(() => import('@/pages/legal/TermsPage.jsx'));
const PrivacyPage = lazy(() => import('@/pages/legal/PrivacyPage.jsx'));
const RefundPage = lazy(() => import('@/pages/legal/RefundPage.jsx'));
const BusinessSetupPage = lazy(() => import('@/pages/services/BusinessSetupPage.jsx'));
const MailServicePage = lazy(() => import('@/pages/services/MailServicePage.jsx'));
const PhoneServicePage = lazy(() => import('@/pages/services/PhoneServicePage.jsx'));
const BlogPage = lazy(() => import('@/pages/blog/BlogPage.jsx'));
const BlogPostPage = lazy(() => import('@/pages/blog/BlogPostPage.jsx'));

// Subscription & Checkout
const SubscribePage = lazy(() => import('@/pages/SubscribePage.jsx'));
const CheckoutCallbackPage = lazy(() => import('@/pages/CheckoutCallbackPage.jsx'));

// Protected Pages
const DashboardPage = lazy(() => import('@/pages/dashboard/DashboardPage.jsx'));
const BillingPage = lazy(() => import('@/pages/dashboard/BillingPage.jsx'));
const MailPage = lazy(() => import('@/pages/dashboard/MailPage.jsx'));
const PhonePage = lazy(() => import('@/pages/dashboard/PhonePage.jsx'));
const SMSPage = lazy(() => import('@/pages/dashboard/SMSPage.jsx'));
const MyDetailsPage = lazy(() => import('@/pages/dashboard/MyDetailsPage.jsx'));
const TeamPage = lazy(() => import('@/pages/dashboard/TeamPage.jsx'));
const SettingsPage = lazy(() => import('@/pages/dashboard/SettingsPage.jsx'));

// Admin Pages
const AdminDashboard = lazy(() => import('@/pages/admin/AdminDashboard.jsx'));
const AdminTenants = lazy(() => import('@/pages/admin/AdminTenants.jsx'));
const AdminUsers = lazy(() => import('@/pages/admin/AdminUsers.jsx'));
const AdminKYC = lazy(() => import('@/pages/admin/AdminKYC.jsx'));


const PageLoader = () => (
  <div className="w-full h-screen flex justify-center items-center">
    <LoadingSpinner size="lg" />
  </div>
);

function App() {
  const siteUrl = 'https://virtualofficesdubai.ae';
  const defaultTitle = 'Virtual Office Dubai';
  const defaultDescription = 'Virtual Office Dubai provides compliant business addresses with AI phone assistants and local office numbers, based in Dubai, UAE.';
  const ogImageUrl = 'https://horizons-cdn.hostinger.com/b1db84ec-6e36-4e1a-8c05-742d1acfcdca/b1716431fa6c4c2d76549173e74e5352.jpg';

  const schema = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'Organization',
        name: 'Virtual Office Dubai',
        url: siteUrl,
        logo: ogImageUrl,
        contactPoint: {
          '@type': 'ContactPoint',
          telephone: '+971-4-123-4567',
          'contactType': 'Customer Service',
        },
      },
      {
        '@type': 'WebSite',
        url: siteUrl,
        potentialAction: {
          '@type': 'SearchAction',
          target: {
            '@type': 'EntryPoint',
            'urlTemplate': `${siteUrl}/search?q={search_term_string}`,
          },
          'query-input': 'required name=search_term_string',
        },
      },
    ],
  };

  return (
    <HelmetProvider>
      <Helmet
        defaultTitle={defaultTitle}
      >
        <meta name="description" content={defaultDescription} />
        <link rel="canonical" href={siteUrl} />
        <meta property="og:url" content={siteUrl} />
        <meta property="og:title" content={defaultTitle} />
        <meta property="og:description" content={defaultDescription} />
        <meta property="og:image" content={ogImageUrl} />
        <meta property="og:image:secure_url" content={ogImageUrl} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={defaultTitle} />
        <meta name="twitter:description" content={defaultDescription} />
        <meta name="twitter:image" content={ogImageUrl} />
        <script type="application/ld+json">{JSON.stringify(schema)}</script>
      </Helmet>
      <Router>
        <ScrollToTop />
        <SupabaseAuthProvider>
          <TenantProvider>
            <div className="min-h-screen">
              <Routes>
                {/* Public Routes */}
                <Route path="/" element={<Suspense fallback={<PageLoader />}><PublicLayout /></Suspense>}>
                  <Route index element={<Suspense fallback={<PageLoader />}><LandingPage /></Suspense>} />
                  <Route path="about" element={<Suspense fallback={<PageLoader />}><AboutPage /></Suspense>} />
                  <Route path="contact" element={<Suspense fallback={<PageLoader />}><ContactPage /></Suspense>} />
                  <Route path="faq" element={<Suspense fallback={<PageLoader />}><FAQPage /></Suspense>} />
                  <Route path="addresses" element={<Suspense fallback={<PageLoader />}><AddressesPage /></Suspense>} />
                  <Route path="pricing" element={<Suspense fallback={<PageLoader />}><PricingPage /></Suspense>} />
                  <Route path="login" element={<Suspense fallback={<PageLoader />}><LoginPage /></Suspense>} />
                  <Route path="signup" element={<Suspense fallback={<PageLoader />}><SignupPage /></Suspense>} />
                  <Route path="terms" element={<Suspense fallback={<PageLoader />}><TermsPage /></Suspense>} />
                  <Route path="privacy" element={<Suspense fallback={<PageLoader />}><PrivacyPage /></Suspense>} />
                  <Route path="refund" element={<Suspense fallback={<PageLoader />}><RefundPage /></Suspense>} />
                  <Route path="business-setup" element={<Suspense fallback={<PageLoader />}><BusinessSetupPage /></Suspense>} />
                  <Route path="services/mail" element={<Suspense fallback={<PageLoader />}><MailServicePage /></Suspense>} />
                  <Route path="services/phone" element={<Suspense fallback={<PageLoader />}><PhoneServicePage /></Suspense>} />
                  <Route path="blog" element={<Suspense fallback={<PageLoader />}><BlogPage /></Suspense>} />
                  <Route path="blog/:slug" element={<Suspense fallback={<PageLoader />}><BlogPostPage /></Suspense>} />
                </Route>

                {/* Subscription and Checkout Routes */}
                <Route path="/subscribe" element={<Suspense fallback={<PageLoader />}><ProtectedRoute><SubscribePage /></ProtectedRoute></Suspense>} />
                <Route path="/checkout/callback" element={<Suspense fallback={<PageLoader />}><ProtectedRoute><CheckoutCallbackPage /></ProtectedRoute></Suspense>} />

                {/* Dashboard Routes */}
                <Route path="/dashboard" element={
                  <Suspense fallback={<PageLoader />}>
                    <ProtectedRoute needsSubscription={true}>
                      <DashboardLayout />
                    </ProtectedRoute>
                  </Suspense>
                }>
                  <Route index element={<Suspense fallback={<PageLoader />}><DashboardPage /></Suspense>} />
                  <Route path="billing" element={<Suspense fallback={<PageLoader />}><BillingPage /></Suspense>} />
                  <Route path="mail" element={<Suspense fallback={<PageLoader />}><MailPage /></Suspense>} />
                  <Route path="phone" element={<Suspense fallback={<PageLoader />}><PhonePage /></Suspense>} />
                  <Route path="sms" element={<Suspense fallback={<PageLoader />}><SMSPage /></Suspense>} />
                  <Route path="my-details" element={<Suspense fallback={<PageLoader />}><MyDetailsPage /></Suspense>} />
                  <Route path="team" element={<Suspense fallback={<PageLoader />}><TeamPage /></Suspense>} />
                  <Route path="settings" element={<Suspense fallback={<PageLoader />}><SettingsPage /></Suspense>} />
                </Route>

                {/* Admin Pages */}
                <Route path="/admin" element={
                  <Suspense fallback={<PageLoader />}>
                    <ProtectedRoute requiredRole="admin">
                      <AdminLayout />
                    </ProtectedRoute>
                  </Suspense>
                }>
                  <Route index element={<Suspense fallback={<PageLoader />}><AdminDashboard /></Suspense>} />
                  <Route path="tenants" element={<Suspense fallback={<PageLoader />}><AdminTenants /></Suspense>} />
                  <Route path="users" element={<Suspense fallback={<PageLoader />}><AdminUsers /></Suspense>} />
                  <Route path="kyc" element={<Suspense fallback={<PageLoader />}><AdminKYC /></Suspense>} />
                </Route>
              </Routes>
            </div>
            <Toaster />
          </TenantProvider>
        </SupabaseAuthProvider>
      </Router>
    </HelmetProvider>
  );
}

export default App;