"use client"

import Link from "next/link"
import { ChevronLeft, UserMinus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"
import { useUser } from "@/components/user-provider"
import Image from "next/image"

export default function FollowingPage() {
  const { getFollowedArtists, toggleFollowArtist } = useUser()
  const followedArtists = getFollowedArtists()

  const formatFollowers = (count: number) => {
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`
    if (count >= 1000) return `${(count / 1000).toFixed(0)}K`
    return count.toString()
  }

  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 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">Artistes suivis</h1>
        </div>

        {followedArtists.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <UserMinus className="mb-4 h-16 w-16 text-muted-foreground/50" />
            <h2 className="mb-2 text-lg font-semibold text-foreground">Aucun artiste suivi</h2>
            <p className="mb-4 text-muted-foreground">Suivez des artistes pour ne rien manquer</p>
            <Link href="/artists">
              <Button>Découvrir des artistes</Button>
            </Link>
          </div>
        ) : (
          <div className="space-y-2">
            {followedArtists.map((artist) => (
              <div key={artist.id} className="flex items-center gap-3 rounded-lg p-2">
                <Link href={`/artist/${artist.id}`} className="flex flex-1 items-center gap-3">
                  <div className="relative h-14 w-14 overflow-hidden rounded-full">
                    <Image src={artist.image || "/placeholder.svg"} alt={artist.name} fill className="object-cover" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="truncate font-medium text-foreground">{artist.name}</p>
                    <p className="text-sm text-muted-foreground">{formatFollowers(artist.followers)} abonnés</p>
                  </div>
                </Link>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => toggleFollowArtist(artist.id)}
                  className="text-muted-foreground"
                >
                  Suivi
                </Button>
              </div>
            ))}
          </div>
        )}
      </div>

      <BottomNav />
    </div>
  )
}
