"use client"

import Link from "next/link"
import { useVertical } from "@/contexts/vertical-context"

// Configuration for band-specific footer links
const VERTICAL_LINKS: Record<string, {
    listen: { name: string, url: string }[],
    community: { name: string, url: string }[]
}> = {
    "goose": {
        listen: [
            { name: "Nugs.net", url: "https://www.nugs.net/goose-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" },
            { name: "Bandcamp", url: "https://goosetheband.bandcamp.com" },
            { name: "Spotify", url: "https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH" },
            { name: "Relisten", url: "https://relisten.net/goose" }
        ],
        community: [
            { name: "ElGoose.net", url: "https://elgoose.net" },
            { name: "Reddit", url: "https://www.reddit.com/r/GooseTheBand" },
            { name: "Wysteria Lane", url: "https://wysterialane.org" },
            { name: "WTED Radio", url: "https://wtedradio.com" }
        ]
    },
    "dead-and-company": {
        listen: [
            { name: "Nugs.net", url: "https://www.nugs.net/dead-and-company-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" },
            { name: "Spotify", url: "https://open.spotify.com/artist/6z5WJ8c8e1d5u5u5u5u5u5" }, // Verify ID
            { name: "Relisten", url: "https://relisten.net/dead-and-company" }
        ],
        community: [
            { name: "Reddit", url: "https://www.reddit.com/r/deadandcompany" },
            { name: "Dead.net", url: "https://www.dead.net" }
        ]
    },
    "billy-strings": {
        listen: [
            { name: "Nugs.net", url: "https://www.nugs.net/billy-strings-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" },
            { name: "Mixlr", url: "https://billystrings.mixlr.com/" },
            { name: "Relisten", url: "https://relisten.net/billy-strings" }
        ],
        community: [
            { name: "Reddit", url: "https://www.reddit.com/r/BillyStrings" },
            { name: "Billy Strings Website", url: "https://www.billystrings.com" }
        ]
    },
    "phish": {
        listen: [
            { name: "LivePhish", url: "https://www.livephish.com" },
            { name: "Relisten", url: "https://relisten.net/phish" }
        ],
        community: [
            { name: "Phish.net", url: "https://phish.net" },
            { name: "Reddit", url: "https://www.reddit.com/r/phish" }
        ]
    },
    "dmb": {
        listen: [
            { name: "Nugs.net", url: "https://www.nugs.net/dave-matthews-band-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" },
            { name: "Relisten", url: "https://relisten.net/dave-matthews-band" }
        ],
        community: [
            { name: "AntsMarching", url: "https://antsmarching.org" },
            { name: "DMB Almanac", url: "https://dmbalmanac.com" }
        ]
    }
}

const DEFAULT_LINKS = {
    listen: [
        { name: "Nugs.net", url: "https://www.nugs.net" },
        { name: "Relisten", url: "https://relisten.net" }
    ],
    community: []
}

export function Footer() {
    const { current } = useVertical()

    // Get links for current vertical or fallback
    const links = (current && VERTICAL_LINKS[current.slug])
        ? VERTICAL_LINKS[current.slug]
        : DEFAULT_LINKS

    return (
        <footer className="border-t mt-12">
            {/* Sub-footer: Band & Community Links */}
            <div className="bg-muted/30 py-8">
                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {/* Listen */}
                        <div className="text-center md:text-left">
                            <h4 className="font-semibold text-sm mb-3">Listen</h4>
                            <ul className="space-y-2 text-sm text-muted-foreground">
                                {links.listen.map((link, i) => (
                                    <li key={i}>
                                        <a href={link.url} target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">
                                            {link.name}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Community */}
                        <div className="text-center md:text-left">
                            <h4 className="font-semibold text-sm mb-3">Community</h4>
                            <ul className="space-y-2 text-sm text-muted-foreground">
                                {links.community.length > 0 ? (
                                    links.community.map((link, i) => (
                                        <li key={i}>
                                            <a href={link.url} target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">
                                                {link.name}
                                            </a>
                                        </li>
                                    ))
                                ) : (
                                    <li><span className="italic">No community links yet</span></li>
                                )}
                            </ul>
                        </div>

                        {/* Explore */}
                        <div className="text-center md:text-left">
                            <h4 className="font-semibold text-sm mb-3">Explore</h4>
                            <ul className="space-y-2 text-sm text-muted-foreground">
                                <li><Link href="/shows" className="hover:underline hover:text-foreground">Shows</Link></li>
                                <li><Link href="/songs" className="hover:underline hover:text-foreground">Songs</Link></li>
                                <li><Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link></li>
                                <li><Link href="/performances" className="hover:underline hover:text-foreground">Top Performances</Link></li>
                                <li><Link href="/videos" className="hover:underline hover:text-foreground">Videos</Link></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main footer: System Links */}
            <div className="py-6 bg-background">
                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                        {/* Brand & Copyright */}
                        <div className="flex items-center gap-4">
                            <span className="text-lg font-bold">
                                {current ? current.name : "Fediversion"}
                            </span>
                            <span className="text-xs text-muted-foreground">
                                © {new Date().getFullYear()} All rights reserved
                            </span>
                        </div>

                        {/* System Links */}
                        <nav className="flex flex-wrap items-center justify-center gap-1 md:gap-4 text-sm text-muted-foreground">
                            <Link href="/about" className="hover:underline hover:text-foreground px-3 py-2">About</Link>
                            <Link href="/terms" className="hover:underline hover:text-foreground px-3 py-2">Terms</Link>
                            <Link href="/privacy" className="hover:underline hover:text-foreground px-3 py-2">Privacy</Link>
                            <Link href="/bugs" className="hover:underline hover:text-foreground px-3 py-2">Report Bug</Link>
                        </nav>
                    </div>
                </div>
            </div>
        </footer>
    )
}