vynl/frontend/src/pages/Playlists.tsx

import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { ListMusic, Plus, Loader2, Music, ChevronRight, Download, X } from 'lucide-react'
import { getPlaylists, getSpotifyPlaylists, importSpotifyPlaylist, type PlaylistResponse, type SpotifyPlaylistItem } from '../lib/api'

export default function Playlists() {
  const [playlists, setPlaylists] = useState<PlaylistResponse[]>([])
  const [spotifyPlaylists, setSpotifyPlaylists] = useState<SpotifyPlaylistItem[]>([])
  const [showImport, setShowImport] = useState(false)
  const [importing, setImporting] = useState<string | null>(null)
  const [loadingSpotify, setLoadingSpotify] = useState(false)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    loadPlaylists()
  }, [])

  const loadPlaylists = async () => {
    try {
      const data = await getPlaylists()
      setPlaylists(data)
    } catch {
      setError('Failed to load playlists')
    } finally {
      setLoading(false)
    }
  }

  const openImportModal = async () => {
    setShowImport(true)
    setLoadingSpotify(true)
    try {
      const data = await getSpotifyPlaylists()
      setSpotifyPlaylists(data)
    } catch {
      setError('Failed to load Spotify playlists. Make sure your Spotify account is connected.')
    } finally {
      setLoadingSpotify(false)
    }
  }

  const handleImport = async (playlistId: string) => {
    setImporting(playlistId)
    try {
      const imported = await importSpotifyPlaylist(playlistId)
      setPlaylists((prev) => [...prev, imported])
      setSpotifyPlaylists((prev) => prev.filter((p) => p.id !== playlistId))
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to import playlist')
    } finally {
      setImporting(null)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-8 h-8 text-purple animate-spin" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-charcoal">Playlists</h1>
          <p className="text-charcoal-muted mt-1">Manage your imported playlists</p>
        </div>
        <button
          onClick={openImportModal}
          className="flex items-center gap-2 px-5 py-2.5 bg-purple text-white font-medium rounded-xl hover:bg-purple-dark transition-colors cursor-pointer border-none text-sm"
        >
          <Plus className="w-4 h-4" />
          Import from Spotify
        </button>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
          {error}
        </div>
      )}

      {/* Playlist Grid */}
      {playlists.length === 0 ? (
        <div className="bg-white rounded-2xl border border-purple-100 p-12 text-center">
          <div className="w-16 h-16 rounded-2xl bg-purple-50 flex items-center justify-center mx-auto mb-4">
            <ListMusic className="w-8 h-8 text-purple" />
          </div>
          <h2 className="text-xl font-semibold text-charcoal mb-2">No playlists yet</h2>
          <p className="text-charcoal-muted mb-6 max-w-md mx-auto">
            Import your Spotify playlists to start getting personalized music recommendations
          </p>
          <button
            onClick={openImportModal}
            className="inline-flex items-center gap-2 px-6 py-3 bg-purple text-white font-medium rounded-xl hover:bg-purple-dark transition-colors cursor-pointer border-none text-sm"
          >
            <Download className="w-4 h-4" />
            Import your first playlist
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {playlists.map((playlist) => (
            <Link
              key={playlist.id}
              to={`/playlists/${playlist.id}`}
              className="bg-white rounded-2xl border border-purple-100 p-5 hover:shadow-md transition-shadow no-underline group"
            >
              <div className="flex items-start gap-4">
                <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-200 to-purple-400 flex-shrink-0 flex items-center justify-center overflow-hidden">
                  {playlist.image_url ? (
                    <img
                      src={playlist.image_url}
                      alt={playlist.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <Music className="w-7 h-7 text-white/80" />
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-charcoal truncate group-hover:text-purple transition-colors">
                    {playlist.name}
                  </h3>
                  <p className="text-sm text-charcoal-muted mt-0.5">
                    {playlist.track_count} tracks
                  </p>
                  <span className="inline-block mt-2 px-2 py-0.5 bg-purple-50 text-purple text-xs font-medium rounded-full">
                    {playlist.source}
                  </span>
                </div>
                <ChevronRight className="w-5 h-5 text-charcoal-muted/30 group-hover:text-purple transition-colors flex-shrink-0 mt-1" />
              </div>
            </Link>
          ))}
        </div>
      )}

      {/* Import Modal */}
      {showImport && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden">
            <div className="flex items-center justify-between px-6 py-4 border-b border-purple-100">
              <h2 className="text-lg font-semibold text-charcoal">Import from Spotify</h2>
              <button
                onClick={() => setShowImport(false)}
                className="p-1.5 rounded-lg hover:bg-purple-50 transition-colors cursor-pointer bg-transparent border-none"
              >
                <X className="w-5 h-5 text-charcoal-muted" />
              </button>
            </div>

            <div className="overflow-y-auto max-h-[60vh] p-4">
              {loadingSpotify ? (
                <div className="flex items-center justify-center py-12">
                  <Loader2 className="w-6 h-6 text-purple animate-spin" />
                </div>
              ) : spotifyPlaylists.length === 0 ? (
                <div className="text-center py-12">
                  <p className="text-charcoal-muted">No playlists found on Spotify</p>
                </div>
              ) : (
                <div className="space-y-2">
                  {spotifyPlaylists.map((sp) => (
                    <div
                      key={sp.id}
                      className="flex items-center gap-3 p-3 rounded-xl hover:bg-purple-50 transition-colors"
                    >
                      <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-200 to-purple-400 flex-shrink-0 flex items-center justify-center overflow-hidden">
                        {sp.image_url ? (
                          <img
                            src={sp.image_url}
                            alt={sp.name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <Music className="w-5 h-5 text-white/80" />
                        )}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-charcoal text-sm truncate">{sp.name}</p>
                        <p className="text-xs text-charcoal-muted">
                          {sp.track_count} tracks &middot; {sp.owner}
                        </p>
                      </div>
                      <button
                        onClick={() => handleImport(sp.id)}
                        disabled={importing === sp.id}
                        className="px-4 py-2 bg-purple text-white text-xs font-medium rounded-lg hover:bg-purple-dark transition-colors cursor-pointer border-none disabled:opacity-50 flex items-center gap-1.5"
                      >
                        {importing === sp.id ? (
                          <Loader2 className="w-3 h-3 animate-spin" />
                        ) : (
                          <Download className="w-3 h-3" />
                        )}
                        Import
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}