"use client"

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

interface PerformanceVideo {
    type: "performance"
    id: number
    youtube_link: string
    show_id: number
    song_id: number
    song_title: string
    song_slug: string
    date: string
    show_slug: string
    venue_name: string
    venue_city: string
    venue_state: string | null
    performance_slug?: string
    venue_slug: string
}

interface ShowVideo {
    type: "full_show"
    id: number
    youtube_link: string
    date: string
    show_slug: string
    venue_name: string
    venue_city: string
    venue_state: string | null
    venue_slug: string
}

interface VideoStats {
    performance_videos: number
    full_show_videos: number
    total: number
}

export default function VideosPage() {
    const [performances, setPerformances] = useState<PerformanceVideo[]>([])
    const [shows, setShows] = useState<ShowVideo[]>([])
    const [stats, setStats] = useState<VideoStats | null>(null)
    const [loading, setLoading] = useState(true)
    const [activeTab, setActiveTab] = useState<"all" | "songs" | "shows">("all")
    const [searchQuery, setSearchQuery] = useState("")
    const [expandedVideoId, setExpandedVideoId] = useState<string | null>(null)

    useEffect(() => {
        Promise.all([
            fetch(`${getApiUrl()}/videos/?limit=500`).then(r => r.json()),
            fetch(`${getApiUrl()}/videos/stats`).then(r => r.json())
        ])
            .then(([videoData, statsData]) => {
                setPerformances(videoData.performances)
                setShows(videoData.shows)
                setStats(statsData)
            })
            .catch(console.error)
            .finally(() => setLoading(false))
    }, [])

    const extractVideoId = (url: string) => {
        const match = url.match(/[?&]v=([^&]+)/)
        return match ? match[1] : null
    }

    const toggleVideo = (uniqueId: string) => {
        if (expandedVideoId === uniqueId) {
            setExpandedVideoId(null)
        } else {
            setExpandedVideoId(uniqueId)
        }
    }

    if (loading) {
        return (
            <div className="container py-10 space-y-6">
                <Skeleton className="h-10 w-48" />
                <div className="space-y-2">
                    {Array.from({ length: 10 }).map((_, i) => (
                        <Skeleton key={i} className="h-12 w-full" />
                    ))}
                </div>
            </div>
        )
    }

    // Filter logic
    const query = searchQuery.toLowerCase()
    const filterVideo = (v: PerformanceVideo | ShowVideo) => {
        if (v.type === "full_show") {
            const show = v as ShowVideo
            return show.venue_name.toLowerCase().includes(query) ||
                show.venue_city.toLowerCase().includes(query) ||
                show.date.includes(query)
        } else {
            const perf = v as PerformanceVideo
            return perf.song_title.toLowerCase().includes(query) ||
                perf.venue_name.toLowerCase().includes(query) ||
                perf.venue_city.toLowerCase().includes(query) ||
                perf.date.includes(query)
        }
    }

    // Combine and sort by date
    let allVideos = [
        ...performances,
        ...shows.map(s => ({ ...s, song_title: "Full Show" }))
    ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())

    // Apply Tab Filter
    if (activeTab === "songs") {
        allVideos = allVideos.filter(v => v.type === "performance")
    } else if (activeTab === "shows") {
        allVideos = allVideos.filter(v => v.type === "full_show")
    }

    // Apply Search Filter
    if (searchQuery) {
        allVideos = allVideos.filter(filterVideo)
    }

    return (
        <div className="container py-10 space-y-8">
            <div className="flex flex-col gap-4">
                <div className="flex items-center gap-3">
                    <Youtube className="h-8 w-8 text-red-600" />
                    <h1 className="text-3xl font-bold tracking-tight">Videos</h1>
                </div>
                {stats && (
                    <p className="text-muted-foreground">
                        {stats.total} videos available • {stats.full_show_videos} full shows • {stats.performance_videos} song performances
                    </p>
                )}
            </div>

            {/* Special Features Section */}
            <div className="bg-muted/30 rounded-lg p-6 border border-primary/20">
                <div className="flex items-center gap-2 mb-4">
                    <Film className="h-5 w-5 text-purple-600" />
                    <h2 className="text-xl font-semibold">Special Features</h2>
                </div>
                <div className="grid md:grid-cols-2 gap-4">
                    <div className="flex flex-col gap-2 p-4 bg-background rounded-md border hover:border-primary/50 transition-colors">
                        <div className="flex items-center justify-between">
                            <h3 className="font-semibold text-lg">Show Upon Time</h3>
                            <Badge variant="secondary">Documentary</Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">
                            An intimate look behind the scenes of Goose's journey.
                        </p>
                        <button
                            onClick={() => toggleVideo("doc-show-upon-time")}
                            className="text-primary hover:underline text-sm font-medium text-left mt-2 flex items-center gap-2"
                        >
                            <Youtube className="h-4 w-4" />
                            Watch Now
                        </button>
                        {expandedVideoId === "doc-show-upon-time" && (
                            <div className="mt-4 aspect-video w-full rounded-lg overflow-hidden shadow-lg bg-black">
                                <iframe
                                    width="100%"
                                    height="100%"
                                    src={`https://www.youtube.com/embed/JdWnhOIWh-I?autoplay=1`}
                                    title="Show Upon Time"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowFullScreen
                                />
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center">
                {/* Filter Tabs */}
                <div className="flex gap-2">
                    <button
                        onClick={() => setActiveTab("all")}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeTab === "all"
                            ? "bg-primary text-primary-foreground"
                            : "bg-muted hover:bg-muted/80"
                            }`}
                    >
                        All
                    </button>
                    <button
                        onClick={() => setActiveTab("songs")}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeTab === "songs"
                            ? "bg-primary text-primary-foreground"
                            : "bg-muted hover:bg-muted/80"
                            }`}
                    >
                        Songs
                    </button>
                    <button
                        onClick={() => setActiveTab("shows")}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeTab === "shows"
                            ? "bg-primary text-primary-foreground"
                            : "bg-muted hover:bg-muted/80"
                            }`}
                    >
                        Shows
                    </button>
                </div>

                {/* Search Input */}
                <div className="w-full md:w-72">
                    <input
                        type="text"
                        placeholder="Search videos..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                </div>
            </div>

            {/* Video List */}
            <Card>
                <CardContent className="p-0">
                    <div className="divide-y">
                        {allVideos.map((video, idx) => {
                            const uniqueId = `${video.type}-${video.id}`
                            const isExpanded = expandedVideoId === uniqueId
                            const videoId = extractVideoId(video.youtube_link)

                            return (
                                <div key={uniqueId} className="flex flex-col">
                                    <div className="flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors">
                                        {/* Play Icon Trigger */}
                                        <button
                                            onClick={() => toggleVideo(uniqueId)}
                                            className="shrink-0 text-red-600 hover:text-red-500 transition-colors"
                                            title={isExpanded ? "Close video" : "Watch video"}
                                        >
                                            <Youtube className="h-6 w-6" />
                                        </button>

                                        {/* Content */}
                                        <div className="flex-1 min-w-0">
                                            <div className="flex items-center gap-2 flex-wrap">
                                                {video.type === "full_show" ? (
                                                    <Link
                                                        href={`/shows/${video.show_slug}`}
                                                        className="font-medium hover:underline text-primary text-lg"
                                                    >
                                                        Full Show
                                                    </Link>
                                                ) : (
                                                    <Link
                                                        href={`/performances/${(video as PerformanceVideo).performance_slug}`}
                                                        className="font-medium hover:underline text-lg"
                                                    >
                                                        {(video as PerformanceVideo).song_title}
                                                    </Link>
                                                )}
                                            </div>
                                            <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
                                                <Link href={`/shows/${video.show_slug}`} className="flex items-center gap-1 hover:underline hover:text-foreground">
                                                    <Calendar className="h-3 w-3" />
                                                    {new Date(video.date).toLocaleDateString(undefined, {
                                                        year: "numeric",
                                                        month: "short",
                                                        day: "numeric"
                                                    })}
                                                </Link>
                                                <span>•</span>
                                                <Link href={`/venues/${video.venue_slug}`} className="flex items-center gap-1 hover:underline hover:text-foreground">
                                                    <MapPin className="h-3 w-3" />
                                                    {video.venue_name}, {video.venue_city}
                                                </Link>
                                            </div>
                                        </div>

                                        {/* Watch Button */}
                                        <button
                                            onClick={() => toggleVideo(uniqueId)}
                                            className="text-sm font-medium text-primary hover:underline shrink-0"
                                        >
                                            {isExpanded ? "Close video" : "Watch video"}
                                        </button>
                                    </div>

                                    {/* Video Embed Accordion */}
                                    {isExpanded && videoId && (
                                        <div className="bg-black/5 p-4 border-t border-b">
                                            <div className="aspect-video w-full max-w-4xl mx-auto rounded-lg overflow-hidden shadow-xl">
                                                <iframe
                                                    width="100%"
                                                    height="100%"
                                                    src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
                                                    title="YouTube video player"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowFullScreen
                                                />
                                            </div>
                                        </div>
                                    )}
                                </div>
                            )
                        })}
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}