import { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ParkCard } from '@/components/parks/ParkCard';
import { RideCard } from '@/components/rides/RideCard';
import { RecentChangeCard } from './RecentChangeCard';
import { Badge } from '@/components/ui/badge';
import { Clock } from 'lucide-react';
import { useHomepageTrendingParks, useHomepageTrendingRides } from '@/hooks/homepage/useHomepageTrending';
import { useHomepageRecentParks, useHomepageRecentRides } from '@/hooks/homepage/useHomepageRecent';
import { useHomepageRecentChanges } from '@/hooks/homepage/useHomepageRecentChanges';
import { useHomepageRecentlyOpenedParks, useHomepageRecentlyOpenedRides } from '@/hooks/homepage/useHomepageOpened';
import { useHomepageHighestRatedParks, useHomepageHighestRatedRides } from '@/hooks/homepage/useHomepageRated';
import { useHomepageOpeningSoonParks, useHomepageOpeningSoonRides } from '@/hooks/homepage/useHomepageOpeningSoon';
import { useHomepageClosingSoonParks, useHomepageClosingSoonRides } from '@/hooks/homepage/useHomepageClosing';
import { useHomepageRecentlyClosedParks, useHomepageRecentlyClosedRides } from '@/hooks/homepage/useHomepageClosed';

