Refactor code to address issues

src/pages/BlogIndex.tsx

@@ -9,6 +9,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Header } from '@/components/layout/Header';
 import { Footer } from '@/components/layout/Footer';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const POSTS_PER_PAGE = 9;
 
@@ -39,6 +40,17 @@ export default function BlogIndex() {
 
   const totalPages = Math.ceil((data?.totalCount || 0) / POSTS_PER_PAGE);
 
+  useOpenGraph({
+    title: 'Blog - ThrillWiki',
+    description: searchQuery 
+      ? `Search results for "${searchQuery}" in ThrillWiki Blog` 
+      : 'News, updates, and stories from the world of theme parks and roller coasters',
+    imageUrl: data?.posts?.[0]?.featured_image_url,
+    imageId: data?.posts?.[0]?.featured_image_id,
+    type: 'website',
+    enabled: !isLoading
+  });
+
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/pages/DesignerRides.tsx

@@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function DesignerRides() {
   const { designerSlug } = useParams<{ designerSlug: string }>();
@@ -104,6 +105,17 @@ export default function DesignerRides() {
     ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: designer ? `${designer.name} - Rides` : 'Designer Rides',
+    description: designer 
+      ? `Explore ${filteredRides.length} rides designed by ${designer.name}` 
+      : undefined,
+    imageUrl: designer?.banner_image_url || filteredRides[0]?.banner_image_url,
+    imageId: designer?.banner_image_id || filteredRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!designer && !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       if (!designer) {

src/pages/Designers.tsx

@@ -24,6 +24,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function Designers() {
   useDocumentTitle('Designers');
@@ -164,6 +165,15 @@ export default function Designers() {
     });
   }, [companies, searchQuery, filters]);
 
+  useOpenGraph({
+    title: 'Ride Designers - ThrillWiki',
+    description: `Browse ${filteredCompanies.length} ride designers worldwide`,
+    imageUrl: filteredCompanies[0]?.banner_image_url,
+    imageId: filteredCompanies[0]?.banner_image_id,
+    type: 'website',
+    enabled: !loading
+  });
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">

src/pages/Index.tsx

@@ -2,10 +2,17 @@ import { Header } from '@/components/layout/Header';
 import { SimpleHeroSearch } from '@/components/homepage/SimpleHeroSearch';
 import { ContentTabs } from '@/components/homepage/ContentTabs';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const Index = () => {
   useDocumentTitle('Home');
   
+  useOpenGraph({
+    title: 'ThrillWiki - Theme Park & Roller Coaster Database',
+    description: 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts',
+    type: 'website'
+  });
+  
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/pages/ManufacturerModels.tsx

@@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 interface RideModelWithCount extends RideModel {
   ride_count: number;
@@ -101,6 +102,17 @@ export default function ManufacturerModels() {
     model.description?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: manufacturer ? `${manufacturer.name} - Ride Models` : 'Manufacturer Models',
+    description: manufacturer 
+      ? `Browse ${filteredModels.length} ride models by ${manufacturer.name}` 
+      : undefined,
+    imageUrl: manufacturer?.banner_image_url || filteredModels[0]?.banner_image_url,
+    imageId: manufacturer?.banner_image_id || filteredModels[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!manufacturer && !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       if (!manufacturer) {

src/pages/ManufacturerRides.tsx

@@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function ManufacturerRides() {
   const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>();
@@ -104,6 +105,17 @@ export default function ManufacturerRides() {
     ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: manufacturer ? `${manufacturer.name} - Rides` : 'Manufacturer Rides',
+    description: manufacturer 
+      ? `Explore ${filteredRides.length} rides manufactured by ${manufacturer.name}` 
+      : undefined,
+    imageUrl: manufacturer?.banner_image_url || filteredRides[0]?.banner_image_url,
+    imageId: manufacturer?.banner_image_id || filteredRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!manufacturer && !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       if (!manufacturer) {

src/pages/Manufacturers.tsx

@@ -24,6 +24,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function Manufacturers() {
   useDocumentTitle('Manufacturers');
@@ -151,6 +152,15 @@ export default function Manufacturers() {
     });
   }, [companies, searchQuery, filters]);
 
+  useOpenGraph({
+    title: 'Ride Manufacturers - ThrillWiki',
+    description: `Browse ${filteredCompanies.length} ride manufacturers worldwide`,
+    imageUrl: filteredCompanies[0]?.banner_image_url,
+    imageId: filteredCompanies[0]?.banner_image_id,
+    type: 'website',
+    enabled: !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       await submitCompanyCreation(

src/pages/OperatorParks.tsx

@@ -16,6 +16,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Grid3X3, List } from 'lucide-react';
 import { FilterState, SortState } from './Parks';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const initialFilters: FilterState = {
   search: '',
@@ -145,6 +146,17 @@ export default function OperatorParks() {
     return filtered;
   }, [parks, filters, sort]);
 
+  useOpenGraph({
+    title: operator ? `Parks by ${operator.name} - ThrillWiki` : 'Operator Parks',
+    description: operator 
+      ? `Explore ${filteredAndSortedParks.length} theme parks operated by ${operator.name}` 
+      : undefined,
+    imageUrl: operator?.banner_image_url || filteredAndSortedParks[0]?.banner_image_url,
+    imageId: operator?.banner_image_id || filteredAndSortedParks[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!operator && !loading
+  });
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">

src/pages/Operators.tsx

@@ -25,6 +25,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const Operators = () => {
   useDocumentTitle('Operators');
@@ -182,6 +183,15 @@ const Operators = () => {
     return filtered;
   }, [operators, searchTerm, sortBy, filters]);
 
+  useOpenGraph({
+    title: 'Park Operators - ThrillWiki',
+    description: `Browse ${filteredAndSortedOperators.length} theme park operators worldwide`,
+    imageUrl: filteredAndSortedOperators[0]?.banner_image_url,
+    imageId: filteredAndSortedOperators[0]?.banner_image_id,
+    type: 'website',
+    enabled: !isLoading
+  });
+
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/pages/OwnerParks.tsx

@@ -16,6 +16,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Grid3X3, List } from 'lucide-react';
 import { FilterState, SortState } from './Parks';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const initialFilters: FilterState = {
   search: '',
@@ -145,6 +146,17 @@ export default function OwnerParks() {
     return filtered;
   }, [parks, filters, sort]);
 
+  useOpenGraph({
+    title: owner ? `Parks by ${owner.name} - ThrillWiki` : 'Owner Parks',
+    description: owner 
+      ? `Explore ${filteredAndSortedParks.length} theme parks owned by ${owner.name}` 
+      : undefined,
+    imageUrl: owner?.banner_image_url || filteredAndSortedParks[0]?.banner_image_url,
+    imageId: owner?.banner_image_id || filteredAndSortedParks[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!owner && !loading
+  });
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">

src/pages/ParkOwners.tsx

@@ -19,6 +19,7 @@ import { submitCompanyCreation } from '@/lib/companyHelpers';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 const ParkOwners = () => {
   useDocumentTitle('Property Owners');
@@ -119,6 +120,15 @@ const ParkOwners = () => {
     return filtered;
   }, [parkOwners, searchTerm, sortBy, filterBy]);
 
+  useOpenGraph({
+    title: 'Property Owners - ThrillWiki',
+    description: `Browse ${filteredAndSortedOwners.length} theme park property owners worldwide`,
+    imageUrl: filteredAndSortedOwners[0]?.banner_image_url,
+    imageId: filteredAndSortedOwners[0]?.banner_image_id,
+    type: 'website',
+    enabled: !isLoading
+  });
+
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/pages/ParkRides.tsx

@@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function ParkRides() {
   const { parkSlug } = useParams<{ parkSlug: string }>();
@@ -150,6 +151,17 @@ export default function ParkRides() {
     ride.manufacturer?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: park ? `${park.name} - Rides & Attractions` : 'Park Rides',
+    description: park 
+      ? `Explore ${filteredRides.length} rides and attractions at ${park.name}` 
+      : undefined,
+    imageUrl: park?.banner_image_url || filteredRides[0]?.banner_image_url,
+    imageId: park?.banner_image_id || filteredRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!park && !loading
+  });
+
   const categories = [
     { value: 'all', label: 'All Categories' },
     { value: 'roller_coaster', label: 'Roller Coasters' },

src/pages/Parks.tsx

@@ -36,6 +36,7 @@ import { ParkForm } from '@/components/admin/ParkForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuthModal } from '@/hooks/useAuthModal';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export interface FilterState {
   search: string;
@@ -288,6 +289,30 @@ export default function Parks() {
     return filtered;
   }, [parks, filters, sort]);
 
+  const generateDescription = () => {
+    if (!parks.length) return 'Browse theme parks worldwide on ThrillWiki';
+    
+    const activeFilters = [];
+    if (filters.country.length === 1) activeFilters.push(`in ${filters.country[0]}`);
+    if (filters.parkType.length > 0) activeFilters.push(filters.parkType.join(', '));
+    if (filters.status.length > 0) activeFilters.push(filters.status.join(', '));
+    
+    if (activeFilters.length > 0) {
+      return `Browse ${filteredAndSortedParks.length} ${activeFilters.join(' ')} theme parks`;
+    }
+    
+    return `Browse ${parks.length} theme parks worldwide`;
+  };
+
+  useOpenGraph({
+    title: 'Theme Parks - ThrillWiki',
+    description: generateDescription(),
+    imageUrl: filteredAndSortedParks[0]?.banner_image_url,
+    imageId: filteredAndSortedParks[0]?.banner_image_id,
+    type: 'website',
+    enabled: !loading
+  });
+
   const activeFilterCount = useMemo(() => {
     let count = 0;
     if (filters.search) count++;

src/pages/Profile.tsx

@@ -31,6 +31,7 @@ import { UserBlockButton } from '@/components/profile/UserBlockButton';
 import { PersonalLocationDisplay } from '@/components/profile/PersonalLocationDisplay';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 // Activity type definitions
 interface SubmissionActivity {
@@ -160,6 +161,15 @@ export default function Profile() {
   // Update document title when profile changes
   useDocumentTitle(profile?.username ? `${profile.username}'s Profile` : 'Profile');
 
+  useOpenGraph({
+    title: profile ? `${profile.display_name || profile.username} - ThrillWiki` : 'User Profile',
+    description: profile?.bio || (profile ? `${profile.display_name || profile.username}'s profile on ThrillWiki` : undefined),
+    imageUrl: profile?.avatar_url,
+    imageId: profile?.avatar_image_id,
+    type: 'profile',
+    enabled: !!profile
+  });
+
   // Username validation
   const usernameValidation = useUsernameValidation(editForm.username, profile?.username);
   useEffect(() => {

src/pages/Rides.tsx

@@ -23,6 +23,7 @@ import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function Rides() {
   useDocumentTitle('Rides & Attractions');
@@ -266,6 +267,28 @@ export default function Rides() {
     return filtered;
   }, [rides, searchQuery, sortBy, filters]);
 
+  const generateDescription = () => {
+    if (!filteredAndSortedRides.length) return 'Discover thrilling rides and roller coasters worldwide';
+    
+    const activeFilters = [];
+    if (filters.categories.length > 0) activeFilters.push(filters.categories.join(', '));
+    if (filters.status !== 'all') activeFilters.push(filters.status);
+    
+    if (activeFilters.length > 0) {
+      return `Explore ${filteredAndSortedRides.length} ${activeFilters.join(' ')} rides and attractions`;
+    }
+    
+    return `Explore ${filteredAndSortedRides.length} rides and roller coasters worldwide`;
+  };
+
+  useOpenGraph({
+    title: 'Rides & Attractions - ThrillWiki',
+    description: generateDescription(),
+    imageUrl: filteredAndSortedRides[0]?.banner_image_url,
+    imageId: filteredAndSortedRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !loading
+  });
 
   const categories = [
     { value: 'all', label: 'All Categories' },

src/pages/Search.tsx

@@ -9,6 +9,7 @@ import { SearchFiltersComponent, SearchFilters } from '@/components/search/Searc
 import { SearchSortOptions, SortOption } from '@/components/search/SearchSortOptions';
 import { EnhancedSearchResults } from '@/components/search/EnhancedSearchResults';
 import { useSearch, SearchResult } from '@/hooks/useSearch';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function SearchPage() {
   const [searchParams] = useSearchParams();
@@ -121,6 +122,15 @@ export default function SearchPage() {
     company: results.filter(r => r.type === 'company').length
   };
 
+  useOpenGraph({
+    title: query ? `Search: "${query}" - ThrillWiki` : 'Search - ThrillWiki',
+    description: query 
+      ? `Found ${filteredAndSortedResults.length} results for "${query}"` 
+      : 'Search theme parks, rides, and more on ThrillWiki',
+    type: 'website',
+    enabled: !loading
+  });
+
   return (
     <div className="min-h-screen bg-background">
       <Header />