import { Link, usePage } from '@inertiajs/react';
import { useState } from 'react';
import { fiscalPreparationGuide } from '@/lib/fiscal-preparation-guide';

export function JourneyDocumentResources({
    stages = [],
}: {
    stages?: string[];
}) {
    const [stage, setStage] = useState('');
    const context = new URL(
        usePage().url,
        'https://portal.invalid',
    ).searchParams.get('context');
    const preparationHref =
        context && /^[a-f0-9-]{36}$/i.test(context)
            ? `/investimentos/${context}/contexto/editar#preparation-questions`
            : '/investimentos';
    function destination(path: string, type?: string) {
        const query = new URLSearchParams();
        if (stage) query.set('stage[0]', stage);
        if (type) query.set('document_type', type);
        return `${path}${query.size ? `?${query}` : ''}`;
    }
    return (
        <section
            aria-label="Fontes e guias para a jornada"
            className="space-y-3 rounded-xl border border-emerald-200 bg-emerald-50 p-4"
        >
            <h2 className="font-semibold text-emerald-950">
                Preencher formulários e preparar documentos
            </h2>
            <div className="grid gap-3 sm:grid-cols-3">
                <div className="rounded border bg-white p-3">
                    <h3 className="font-semibold">Pedido de investimento</h3>
                    <p>
                        Preencha a preparação digital no dossier existente,
                        reutilizando os dados já guardados.
                    </p>
                    <Link className="underline" href={preparationHref}>
                        Abrir o formulário no meu dossier
                    </Link>
                </div>
                <div className="rounded border bg-white p-3">
                    <h3 className="font-semibold">Terra e DUAT</h3>
                    <p>
                        Prepare os dados do pedido com os campos do formulário
                        existente.
                    </p>
                    <Link className="underline" href="/terra-duat">
                        Preencher ou continuar pedido de terra
                    </Link>
                </div>
                <div className="rounded border bg-white p-3">
                    <h3 className="font-semibold">
                        Pedido de apoio do investidor
                    </h3>
                    <p>
                        Identifique-se e preencha o pedido de apoio. Este
                        formulário não é um pedido de autorização de
                        investimento.
                    </p>
                    <Link className="underline" href="/formularios/investidor">
                        Preencher pedido de apoio
                    </Link>
                </div>
            </div>
            <p>
                Preparação digital e exemplar oficial são apresentados
                separadamente. Um guia ou diploma não é um formulário
                preenchível.
            </p>
            <details>
                <summary className="cursor-pointer font-medium">
                    Consultar exemplares, fontes e guias
                </summary>
                <p>
                    Prepare as etapas em paralelo. A disponibilidade para
                    consulta, a situação jurídica e a utilização numa regra ou
                    cálculo são estados independentes.
                </p>
                {stages.length > 0 ? (
                    <label className="block">
                        Etapa com associações no acervo
                        <select
                            className="mt-1 block rounded border bg-white p-2"
                            value={stage}
                            onChange={(event) => setStage(event.target.value)}
                        >
                            <option value="">Consultar todas as etapas</option>
                            {stages.map((value) => (
                                <option key={value} value={value}>
                                    {value}
                                </option>
                            ))}
                        </select>
                    </label>
                ) : (
                    <p>
                        Não há etapas documentais associadas nesta consulta.
                        Pode explorar o acervo autorizado e preparar o dossier;
                        a falta de associação não impede a consulta.
                    </p>
                )}
                <div className="grid gap-3 sm:grid-cols-3">
                    <div>
                        <h3 className="font-semibold">Fontes e requisitos</h3>
                        <p>
                            Confira origem, edição, artigo, âmbito e evidência
                            antes de tratar um requisito como confirmado. Uma
                            ligação temática não prova aplicabilidade.
                        </p>
                        <Link
                            className="underline"
                            href={destination('/legislacao')}
                        >
                            Consultar fontes legais
                        </Link>
                    </div>
                    <div>
                        <h3 className="font-semibold">Formulários</h3>
                        <p>
                            Use os campos do exemplar disponível. Origem ou
                            homologação pendentes devem permanecer
                            identificadas; pode continuar a preparar o dossier.
                        </p>
                        <Link
                            className="underline"
                            href={destination('/documentos', 'official_form')}
                        >
                            Consultar exemplares de formulários
                        </Link>
                    </div>
                    <div>
                        <h3 className="font-semibold">Guias e preparação</h3>
                        <p>
                            Os guias ajudam a preparar informação; não emitem
                            licenças, aprovam pedidos ou ativam benefícios
                            fiscais.
                        </p>
                        <Link
                            className="underline"
                            href={destination('/documentos', 'guide')}
                        >
                            Consultar guias disponíveis
                        </Link>
                        {' · '}
                        <Link className="underline" href="/como-investir">
                            Abrir o roteiro didático
                        </Link>
                    </div>
                </div>
                <details>
                    <summary className="font-semibold">
                        Guia de preparação fiscal — 14 etapas da fonte
                    </summary>
                    <p>
                        Prepare as etapas em paralelo e confirme os requisitos,
                        autoridades, prazos e taxas aplicáveis ao seu caso.
                    </p>
                    <ol className="space-y-3">
                        {fiscalPreparationGuide.map((step) => (
                            <li
                                key={step.sourceParagraph}
                                className="rounded border bg-white p-3"
                            >
                                <h3 className="font-semibold">{step.title}</h3>
                                <p>
                                    Informação a preparar segundo a fonte:{' '}
                                    {step.inputs}
                                </p>

                                <Link className="underline" href={step.href}>
                                    {step.href === '/simulador-fiscal'
                                        ? 'Abrir simulador e conferir parâmetros'
                                        : step.href === '/balcao-virtual/painel'
                                          ? 'Preparar ou acompanhar no Balcão'
                                          : 'Consultar documentos autorizados'}
                                </Link>
                            </li>
                        ))}
                    </ol>
                </details>
                <p>
                    Próxima ação: registe o que a fonte sustenta e as dúvidas
                    por confirmar no dossier existente. Se precisar de
                    esclarecimento, prepare um pedido no Balcão e confirme a
                    submissão.
                </p>
                <Link
                    className="inline-block rounded border border-emerald-800 bg-white px-3 py-2"
                    href="/balcao-virtual/painel"
                >
                    Continuar no meu Balcão
                </Link>
                {' · '}
                <Link className="underline" href="/documentos">
                    Explorar todo o acervo autorizado
                </Link>
            </details>
        </section>
    );
}