'use client'

import { useState, useEffect, useRef } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { JefflixLogo } from '@/components/jefflix-logo'
import { SongRow } from '@/components/music/search-results'
import { useMusicPlayer, type Track } from '@/components/music/music-provider'
import { Search, Music, Download, Loader2, ArrowLeft, AlertCircle } from 'lucide-react'
import Link from 'next/link'

interface SlskdResult {
  username: string
  freeSlots: number
  speed: number
  files: {
    filename: string
    size: number
    bitRate: number
    length: number
  }[]
}

export default function MusicPage() {
  const { state } = useMusicPlayer()
  const [query, setQuery] = useState('')
  const [debouncedQuery, setDebouncedQuery] = useState('')
  const [songs, setSongs] = useState<Track[]>([])
  const [searching, setSearching] = useState(false)
  const [searchError, setSearchError] = useState('')
  const debounceRef = useRef<NodeJS.Timeout>(null)

  // Soulseek state
  const [slskMode, setSlskMode] = useState(false)
  const [slskSearchId, setSlskSearchId] = useState<string | null>(null)
  const [slskResults, setSlskResults] = useState<SlskdResult[]>([])
  const [slskSearching, setSlskSearching] = useState(false)
  const [downloading, setDownloading] = useState<string | null>(null)
  const pollRef = useRef<NodeJS.Timeout>(null)

  // Debounced Navidrome search
  useEffect(() => {
    if (slskMode) return
    debounceRef.current = setTimeout(() => setDebouncedQuery(query), 300)
    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
  }, [query, slskMode])

  useEffect(() => {
    if (!debouncedQuery || debouncedQuery.length < 2 || slskMode) {
      setSongs([])
      return
    }

    setSearching(true)
    setSearchError('')
    fetch(`/api/music/search?q=${encodeURIComponent(debouncedQuery)}`)
      .then((r) => r.json())
      .then((d) => {
        if (d.error) throw new Error(d.error)
        setSongs(d.songs || [])
      })
      .catch((e) => setSearchError(e.message))
      .finally(() => setSearching(false))
  }, [debouncedQuery, slskMode])

  // Cleanup slskd polling on unmount
  useEffect(() => {
    return () => { if (pollRef.current) clearTimeout(pollRef.current) }
  }, [])

  const searchSoulseek = async () => {
    setSlskMode(true)
    setSlskSearching(true)
    setSlskResults([])

    try {
      const res = await fetch('/api/music/slskd/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: query || debouncedQuery }),
      })
      const d = await res.json()
      if (d.error) throw new Error(d.error)
      setSlskSearchId(d.searchId)
      pollSlskResults(d.searchId)
    } catch {
      setSlskSearching(false)
    }
  }

  const pollSlskResults = (searchId: string) => {
    const poll = async () => {
      try {
        const res = await fetch(`/api/music/slskd/results/${searchId}`)
        const d = await res.json()
        setSlskResults(d.results || [])
        if (!d.isComplete) {
          pollRef.current = setTimeout(poll, 2000)
        } else {
          setSlskSearching(false)
        }
      } catch {
        setSlskSearching(false)
      }
    }
    poll()
  }

  const triggerDownload = async (username: string, files: SlskdResult['files']) => {
    const key = `${username}:${files[0]?.filename}`
    setDownloading(key)
    try {
      await fetch('/api/music/slskd/download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, files }),
      })
    } catch {}
    setDownloading(null)
  }

  const exitSlsk = () => {
    setSlskMode(false)
    setSlskSearchId(null)
    setSlskResults([])
    setSlskSearching(false)
    if (pollRef.current) clearTimeout(pollRef.current)
  }

  const hasPlayer = !!state.currentTrack

  return (
    <div className={`min-h-screen bg-background ${hasPlayer ? 'pb-20' : ''}`}>
      {/* Header */}
      <div className="border-b border-border">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="inline-block">
            <JefflixLogo size="small" />
          </Link>
          <Link href="/">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-1.5" />
              Home
            </Button>
          </Link>
        </div>
      </div>

      {/* Main */}
      <div className="container mx-auto px-4 py-12 md:py-16">
        <div className="max-w-2xl mx-auto">
          {/* Hero */}
          <div className="text-center space-y-4 mb-8">
            <div className="inline-block p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
              <Music className="h-10 w-10 text-purple-600 dark:text-purple-400" />
            </div>
            <h1 className="text-3xl font-bold font-marker">Music</h1>
            <p className="text-muted-foreground">
              Search the library, play songs, and manage playlists.
            </p>
          </div>

          {/* Search */}
          <div className="relative mb-6">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
            <input
              type="text"
              value={query}
              onChange={(e) => { setQuery(e.target.value); if (slskMode) exitSlsk() }}
              className="w-full pl-12 pr-4 py-3 rounded-lg border border-border bg-background focus:outline-none focus:ring-2 focus:ring-purple-500"
              placeholder="Search songs, artists, albums..."
              autoFocus
            />
          </div>

          {/* Soulseek mode toggle */}
          {slskMode && (
            <div className="flex items-center gap-2 mb-4">
              <Badge className="bg-yellow-600 text-white">Soulseek</Badge>
              <span className="text-sm text-muted-foreground">Searching peer-to-peer network</span>
              <button onClick={exitSlsk} className="text-sm text-primary hover:underline ml-auto">
                Back to Library
              </button>
            </div>
          )}

          {/* Navidrome Results */}
          {!slskMode && (
            <>
              {searching && (
                <div className="flex justify-center py-8">
                  <Loader2 className="h-6 w-6 animate-spin text-purple-600" />
                </div>
              )}

              {searchError && (
                <div className="flex items-center gap-2 p-4 bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400">
                  <AlertCircle className="h-5 w-5 flex-shrink-0" />
                  <p className="text-sm">{searchError}</p>
                </div>
              )}

              {!searching && songs.length > 0 && (
                <div className="border border-border rounded-lg divide-y divide-border overflow-hidden">
                  {songs.map((song, i) => (
                    <SongRow key={song.id} song={song} songs={songs} index={i} />
                  ))}
                </div>
              )}

              {!searching && debouncedQuery.length >= 2 && songs.length === 0 && !searchError && (
                <div className="text-center py-8 space-y-4">
                  <p className="text-muted-foreground">
                    No results for &ldquo;{debouncedQuery}&rdquo; in the library
                  </p>
                  <Button
                    onClick={searchSoulseek}
                    className="bg-yellow-600 hover:bg-yellow-700 text-white"
                  >
                    <Download className="h-4 w-4 mr-1.5" />
                    Search Soulseek
                  </Button>
                </div>
              )}

              {query.length > 0 && query.length < 2 && (
                <p className="text-sm text-muted-foreground text-center">
                  Type at least 2 characters to search
                </p>
              )}
            </>
          )}

          {/* Soulseek Results */}
          {slskMode && (
            <>
              {slskSearching && slskResults.length === 0 && (
                <div className="flex flex-col items-center gap-2 py-8">
                  <Loader2 className="h-6 w-6 animate-spin text-yellow-600" />
                  <p className="text-sm text-muted-foreground">Searching peer-to-peer network...</p>
                </div>
              )}

              {slskResults.length > 0 && (
                <div className="space-y-3">
                  {slskSearching && (
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      Still searching...
                    </div>
                  )}

                  {slskResults.map((result) => (
                    <div
                      key={`${result.username}-${result.files[0]?.filename}`}
                      className="border border-border rounded-lg p-4 space-y-2"
                    >
                      <div className="flex items-center justify-between">
                        <div>
                          <span className="text-sm font-medium">{result.username}</span>
                          <span className="text-xs text-muted-foreground ml-2">
                            {result.freeSlots > 0 ? `${result.freeSlots} free slots` : 'No free slots'}
                          </span>
                        </div>
                      </div>

                      {result.files.map((file) => {
                        const name = file.filename.split('\\').pop() || file.filename
                        const sizeMB = (file.size / 1024 / 1024).toFixed(1)
                        const key = `${result.username}:${file.filename}`

                        return (
                          <div key={file.filename} className="flex items-center gap-3 pl-2">
                            <div className="flex-1 min-w-0">
                              <div className="text-sm truncate">{name}</div>
                              <div className="text-xs text-muted-foreground">
                                {sizeMB} MB
                                {file.bitRate > 0 && ` · ${file.bitRate} kbps`}
                              </div>
                            </div>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => triggerDownload(result.username, [file])}
                              disabled={downloading === key}
                            >
                              {downloading === key ? (
                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                              ) : (
                                <Download className="h-3.5 w-3.5" />
                              )}
                            </Button>
                          </div>
                        )
                      })}
                    </div>
                  ))}
                </div>
              )}

              {!slskSearching && slskResults.length === 0 && slskSearchId && (
                <p className="text-center text-muted-foreground py-8">
                  No results found on Soulseek
                </p>
              )}
            </>
          )}

          {/* Info */}
          <div className="mt-12 p-6 bg-muted/50 rounded-lg space-y-3">
            <h3 className="font-bold mb-2">How does this work?</h3>
            <p className="text-sm text-muted-foreground">
              This searches your Navidrome music library. Songs play directly in the browser through a
              persistent audio player. Can&apos;t find what you&apos;re looking for? Search Soulseek to find
              and download music from the peer-to-peer network.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}