import { Head, Link, usePage } from '@inertiajs/react';
import type { Auth } from '@/types';

export default function ManagementAccess({
    registrationEnabled,
}: {
    registrationEnabled: boolean;
}) {
    const { auth, contentManagementHref } = usePage<{ auth: Auth; contentManagementHref?: string | null }>().props;
    const user = auth.user;
    const action =
        'inline-flex rounded-lg bg-slate-900 px-5 py-3 font-medium text-white';
    return (
        <main className="min-h-screen bg-slate-50 px-5 py-12 text-slate-900">
            <Head title="Acesso à gestão" />
            <div className="mx-auto max-w-2xl space-y-6">
                <Link href="/" className="text-emerald-700 underline">
                    Voltar ao portal
                </Link>
                <h1 className="text-3xl font-semibold">
                    Acesso à gestão do portal
                </h1>
                <p>
                    Pode configurar a sua conta quando estiver pronto. A
                    consulta de oportunidades e o envio de manifestações de
                    interesse continuam disponíveis no portal público.
                </p>
                <section className="space-y-4 rounded-xl border bg-white p-6">
                    <h2 className="text-xl font-semibold">
                        {!user
                            ? 'Preparar a sua conta'
                            : contentManagementHref || auth.canManagePortal
                              ? 'Acesso disponível'
                              : !user.email_verified_at
                                ? 'Verificar o seu email'
                                : 'Autorização pendente'}
                    </h2>
                    {!user ? (
                        <>
                            <p>
                                Use o email autorizado pela equipa do portal.
                                Depois de criar a conta, confirme o email
                                através da ligação de verificação.
                            </p>
                            <div className="flex flex-wrap gap-3">
                                <Link className={action} href="/login">
                                    Entrar
                                </Link>
                                {registrationEnabled && (
                                    <Link className={action} href="/register">
                                        Criar conta
                                    </Link>
                                )}
                            </div>
                        </>
                    ) : contentManagementHref ? (
                        <>
                            <p>Abra a entrada de gestão para cadastrar oportunidades e gerir documentos e legislação, conforme as funções já atribuídas à sua conta.</p>
                            <Link className={action} href={contentManagementHref}>Abrir gestão de conteúdos e oportunidades</Link>
                        </>
                    ) : auth.canManagePortal ? (
                        <>
                            <p>
                                A sua conta tem acesso à gestão de pedidos,
                                sectores e oportunidades.
                            </p>
                            <Link
                                className={action}
                                href="/management/interests"
                            >
                                Abrir gestão
                            </Link>
                        </>
                    ) : !user.email_verified_at ? (
                        <>
                            <p>
                                Confirme o endereço de email da sua conta. A
                                confirmação do email não atribui permissões de
                                gestão automaticamente.
                            </p>
                            <Link className={action} href="/email/verify">
                                Verificar email
                            </Link>
                        </>
                    ) : (
                        <>
                            <p>
                                A sua conta está verificada, mas ainda não tem
                                autorização de gestão. Contacte o responsável
                                pelo portal para confirmar o acesso.
                            </p>
                            <Link className={action} href="/settings/profile">
                                Consultar a minha conta
                            </Link>
                        </>
                    )}
                </section>
                <p>
                    <Link href="/" className="text-emerald-700 underline">
                        Configurar mais tarde e voltar ao portal
                    </Link>
                </p>
            </div>
        </main>
    );
}