"use client"

import { useState, useMemo } from "react"
import { useQuery } from "@tanstack/react-query"
import { getTracks, getStats } from "@/lib/api"
import type { FilterParams, Track } from "@/lib/types"
import FilterPanel from "@/components/FilterPanel"
import AudioPlayer from "@/components/AudioPlayer"

// Helper function to format Discogs genre labels (e.g., "Pop---Ballad" -> ["Pop", "Ballad"])
function formatGenre(genre: string): { category: string; subgenre: string } {
  const parts = genre.split('---')
  return {
    category: parts[0] || genre,
    subgenre: parts[1] || ''
  }
}

// Extract unique values for filter options
function extractFilterOptions(tracks: Track[]) {
  const genres = new Set<string>()
  const moods = new Set<string>()
  const instruments = new Set<string>()
  const keys = new Set<string>()

  tracks.forEach(track => {
    // Extract genre category (before "---")
    const genreCategory = formatGenre(track.classification.genre.primary).category
    genres.add(genreCategory)

    // Extract primary mood
    if (track.classification.mood.primary) {
      moods.add(track.classification.mood.primary)
    }

    // Extract instruments
    track.classification.instruments?.forEach(instrument => {
      instruments.add(instrument)
    })

    // Extract key
    if (track.features.key) {
      keys.add(track.features.key)
    }
  })

  return {
    genres: Array.from(genres).sort(),
    moods: Array.from(moods).sort(),
    instruments: Array.from(instruments).sort(),
    keys: Array.from(keys).sort(),
  }
}

