thrilltrack-explorer/src/pages/Parks.tsx

import { useState, useEffect, useMemo } from 'react';
import { Header } from '@/components/layout/Header';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  MapPin, 
  Grid3X3, 
  List, 
  Map, 
  Filter,
  SortAsc,
  Search,
  ChevronDown,
  Sliders,
  X,
  FerrisWheel,
  Plus,
  PanelLeftClose,
  PanelLeftOpen
} from 'lucide-react';
import { Park } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { useNavigate } from 'react-router-dom';
import { ParkFilters } from '@/components/parks/ParkFilters';
import { ParkGridView } from '@/components/parks/ParkGridView';
import { ParkListView } from '@/components/parks/ParkListView';
import { ParkSearch } from '@/components/parks/ParkSearch';
import { ParkSortOptions } from '@/components/parks/ParkSortOptions';
import { useToast } from '@/hooks/use-toast';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
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';
import { useParks } from '@/hooks/parks/useParks';
import { Pagination } from '@/components/common/Pagination';

export interface FilterState {
  search: string;
  parkType: string[];
  status: string[];
  country: string[];
  states?: string[];
  cities?: string[];
  operators?: string[];
  propertyOwners?: string[];
  minRating: number;
  maxRating: number;
  minRides: number;
  maxRides: number;
  minCoasters?: number;
  maxCoasters?: number;
  minReviews?: number;
  maxReviews?: number;
  openingYearStart: number | null;
  openingYearEnd: number | null;
}

export interface SortState {
  field: string;
  direction: 'asc' | 'desc';
}

const initialFilters: FilterState = {
  search: '',
  parkType: [],
  status: [],
  country: [],
  states: [],
  cities: [],
  operators: [],
  propertyOwners: [],
  minRating: 0,
  maxRating: 5,
  minRides: 0,
  maxRides: 1000,
  minCoasters: 0,
  maxCoasters: 100,
  minReviews: 0,
  maxReviews: 1000,
  openingYearStart: null,
  openingYearEnd: null,
};

const initialSort: SortState = {
  field: 'name',
  direction: 'asc'
};

