import { Link } from '@inertiajs/react';
import type { ReactNode } from 'react';

import { useBranding } from '@/hooks/use-branding';
import { home } from '@/routes';

import './prism.css';

type Props = {
    title: string;
    description?: string;
    children: ReactNode;
};

/**
 * Prism-themed auth shell. Used by every auth page (login, register,
 * forgot/reset password, 2FA, email verification, invitation accept,
 * password confirmation) when `marketingTheme === 'prism'` so the
 * brand identity carries from the marketing site into the sign-in
 * surface. Mirrors the Harvest AuthSimpleLayout's two-panel layout
 * (brand on the left, form on the right) but uses the Prism gradient
 * + Inter Tight body + Instrument Serif italic accents instead of
 * the olive/cream Harvest palette.
 */
export default function PrismAuthShell({ title, description, children }: Props) {
    const branding = useBranding();
    const brandName = branding.site_title || 'Pitchbar';

    // Admin-editable side-panel copy. Buyer-reported (2026-05-26): the
    // bundled "marketing site" phrasing leaked through to workspaces
    // whose product is not a marketing surface. Falls back to neutral
    // copy that points the admin at the editable settings.
    const eyebrow =
        (branding.auth_aside_eyebrow as string | null | undefined) ??
        'Secure workspace';
    const heading =
        (branding.auth_aside_heading as string | null | undefined) ?? null;
    const lede = (branding.auth_aside_lede as string | null | undefined) ?? null;
    const bullets =
        (branding.auth_aside_bullets as string[] | null | undefined) &&
        (branding.auth_aside_bullets as string[]).length > 0
            ? (branding.auth_aside_bullets as string[])
            : [
                  '2FA, passkeys, and recovery codes',
                  'SSO-ready · SOC 2 controls in flight',
                  'One workspace, every channel',
              ];

    return (
        <div className="prism-root prism-auth-shell">
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
            <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap"
            />

            <aside className="prism-auth-aside">
                <div className="prism-auth-aside-inner">
                    <Link href={home().url} className="logo">
                        <span className="logo-mark" />
                        <span>{brandName}</span>
                    </Link>

                    <div className="prism-auth-hero">
                        <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>
                            <span style={{ background: 'rgba(255,255,255,0.85)' }} />
                            {eyebrow}
                        </span>
                        <h1 className="prism-auth-display">
                            {heading ?? (
                                <>
                                    Welcome back to the{' '}
                                    <span className="ital">conversations.</span>
                                </>
                            )}
                        </h1>
                        <p className="prism-auth-lede">
                            {lede ??
                                'Your admin can customise this copy under Settings → Branding so the auth screen reads in your brand voice.'}
                        </p>

                        <ul className="prism-auth-bullets">
                            {bullets.map((b, i) => (
                                <li key={i}>
                                    <span className="ic">✓</span>
                                    <span>{b}</span>
                                </li>
                            ))}
                        </ul>
                    </div>

                    <Link href={home().url} className="prism-auth-back">
                        ← Back to site
                    </Link>
                </div>
            </aside>

            <main className="prism-auth-main">
                <header className="prism-auth-mobile-bar">
                    <Link href={home().url} className="logo">
                        <span className="logo-mark" />
                        <span>{brandName}</span>
                    </Link>
                    <Link href={home().url} className="prism-auth-back">
                        ← Site
                    </Link>
                </header>

                <section className="prism-auth-form-wrap">
                    <div className="prism-auth-form-card">
                        <div className="prism-auth-form-head">
                            <span className="eyebrow">Account access</span>
                            <h2 className="prism-auth-title">{title}</h2>
                            {description ? (
                                <p className="prism-auth-desc">{description}</p>
                            ) : null}
                        </div>
                        <div className="prism-auth-form-body">{children}</div>
                    </div>
                </section>
            </main>
        </div>
    );
}