import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useEntityComparisons } from '@/hooks/useEntityComparisons';
import { ComparisonTable } from './ComparisonTable';
import { Building2, Factory, Users, Pencil, Image as ImageIcon } from 'lucide-react';

export function EntityComparisonDashboard() {
  const { data, isLoading } = useEntityComparisons();

  if (isLoading || !data) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Entity Comparisons</CardTitle>
          <CardDescription>Loading comparison data...</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="animate-pulse space-y-4">
            <div className="h-64 bg-muted rounded" />
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Entity Comparisons</CardTitle>
        <CardDescription>Top entities by content volume</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="parks-rides" className="space-y-4">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="parks-rides">
              <Building2 className="h-4 w-4 mr-2" />
              Parks
            </TabsTrigger>
            <TabsTrigger value="manufacturers">
              <Factory className="h-4 w-4 mr-2" />
              Manufacturers
            </TabsTrigger>
            <TabsTrigger value="operators">
              <Users className="h-4 w-4 mr-2" />
              Operators
            </TabsTrigger>
            <TabsTrigger value="designers">
              <Pencil className="h-4 w-4 mr-2" />
              Designers
            </TabsTrigger>
            <TabsTrigger value="photos">
              <ImageIcon className="h-4 w-4 mr-2" />
              Photos
            </TabsTrigger>
          </TabsList>

          <TabsContent value="parks-rides" className="space-y-4">
            <ComparisonTable
              title="Top Parks by Ride Count"
              data={data.top_parks_by_rides}
              columns={[
                { key: 'park_name', label: 'Park Name', linkBase: '/parks' },
                { key: 'ride_count', label: 'Rides', numeric: true },
                { key: 'photo_count', label: 'Photos', numeric: true },
              ]}
              slugKey="park_slug"
            />
          </TabsContent>

          <TabsContent value="manufacturers" className="space-y-4">
            <ComparisonTable
              title="Top Manufacturers"
              data={data.top_manufacturers}
              columns={[
                { key: 'manufacturer_name', label: 'Manufacturer', linkBase: '/manufacturers' },
                { key: 'ride_count', label: 'Rides', numeric: true },
                { key: 'model_count', label: 'Models', numeric: true },
              ]}
              slugKey="slug"
            />
          </TabsContent>

          <TabsContent value="operators" className="space-y-4">
            <ComparisonTable
              title="Top Operators"
              data={data.top_operators}
              columns={[
                { key: 'operator_name', label: 'Operator', linkBase: '/operators' },
                { key: 'park_count', label: 'Parks', numeric: true },
                { key: 'ride_count', label: 'Total Rides', numeric: true },
              ]}
              slugKey="slug"
            />
          </TabsContent>

          <TabsContent value="designers" className="space-y-4">
            <ComparisonTable
              title="Top Designers"
              data={data.top_designers}
              columns={[
                { key: 'designer_name', label: 'Designer', linkBase: '/designers' },
                { key: 'ride_count', label: 'Rides', numeric: true },
              ]}
              slugKey="slug"
            />
          </TabsContent>

          <TabsContent value="photos" className="space-y-4">
            <div className="space-y-6">
              <ComparisonTable
                title="Top Parks by Photo Count"
                data={data.top_parks_by_photos}
                columns={[
                  { key: 'park_name', label: 'Park Name', linkBase: '/parks' },
                  { key: 'photo_count', label: 'Photos', numeric: true },
                ]}
                slugKey="park_slug"
              />
              
              <ComparisonTable
                title="Top Rides by Photo Count"
                data={data.top_rides_by_photos}
                columns={[
                  { key: 'ride_name', label: 'Ride Name', linkBase: '/parks' },
                  { key: 'photo_count', label: 'Photos', numeric: true },
                ]}
                slugKey="ride_slug"
                parkSlugKey="park_slug"
              />
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}
