/**
 * VEZA V5 ULTRA - DEMO PAGE
 * Page de démonstration pour tester toutes les features V5
 */

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { TrackCard, TrackCardSkeleton } from '@/components/music/TrackCard';
import { CommandPalette, useCommandPalette } from '@/components/ui/command-palette';
import { VirtualList } from '@/components/ui/virtual-list';
import { 
  Play, 
  Pause, 
  Heart, 
  Share2, 
  Download,
  Music
} from 'lucide-react';

export default function V5DemoPage() {
  const [isPlaying, setIsPlaying] = useState(false);
  const commandPalette = useCommandPalette();

  const mockTracks = Array.from({ length: 20 }, (_, i) => ({
    id: `track-${i}`,
    title: `Amazing Song ${i + 1}`,
    artist: `Artist ${Math.floor(i / 3) + 1}`,
    album: `Album ${Math.floor(i / 5) + 1}`,
    duration: Math.floor(Math.random() * 300) + 60,
    artwork: `https://picsum.photos/seed/${i}/300/300`,
    liked: i % 3 === 0,
  }));

  return (
    <div className="min-h-screen p-8 space-y-8">
      {/* Header */}
      <div className="text-center space-y-4">
        <h1 className="text-6xl font-bold text-gradient-aurora">
          Veza V5 Ultra Demo
        </h1>
        <p className="text-xl text-muted-foreground">
          Test de toutes les fonctionnalités V5
        </p>
      </div>

      {/* Command Palette */}
      <CommandPalette isOpen={commandPalette.isOpen} onClose={commandPalette.close} />

      {/* Section 1: Buttons */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Button Variants</CardTitle>
          <CardDescription>9 variants de boutons avec animations</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-4">
            <Button variant="default" size="default">Default</Button>
            <Button variant="gradient" size="default">Gradient</Button>
            <Button variant="glass" size="default">Glass</Button>
            <Button variant="success" size="default">Success</Button>
            <Button variant="aurora" size="default">Aurora</Button>
            <Button variant="destructive" size="default">Destructive</Button>
            <Button variant="outline" size="default">Outline</Button>
            <Button variant="secondary" size="default">Secondary</Button>
            <Button variant="ghost" size="default">Ghost</Button>
          </div>
          
          <div className="mt-4 flex gap-4">
            <Button variant="gradient" size="sm">Small</Button>
            <Button variant="gradient" size="default">Default</Button>
            <Button variant="gradient" size="lg">Large</Button>
            <Button variant="gradient" size="xl">Extra Large</Button>
          </div>
          
          <div className="mt-4 flex gap-4">
            <Button variant="gradient" loading>Loading...</Button>
            <Button variant="gradient" disabled>Disabled</Button>
            <Button variant="gradient" icon={<Music className="w-4 h-4" />}>
              With Icon
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Section 2: Cards */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Card Variants</CardTitle>
          <CardDescription>4 variants de cartes avec effets</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            <Card variant="default">
              <CardContent className="p-6">
                <h3 className="font-bold mb-2">Default Card</h3>
                <p className="text-sm text-muted-foreground">
                  Card basique avec border et shadow
                </p>
              </CardContent>
            </Card>

            <Card variant="glass">
              <CardContent className="p-6">
                <h3 className="font-bold mb-2">Glass Card</h3>
                <p className="text-sm text-muted-foreground">
                  Glassmorphism avec backdrop blur
                </p>
              </CardContent>
            </Card>

            <Card variant="neu">
              <CardContent className="p-6">
                <h3 className="font-bold mb-2">Neumorphic Card</h3>
                <p className="text-sm text-muted-foreground">
                  Effet 3D avec ombres
                </p>
              </CardContent>
            </Card>

            <Card variant="interactive">
              <CardContent className="p-6">
                <h3 className="font-bold mb-2">Interactive Card</h3>
                <p className="text-sm text-muted-foreground">
                  Hover lift + click feedback
                </p>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* Section 3: Track Cards */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Track Cards V5</CardTitle>
          <CardDescription>Cartes de musique avec animations</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <TrackCard
              track={mockTracks[0]}
              variant="compact"
              isPlaying={isPlaying}
              onPlayPause={() => setIsPlaying(!isPlaying)}
              onLike={() => console.log('Like')}
              onAddToQueue={() => console.log('Queue')}
              onShare={() => console.log('Share')}
            />
            
            <TrackCard
              track={mockTracks[1]}
              variant="default"
              onPlayPause={() => console.log('Play')}
              onLike={() => console.log('Like')}
            />
            
            <TrackCard
              track={mockTracks[2]}
              variant="large"
              onPlayPause={() => console.log('Play')}
              onLike={() => console.log('Like')}
            />
            
            <TrackCardSkeleton variant="default" />
          </div>
        </CardContent>
      </Card>

      {/* Section 4: Effects & Animations */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Effects & Animations</CardTitle>
          <CardDescription>Effets visuels et animations</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-4">
            <div className="p-6 glass rounded-xl text-center">
              <p className="font-bold mb-2">Glassmorphism</p>
              <p className="text-sm text-muted-foreground">Backdrop blur</p>
            </div>

            <div className="p-6 glass-strong rounded-xl text-center">
              <p className="font-bold mb-2">Glass Strong</p>
              <p className="text-sm text-muted-foreground">Plus opaque</p>
            </div>

            <div className="p-6 gradient-brand rounded-xl text-center text-white">
              <p className="font-bold mb-2">Gradient Brand</p>
              <p className="text-sm opacity-90">Violet gradient</p>
            </div>

            <div className="p-6 gradient-aurora gradient-animated rounded-xl text-center text-white">
              <p className="font-bold mb-2">Aurora Animated</p>
              <p className="text-sm opacity-90">Rainbow gradient</p>
            </div>

            <div className="p-6 bg-card rounded-xl text-center hover-lift">
              <p className="font-bold mb-2">Hover Lift</p>
              <p className="text-sm text-muted-foreground">Hover me!</p>
            </div>

            <div className="p-6 bg-card rounded-xl text-center hover-scale click-shrink">
              <p className="font-bold mb-2">Hover + Click</p>
              <p className="text-sm text-muted-foreground">Interactive</p>
            </div>

            <div className="p-6 bg-card rounded-xl text-center skeleton">
              <p className="font-bold mb-2">Skeleton</p>
              <p className="text-sm">Loading...</p>
            </div>

            <div className="p-6 bg-card rounded-xl text-center shimmer">
              <p className="font-bold mb-2">Shimmer</p>
              <p className="text-sm">Shiny effect</p>
            </div>

            <div className="p-6 bg-card rounded-xl text-center floating">
              <p className="font-bold mb-2">Floating</p>
              <p className="text-sm text-muted-foreground">Floats up/down</p>
            </div>
          </div>

          <div className="mt-6 text-center">
            <h2 className="text-4xl font-bold text-gradient mb-2">
              Text Gradient
            </h2>
            <h3 className="text-3xl font-bold text-gradient-aurora">
              Aurora Text Gradient
            </h3>
          </div>
        </CardContent>
      </Card>

      {/* Section 5: Virtual Scrolling Preview */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Virtual Scrolling</CardTitle>
          <CardDescription>Performance avec 20 tracks (capable de 10,000+)</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="h-96">
            <VirtualList
              items={mockTracks}
              estimatedItemSize={100}
              gap={8}
              animated={true}
              renderItem={(track) => (
                <TrackCard
                  key={track.id}
                  track={track}
                  variant="compact"
                  onPlayPause={() => console.log('Play', track.id)}
                  onLike={() => console.log('Like', track.id)}
                />
              )}
            />
          </div>
        </CardContent>
      </Card>

      {/* Section 6: Command Palette */}
      <Card variant="glass" animated>
        <CardHeader>
          <CardTitle className="text-gradient">Command Palette</CardTitle>
          <CardDescription>Navigation rapide Cmd+K</CardDescription>
        </CardHeader>
        <CardContent>
          <Button 
            variant="gradient" 
            size="lg"
            className="w-full"
            onClick={() => commandPalette.open()}
          >
            <kbd className="mr-2 px-2 py-1 bg-white/20 rounded">⌘K</kbd>
            Open Command Palette
          </Button>
        </CardContent>
      </Card>

      {/* Footer */}
      <div className="text-center text-muted-foreground text-sm space-y-2">
        <p>✨ Veza V5 Ultra Design System</p>
        <p>All components loaded and functional</p>
        <div className="flex items-center justify-center gap-2 mt-4">
          <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
          <span>V5 CSS Loaded ✅</span>
        </div>
      </div>
    </div>
  );
}

