import { Link } from '@inertiajs/react';
import { ChevronDown } from 'lucide-react';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { offerStates } from '@/lib/offer-editorial';
import { offerListHref, type OfferListFilters } from '@/lib/offer-navigation';

export default function OfferNavigation({
    canCreate = false,
    filters,
}: {
    canCreate?: boolean;
    filters?: OfferListFilters;
}) {
    const trigger =
        'tempo-nav-trigger inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium';
    return (
        <nav
            aria-label="Navegação das ofertas"
            className="bg-background flex min-w-0 flex-wrap items-center gap-2 rounded-xl border p-2"
        >
            <DropdownMenu>
                <DropdownMenuTrigger className={trigger}>
                    Ofertas{' '}
                    <ChevronDown aria-hidden="true" className="size-4" />
                </DropdownMenuTrigger>
                <DropdownMenuContent
                    align="start"
                    collisionPadding={12}
                    className="tempo-dropdown max-h-[70vh] w-64 max-w-[calc(100vw-2rem)] overflow-y-auto p-2"
                >
                    <DropdownMenuItem asChild className="tempo-menu-item">
                        <Link href="/minhas-oportunidades/ofertas">
                            As minhas ofertas
                        </Link>
                    </DropdownMenuItem>
                    {canCreate && (
                        <DropdownMenuItem asChild className="tempo-menu-item">
                            <Link href="/minhas-oportunidades/ofertas/criar">
                                Preparar oferta
                            </Link>
                        </DropdownMenuItem>
                    )}
                </DropdownMenuContent>
            </DropdownMenu>
            {filters && (
                <DropdownMenu>
                    <DropdownMenuTrigger className={trigger}>
                        {filters.state
                            ? (offerStates[filters.state] ?? 'Estado')
                            : 'Todos os estados'}
                        <ChevronDown aria-hidden="true" className="size-4" />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="start"
                        collisionPadding={12}
                        className="tempo-dropdown max-h-[70vh] w-72 max-w-[calc(100vw-2rem)] overflow-y-auto p-2"
                    >
                        {[
                            ['', 'Todos os estados'],
                            ...Object.entries(offerStates),
                        ].map(([state, label]) => (
                            <DropdownMenuItem
                                key={state}
                                asChild
                                className="tempo-menu-item"
                            >
                                <Link
                                    href={offerListHref({ ...filters, state })}
                                    aria-current={
                                        (filters.state ?? '') === state
                                            ? 'page'
                                            : undefined
                                    }
                                >
                                    {label}
                                </Link>
                            </DropdownMenuItem>
                        ))}
                    </DropdownMenuContent>
                </DropdownMenu>
            )}
            {filters?.operational && (
                <DropdownMenu>
                    <DropdownMenuTrigger className={trigger}>
                        Acompanhamento{' '}
                        <ChevronDown aria-hidden="true" className="size-4" />
                    </DropdownMenuTrigger>
                    <DropdownMenuContent
                        align="start"
                        collisionPadding={12}
                        className="tempo-dropdown w-72 max-w-[calc(100vw-2rem)] p-2"
                    >
                        <DropdownMenuItem asChild className="tempo-menu-item">
                            <Link
                                href={offerListHref({
                                    ...filters,
                                    pending_reports: false,
                                })}
                                aria-current={
                                    !filters.pending_reports
                                        ? 'page'
                                        : undefined
                                }
                            >
                                Todas no meu âmbito
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild className="tempo-menu-item">
                            <Link
                                href={offerListHref({
                                    ...filters,
                                    pending_reports: true,
                                })}
                                aria-current={
                                    filters.pending_reports ? 'page' : undefined
                                }
                            >
                                Denúncias pendentes
                            </Link>
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            )}
        </nav>
    );
}