import { Link } from '@inertiajs/react';
import { AttendancePanel } from '@/components/marketing/attendance-panel';
import { EasyFormaLogo } from '@/components/brand/logo';
import { home, privacy, terms } from '@/routes';
import type { AuthLayoutProps } from '@/types';

/**
 * La porta d'ingresso di EasyForma, e quindi la stessa stanza della vetrina:
 * carta fredda, lockup in alto a sinistra, testo a filo di margine e Archivo
 * sui titoli. Da `lg` la pagina si divide in due — a sinistra la promessa con
 * il registro già chiuso, a destra il form su superficie bianca; sotto quella
 * soglia le due metà si impilano, con il form per primo perché è lui l'attore.
 *
 * Il pannello del registro qui non si anima: chi arriva su questa pagina ha
 * già visto la dimostrazione in vetrina, o deve solo entrare.
 */

const legalLink =
    'text-muted-foreground hover:text-foreground rounded-marketing-sm outline-primary underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2';

function LegalLinks({ className = '' }: { className?: string }) {
    return (
        <p className={`text-muted-foreground text-sm ${className}`}>
            <Link href={privacy()} className={legalLink}>
                Privacy
            </Link>
            <span aria-hidden="true" className="px-2 opacity-50">
                /
            </span>
            <Link href={terms()} className={legalLink}>
                Termini di servizio
            </Link>
        </p>
    );
}

export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    return (
        <div className="bg-background text-foreground min-h-svh font-sans antialiased lg:grid lg:min-h-svh lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
            {/* Colonna di marca. Da sola in cima su mobile: solo il lockup,
                perché il resto scivolerebbe sotto la piega. */}
            <div className="flex flex-col justify-between gap-12 px-6 py-8 lg:px-12 lg:py-14 xl:px-16">
                <Link
                    href={home()}
                    aria-label="EasyForma, torna al sito"
                    className="rounded-marketing-sm outline-primary text-foreground inline-flex w-fit focus-visible:outline-2 focus-visible:outline-offset-4"
                >
                    <EasyFormaLogo className="h-6 w-auto" title="" />
                </Link>

                <div className="hidden lg:block">
                    <p className="font-display max-w-[18ch] text-[1.75rem] leading-[1.15] font-bold tracking-[-0.005em] xl:text-[2.25rem]">
                        Fai lezione. Il registro presenze lo tiene EasyForma.
                    </p>

                    <div className="mt-10 max-w-[30rem]">
                        <AttendancePanel animate={false} />
                    </div>

                    <p className="text-muted-foreground mt-10 max-w-[34rem] text-sm leading-relaxed">
                        Entrate e uscite arrivano dai log del server, non da una
                        spunta del docente: quello che vedi qui è il documento
                        che porti all’audit.
                    </p>
                </div>

                <LegalLinks className="hidden lg:block" />
            </div>

            {/* Colonna del form. */}
            <div className="bg-card flex flex-col justify-center border-t px-6 py-10 lg:border-t-0 lg:border-l lg:px-12 lg:py-14 xl:px-16">
                <div className="mx-auto w-full max-w-[24rem]">
                    <h1 className="font-display text-[1.5rem] leading-[1.2] font-bold tracking-[-0.005em]">
                        {title}
                    </h1>
                    {description ? (
                        <p className="text-muted-foreground mt-2 text-[0.9375rem] leading-relaxed">
                            {description}
                        </p>
                    ) : null}

                    <div className="mt-8">{children}</div>
                </div>
            </div>

            {/* Sotto `lg` il registro chiude la pagina: non serve a entrare,
                serve a ricordare dove si sta entrando. */}
            <div className="px-6 pt-10 pb-8 lg:hidden">
                <div className="mx-auto max-w-[24rem]">
                    <AttendancePanel animate={false} />
                    <LegalLinks className="mt-8" />
                </div>
            </div>
        </div>
    );
}