/**
 * Page PlaylistEditPage
 * T0462: Create Playlist Routes
 */

import { useParams, useNavigate } from 'react-router-dom';
import { usePlaylist, useUpdatePlaylist } from '../hooks/usePlaylist';
import { PlaylistForm } from '../components/PlaylistForm';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { useToast } from '@/hooks/useToast';
import type { UpdatePlaylistRequest } from '../types';

export function PlaylistEditPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { toast } = useToast();
  const playlistId = id ? Number(id) : 0;
  const { data: playlist, isLoading, error } = usePlaylist(playlistId);
  const updateMutation = useUpdatePlaylist();

  const handleSubmit = async (data: UpdatePlaylistRequest) => {
    if (!playlist) return;

    try {
      await updateMutation.mutateAsync({
        id: playlist.id,
        data,
      });
      toast({
        title: 'Succès',
        description: 'Playlist mise à jour avec succès',
      });
      navigate(`/playlists/${playlist.id}`);
    } catch (error) {
      toast({
        title: 'Erreur',
        description: error instanceof Error ? error.message : 'Une erreur est survenue',
        variant: 'destructive',
      });
    }
  };

  const handleCancel = () => {
    if (playlist) {
      navigate(`/playlists/${playlist.id}`);
    } else {
      navigate('/playlists');
    }
  };

  if (isLoading) {
    return (
      <div className="flex justify-center items-center py-12">
        <div className="text-center">
          <Loader2 className="h-12 w-12 animate-spin mx-auto mb-4 text-muted-foreground" />
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </div>
    );
  }

  if (error || !playlist) {
    return (
      <div className="text-center py-12">
        <p className="text-destructive text-lg mb-2">Error loading playlist</p>
        {error instanceof Error && (
          <p className="text-sm text-muted-foreground mb-4">{error.message}</p>
        )}
        <Button onClick={() => navigate('/playlists')} variant="outline">
          <ArrowLeft className="w-4 h-4 mr-2" />
          Retour aux playlists
        </Button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <Button
          onClick={() => navigate(`/playlists/${playlist.id}`)}
          variant="ghost"
          className="mb-4"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          Retour
        </Button>
        <h1 className="text-3xl font-bold tracking-tight">Modifier la playlist</h1>
        <p className="text-muted-foreground">
          Modifiez les informations de votre playlist
        </p>
      </div>
      <div className="max-w-2xl">
        <PlaylistForm
          playlist={playlist}
          onSubmit={handleSubmit}
          onCancel={handleCancel}
          submitLabel="Enregistrer"
        />
      </div>
    </div>
  );
}

