src/App.tsx

// src/App.tsx
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import { ThemeProvider } from './contexts/ThemeContext';
import { auth, db } from './firebase';
import { deleteUser } from 'firebase/auth';
import { doc, deleteDoc, getDoc } from 'firebase/firestore';
import { Helmet, HelmetProvider } from 'react-helmet-async';

// Pages
import ProfilePage from './pages/ProfilePage';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import BlogPage from './pages/BlogPage';
import GPTChecker from './pages/GPTChecker';
import WordCounterPage from './pages/WordCounterPage';
import LoginPage from './pages/LoginPage';
import SignupPage from './pages/SignupPage';
import ThankYouPage from './pages/ThankYouPage';
import WelcomePage from './pages/WelcomePage';
import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
import Terms from "./pages/Terms";
import DisclaimerPage from "./pages/DisclaimerPage";
import HelpCenterPage from './pages/HelpCenterPage';

// Components
import AnalyticsCharts from './components/AnalyticsCharts';
import ActivityFeed from './components/ActivityFeed';
import SettingsPanel from './components/SettingsPanel';
import StatsGrid from './components/StatsGrid';
import ProfileHeader from './components/ProfileHeader';

// --- Apply favicon globally ---
const updateFavicon = () => {
  const faviconUrl = "https://ucarecdn.com/94d22aaf-e546-48b6-b110-5fc2cad94e0c/-/format/auto/";
  document.querySelectorAll('link[rel*="icon"]').forEach(f => f.remove());
  const link = document.createElement('link');
  link.rel = 'icon';
  link.type = 'image/png';
  link.href = faviconUrl;
  link.sizes = '256x256';
  document.head.appendChild(link);
};

// Wrapper to provide user and navigation for SettingsPanel
const SettingsRouteWrapper: React.FC = () => {
  const [userData, setUserData] = useState<any>(null);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchUser = async () => {
      const user = auth.currentUser;
      if (user) {
        const docRef = doc(db, 'users', user.uid);
        const docSnap = await getDoc(docRef);
        setUserData({
          email: user.email,
          username: docSnap.exists() ? docSnap.data().username : 'unknown',
          joinDate: docSnap.exists() ? docSnap.data().joinDate : 'Unknown',
          preferences: docSnap.exists() ? docSnap.data().preferences : {},
        });
      }
    };
    fetchUser();
  }, []);

  const handleSignOut = async () => {
    await auth.signOut();
    navigate('/login');
  };

  const handleDeleteAccount = async () => {
    if (!auth.currentUser) return;
    const uid = auth.currentUser.uid;
    await deleteDoc(doc(db, 'users', uid));
    await deleteUser(auth.currentUser);
    navigate('/signup');
  };

  const handleUpdatePreferences = async (prefs: any) => {
    if (!auth.currentUser) return;
    console.log('Updated preferences:', prefs);
  };

  return (
    <SettingsPanel
      user={userData}
      onSignOut={handleSignOut}
      onDeleteAccount={handleDeleteAccount}
      onUpdatePreferences={handleUpdatePreferences}
    />
  );
};

const App: React.FC = () => {
  useEffect(() => {
    updateFavicon();
  }, []);

  return (
    <ThemeProvider>
      <HelmetProvider>
        <Router>
          {/* 👇 Global default SEO (will be overridden per page) */}
<Helmet>
  <title>HumanizerX – Natural, Human-Like AI Text Made Easy</title>
  <meta
    name="description"
    content="HumanizerX transforms AI-generated content into natural, human-like text. Detect GPT content, enhance readability, and make your writing authentic."
  />
  <link rel="canonical" href="https://www.humanizerx.pro/" />

  {/* ✅ Structured Data: Organization + Logo for Google */}
  <script type="application/ld+json">
    {`
      {
        "@context": "https://schema.org", 
        "@type": "Organization",
        "name": "Humanizer X",
        "url": "https://www.humanizerx.pro",
        "logo": "https://ucarecdn.com/94d22aaf-e546-48b6-b110-5fc2cad94e0c/-/format/auto/"
      }
    `}
  </script>
</Helmet>

          <main className="min-h-[calc(100vh-4rem)]">
            <Routes>
              {/* Main pages */}
              <Route path="/" element={<HomePage />} />
              <Route path="/gpt-checker" element={<GPTChecker />} />
              <Route path="/word-counter" element={<WordCounterPage />} />
              <Route path="/about" element={<AboutPage />} />
              <Route path="/contact" element={<ContactPage />} />
              <Route path="/blogs" element={<BlogPage />} />
              <Route path="/profile" element={<ProfilePage />} />
              <Route path="/login" element={<LoginPage />} />
              <Route path="/signup" element={<SignupPage />} />
              <Route path="/thank-you" element={<ThankYouPage />} />
              <Route path="/welcome" element={<WelcomePage />} />
              <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
              <Route path="/terms" element={<Terms />} />
              <Route path="/disclaimer" element={<DisclaimerPage />} />
              {/* Demo routes */}
              <Route path="/analytics" element={<AnalyticsCharts />} />
              <Route path="/activity" element={<ActivityFeed />} />
              <Route path="/settings" element={<SettingsRouteWrapper />} />
              <Route path="/stats" element={<StatsGrid />} />
              <Route path="/profile-header" element={<ProfileHeader />} />
              <Route path="/help-center" element={<HelpCenterPage />} />
            </Routes>
          </main>
        </Router>
      </HelmetProvider>
    </ThemeProvider>
  );
};

export default App;