import { games, dancePad } from '@/lib/data';
import Image from 'next/image';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Music, Gamepad, Disc3 } from 'lucide-react';

export default function GamingPage() {
  const ps5Games = games.filter(g => g.console === 'PlayStation 5');
  const ps4Games = games.filter(g => g.console === 'PlayStation 4');
  const switchGames = games.filter(g => g.console === 'Nintendo Switch');

  const GameGrid = ({ games }: { games: typeof ps5Games }) => (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {games.map(game => (
        <Card key={game.id} className="overflow-hidden shadow-lg hover:shadow-accent/20 transition-all duration-300 transform hover:-translate-y-2">
          <CardHeader className="p-0">
            <Image
              src={game.coverUrl}
              alt={`Cover for ${game.title}`}
              width={400}
              height={500}
              className="w-full h-auto object-cover aspect-[4/5]"
              data-ai-hint={game.imageHint}
            />
          </CardHeader>
          <CardContent className="p-4">
            <CardTitle className="font-headline text-lg line-clamp-1">{game.title}</CardTitle>
          </CardContent>
        </Card>
      ))}
    </div>
  );

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-bold font-headline tracking-tight">Zona de Gaming</h1>
        <p className="mt-4 text-lg text-muted-foreground">Elige tu aventura. Consolas y juegos para todos.</p>
      </div>

      <Tabs defaultValue="ps5" className="w-full">
        <TabsList className="grid w-full grid-cols-2 sm:grid-cols-4 mx-auto max-w-2xl h-auto p-2">
          <TabsTrigger value="ps5" className="py-2 text-md">PlayStation 5</TabsTrigger>
          <TabsTrigger value="ps4" className="py-2 text-md">PlayStation 4</TabsTrigger>
          <TabsTrigger value="switch" className="py-2 text-md">Nintendo Switch</TabsTrigger>
          <TabsTrigger value="dance" className="py-2 text-md">Tablero de Baile</TabsTrigger>
        </TabsList>

        <TabsContent value="ps5" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Gamepad /> Juegos de PS5</h2>
          <GameGrid games={ps5Games} />
        </TabsContent>
        <TabsContent value="ps4" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Gamepad /> Juegos de PS4</h2>
          <GameGrid games={ps4Games} />
        </TabsContent>
        <TabsContent value="switch" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Gamepad /> Juegos de Switch</h2>
          <GameGrid games={switchGames} />
        </TabsContent>
        <TabsContent value="dance" className="mt-8">
          <h2 className="text-2xl font-bold font-headline mb-6 flex items-center gap-2"><Music /> Tablero de Baile</h2>
          <Card className="overflow-hidden">
            <div className="grid md:grid-cols-2">
              <video
                src="https://scontent.cdninstagram.com/v/t66.30100-16/10000000_1089140411855272_8545330363283281062_n.mp4?_nc_cat=105&ccb=1-7&_nc_sid=982a7a&efg=eyJ2ZW5jb2RlX3RhZyI6ImlnLXhwdmRzLmNsaXBzLnYxLmNsaXBzLmY3MjAucCJ9&_nc_ohc=2Xf-h2bJqI4Q7kNvgFYqBvM&_nc_ht=scontent.cdninstagram.com&oh=00_AYDBXqX1Y7w2a3G7G4l3c5w8k9Z0j7Y7x5p8c5b9X8Q9Zg&oe=669145A8"
                controls
                className="w-full h-full object-cover"
              />
              <div className="p-6 md:p-8">
                <CardTitle className="text-2xl font-headline mb-4">¡Siente el ritmo!</CardTitle>
                <p className="text-muted-foreground mb-6">Nuestro tablero de baile de última generación te espera. Perfecto para fiestas y para liberar tu energía. Echa un vistazo a nuestra lista de canciones:</p>
                <Accordion type="single" collapsible className="w-full">
                  <AccordionItem value="item-1">
                    <AccordionTrigger className="font-semibold text-lg">Canciones Disponibles</AccordionTrigger>
                    <AccordionContent>
                      <ul className="space-y-3 pt-2">
                        {dancePad.songs.map((song) => (
                          <li key={song} className="flex items-center gap-3">
                            <Disc3 className="h-5 w-5 text-accent"/>
                            <span className="text-foreground/90">{song}</span>
                          </li>
                        ))}
                      </ul>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </div>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}