Add park detail API and detail page implementation with loading states and error handling

frontend/src/app/parks/page.tsx

@@ -1,17 +1,53 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import type { Park, ParkStatus } from '@/types/api';
+import type { Park, ParkFilterValues, Company } from '@/types/api';
+import { ParkSearch } from '@/components/parks/ParkSearch';
+import { ViewToggle } from '@/components/parks/ViewToggle';
+import { ParkList } from '@/components/parks/ParkList';
+import { ParkFilters } from '@/components/parks/ParkFilters';
 
 export default function ParksPage() {
   const [parks, setParks] = useState<Park[]>([]);
+  const [companies, setCompanies] = useState<Company[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filters, setFilters] = useState<ParkFilterValues>({});
+
+  useEffect(() => {
+    async function fetchCompanies() {
+      try {
+        const response = await fetch('/api/companies');
+        const data = await response.json();
+        if (data.success) {
+          setCompanies(data.data || []);
+        }
+      } catch (err) {
+        console.error('Failed to fetch companies:', err);
+      }
+    }
+    fetchCompanies();
+  }, []);
 
   useEffect(() => {
     async function fetchParks() {
       try {
-        const response = await fetch('/api/parks');
+        setLoading(true);
+        const queryParams = new URLSearchParams();
+        
+        if (searchQuery) queryParams.set('search', searchQuery);
+        if (filters.status) queryParams.set('status', filters.status);
+        if (filters.ownerId) queryParams.set('ownerId', filters.ownerId);
+        if (filters.hasOwner !== undefined) queryParams.set('hasOwner', filters.hasOwner.toString());
+        if (filters.minRides) queryParams.set('minRides', filters.minRides.toString());
+        if (filters.minCoasters) queryParams.set('minCoasters', filters.minCoasters.toString());
+        if (filters.minSize) queryParams.set('minSize', filters.minSize.toString());
+        if (filters.openingDateStart) queryParams.set('openingDateStart', filters.openingDateStart);
+        if (filters.openingDateEnd) queryParams.set('openingDateEnd', filters.openingDateEnd);
+
+        const response = await fetch(`/api/parks?${queryParams}`);
         const data = await response.json();
         
         if (!data.success) {
@@ -27,23 +63,14 @@ export default function ParksPage() {
     }
 
     fetchParks();
-  }, []);
+  }, [searchQuery, filters]);
 
-  const getStatusColor = (status: ParkStatus): string => {
-    const colors = {
-      OPERATING: 'bg-green-100 text-green-800',
-      CLOSED_TEMP: 'bg-yellow-100 text-yellow-800',
-      CLOSED_PERM: 'bg-red-100 text-red-800',
-      UNDER_CONSTRUCTION: 'bg-blue-100 text-blue-800',
-      DEMOLISHED: 'bg-gray-100 text-gray-800',
-      RELOCATED: 'bg-purple-100 text-purple-800'
-    };
-    return colors[status] || 'bg-gray-100 text-gray-500';
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
   };
 
-  const formatRating = (rating: number | null | undefined): string => {
-    if (typeof rating !== 'number') return 'No ratings';
-    return `${rating.toFixed(1)}/5`;
+  const handleFiltersChange = (newFilters: ParkFilterValues) => {
+    setFilters(newFilters);
   };
 
   if (loading) {
@@ -59,10 +86,12 @@ export default function ParksPage() {
 
   if (error) {
     return (
-      <div className="min-h-screen p-8">
-        <div className="rounded-lg bg-red-50 p-4 border border-red-200">
-          <h2 className="text-red-800 font-semibold">Error</h2>
-          <p className="text-red-600 mt-2">{error}</p>
+      <div className="p-4" data-testid="park-list-error">
+        <div className="inline-flex items-center px-4 py-2 rounded-md bg-red-50 text-red-700">
+          <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd"/>
+          </svg>
+          {error}
         </div>
       </div>
     );
@@ -71,75 +100,31 @@ export default function ParksPage() {
   return (
     <div className="min-h-screen p-8">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8">Theme Parks</h1>
-        
-        {parks.length === 0 ? (
-          <p className="text-gray-600">No parks found</p>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {parks.map((park) => (
-              <div
-                key={park.id}
-                className="rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow"
-              >
-                <div className="flex justify-between items-start mb-4">
-                  <h2 className="text-xl font-semibold">
-                    <a
-                      href={`/parks/${park.slug}`}
-                      className="hover:text-indigo-600 transition-colors"
-                    >
-                      {park.name}
-                    </a>
-                  </h2>
-                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(park.status)}`}>
-                    {park.status.replace('_', ' ')}
-                  </span>
-                </div>
-                
-                {park.description && (
-                  <p className="text-gray-600 mb-4">
-                    {park.description.length > 150
-                      ? `${park.description.slice(0, 150)}...`
-                      : park.description}
-                  </p>
-                )}
-                
-                <div className="space-y-2 text-sm text-gray-500">
-                  {park.location && (
-                    <p>
-                      📍 {park.location.latitude}, {park.location.longitude}
-                    </p>
-                  )}
-                  {park.opening_date && (
-                    <p>🗓 Opened: {new Date(park.opening_date).toLocaleDateString()}</p>
-                  )}
-                  {park.operating_season && (
-                    <p>⏰ Season: {park.operating_season}</p>
-                  )}
-                  {park.website && (
-                    <p>
-                      <a
-                        href={park.website}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-indigo-600 hover:text-indigo-800"
-                      >
-                        Visit Website →
-                      </a>
-                    </p>
-                  )}
-                </div>
-                
-                <div className="mt-4 pt-4 border-t border-gray-100">
-                  <div className="flex justify-between text-sm text-gray-500">
-                    <span>🎢 {park.ride_count || 0} rides</span>
-                    <span>⭐ {formatRating(park.average_rating)}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center space-x-4">
+            <h1 className="text-2xl font-bold text-gray-900">Parks</h1>
+            <ViewToggle currentView={viewMode} onViewChange={setViewMode} />
           </div>
-        )}
+        </div>
+
+        <div className="mb-6">
+          <ParkSearch onSearch={handleSearch} />
+          <ParkFilters onFiltersChange={handleFiltersChange} companies={companies} />
+        </div>
+
+        <div
+          id="park-results"
+          className="bg-white rounded-lg shadow overflow-hidden"
+          data-view-mode={viewMode}
+        >
+          <div className="transition-all duration-300 ease-in-out">
+            <ParkList 
+              parks={parks}
+              viewMode={viewMode}
+              searchQuery={searchQuery}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );