import { Link, usePage } from '@inertiajs/react';
import { searchTerritoryHref } from '@/lib/search-territory';
export default function CatalogueNavigation({
    dimensionUrl,
}: {
    dimensionUrl?: (dimension: string) => string;
}) {
    const { url, props } = usePage<{
        educationEnabled?: boolean;
        legacyContentEnabled?: boolean;
        existingBusinessEnabled?: boolean;
    }>();
    const context = new URL(url, 'https://qa.invalid').searchParams.get(
        'context',
    );
    const withContext = (href: string) => {
        const u = new URL(href, 'https://qa.invalid');
        if (
            u.pathname === '/oportunidades' &&
            u.searchParams.has('dimension') &&
            dimensionUrl
        )
            return dimensionUrl(u.searchParams.get('dimension')!);
        if (context) u.searchParams.set('context', context);
        return searchTerritoryHref(u.pathname + u.search, url);
    };
    const sections = {
        'Enquadramento e filtros': [
            ['Clusters', '/oportunidades?dimension=cluster'],
            ['Corredores', '/oportunidades?dimension=corridor'],
            ['ZEE', '/oportunidades?dimension=zee'],
            ['ZFI', '/oportunidades?dimension=zfi'],
        ],
        'Modalidade e vistas': [
            ...(props.existingBusinessEnabled
                ? [
                      [
                          'Comprar uma empresa',
                          '/negocios?modality=company_purchase',
                      ],
                      ['Vender uma empresa', '/negocios?modality=company_sale'],
                      ['Imobiliário', '/negocios?modality=real_estate'],
                      [
                          'Terrenos e direitos fundiários',
                          '/negocios?modality=land_right',
                      ],
                      ['Todos os negócios publicados', '/negocios'],
                  ]
                : []),
            ['Parcerias', '/parcerias'],
        ],
        'Pesquisa transversal': [
            ['Sectores de investimento', '/sectores'],
            ['Localizações e mapa', '/oportunidades?view=map'],
        ],
        'Consulta relacionada': [
            ['Projectos âncora', '/carteira?kind=project'],
            ['Parques industriais', '/zonas?physical_category=industrial_park'],
            ['Zonas e enquadramentos', '/zonas'],
            ['Carteira e estruturas', '/carteira'],
            ['Fichas de clusters', '/carteira?kind=cluster'],
            ['Fichas de corredores', '/carteira?kind=corridor'],
            ['Fichas ZEE', '/zonas?category=zee'],
            ['Fichas ZFI', '/zonas?category=zfi'],
            ...(props.educationEnabled
                ? [['Educação e competências', '/educacao']]
                : []),
            ...(props.legacyContentEnabled
                ? [['Artigos setoriais', '/explorar/agronegocio']]
                : []),
            ['Documentos', '/documentos'],
            ['Legislação', '/legislacao'],
            ['Como investir', '/como-investir'],
        ],
    };
    return (
        <details className="my-4 rounded-xl border bg-white p-4">
            <summary className="cursor-pointer font-semibold">
                Catálogos relacionados
            </summary>
            <nav
                className="my-4 grid gap-3 rounded-xl border bg-white p-4 sm:grid-cols-2 lg:grid-cols-4"
                aria-label="Explorar dentro do catálogo"
            >
                {Object.entries(sections).map(([title, items]) => (
                    <section key={title}>
                        <h2 className="mb-2 font-semibold">{title}</h2>
                        <ul className="space-y-2">
                            {items.map(([label, href]) => (
                                <li key={label}>
                                    <Link
                                        className="underline"
                                        href={withContext(href)}
                                    >
                                        {label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </section>
                ))}
            </nav>
        </details>
    );
}