"use client"

import Link from "next/link"
import { ChevronLeft, Trash2, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"
import { useUser } from "@/components/user-provider"
import { usePlayer } from "@/components/player-provider"
import Image from "next/image"
import { formatDuration } from "@/lib/music-data"

export default function HistoryPage() {
  const { listeningHistory, clearHistory } = useUser()
  const { playTrack, currentTrack, isPlaying } = usePlayer()

  const formatTime = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(hours / 24)

    if (days > 0) return `Il y a ${days} jour${days > 1 ? "s" : ""}`
    if (hours > 0) return `Il y a ${hours} heure${hours > 1 ? "s" : ""}`
    return "À l'instant"
  }

  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">Historique</h1>
          </div>
          {listeningHistory.length > 0 && (
            <Button variant="ghost" size="sm" onClick={clearHistory} className="text-muted-foreground">
              <Trash2 className="mr-2 h-4 w-4" />
              Effacer
            </Button>
          )}
        </div>

        {listeningHistory.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center">
            <Clock className="mb-4 h-16 w-16 text-muted-foreground/50" />
            <h2 className="mb-2 text-lg font-semibold text-foreground">Aucun historique</h2>
            <p className="text-muted-foreground">Votre historique d{"'"}écoute apparaîtra ici</p>
          </div>
        ) : (
          <div className="space-y-2">
            {listeningHistory.map((item, index) => {
              const isCurrentTrack = currentTrack?.id === item.track.id
              return (
                <button
                  key={`${item.track.id}-${index}`}
                  onClick={() => playTrack(item.track)}
                  className="flex w-full items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary"
                >
                  <div className="relative h-12 w-12 overflow-hidden rounded">
                    <Image
                      src={item.track.image || "/placeholder.svg"}
                      alt={item.track.title}
                      fill
                      className="object-cover"
                    />
                    {isCurrentTrack && isPlaying && (
                      <div className="absolute inset-0 flex items-center justify-center bg-black/50">
                        <div className="flex gap-0.5">
                          {[1, 2, 3].map((i) => (
                            <div
                              key={i}
                              className="w-1 animate-pulse rounded-full bg-primary"
                              style={{
                                height: `${8 + i * 4}px`,
                                animationDelay: `${i * 0.1}s`,
                              }}
                            />
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="flex-1 text-left min-w-0">
                    <p className={`truncate font-medium ${isCurrentTrack ? "text-primary" : "text-foreground"}`}>
                      {item.track.title}
                    </p>
                    <p className="truncate text-sm text-muted-foreground">{item.track.artist}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-muted-foreground">{formatTime(item.playedAt)}</p>
                    <p className="text-xs text-muted-foreground">{formatDuration(item.track.duration)}</p>
                  </div>
                </button>
              )
            })}
          </div>
        )}
      </div>

      <BottomNav />
    </div>
  )
}
