import { useParams, useNavigate } from 'react-router-dom';
import { usePlaylist, useDeletePlaylist, useRemoveTrackFromPlaylist } from '../hooks/usePlaylists';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Trash2, Play, MoreVertical } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

export default function PlaylistDetailPage() {
  const { id } = useParams<{ id: string }>();
  const playlistId = parseInt(id || '0', 10);
  const navigate = useNavigate();
  
  const { data: playlist, isLoading } = usePlaylist(playlistId);
  const deletePlaylistMutation = useDeletePlaylist();
  const removeTrackMutation = useRemoveTrackFromPlaylist();

  const handleDelete = async () => {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette playlist ?')) {
      await deletePlaylistMutation.mutateAsync(playlistId);
      navigate('/playlists');
    }
  };

  const handleRemoveTrack = async (trackId: number) => {
    await removeTrackMutation.mutateAsync({ playlistId, trackId });
  };

  if (isLoading) return <div>Chargement...</div>;
  if (!playlist) return <div>Playlist introuvable</div>;

  return (
    <div className="space-y-6 p-6">
      <div className="flex flex-col md:flex-row gap-6">
        <div className="w-full md:w-64 flex-shrink-0">
          <div className="aspect-square bg-muted rounded-lg overflow-hidden shadow-lg">
            {playlist.cover_url ? (
              <img src={playlist.cover_url} alt={playlist.title} className="w-full h-full object-cover" />
            ) : (
              <div className="w-full h-full flex items-center justify-center bg-gray-100">
                <span className="text-4xl text-gray-400">♪</span>
              </div>
            )}
          </div>
        </div>
        
        <div className="flex-1 space-y-4">
          <div className="flex items-start justify-between">
            <div>
              <h1 className="text-3xl font-bold">{playlist.title}</h1>
              <p className="text-muted-foreground mt-2">{playlist.description}</p>
              <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
                <span>{playlist.user?.username}</span>
                <span>•</span>
                <span>{playlist.track_count} titres</span>
                <span>•</span>
                <span>{playlist.is_public ? 'Publique' : 'Privée'}</span>
              </div>
            </div>
            <div className="flex gap-2">
              <Button onClick={handleDelete} variant="destructive" size="icon">
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </div>
          
          <Button className="w-full md:w-auto">
            <Play className="mr-2 h-4 w-4" />
            Lire la playlist
          </Button>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Titres</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">#</TableHead>
                <TableHead>Titre</TableHead>
                <TableHead>Artiste</TableHead>
                <TableHead className="w-12"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {playlist.tracks?.map((pt, index) => (
                <TableRow key={pt.id}>
                  <TableCell>{index + 1}</TableCell>
                  <TableCell className="font-medium">{pt.track?.title}</TableCell>
                  <TableCell>{pt.track?.artist}</TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => handleRemoveTrack(pt.track_id)}>
                          Retirer de la playlist
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
              {(!playlist.tracks || playlist.tracks.length === 0) && (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                    Cette playlist est vide
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
