"use client"

import { useRouter } from "next/navigation"
import { ChevronDown, Music } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    Sheet,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from "@/components/ui/sheet"
import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context"
import { useState } from "react"

export function BandSelector() {
    const { current, setCurrent } = useVertical()
    const router = useRouter()
    const [sheetOpen, setSheetOpen] = useState(false)

    const handleSelect = (slug: VerticalSlug) => {
        setCurrent(slug)
        router.push(`/${slug}`)
        setSheetOpen(false)
    }

    // Desktop: Dropdown menu
    // Mobile: Sheet drawer
    return (
        <>
            {/* Desktop Dropdown (hidden on mobile) */}
            <div className="hidden md:block">
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="ghost"
                            className="flex items-center gap-2 font-bold text-lg"
                        >
                            <span>{current.name}</span>
                            <ChevronDown className="h-4 w-4 opacity-50" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="start" className="w-56">
                        {VERTICALS.map((vertical) => (
                            <DropdownMenuItem
                                key={vertical.slug}
                                onClick={() => handleSelect(vertical.slug)}
                                className={`cursor-pointer ${vertical.slug === current.slug ? "font-bold" : ""}`}
                            >
                                {vertical.name}
                            </DropdownMenuItem>
                        ))}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

            {/* Mobile Sheet (hidden on desktop) */}
            <div className="md:hidden">
                <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
                    <SheetTrigger asChild>
                        <Button
                            variant="ghost"
                            size="lg"
                            className="flex items-center gap-2 font-bold text-lg px-3"
                        >
                            <span>{current.name}</span>
                            <ChevronDown className="h-4 w-4 opacity-50" />
                        </Button>
                    </SheetTrigger>
                    <SheetContent side="bottom" className="h-[60vh]">
                        <SheetHeader>
                            <SheetTitle className="flex items-center gap-2">
                                <Music className="h-5 w-5" />
                                Switch Band
                            </SheetTitle>
                        </SheetHeader>
                        <div className="grid gap-2 py-4">
                            {VERTICALS.map((vertical) => (
                                <Button
                                    key={vertical.slug}
                                    variant={vertical.slug === current.slug ? "default" : "outline"}
                                    size="lg"
                                    className="w-full justify-start text-lg h-14"
                                    onClick={() => handleSelect(vertical.slug)}
                                >
                                    {vertical.name}
                                </Button>
                            ))}
                        </div>
                    </SheetContent>
                </Sheet>
            </div>
        </>
    )
}