'use client'

import { useState, useEffect } from 'react'
import { usePartyStore } from '@/store/partyStore'
import { fetchTopCharts } from '@/lib/api'
import type { SearchResult } from '@/types'

function TopChartsCard({ tracks }: { tracks: string[] }) {
  const { loadPlaylist } = usePartyStore()
  const [launched, setLaunched] = useState(false)

  const handlePlay = () => {
    loadPlaylist(tracks)
    setLaunched(true)
    window.scrollTo({ top: 0, behavior: 'smooth' })
    setTimeout(() => setLaunched(false), 2500)
  }

  return (
    <div className="bg-surface border border-white/[0.07] rounded-app p-4 mb-5 relative overflow-hidden">
      <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" style={{ opacity: 0.8 }} />
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 mb-1.5">
            <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse shrink-0" />
            <span className="text-[10px] font-display font-bold tracking-[1.3px] uppercase text-accent">
              Прямо сейчас
            </span>
          </div>
          <h3 className="font-display font-bold text-[15px] text-app-text leading-tight">Топ чарт</h3>
          <p className="text-[11px] text-muted mt-0.5">{tracks.length} треков</p>
        </div>
        <button
          onClick={handlePlay}
          className="text-[12px] font-display font-bold px-3 py-1.5 rounded-[9px] transition-all duration-200 cursor-pointer whitespace-nowrap shrink-0 mt-1"
          style={{
            background: launched ? '#c8ff00' : 'rgba(200,255,0,0.15)',
            color: launched ? '#0a0a0f' : '#c8ff00',
          }}
        >
          {launched ? '▶ Играет' : '▶ Слушать'}
        </button>
      </div>
    </div>
  )
}

export default function SoloTab() {
  const [search, setSearch] = useState('')
  const [topTracks, setTopTracks] = useState<string[] | null>(null)
  const { loadPlaylist } = usePartyStore()

  useEffect(() => {
    fetchTopCharts().then((results: SearchResult[]) => {
      if (!results.length) { setTopTracks([]); return }
      setTopTracks(
        results.map((r) => (r.artist ? `${r.artist} — ${r.title}` : r.title))
      )
    })
  }, [])

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    const q = search.trim()
    if (!q) return
    loadPlaylist([q])
    setSearch('')
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <div className="animate-fadeUp">
      {topTracks === null && (
        <div className="bg-surface border border-white/[0.07] rounded-app p-4 mb-5 flex items-center gap-2.5 text-muted text-[13px]">
          <div className="w-3.5 h-3.5 rounded-full border-2 border-surface2 border-t-accent animate-spin shrink-0" />
          Загружаем чарт...
        </div>
      )}
      {topTracks !== null && topTracks.length > 0 && (
        <TopChartsCard tracks={topTracks} />
      )}

      <div className="bg-surface border border-white/[0.07] rounded-app p-4">
        <p className="text-[11px] font-display font-semibold tracking-[1.2px] uppercase text-muted mb-3">
          Быстрый поиск
        </p>
        <form onSubmit={handleSearch} className="flex gap-2">
          <input
            type="text"
            placeholder="Исполнитель — Название трека"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="flex-1 font-sans text-[13px] bg-surface2 border border-white/[0.07] rounded-[9px] px-3 py-2.5 text-app-text outline-none focus:border-accent/35 placeholder:text-muted transition-colors"
          />
          <button
            type="submit"
            disabled={!search.trim()}
            className="px-4 py-2.5 bg-accent text-bg font-display font-bold text-sm rounded-[9px] hover:brightness-110 active:scale-[0.97] transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
          >
            ▶
          </button>
        </form>
      </div>
    </div>
  )
}