import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
// @ts-ignore
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'sonner';
import { HelmetProvider } from 'react-helmet-async';

// استيراد ملف الأنماط الرئيسي
import './styles/globals.css';

// Settings Context
import { SettingsProvider } from './contexts/SettingsContext';

// المكونات الأساسية للموقع
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import WhatsAppButton from './components/WhatsAppButton';
import ScrollToTop from './components/ScrollToTop';
import MobileBottomNav from './components/MobileBottomNav';

// الصفحات العامة
import Home from './pages/Home';
import About from './pages/About';
import Portfolio from './pages/Portfolio';
import ProjectDetail from './pages/ProjectDetail';
import Blog from './pages/Blog';
import BlogPostDetail from './pages/BlogPostDetail';
import Contact from './pages/Contact';
import FAQ from './pages/FAQ';
import Privacy from './pages/Privacy';
import Terms from './pages/Terms';
import NotFound from './pages/NotFound';
import PropertyRequest from './pages/PropertyRequest';

// لوحة التحكم (Admin)
import AdminLayout from './components/admin/AdminLayout';
import AdminLogin from './pages/admin/Login';
import AdminDashboard from './pages/admin/Dashboard';
import AdminSettings from './pages/admin/Settings';
import AdminMedia from './pages/admin/Media';
import AdminProperties from './pages/admin/Properties';
import AdminTaxonomies from './pages/admin/Taxonomies';
import AdminPropertySpecs from './pages/admin/PropertySpecs';
import AdminInbox from './pages/admin/Inbox';
import AdminBookings from './pages/admin/Bookings';
import AdminBlog from './pages/admin/Blog';
import AdminBlogEditor from './pages/admin/BlogEditor';
import AdminStaticPages from './pages/admin/StaticPages';
import AdminHomeEditor from './pages/admin/HomeEditor';
import AdminAboutEditor from './pages/admin/AboutEditor';
import AdminUsers from './pages/admin/Users';
import AdminProfile from './pages/admin/Profile';
import AdminFAQManager from './pages/admin/FAQManager';
import AdminSmtpSettings from './pages/admin/SmtpSettings';
import AdminEmailTemplates from './pages/admin/EmailTemplates';
import AdminMessageLogs from './pages/admin/MessageLogs';
import AdminTestimonials from './pages/admin/Testimonials';
import AdminHeroBackgrounds from './pages/admin/HeroBackgrounds';
import AdminLinkSettings from './pages/admin/LinkSettings';
import AdminReferrals from './pages/admin/Referrals';

// Public Layout wrapper component
const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  
  return (
    <>
      <Navbar 
        mobileMenuOpen={mobileMenuOpen} 
        onMobileMenuClose={() => setMobileMenuOpen(false)} 
      />
      <main className="flex-grow">{children}</main>
      <WhatsAppButton />
      <Footer />
      <MobileBottomNav onMenuClick={() => setMobileMenuOpen(true)} />
    </>
  );
};

const App: React.FC = () => {
  return (
    <div className="flex flex-col min-h-screen">
      <Toaster position="top-center" richColors />
      <ScrollToTop />
      
      <Routes>
        {/* مسارات الموقع العام */}
        <Route path="/" element={<PublicLayout><Home /></PublicLayout>} />
        <Route path="/about-us" element={<PublicLayout><About /></PublicLayout>} />
        <Route path="/our-portfolio" element={<PublicLayout><Portfolio /></PublicLayout>} />
        <Route path="/project/:id" element={<PublicLayout><ProjectDetail /></PublicLayout>} />
        <Route path="/blog" element={<PublicLayout><Blog /></PublicLayout>} />
        <Route path="/blog/:id" element={<PublicLayout><BlogPostDetail /></PublicLayout>} />
        <Route path="/contact-us" element={<PublicLayout><Contact /></PublicLayout>} />
        <Route path="/faq" element={<PublicLayout><FAQ /></PublicLayout>} />
        <Route path="/privacy" element={<PublicLayout><Privacy /></PublicLayout>} />
        <Route path="/terms" element={<PublicLayout><Terms /></PublicLayout>} />
        <Route path="/property-request" element={<PublicLayout><PropertyRequest /></PublicLayout>} />
        
        {/* Redirect /portfolio to /our-portfolio */}
        <Route path="/portfolio" element={<Navigate to="/our-portfolio" replace />} />

        {/* مسارات لوحة التحكم */}
        <Route path="/admin/login" element={<AdminLogin />} />
        
        <Route path="/admin" element={<AdminLayout />}>
          <Route index element={<AdminDashboard />} />
          <Route path="settings" element={<AdminSettings />} />
          <Route path="home" element={<AdminHomeEditor />} />
          <Route path="about" element={<AdminAboutEditor />} />
          <Route path="media" element={<AdminMedia />} />
          <Route path="properties" element={<AdminProperties />} />
          <Route path="properties/types" element={<AdminTaxonomies type="property_types" />} />
          <Route path="properties/intent" element={<AdminTaxonomies type="intents" />} />
          <Route path="properties/specs" element={<AdminPropertySpecs />} />
          <Route path="locations/cities" element={<AdminTaxonomies type="cities" />} />
          <Route path="blog" element={<AdminBlog />} />
          <Route path="blog/categories" element={<AdminTaxonomies type="blog_categories" />} />
          <Route path="blog/new" element={<AdminBlogEditor />} />
          <Route path="blog/edit/:id" element={<AdminBlogEditor />} />
          <Route path="pages" element={<AdminStaticPages />} />
          <Route path="faq" element={<AdminFAQManager />} />
          <Route path="testimonials" element={<AdminTestimonials />} />
          <Route path="hero-backgrounds" element={<AdminHeroBackgrounds />} />
          <Route path="users" element={<AdminUsers />} />
          <Route path="profile" element={<AdminProfile />} />
          <Route path="inbox" element={<AdminInbox />} />
          <Route path="bookings" element={<AdminBookings />} />
          <Route path="smtp" element={<AdminSmtpSettings />} />
          <Route path="smtp/templates" element={<AdminEmailTemplates />} />
          <Route path="smtp/logs" element={<AdminMessageLogs />} />
          <Route path="link" element={<AdminLinkSettings />} />
          <Route path="referrals" element={<AdminReferrals />} />
        </Route>

        <Route path="*" element={<PublicLayout><NotFound /></PublicLayout>} />
      </Routes>
    </div>
  );
};

const rootElement = document.getElementById('root');
if (rootElement) {
  createRoot(rootElement).render(
    <React.StrictMode>
      <HelmetProvider>
        <SettingsProvider>
          <HashRouter>
            <App />
          </HashRouter>
        </SettingsProvider>
      </HelmetProvider>
    </React.StrictMode>
  );
}