export function ContentTabs() {
  const [activeTab, setActiveTab] = useState('trending-parks');

  // Lazy load data - only fetch when tab is active
  const trendingParks = useHomepageTrendingParks(activeTab === 'trending-parks');
  const trendingRides = useHomepageTrendingRides(activeTab === 'trending-rides');
  const recentParks = useHomepageRecentParks(activeTab === 'recent-parks');
  const recentRides = useHomepageRecentRides(activeTab === 'recent-rides');
  const recentChanges = useHomepageRecentChanges(activeTab === 'recent-changes');
  const recentlyOpenedParks = useHomepageRecentlyOpenedParks(activeTab === 'recently-opened');
  const recentlyOpenedRides = useHomepageRecentlyOpenedRides(activeTab === 'recently-opened');
  const highestRatedParks = useHomepageHighestRatedParks(activeTab === 'highest-rated-parks');
  const highestRatedRides = useHomepageHighestRatedRides(activeTab === 'highest-rated-rides');
  const openingSoonParks = useHomepageOpeningSoonParks(activeTab === 'opening-soon');
  const openingSoonRides = useHomepageOpeningSoonRides(activeTab === 'opening-soon');
  const closingSoonParks = useHomepageClosingSoonParks(activeTab === 'closing-soon');
  const closingSoonRides = useHomepageClosingSoonRides(activeTab === 'closing-soon');
  const recentlyClosedParks = useHomepageRecentlyClosedParks(activeTab === 'recently-closed');
  const recentlyClosedRides = useHomepageRecentlyClosedRides(activeTab === 'recently-closed');

  // Combine parks and rides for mixed tabs
  const recentlyOpened = [
    ...(recentlyOpenedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
    ...(recentlyOpenedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
  ].sort((a, b) => new Date(b.opening_date || 0).getTime() - new Date(a.opening_date || 0).getTime()).slice(0, 24);

  const openingSoon = [
    ...(openingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
    ...(openingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
  ].sort((a, b) => new Date(a.opening_date || 0).getTime() - new Date(b.opening_date || 0).getTime()).slice(0, 24);

  const closingSoon = [
    ...(closingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
    ...(closingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
  ].sort((a, b) => new Date(a.closing_date || 0).getTime() - new Date(b.closing_date || 0).getTime()).slice(0, 24);

  const recentlyClosed = [
    ...(recentlyClosedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
    ...(recentlyClosedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
  ].sort((a, b) => new Date(b.closing_date || 0).getTime() - new Date(a.closing_date || 0).getTime()).slice(0, 24);

  const isLoadingInitial = activeTab === 'trending-parks' && trendingParks.isLoading;

  if (isLoadingInitial) {
    return (
      <section className="py-12">
        <div className="container mx-auto px-4">
          <div className="space-y-8">
            <div className="text-center space-y-3">
              <div className="h-8 bg-gradient-to-r from-primary/20 via-secondary/20 to-accent/20 rounded-lg w-64 mx-auto animate-pulse" />
              <div className="h-4 bg-muted/50 rounded w-96 mx-auto animate-pulse" style={{ animationDelay: '150ms' }} />
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
              {[...Array(12)].map((_, i) => (
                <div 
                  key={i} 
                  className="h-72 bg-gradient-to-br from-card via-card to-card/80 rounded-lg border border-border/50 animate-pulse relative overflow-hidden"
                  style={{ animationDelay: `${i * 50}ms` }}
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-shimmer" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="py-8">
      <div className="container mx-auto px-4">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <div className="text-center mb-8">
            <TabsList className="flex flex-wrap justify-center gap-2 p-3 bg-muted/30 rounded-lg max-w-5xl mx-auto">
              <TabsTrigger value="trending-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Trending Parks
              </TabsTrigger>
              <TabsTrigger value="trending-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Trending Rides
              </TabsTrigger>
              <TabsTrigger value="recent-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                New Parks
              </TabsTrigger>
              <TabsTrigger value="recent-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                New Rides
              </TabsTrigger>
              <TabsTrigger value="recent-changes" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Recent Changes
              </TabsTrigger>
              <TabsTrigger value="highest-rated-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Top Parks
              </TabsTrigger>
              <TabsTrigger value="highest-rated-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Top Rides
              </TabsTrigger>
              <TabsTrigger value="opening-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Opening Soon
              </TabsTrigger>
              <TabsTrigger value="recently-opened" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Recently Opened
              </TabsTrigger>
              <TabsTrigger value="closing-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Closing Soon
              </TabsTrigger>
              <TabsTrigger value="recently-closed" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
                Recently Closed
              </TabsTrigger>
            </TabsList>
          </div>

          <TabsContent value="trending-parks" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Parks</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed parks in the last 30 days</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {trendingParks.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {trendingParks.data?.map((park) => (
                  <ParkCard key={park.id} park={park} />
                ))}
              </div>
            )}
          </TabsContent>

          <TabsContent value="trending-rides" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Rides</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed rides in the last 30 days</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {trendingRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {trendingRides.data?.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 md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Parks</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest parks added to our database</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {recentParks.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {recentParks.data?.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 md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Rides</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest attractions added to our database</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {recentRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {recentRides.data?.map((ride) => (
                  <RideCard key={ride.id} ride={ride} />
                ))}
              </div>
            )}
          </TabsContent>

          <TabsContent value="recent-changes" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recent Changes</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest updates across all entities</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {recentChanges.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-64 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : recentChanges.data && recentChanges.data.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
                {recentChanges.data.map((change) => (
                  <RecentChangeCard
                    key={`${change.type}-${change.id}-${change.changedAt}`}
                    entityType={change.type}
                    entityId={change.id}
                    entityName={change.name}
                    entitySlug={change.slug}
                    parkSlug={change.parkSlug}
                    imageUrl={change.imageUrl}
                    changeType={change.changeType}
                    changedAt={change.changedAt}
                    changedByUsername={change.changedBy?.username}
                    changedByAvatar={change.changedBy?.avatarUrl}
                    changeReason={change.changeReason}
                  />
                ))}
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center py-16 px-4">
                <div className="relative mb-6">
                  <div className="absolute inset-0 rounded-full bg-primary/20 blur-2xl animate-pulse" />
                  <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-card via-card to-card/80 flex items-center justify-center border-2 border-primary/20 shadow-xl">
                    <Clock className="w-10 h-10 text-muted-foreground" />
                  </div>
                </div>
                <h3 className="text-xl font-semibold mb-2 text-foreground">No Recent Changes</h3>
                <p className="text-muted-foreground text-center max-w-md text-sm">
                  There are no recent entity changes to display yet. Check back soon for the latest updates to parks, rides, and companies!
                </p>
                <div className="mt-6 w-32 h-0.5 bg-gradient-to-r from-transparent via-primary/40 to-transparent rounded-full" />
              </div>
            )}
          </TabsContent>

          <TabsContent value="recently-opened" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Opened</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that opened in the last year</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {recentlyOpenedParks.isLoading || recentlyOpenedRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                 {recentlyOpened.map((entity) => (
                  entity.entityType === 'park' ? (
                    <div key={entity.id} className="relative">
                      <ParkCard park={entity} />
                      {entity.opening_date && (
                        <Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
                          {new Date(entity.opening_date).getFullYear()}
                        </Badge>
                      )}
                    </div>
                  ) : (
                    <div key={entity.id} className="relative">
                      <RideCard ride={entity} />
                      {entity.opening_date && (
                        <Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
                          {new Date(entity.opening_date).getFullYear()}
                        </Badge>
                      )}
                    </div>
                  )
                ))}
              </div>
            )}
          </TabsContent>

          <TabsContent value="highest-rated-parks" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Highest Rated Parks</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated theme parks based on visitor reviews</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {highestRatedParks.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : highestRatedParks.data && highestRatedParks.data.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {highestRatedParks.data.map((park) => (
                  <ParkCard key={park.id} park={park} />
                ))}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                No rated parks available yet. Be the first to leave a review!
              </div>
            )}
          </TabsContent>

          <TabsContent value="highest-rated-rides" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Highest Rated Rides</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated attractions based on rider reviews</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {highestRatedRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : highestRatedRides.data && highestRatedRides.data.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {highestRatedRides.data.map((ride) => (
                  <RideCard key={ride.id} ride={ride} />
                ))}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                No rated rides available yet. Be the first to leave a review!
              </div>
            )}
          </TabsContent>

          <TabsContent value="opening-soon" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Opening Soon</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides opening in the next 6 months</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {openingSoonParks.isLoading || openingSoonRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : openingSoon.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {openingSoon.map((entity: unknown) => {
                  const typedEntity = entity as { id: string; entityType: string; opening_date: string };
                  return typedEntity.entityType === 'park' ? (
                    <div key={typedEntity.id} className="relative">
                      <ParkCard park={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
                        {new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                      </Badge>
                    </div>
                  ) : (
                    <div key={typedEntity.id} className="relative">
                      <RideCard ride={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
                        {new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                      </Badge>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                No parks or rides scheduled to open in the next 6 months.
              </div>
            )}
          </TabsContent>

          <TabsContent value="closing-soon" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Closing Soon</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Last chance: Parks and rides closing in the next 6 months</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {closingSoonParks.isLoading || closingSoonRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : closingSoon.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {closingSoon.map((entity: unknown) => {
                  const typedEntity = entity as { id: string; entityType: string; closing_date: string };
                  return typedEntity.entityType === 'park' ? (
                    <div key={typedEntity.id} className="relative">
                      <ParkCard park={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
                        Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                      </Badge>
                    </div>
                  ) : (
                    <div key={typedEntity.id} className="relative">
                      <RideCard ride={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
                        Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                      </Badge>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                No parks or rides scheduled to close in the next 6 months.
              </div>
            )}
          </TabsContent>

          <TabsContent value="recently-closed" className="mt-8">
            <div className="text-center mb-6">
              <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Closed</h2>
              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that closed in the last year</p>
              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
            </div>
            {recentlyClosedParks.isLoading || recentlyClosedRides.isLoading ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4">
                {[...Array(12)].map((_, i) => (
                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
                ))}
              </div>
            ) : recentlyClosed.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                {recentlyClosed.map((entity: unknown) => {
                  const typedEntity = entity as { id: string; entityType: string; closing_date: string };
                  return typedEntity.entityType === 'park' ? (
                    <div key={typedEntity.id} className="relative">
                      <ParkCard park={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
                        Closed {new Date(typedEntity.closing_date).getFullYear()}
                      </Badge>
                    </div>
                  ) : (
                    <div key={typedEntity.id} className="relative">
                      <RideCard ride={entity as never} />
                      <Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
                        Closed {new Date(typedEntity.closing_date).getFullYear()}
                      </Badge>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                No parks or rides closed in the last year.
              </div>
            )}
          </TabsContent>
        </Tabs>
      </div>
    </section>
  );
}