'use client';

import { useEffect, useState } from 'react';
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>({});

  // Fetch companies for filter dropdown
  useEffect(() => {
    async function fetchCompanies() {
      try {
        const response = await fetch('/api/companies');
        const data = await response.json();
        if (!data.success) {
          throw new Error(data.error || 'Failed to fetch companies');
        }
        setCompanies(data.data || []);
      } catch (err) {
        console.error('Failed to fetch companies:', err);
        // Don't set error state for companies - just show empty list
        setCompanies([]);
      }
    }
    fetchCompanies();
  }, []);

  // Fetch parks with filters
  useEffect(() => {
    async function fetchParks() {
      try {
        setLoading(true);
        setError(null);

        const queryParams = new URLSearchParams();
        
        // Only add defined parameters
        if (searchQuery?.trim()) queryParams.set('search', searchQuery.trim());
        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) {
          throw new Error(data.error || 'Failed to fetch parks');
        }

        setParks(data.data || []);
        setError(null);
      } catch (err) {
        console.error('Error fetching parks:', err);
        setError(err instanceof Error ? err.message : 'An error occurred while fetching parks');
        setParks([]);
      } finally {
        setLoading(false);
      }
    }

    fetchParks();
  }, [searchQuery, filters]);

  const handleSearch = (query: string) => {
    setSearchQuery(query);
  };

  const handleFiltersChange = (newFilters: ParkFilterValues) => {
    setFilters(newFilters);
  };

  if (loading) {
    return (
      <div className="min-h-screen p-8">
        <div className="text-center">
          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
          <p className="mt-4 text-gray-600">Loading parks...</p>
        </div>
      </div>
    );
  }

  if (error && !parks.length) {
    return (
      <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>
    );
  }

  return (
    <div className="min-h-screen p-8">
      <div className="max-w-7xl mx-auto">
        <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>

        {error && parks.length > 0 && (
          <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-800">
            <p className="text-sm">
              Some data might be incomplete or outdated: {error}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}