"use client"

import Image from "next/image"
import Link from "next/link"
import { ChevronLeft, Plus, Play, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"
import useSWR from "swr"
import { useAuth } from "@/components/auth-provider"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function PlaylistsPage() {
  const { user } = useAuth()
  const { data: playlistsData, isLoading } = useSWR(user ? "/api/playlists" : null, fetcher)

  const playlists = playlistsData?.data || []

  return (
    <div className="min-h-screen bg-background pb-24">
      <div className="mx-auto max-w-md px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/library" className="text-foreground hover:text-primary">
              <ChevronLeft className="h-6 w-6" />
            </Link>
            <h1 className="text-xl font-bold text-foreground">Playlists</h1>
          </div>
          <Link href="/playlist/create">
            <Button size="icon" variant="ghost">
              <Plus className="h-5 w-5" />
            </Button>
          </Link>
        </div>

        {/* Create Playlist Button */}
        <Link href="/playlist/create">
          <button className="mb-6 flex w-full items-center gap-4 rounded-xl bg-secondary/50 p-4 transition-colors hover:bg-secondary">
            <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-primary/20">
              <Plus className="h-6 w-6 text-primary" />
            </div>
            <div className="text-left">
              <p className="font-medium text-foreground">Créer une playlist</p>
              <p className="text-sm text-muted-foreground">Ajoutez vos morceaux préférés</p>
            </div>
          </button>
        </Link>

        {isLoading ? (
          <div className="flex justify-center py-12">
            <Loader2 className="w-8 h-8 animate-spin text-primary" />
          </div>
        ) : playlists.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-muted-foreground mb-4">Aucune playlist pour le moment</p>
            <Link href="/playlist/create">
              <Button className="bg-primary">Créer votre première playlist</Button>
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-4">
            {playlists.map((playlist: any) => (
              <Link key={playlist.id} href={`/playlist/${playlist.id}`} className="group">
                <div className="relative mb-2 aspect-square overflow-hidden rounded-xl">
                  <Image
                    src={playlist.cover_url || "/placeholder.svg?height=300&width=300&query=playlist"}
                    alt={playlist.name || playlist.title}
                    fill
                    className="object-cover transition-transform group-hover:scale-105"
                  />
                  <div className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-all group-hover:bg-black/40 group-hover:opacity-100">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground">
                      <Play className="h-5 w-5 ml-0.5" />
                    </div>
                  </div>
                </div>
                <p className="truncate font-medium text-foreground">{playlist.name || playlist.title}</p>
                <p className="text-sm text-muted-foreground">{playlist.track_count || 0} titres</p>
              </Link>
            ))}
          </div>
        )}
      </div>

      <BottomNav />
    </div>
  )
}