export default function Home() {
  const [filters, setFilters] = useState<FilterParams>({})
  const [page, setPage] = useState(0)
  const [currentTrack, setCurrentTrack] = useState<Track | null>(null)
  const limit = 50

  const { data: tracksData, isLoading: isLoadingTracks } = useQuery({
    queryKey: ['tracks', filters, page],
    queryFn: () => getTracks({ ...filters, skip: page * limit, limit }),
  })

  const { data: stats } = useQuery({
    queryKey: ['stats'],
    queryFn: getStats,
  })

  // Extract filter options from displayed tracks
  // For better UX, we use the current page's tracks to populate filters
  // TODO: Add a dedicated API endpoint to get all unique filter values
  const filterOptions = useMemo(() => {
    if (!tracksData?.tracks || tracksData.tracks.length === 0) {
      return { genres: [], moods: [], instruments: [], keys: [] }
    }
    return extractFilterOptions(tracksData.tracks)
  }, [tracksData])

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <h1 className="text-3xl font-bold text-gray-900">Audio Classifier</h1>
          <p className="text-gray-600">Intelligent music library management</p>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-32">
        {/* Stats */}
        {stats && (
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div className="bg-white p-4 rounded-lg shadow">
              <p className="text-gray-600 text-sm">Total Tracks</p>
              <p className="text-2xl font-bold">{stats.total_tracks}</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow">
              <p className="text-gray-600 text-sm">Avg BPM</p>
              <p className="text-2xl font-bold">{stats.average_bpm}</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow">
              <p className="text-gray-600 text-sm">Total Hours</p>
              <p className="text-2xl font-bold">{stats.total_duration_hours}h</p>
            </div>
            <div className="bg-white p-4 rounded-lg shadow">
              <p className="text-gray-600 text-sm">Genres</p>
              <p className="text-2xl font-bold">{stats.genres.length}</p>
            </div>
          </div>
        )}

        {/* Filter Panel */}
        <FilterPanel
          filters={filters}
          onFiltersChange={(newFilters) => {
            setFilters(newFilters)
            setPage(0) // Reset to first page when filters change
          }}
          availableGenres={filterOptions.genres}
          availableMoods={filterOptions.moods}
          availableInstruments={filterOptions.instruments}
          availableKeys={filterOptions.keys}
        />

        {/* Tracks List */}
        <div className="bg-white rounded-lg shadow">
          <div className="p-4 border-b">
            <h2 className="text-xl font-semibold">Music Library</h2>
            <p className="text-gray-600 text-sm">
              {tracksData?.total || 0} tracks total
            </p>
          </div>

          {isLoadingTracks ? (
            <div className="p-8 text-center text-gray-600">Loading...</div>
          ) : tracksData?.tracks.length === 0 ? (
            <div className="p-8 text-center text-gray-600">
              No tracks found. Start by analyzing your audio library!
            </div>
          ) : (
            <div className="divide-y">
              {tracksData?.tracks.map((track) => (
                <div key={track.id} className="p-4 hover:bg-gray-50">
                  <div className="flex justify-between items-start">
                    <div className="flex-1">
                      <h3 className="font-medium text-gray-900">{track.filename}</h3>

                      {/* Primary metadata */}
                      <div className="mt-1 flex flex-wrap gap-2">
                        {(() => {
                          const genre = formatGenre(track.classification.genre.primary)
                          return (
                            <>
                              <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-semibold">
                                {genre.category}
                              </span>
                              {genre.subgenre && (
                                <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">
                                  {genre.subgenre}
                                </span>
                              )}
                            </>
                          )
                        })()}
                        <span className="inline-flex items-center px-2 py-1 rounded text-xs bg-purple-100 text-purple-800">
                          {track.classification.mood.primary}
                        </span>
                        <span className="text-xs text-gray-500">
                          {Math.round(track.features.tempo_bpm)} BPM
                        </span>
                        <span className="text-xs text-gray-500">
                          {track.features.key}
                        </span>
                        <span className="text-xs text-gray-500">
                          {Math.floor(track.duration_seconds / 60)}:{String(Math.floor(track.duration_seconds % 60)).padStart(2, '0')}
                        </span>
                      </div>

                      {/* Secondary genres */}
                      {track.classification.genre.secondary && track.classification.genre.secondary.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                          <span className="text-xs text-gray-400">Also:</span>
                          {track.classification.genre.secondary.slice(0, 3).map((g, i) => {
                            const genre = formatGenre(g)
                            return (
                              <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600">
                                {genre.category}{genre.subgenre && ` • ${genre.subgenre}`}
                              </span>
                            )
                          })}
                        </div>
                      )}

                      {/* Secondary moods */}
                      {track.classification.mood.secondary && track.classification.mood.secondary.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                          <span className="text-xs text-gray-400">Moods:</span>
                          {track.classification.mood.secondary.map((mood, i) => (
                            <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-purple-50 text-purple-600">
                              {mood}
                            </span>
                          ))}
                        </div>
                      )}

                      {/* Instruments */}
                      {track.classification.instruments && track.classification.instruments.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                          <span className="text-xs text-gray-400">Instruments:</span>
                          {track.classification.instruments.slice(0, 6).map((instrument, i) => (
                            <span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-green-50 text-green-700">
                              {instrument}
                            </span>
                          ))}
                          {track.classification.instruments.length > 6 && (
                            <span className="text-xs text-gray-400">+{track.classification.instruments.length - 6} more</span>
                          )}
                        </div>
                      )}
                    </div>
                    <div className="ml-4 flex gap-2">
                      <button
                        onClick={() => setCurrentTrack(track)}
                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
                      >
                        {currentTrack?.id === track.id ? '▶ Playing' : 'Play'}
                      </button>
                      <a
                        href={`${process.env.NEXT_PUBLIC_API_URL}/api/audio/download/${track.id}`}
                        download
                        className="px-3 py-1 text-sm bg-gray-600 text-white rounded hover:bg-gray-700"
                      >
                        Download
                      </a>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Pagination */}
          {tracksData && tracksData.total > limit && (
            <div className="p-4 border-t flex justify-between items-center">
              <button
                onClick={() => setPage(p => Math.max(0, p - 1))}
                disabled={page === 0}
                className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
              >
                Previous
              </button>
              <span className="text-sm text-gray-600">
                Page {page + 1} of {Math.ceil(tracksData.total / limit)}
              </span>
              <button
                onClick={() => setPage(p => p + 1)}
                disabled={(page + 1) * limit >= tracksData.total}
                className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
              >
                Next
              </button>
            </div>
          )}
        </div>

        {/* Instructions */}
        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
          <h3 className="font-semibold text-blue-900 mb-2">Getting Started</h3>
          <ol className="list-decimal list-inside space-y-1 text-blue-800 text-sm">
            <li>Make sure the backend is running (<code>docker-compose up</code>)</li>
            <li>Use the API to analyze your audio library:
              <pre className="mt-2 bg-blue-100 p-2 rounded text-xs">
                {`curl -X POST http://localhost:8000/api/analyze/folder \\
  -H "Content-Type: application/json" \\
  -d '{"path": "/audio/your_music", "recursive": true}'`}
              </pre>
            </li>
            <li>Refresh this page to see your analyzed tracks</li>
          </ol>
        </div>
      </main>

      {/* Fixed Audio Player at bottom - always visible */}
      <div className="fixed bottom-0 left-0 right-0 z-50">
        <AudioPlayer track={currentTrack} />
      </div>
    </div>
  )
}