import { useState, useEffect } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ParkCard } from '@/components/parks/ParkCard';
import { RideCard } from '@/components/rides/RideCard';
import { Park, Ride } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';

export function ContentTabs() {
  const [popularParks, setPopularParks] = useState<Park[]>([]);
  const [trendingParks, setTrendingParks] = useState<Park[]>([]);
  const [popularRides, setPopularRides] = useState<Ride[]>([]);
  const [trendingRides, setTrendingRides] = useState<Ride[]>([]);
  const [recentParks, setRecentParks] = useState<Park[]>([]);
  const [recentRides, setRecentRides] = useState<Ride[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchContent();
  }, []);

  const fetchContent = async () => {
    try {
      // Most Popular Parks (by rating)
      const { data: popular } = await supabase
        .from('parks')
        .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
        .order('average_rating', { ascending: false })
        .limit(12);

      // Trending Parks (by review count)
      const { data: trending } = await supabase
        .from('parks')
        .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
        .order('review_count', { ascending: false })
        .limit(12);

      // Recently Added Parks
      const { data: recent } = await supabase
        .from('parks')
        .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
        .order('created_at', { ascending: false })
        .limit(12);

      // Popular Rides (by rating)
      const { data: popularRidesData } = await supabase
        .from('rides')
        .select(`*, park:parks!inner(name, slug, location:locations(*))`)
        .order('average_rating', { ascending: false })
        .limit(12);

      // Trending Rides (by review count) 
      const { data: trendingRidesData } = await supabase
        .from('rides')
        .select(`*, park:parks!inner(name, slug, location:locations(*))`)
        .order('review_count', { ascending: false })
        .limit(12);

      // Recently Added Rides
      const { data: recentRidesData } = await supabase
        .from('rides')
        .select(`*, park:parks!inner(name, slug, location:locations(*))`)
        .order('created_at', { ascending: false })
        .limit(12);

      setPopularParks(popular || []);
      setTrendingParks(trending || []);
      setRecentParks(recent || []);
      setPopularRides(popularRidesData || []);
      setTrendingRides(trendingRidesData || []);
      setRecentRides(recentRidesData || []);
    } catch (error) {
      console.error('Error fetching content:', error);
    } finally {
      setLoading(false);
    }
  };


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

  return (
    <section className="py-8">
      <div className="container mx-auto px-4">
        <Tabs defaultValue="popular-parks" className="w-full">
          <div className="text-center mb-8">
            <TabsList className="grid w-full max-w-4xl mx-auto grid-cols-3 md:grid-cols-6 h-auto p-2 bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 dark:from-primary/20 dark:via-secondary/20 dark:to-accent/20 dark:bg-card/50 border border-primary/20 dark:border-primary/30 rounded-xl shadow-lg backdrop-blur-sm">
              <TabsTrigger value="popular-parks" className="text-xs md:text-sm px-2 py-3">
                Popular Parks
              </TabsTrigger>
              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3">
                Trending Parks
              </TabsTrigger>
              <TabsTrigger value="popular-rides" className="text-xs md:text-sm px-2 py-3">
                Popular Rides
              </TabsTrigger>
              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3">
                Trending Rides
              </TabsTrigger>
              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3">
                New Parks
              </TabsTrigger>
              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3">
                New Rides
              </TabsTrigger>
            </TabsList>
          </div>

          <TabsContent value="popular-parks" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
              <p className="text-muted-foreground">Highest rated theme parks worldwide</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {popularParks.map((park) => (
                <ParkCard key={park.id} park={park} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="trending-parks" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
              <p className="text-muted-foreground">Most reviewed parks this month</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {trendingParks.map((park) => (
                <ParkCard key={park.id} park={park} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="popular-rides" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
              <p className="text-muted-foreground">Highest rated attractions worldwide</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {popularRides.map((ride) => (
                <RideCard key={ride.id} ride={ride} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="trending-rides" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
              <p className="text-muted-foreground">Most talked about attractions</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {trendingRides.map((ride) => (
                <RideCard key={ride.id} ride={ride} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="recent-parks" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
              <p className="text-muted-foreground">Latest parks added to our database</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {recentParks.map((park) => (
                <ParkCard key={park.id} park={park} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="recent-rides" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
              <p className="text-muted-foreground">Latest attractions added to our database</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
              {recentRides.map((ride) => (
                <RideCard key={ride.id} ride={ride} />
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </section>
  );
}