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

export function JourneyDocumentResources({
    stages = [],
}: {
    stages?: string[];
}) {
    const [stage, setStage] = useState('');
    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">
                Fontes e guias para a jornada
            </h2>
            <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>
        </section>
    );
}