"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Calendar, MapPin, Ticket } from "lucide-react"
import Link from "next/link"
import { getApiUrl } from "@/lib/api-config"
import { Skeleton } from "@/components/ui/skeleton"
import { Badge } from "@/components/ui/badge"

export function RecommendedShows() {
    const [shows, setShows] = useState<any[]>([])
    const [loading, setLoading] = useState(true)

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

        fetch(`${getApiUrl()}/recommendations/shows/recent?limit=4`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => res.json())
            .then(data => setShows(data))
            .catch(err => console.error(err))
            .finally(() => setLoading(false))
    }, [])

    if (loading) return <Skeleton className="h-48 w-full" />

    if (shows.length === 0) return null

    return (
        <Card>
            <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center gap-2">
                    <Ticket className="h-5 w-5 text-primary" />
                    Recommended Shows
                </CardTitle>
                <CardDescription>Recent shows from bands you follow</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    {shows.map((show) => (
                        <div key={show.id} className="flex items-start justify-between border-b last:border-0 pb-3 last:pb-0">
                            <div className="space-y-1">
                                <Link
                                    href={`/shows/${show.id}`} // Using ID as slug fallback for now
                                    className="font-medium hover:underline text-primary"
                                >
                                    {show.date}
                                </Link>
                                <div className="text-sm text-muted-foreground flex items-center gap-2">
                                    <MapPin className="h-3 w-3" />
                                    {show.venue_name}
                                </div>
                            </div>
                            <Badge variant="outline" className="text-xs">
                                {show.vertical_name}
                            </Badge>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>
    )
}