import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Plus, Music, Clock, Users, Settings } from 'lucide-react';
import { PlaylistEditor } from './PlaylistEditor';

interface Playlist {
  id: string;
  name: string;
  description?: string;
  tracks_count: number;
  followers_count: number;
  is_public: boolean;
  cover_image_url?: string;
}

export function PlaylistManager() {
  const [playlists, setPlaylists] = useState<Playlist[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isCreating, setIsCreating] = useState(false);

  // TODO: Fetch playlists from API

  const handleCreate = () => {
    setIsCreating(true);
  };

  const handlePlaylistCreated = (playlist: Playlist) => {
    setPlaylists(prev => [playlist, ...prev]);
    setIsCreating(false);
  };

  const handleEdit = (playlist: Playlist) => {
    // TODO: Open edit dialog
  };

  const handleDelete = (playlistId: string) => {
    // TODO: Delete playlist
  };

  if (isCreating) {
    return <PlaylistEditor onSave={handlePlaylistCreated} onCancel={() => setIsCreating(false)} />;
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Your Playlists</h2>
        <Button onClick={handleCreate}>
          <Plus className="h-4 w-4 mr-2" />
          Create Playlist
        </Button>
      </div>

      {playlists.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Music className="h-12 w-12 text-muted-foreground mb-4" />
            <p className="text-muted-foreground mb-4">No playlists yet</p>
            <Button onClick={handleCreate}>Create your first playlist</Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {playlists.map((playlist) => (
            <Card key={playlist.id} className="cursor-pointer hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-center justify-between">
                  {playlist.cover_image_url ? (
                    <img
                      src={playlist.cover_image_url}
                      alt={playlist.name}
                      className="w-full h-32 object-cover rounded"
                    />
                  ) : (
                    <div className="w-full h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded flex items-center justify-center">
                      <Music className="h-12 w-12 text-white" />
                    </div>
                  )}
                </div>
                <CardTitle className="mt-4">{playlist.name}</CardTitle>
                {playlist.description && (
                  <CardDescription>{playlist.description}</CardDescription>
                )}
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4 text-sm text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <Music className="h-4 w-4" />
                    {playlist.tracks_count}
                  </span>
                  <span className="flex items-center gap-1">
                    <Users className="h-4 w-4" />
                    {playlist.followers_count}
                  </span>
                </div>
                <div className="flex gap-2 mt-4">
                  <Button size="sm" className="flex-1">Play</Button>
                  <Button size="sm" variant="outline" onClick={() => handleEdit(playlist)}>
                    <Settings className="h-4 w-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}