export default function Parks() {
  const [filters, setFilters] = useState<FilterState>(initialFilters);
  const [sort, setSort] = useState<SortState>(initialSort);
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [showFilters, setShowFilters] = useState(false);
  const [isAddParkModalOpen, setIsAddParkModalOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
    const saved = localStorage.getItem('parks-sidebar-collapsed');
    return saved ? JSON.parse(saved) : false;
  });
  const navigate = useNavigate();
  const { toast } = useToast();
  const { user } = useAuth();
  const { isModerator } = useUserRole();
  const { requireAuth } = useAuthModal();

  // Use TanStack Query hook for data fetching with caching
  const { data: parks = [], isLoading: loading, error } = useParks();

  useEffect(() => {
    localStorage.setItem('parks-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
  }, [sidebarCollapsed]);

  // Show error toast if query fails
  useEffect(() => {
    if (error) {
      toast({
        variant: "destructive",
        title: "Error loading parks",
        description: error instanceof Error ? error.message : 'Failed to load parks',
      });
    }
  }, [error, toast]);

  const filteredAndSortedParks = useMemo(() => {
    let filtered = parks.filter(park => {
      // Search filter
      if (filters.search) {
        const searchTerm = filters.search.toLowerCase();
        const matchesSearch = 
          park.name.toLowerCase().includes(searchTerm) ||
          park.description?.toLowerCase().includes(searchTerm) ||
          park.location?.city?.toLowerCase().includes(searchTerm) ||
          park.location?.country?.toLowerCase().includes(searchTerm) ||
          park.location?.state_province?.toLowerCase().includes(searchTerm);
        
        if (!matchesSearch) return false;
      }

      // Park type filter
      if (filters.parkType.length > 0 && !filters.parkType.includes(park.park_type)) {
        return false;
      }

      // Status filter
      if (filters.status.length > 0 && !filters.status.includes(park.status)) {
        return false;
      }

      // Country filter
      if (filters.country.length > 0 && !filters.country.includes(park.location?.country || '')) {
        return false;
      }

      // States filter
      if (filters.states && filters.states.length > 0) {
        if (!park.location?.state_province || !filters.states.includes(park.location.state_province)) {
          return false;
        }
      }

      // Cities filter
      if (filters.cities && filters.cities.length > 0) {
        if (!park.location?.city || !filters.cities.includes(park.location.city)) {
          return false;
        }
      }

      // Operators filter
      if (filters.operators && filters.operators.length > 0) {
        if (!park.operator?.id || !filters.operators.includes(park.operator.id)) {
          return false;
        }
      }

      // Property owners filter
      if (filters.propertyOwners && filters.propertyOwners.length > 0) {
        if (!park.property_owner?.id || !filters.propertyOwners.includes(park.property_owner.id)) {
          return false;
        }
      }

      // Rating filter
      const rating = park.average_rating || 0;
      if (rating < filters.minRating || rating > filters.maxRating) {
        return false;
      }

      // Ride count filter
      const rideCount = park.ride_count || 0;
      if (rideCount < filters.minRides || rideCount > filters.maxRides) {
        return false;
      }

      // Coaster count filter
      if (filters.minCoasters !== undefined && filters.maxCoasters !== undefined) {
        const coasterCount = park.coaster_count || 0;
        if (coasterCount < filters.minCoasters || coasterCount > filters.maxCoasters) {
          return false;
        }
      }

      // Review count filter
      if (filters.minReviews !== undefined && filters.maxReviews !== undefined) {
        const reviewCount = park.review_count || 0;
        if (reviewCount < filters.minReviews || reviewCount > filters.maxReviews) {
          return false;
        }
      }

      // Opening year filter
      if (filters.openingYearStart || filters.openingYearEnd) {
        const openingYear = park.opening_date ? parseInt(park.opening_date.split('-')[0]) : null;
        if (openingYear) {
          if (filters.openingYearStart && openingYear < filters.openingYearStart) return false;
          if (filters.openingYearEnd && openingYear > filters.openingYearEnd) return false;
        } else if (filters.openingYearStart || filters.openingYearEnd) {
          return false;
        }
      }

      return true;
    });

    // Apply sorting
    filtered.sort((a, b) => {
      let aValue: any, bValue: any;
      
      switch (sort.field) {
        case 'name':
          aValue = a.name;
          bValue = b.name;
          break;
        case 'rating':
          aValue = a.average_rating || 0;
          bValue = b.average_rating || 0;
          break;
        case 'rides':
          aValue = a.ride_count || 0;
          bValue = b.ride_count || 0;
          break;
        case 'coasters':
          aValue = a.coaster_count || 0;
          bValue = b.coaster_count || 0;
          break;
        case 'reviews':
          aValue = a.review_count || 0;
          bValue = b.review_count || 0;
          break;
        case 'opening':
          aValue = a.opening_date ? new Date(a.opening_date).getTime() : 0;
          bValue = b.opening_date ? new Date(b.opening_date).getTime() : 0;
          break;
        default:
          aValue = a.name;
          bValue = b.name;
      }

      if (typeof aValue === 'string' && typeof bValue === 'string') {
        const result = aValue.localeCompare(bValue);
        return sort.direction === 'asc' ? result : -result;
      }
      
      const result = aValue - bValue;
      return sort.direction === 'asc' ? result : -result;
    });

    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'
  });

  const activeFilterCount = useMemo(() => {
    let count = 0;
    if (filters.search) count++;
    if (filters.parkType.length > 0) count++;
    if (filters.status.length > 0) count++;
    if (filters.country.length > 0) count++;
    if (filters.minRating > 0 || filters.maxRating < 5) count++;
    if (filters.minRides > 0 || filters.maxRides < 1000) count++;
    if (filters.openingYearStart || filters.openingYearEnd) count++;
    return count;
  }, [filters]);

  const clearAllFilters = () => {
    setFilters(initialFilters);
    setSort(initialSort);
  };

  const handleParkClick = (park: Park) => {
    navigate(`/parks/${park.slug}`);
  };

  // Pagination for display
  const ITEMS_PER_PAGE = 24;
  const paginatedParks = useMemo(() => {
    const start = (currentPage - 1) * ITEMS_PER_PAGE;
    const end = start + ITEMS_PER_PAGE;
    return filteredAndSortedParks.slice(start, end);
  }, [filteredAndSortedParks, currentPage]);

  const totalPages = Math.ceil(filteredAndSortedParks.length / ITEMS_PER_PAGE);

  // Reset to page 1 when filters change
  useEffect(() => {
    setCurrentPage(1);
  }, [filters, sort]);

  const handleParkSubmit = async (parkData: any) => {
    try {
      const { submitParkCreation } = await import('@/lib/entitySubmissionHelpers');
      await submitParkCreation(parkData, user.id);

      toast({
        title: "Park Submitted",
        description: "Your park submission has been sent for moderation review.",
      });

      setIsAddParkModalOpen(false);
    } catch (error) {
      toast({
        title: "Submission Failed",
        description: error instanceof Error ? error.message : "Failed to submit park.",
        variant: "destructive"
      });
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="container mx-auto px-4 py-8">
          <div className="animate-pulse space-y-6">
            <div className="h-12 bg-muted rounded w-1/3"></div>
            <div className="flex gap-4">
              <div className="h-10 bg-muted rounded flex-1"></div>
              <div className="h-10 bg-muted rounded w-32"></div>
              <div className="h-10 bg-muted rounded w-32"></div>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {[...Array(12)].map((_, i) => (
                <div key={i} className="h-64 bg-muted rounded-lg"></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
        {/* Page Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-4">
            <MapPin className="w-8 h-8 text-primary" />
            <h1 className="text-4xl font-bold">Theme Parks</h1>
          </div>
          <p className="text-lg text-muted-foreground mb-4">
            Discover amazing theme parks, amusement parks, and attractions worldwide
          </p>
          
          <div className="flex items-center justify-between">
            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
              <Badge variant="secondary" className="flex items-center justify-center text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1 whitespace-nowrap">
                {filteredAndSortedParks.length} parks
              </Badge>
              <Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap">
                {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
              </Badge>
              <Badge variant="outline" className="flex items-center justify-center text-xs sm:text-sm px-2 py-0.5 whitespace-nowrap hidden xs:inline-flex sm:inline-flex">
                {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
              </Badge>
            </div>

            <div className="flex items-center gap-2">
              <Button 
                onClick={() => requireAuth(() => setIsAddParkModalOpen(true), "Sign in to add a new park")}
                className="gap-2"
              >
                <Plus className="w-4 h-4" />
                Add Park
              </Button>
              
              {activeFilterCount > 0 && (
                <Button 
                  variant="outline" 
                  onClick={clearAllFilters}
                  className="text-destructive hover:text-destructive"
                >
                  <X className="w-4 h-4 mr-2" />
                  Clear all filters
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* Search and Controls */}
        <div className="mb-6 space-y-4">
          <div className="flex flex-col lg:flex-row gap-4">
            {/* Desktop: Filter toggle on the left */}
            <Button
              variant="outline"
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              className="shrink-0 gap-2 hidden lg:flex"
              title={sidebarCollapsed ? "Show filters" : "Hide filters"}
            >
              {sidebarCollapsed ? (
                <PanelLeftOpen className="w-4 h-4" />
              ) : (
                <PanelLeftClose className="w-4 h-4" />
              )}
              <span>Filters</span>
              {activeFilterCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {activeFilterCount}
                </Badge>
              )}
            </Button>

            {/* Search bar takes remaining space */}
            <div className="flex-1">
              <ParkSearch 
                value={filters.search}
                onChange={(search) => setFilters(prev => ({ ...prev, search }))}
              />
            </div>
            
            {/* Sort controls - more compact */}
            <div className="flex gap-2">
              <ParkSortOptions 
                sort={sort}
                onSortChange={setSort}
              />
              
              {/* Mobile filter toggle */}
              <Button
                variant={showFilters ? "default" : "outline"}
                onClick={() => setShowFilters(!showFilters)}
                className="shrink-0 gap-2 lg:hidden"
              >
                <Filter className="w-4 h-4" />
                <span className="hidden sm:inline">Filters</span>
                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
                {activeFilterCount > 0 && (
                  <Badge variant="secondary" className="ml-1">
                    {activeFilterCount}
                  </Badge>
                )}
              </Button>

              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
                <TabsList>
                  <TabsTrigger value="grid">
                    <Grid3X3 className="w-4 h-4" />
                  </TabsTrigger>
                  <TabsTrigger value="list">
                    <List className="w-4 h-4" />
                  </TabsTrigger>
                </TabsList>
              </Tabs>
            </div>
          </div>

          {/* Mobile Filters */}
          <div className="lg:hidden">
            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
              <CollapsibleContent>
                <Card>
                  <CardContent className="pt-6">
                    <ParkFilters 
                      filters={filters}
                      onFiltersChange={setFilters}
                      parks={parks}
                    />
                  </CardContent>
                </Card>
              </CollapsibleContent>
            </Collapsible>
          </div>
        </div>

        {/* Main Content Area with Sidebar */}
        <div className="flex flex-col lg:flex-row gap-6">
          {/* Desktop Filter Sidebar */}
          {!sidebarCollapsed && (
            <aside className="hidden lg:block flex-shrink-0 transition-all duration-300 lg:w-[340px] xl:w-[380px] 2xl:w-[420px]">
              <div className="sticky top-24">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between pb-2">
                    <CardTitle className="text-base">Filters</CardTitle>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setSidebarCollapsed(true)}
                      title="Hide filters"
                    >
                      <PanelLeftClose className="w-4 h-4" />
                    </Button>
                  </CardHeader>
                  <CardContent>
                    <ParkFilters 
                      filters={filters}
                      onFiltersChange={setFilters}
                      parks={parks}
                    />
                  </CardContent>
                </Card>
              </div>
            </aside>
          )}

          {/* Results Area */}
          <div className="flex-1 min-w-0">
            {filteredAndSortedParks.length > 0 ? (
              <div>
                {viewMode === 'grid' ? (
                  <ParkGridView 
                    parks={paginatedParks} 
                  />
                ) : (
                  <ParkListView 
                    parks={paginatedParks} 
                    onParkClick={handleParkClick}
                  />
                )}
                
                <Pagination
                  currentPage={currentPage}
                  totalPages={totalPages}
                  onPageChange={setCurrentPage}
                  isLoading={loading}
                />
              </div>
            ) : (
              <div className="text-center py-12">
                <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
                <h3 className="text-xl font-semibold mb-2">No parks found</h3>
                <p className="text-muted-foreground mb-4">
                  Try adjusting your search terms or filters
                </p>
                <Button onClick={clearAllFilters} variant="outline">
                  Clear all filters
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* Add Park Modal */}
        <Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Add New Park</DialogTitle>
              <DialogDescription>
                Add a new park to the database. Your submission will be reviewed before being published.
              </DialogDescription>
            </DialogHeader>
            <ParkForm
              onSubmit={handleParkSubmit}
              onCancel={() => setIsAddParkModalOpen(false)}
              isEditing={false}
            />
          </DialogContent>
        </Dialog>
      </main>
    </div>
  );
}