"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar, MapPin } from "lucide-react"
import Link from "next/link"
import { getApiUrl } from "@/lib/api-config"

export function UserAttendanceList({ userId }: { userId: number }) {
    const [shows, setShows] = useState<any[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const token = localStorage.getItem("token")
        if (!token) return

        fetch(`${getApiUrl()}/users/${userId}/attendance`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => res.json())
            .then(data => setShows(data))
            .catch(err => console.error(err))
            .finally(() => setLoading(false))
    }, [userId])

    if (loading) return <div>Loading attendance...</div>

    if (shows.length === 0) {
        return (
            <div className="text-center py-12">
                <Calendar className="h-12 w-12 text-muted-foreground/30 mx-auto mb-4" />
                <p className="text-muted-foreground font-medium">No shows attended yet</p>
                <p className="text-sm text-muted-foreground/70 mt-1">Mark shows as attended to track your concert history</p>
                <Link href="/shows" className="text-primary hover:underline text-sm mt-4 inline-block">Browse shows</Link>
            </div>
        )
    }

    return (
        <div className="space-y-4">
            {shows.map((show) => (
                <Link key={show.id} href={`/shows/${show.id}`}>
                    <Card className="hover:bg-muted/50 transition-colors">
                        <CardContent className="p-4 flex items-center justify-between">
                            <div className="flex items-center gap-4">
                                <Calendar className="h-4 w-4 text-muted-foreground" />
                                <span className="font-medium">{new Date(show.date).toLocaleDateString()}</span>
                            </div>
                            {show.venue && (
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <MapPin className="h-3 w-3" />
                                    {show.venue.name}
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </Link>
            ))}
        </div>
    )
}