"use client"

import Link from "next/link"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Calendar, MapPin, Youtube, Music2 } from "lucide-react"
import { Show } from "@/types/models"

interface DateGroupedListProps {
    shows: Show[]
}

export function DateGroupedList({ shows }: DateGroupedListProps) {
    if (shows.length === 0) {
        return (
            <div className="text-center py-12 text-muted-foreground">
                No shows found matching your filters.
            </div>
        )
    }

    // Group shows by date
    const groupedShows: Record<string, Show[]> = {}

    shows.forEach(show => {
        // Use local date string to avoid timezone shifts if possible, or usually just split T
        const dateKey = new Date(show.date).toLocaleDateString(undefined, {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        })

        if (!groupedShows[dateKey]) {
            groupedShows[dateKey] = []
        }
        groupedShows[dateKey].push(show)
    })

    // Sort dates (descending) - assuming API returned sorted, but safe to re-sort keys if list order isn't guaranteed
    // Actually relying on input order is safer if we trust the API to sort by date desc.
    // Let's just iterate over the unique keys in the order they appear (which will be desc if input is desc)
    const uniqueDates = Array.from(new Set(shows.map(s =>
        new Date(s.date).toLocaleDateString(undefined, {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        })
    )))

    return (
        <div className="space-y-8">
            {uniqueDates.map(dateStr => (
                <div key={dateStr} className="space-y-4">
                    <div className="sticky top-14 z-10 bg-background/95 backdrop-blur py-2 border-b">
                        <h2 className="text-xl font-bold flex items-center gap-2">
                            <Calendar className="h-5 w-5 text-primary" />
                            {dateStr}
                        </h2>
                    </div>

                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                        {groupedShows[dateStr].map(show => (
                            <Link key={show.id} href={`/shows/${show.slug}`} className="block group">
                                <Card className="h-full transition-all duration-300 hover:scale-[1.02] hover:shadow-lg group-hover:border-primary/50 relative overflow-hidden">
                                    {/* Vertical Stripe/Badge */}
                                    {show.vertical && (
                                        <div className="absolute top-0 left-0 w-1 h-full bg-primary/50 group-hover:bg-primary transition-colors" />
                                    )}

                                    {show.youtube_link && (
                                        <div className="absolute top-2 right-2 bg-red-500/10 text-red-500 p-1.5 rounded-full" title="Full show video available">
                                            <Youtube className="h-4 w-4" />
                                        </div>
                                    )}

                                    <CardHeader className="pl-5 pb-2"> {/* Added padding-left for stripe */}
                                        <CardTitle className="text-lg flex flex-col gap-1">
                                            {show.vertical && (
                                                <span className="text-xs font-medium text-primary uppercase tracking-wider flex items-center gap-1">
                                                    <Music2 className="h-3 w-3" />
                                                    {show.vertical.name}
                                                </span>
                                            )}
                                            <span className="group-hover:text-primary transition-colors">
                                                {show.venue?.name}
                                            </span>
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent className="pl-5 pt-0">
                                        <div className="flex items-center gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors">
                                            <MapPin className="h-3.5 w-3.5" />
                                            <span>
                                                {show.venue?.city}, {show.venue?.state}
                                            </span>
                                        </div>
                                    </CardContent>
                                </Card>
                            </Link>
                        ))}
                    </div>
                </div>
            ))}
        </div>
    )
}