import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { ListMusic, Plus, Loader2, Music, ChevronRight, Download, X, Youtube, Link2, ClipboardPaste } from 'lucide-react'
import { getPlaylists, getSpotifyPlaylists, importSpotifyPlaylist, importYouTubePlaylist, previewLastfm, importLastfm, importPastedSongs, type PlaylistResponse, type SpotifyPlaylistItem, type LastfmPreviewResponse } from '../lib/api'

export default function Playlists() {
  const [playlists, setPlaylists] = useState<PlaylistResponse[]>([])
  const [spotifyPlaylists, setSpotifyPlaylists] = useState<SpotifyPlaylistItem[]>([])
  const [showImport, setShowImport] = useState(false)
  const [showYouTubeImport, setShowYouTubeImport] = useState(false)
  const [youtubeUrl, setYoutubeUrl] = useState('')
  const [importingYouTube, setImportingYouTube] = useState(false)
  const [importing, setImporting] = useState<string | null>(null)
  const [loadingSpotify, setLoadingSpotify] = useState(false)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [showLastfmImport, setShowLastfmImport] = useState(false)
  const [lastfmUsername, setLastfmUsername] = useState('')
  const [lastfmPeriod, setLastfmPeriod] = useState('overall')
  const [lastfmPreview, setLastfmPreview] = useState<LastfmPreviewResponse | null>(null)
  const [loadingLastfmPreview, setLoadingLastfmPreview] = useState(false)
  const [importingLastfm, setImportingLastfm] = useState(false)
  const [showPasteImport, setShowPasteImport] = useState(false)
  const [pasteName, setPasteName] = useState('')
  const [pasteText, setPasteText] = useState('')
  const [importingPaste, setImportingPaste] = useState(false)

  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 handleYouTubeImport = async () => {
    if (!youtubeUrl.trim()) return
    setImportingYouTube(true)
    setError('')
    try {
      const imported = await importYouTubePlaylist(youtubeUrl.trim())
      setPlaylists((prev) => [...prev, imported])
      setYoutubeUrl('')
      setShowYouTubeImport(false)
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to import YouTube Music playlist')
    } finally {
      setImportingYouTube(false)
    }
  }

  const handleLastfmPreview = async () => {
    if (!lastfmUsername.trim()) return
    setLoadingLastfmPreview(true)
    setError('')
    setLastfmPreview(null)
    try {
      const data = await previewLastfm(lastfmUsername.trim())
      setLastfmPreview(data)
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Last.fm user not found')
    } finally {
      setLoadingLastfmPreview(false)
    }
  }

  const handleLastfmImport = async () => {
    if (!lastfmUsername.trim()) return
    setImportingLastfm(true)
    setError('')
    try {
      const imported = await importLastfm(lastfmUsername.trim(), lastfmPeriod)
      setPlaylists((prev) => [...prev, imported])
      setLastfmUsername('')
      setLastfmPreview(null)
      setShowLastfmImport(false)
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to import from Last.fm')
    } finally {
      setImportingLastfm(false)
    }
  }

  const handlePasteImport = async () => {
    if (!pasteName.trim() || !pasteText.trim()) return
    setImportingPaste(true)
    setError('')
    try {
      const imported = await importPastedSongs(pasteName.trim(), pasteText.trim())
      setPlaylists((prev) => [...prev, imported])
      setPasteName('')
      setPasteText('')
      setShowPasteImport(false)
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to import pasted songs')
    } finally {
      setImportingPaste(false)
    }
  }

  const parsedLineCount = pasteText
    .split('\n')
    .filter((line) => line.trim().length > 0).length

  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>
        <div className="flex items-center gap-2">
          <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>
          <button
            onClick={() => setShowYouTubeImport(true)}
            className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
          >
            <Youtube className="w-4 h-4" />
            Import from YouTube Music
          </button>
          <button
            onClick={() => setShowLastfmImport(true)}
            className="flex items-center gap-2 px-5 py-2.5 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm"
          >
            <Music className="w-4 h-4" />
            Import from Last.fm
          </button>
          <button
            onClick={() => setShowPasteImport(true)}
            className="flex items-center gap-2 px-5 py-2.5 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm"
          >
            <ClipboardPaste className="w-4 h-4" />
            Paste Your Songs
          </button>
        </div>
      </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 playlists from Spotify or YouTube Music to start getting personalized music recommendations
          </p>
          <div className="flex items-center justify-center gap-3">
            <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 from Spotify
            </button>
            <button
              onClick={() => setShowYouTubeImport(true)}
              className="inline-flex items-center gap-2 px-6 py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm"
            >
              <Youtube className="w-4 h-4" />
              Import from YouTube Music
            </button>
            <button
              onClick={() => setShowLastfmImport(true)}
              className="inline-flex items-center gap-2 px-6 py-3 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm"
            >
              <Music className="w-4 h-4" />
              Import from Last.fm
            </button>
            <button
              onClick={() => setShowPasteImport(true)}
              className="inline-flex items-center gap-2 px-6 py-3 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm"
            >
              <ClipboardPaste className="w-4 h-4" />
              Paste Your Songs
            </button>
          </div>
        </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>
      )}

      {/* YouTube Music Import Modal */}
      {showYouTubeImport && (
        <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 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 YouTube Music</h2>
              <button
                onClick={() => setShowYouTubeImport(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="p-6 space-y-4">
              <p className="text-sm text-charcoal-muted">
                Paste a public YouTube Music playlist URL to import its tracks.
              </p>
              <div className="flex items-center gap-2">
                <div className="relative flex-1">
                  <Link2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-charcoal-muted/50" />
                  <input
                    type="url"
                    value={youtubeUrl}
                    onChange={(e) => setYoutubeUrl(e.target.value)}
                    placeholder="https://music.youtube.com/playlist?list=..."
                    className="w-full pl-10 pr-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
                  />
                </div>
              </div>
              <button
                onClick={handleYouTubeImport}
                disabled={importingYouTube || !youtubeUrl.trim()}
                className="w-full py-3 bg-red-600 text-white font-medium rounded-xl hover:bg-red-700 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {importingYouTube ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Importing...
                  </>
                ) : (
                  <>
                    <Download className="w-4 h-4" />
                    Import Playlist
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Last.fm Import Modal */}
      {showLastfmImport && (
        <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 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 Last.fm</h2>
              <button
                onClick={() => { setShowLastfmImport(false); setLastfmPreview(null); setLastfmUsername(''); }}
                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="p-6 space-y-4">
              <p className="text-sm text-charcoal-muted">
                Enter your Last.fm username to import your top tracks. No login required.
              </p>
              <div>
                <label className="block text-sm font-medium text-charcoal mb-1">Username</label>
                <input
                  type="text"
                  value={lastfmUsername}
                  onChange={(e) => { setLastfmUsername(e.target.value); setLastfmPreview(null); }}
                  placeholder="your-lastfm-username"
                  className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-charcoal mb-1">Time Period</label>
                <select
                  value={lastfmPeriod}
                  onChange={(e) => setLastfmPeriod(e.target.value)}
                  className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
                >
                  <option value="overall">All Time</option>
                  <option value="7day">Last 7 Days</option>
                  <option value="1month">Last Month</option>
                  <option value="3month">Last 3 Months</option>
                  <option value="6month">Last 6 Months</option>
                  <option value="12month">Last Year</option>
                </select>
              </div>

              <div className="flex gap-2">
                <button
                  onClick={handleLastfmPreview}
                  disabled={loadingLastfmPreview || !lastfmUsername.trim()}
                  className="flex-1 py-3 bg-charcoal/10 text-charcoal font-medium rounded-xl hover:bg-charcoal/20 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {loadingLastfmPreview ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Checking...
                    </>
                  ) : (
                    'Preview'
                  )}
                </button>
                <button
                  onClick={handleLastfmImport}
                  disabled={importingLastfm || !lastfmUsername.trim()}
                  className="flex-1 py-3 bg-[#d51007] text-white font-medium rounded-xl hover:bg-[#b30d06] transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
                >
                  {importingLastfm ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Importing...
                    </>
                  ) : (
                    <>
                      <Download className="w-4 h-4" />
                      Import
                    </>
                  )}
                </button>
              </div>

              {lastfmPreview && (
                <div className="bg-cream/50 rounded-xl p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-charcoal">{lastfmPreview.display_name}</span>
                    <span className="text-xs text-charcoal-muted">{lastfmPreview.track_count} top tracks</span>
                  </div>
                  <div className="space-y-2">
                    {lastfmPreview.sample_tracks.map((t, i) => (
                      <div key={i} className="flex items-center gap-3 text-sm">
                        <span className="text-charcoal-muted w-5 text-right">{i + 1}.</span>
                        <div className="flex-1 min-w-0">
                          <span className="text-charcoal font-medium truncate block">{t.title}</span>
                          <span className="text-charcoal-muted text-xs">{t.artist} &middot; {t.playcount} plays</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Paste Songs Import Modal */}
      {showPasteImport && (
        <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 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">Paste Your Songs</h2>
              <button
                onClick={() => setShowPasteImport(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="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-charcoal mb-1.5">Playlist name</label>
                <input
                  type="text"
                  value={pasteName}
                  onChange={(e) => setPasteName(e.target.value)}
                  placeholder="My favorite songs"
                  className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
                />
              </div>
              <div>
                <div className="flex items-center justify-between mb-1.5">
                  <label className="block text-sm font-medium text-charcoal">Songs</label>
                  {parsedLineCount > 0 && (
                    <span className="text-xs text-purple font-medium">
                      {parsedLineCount} {parsedLineCount === 1 ? 'song' : 'songs'} detected
                    </span>
                  )}
                </div>
                <textarea
                  value={pasteText}
                  onChange={(e) => setPasteText(e.target.value)}
                  placeholder={`Paste your songs, one per line:\n\nRadiohead - Everything In Its Right Place\nTame Impala - Let It Happen\nBeach House - Space Song\nLevitation by Beach House\nPink Floyd: Comfortably Numb`}
                  rows={8}
                  className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm resize-none font-mono"
                />
                <p className="text-xs text-charcoal-muted mt-1.5">
                  Supports formats: Artist - Title, Title by Artist, Artist: Title
                </p>
              </div>
              <button
                onClick={handlePasteImport}
                disabled={importingPaste || !pasteName.trim() || !pasteText.trim()}
                className="w-full py-3 bg-charcoal text-white font-medium rounded-xl hover:bg-charcoal/80 transition-colors cursor-pointer border-none text-sm disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {importingPaste ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Importing...
                  </>
                ) : (
                  <>
                    <Download className="w-4 h-4" />
                    Import {parsedLineCount > 0 ? `${parsedLineCount} Songs` : 'Songs'}
                  </>
                )}
              </button>
            </div>
          </div>
        </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>
  )
}