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

const trendingTracks = [
  {
    id: "1",
    title: "Die With A Smile",
    artist: "Lady Gaga, Bruno Mars",
    plays: "1.2B",
    image: "/trending-track-1.jpg",
    change: "+2",
  },
  { id: "2", title: "APT.", artist: "ROSÉ, Bruno Mars", plays: "980M", image: "/trending-track-2.jpg", change: "+5" },
  {
    id: "3",
    title: "Birds of a Feather",
    artist: "Billie Eilish",
    plays: "890M",
    image: "/trending-track-3.jpg",
    change: "-1",
  },
  { id: "4", title: "Taste", artist: "Sabrina Carpenter", plays: "750M", image: "/trending-track-4.jpg", change: "+3" },
  {
    id: "5",
    title: "Good Luck, Babe!",
    artist: "Chappell Roan",
    plays: "680M",
    image: "/trending-track-5.jpg",
    change: "New",
  },
  {
    id: "6",
    title: "Espresso",
    artist: "Sabrina Carpenter",
    plays: "620M",
    image: "/trending-track-6.jpg",
    change: "-2",
  },
]

export default async function TrendingPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params

  return (
    <div className="min-h-screen bg-background pb-24">
      {/* Hero */}
      <div className="relative h-48 bg-gradient-to-br from-rose-500 to-orange-600">
        <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent" />

        {/* Header */}
        <div className="absolute left-0 right-0 top-0 z-10 flex items-center gap-4 p-4">
          <Link href="/search" className="text-white hover:text-white/80">
            <ChevronLeft className="h-6 w-6" />
          </Link>
        </div>

        {/* Title */}
        <div className="absolute bottom-4 left-4 right-4 z-10">
          <div className="flex items-center gap-2 mb-1">
            <TrendingUp className="h-5 w-5 text-white" />
            <span className="text-sm text-white/80">Tendances</span>
          </div>
          <h1 className="text-3xl font-bold text-white">Top 50 France</h1>
          <p className="text-white/70">Les titres les plus écoutés cette semaine</p>
        </div>
      </div>

      <div className="mx-auto max-w-md px-4 py-6">
        {/* Play All Button */}
        <div className="mb-6 flex justify-end">
          <Button className="rounded-full gap-2">
            <Play className="h-4 w-4 ml-0.5" />
            Tout lire
          </Button>
        </div>

        {/* Track List */}
        <div className="space-y-1">
          {trendingTracks.map((track, index) => (
            <Link
              key={track.id}
              href="/now-playing"
              className="flex items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary"
            >
              <span className="w-6 text-center text-lg font-bold text-muted-foreground">{index + 1}</span>
              <div className="relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-lg">
                <Image src={track.image || "/placeholder.svg"} alt={track.title} fill className="object-cover" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="truncate font-medium text-foreground">{track.title}</p>
                <p className="truncate text-sm text-muted-foreground">{track.artist}</p>
              </div>
              <div className="text-right">
                <p className="text-sm text-muted-foreground">{track.plays}</p>
                <p
                  className={`text-xs ${track.change.startsWith("+") || track.change === "New" ? "text-green-500" : "text-red-500"}`}
                >
                  {track.change}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
