/**
 * VEZA V5 ULTRA - VIRTUAL SCROLLING EXAMPLE
 * Exemple d'intégration du virtual scrolling dans LibraryManager
 */

import { useState } from 'react';
import { VirtualList, VirtualGrid } from '@/components/ui/virtual-list';
import { TrackCard } from '@/components/music/TrackCard';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Grid, List, Search } from 'lucide-react';

// Mock data pour démo
const generateMockTracks = (count: number) => {
  return Array.from({ length: count }, (_, i) => ({
    id: `track-${i}`,
    title: `Track ${i + 1}`,
    artist: `Artist ${Math.floor(i / 10) + 1}`,
    album: `Album ${Math.floor(i / 5) + 1}`,
    duration: Math.floor(Math.random() * 300) + 60,
    artwork: `https://picsum.photos/seed/${i}/300/300`,
    liked: Math.random() > 0.7,
  }));
};

export function VirtualScrollingExample() {
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
  const [searchQuery, setSearchQuery] = useState('');
  
  // Générer 10000 tracks pour démonstration de performance
  const allTracks = generateMockTracks(10000);
  
  // Filtrer par recherche
  const filteredTracks = searchQuery
    ? allTracks.filter(track =>
        track.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        track.artist.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : allTracks;

  return (
    <div className="h-screen flex flex-col p-6 gap-6">
      {/* Header */}
      <Card variant="glass" className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h1 className="text-3xl font-bold text-gradient">
              Virtual Scrolling Demo
            </h1>
            <p className="text-muted-foreground">
              {filteredTracks.length.toLocaleString()} tracks • Buttery smooth
            </p>
          </div>
          
          {/* View mode toggle */}
          <div className="flex gap-2">
            <Button
              variant={viewMode === 'list' ? 'gradient' : 'outline'}
              size="sm"
              onClick={() => setViewMode('list')}
              icon={<List className="w-4 h-4" />}
            >
              List
            </Button>
            <Button
              variant={viewMode === 'grid' ? 'gradient' : 'outline'}
              size="sm"
              onClick={() => setViewMode('grid')}
              icon={<Grid className="w-4 h-4" />}
            >
              Grid
            </Button>
          </div>
        </div>

        {/* Search */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
          <Input
            placeholder="Search 10,000 tracks instantly..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
      </Card>

      {/* Virtual scrolling content */}
      <Card variant="glass" className="flex-1 overflow-hidden">
        {viewMode === 'list' ? (
          <VirtualList
            items={filteredTracks}
            estimatedItemSize={100}
            gap={8}
            animated={true}
            className="p-4"
            renderItem={(track, index) => (
              <TrackCard
                key={track.id}
                track={track}
                variant="default"
                onPlayPause={() => console.log('Play', track.id)}
                onLike={() => console.log('Like', track.id)}
                onAddToQueue={() => console.log('Add to queue', track.id)}
                onShare={() => console.log('Share', track.id)}
              />
            )}
          />
        ) : (
          <VirtualGrid
            items={filteredTracks}
            columns={3}
            estimatedItemHeight={280}
            gap={16}
            animated={true}
            className="p-4"
            renderItem={(track, index) => (
              <div key={track.id} className="group">
                <Card variant="interactive" className="overflow-hidden">
                  {/* Artwork */}
                  <div className="relative aspect-square overflow-hidden">
                    <img
                      src={track.artwork}
                      alt={track.title}
                      className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                  </div>

                  {/* Info */}
                  <div className="p-4">
                    <h3 className="font-semibold truncate group-hover:text-gradient-aurora transition-all">
                      {track.title}
                    </h3>
                    <p className="text-sm text-muted-foreground truncate">
                      {track.artist}
                    </p>
                  </div>
                </Card>
              </div>
            )}
          />
        )}
      </Card>

      {/* Stats footer */}
      <div className="flex items-center justify-center gap-8 text-sm text-muted-foreground">
        <div>
          <span className="font-semibold text-gradient">
            {filteredTracks.length.toLocaleString()}
          </span>{' '}
          tracks loaded
        </div>
        <div className="h-4 w-px bg-border" />
        <div>
          <span className="font-semibold text-green-500">60 FPS</span> guaranteed
        </div>
        <div className="h-4 w-px bg-border" />
        <div>
          Only <span className="font-semibold text-blue-500">~20</span> DOM nodes
        </div>
      </div>
    </div>
  );
}

// Export pour routing
export default VirtualScrollingExample;

