import { Link, usePage } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';
import { cn } from '@/lib/utils';

/**
 * Login-04 style layout: logo + form on the left, full-height image panel on the right.
 *
 * Appearance is controlled via Settings → Appearance → Login Page.
 * Settings are stored server-side and shared via Inertia on every page.
 *
 * To use, keep auth-layout.tsx importing this file:
 *   import AuthLayoutTemplate from '@/layouts/auth/auth-card-split-layout';
 */
export default function AuthCardSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    const { name, authAppearance: a } = usePage().props;

    const headingClass = cn('flex flex-col gap-2', {
        'text-left items-start': a.heading_alignment === 'left',
        'text-center items-center': a.heading_alignment === 'center',
        'text-right items-end': a.heading_alignment === 'right',
    });

    const containerClass = cn('flex flex-1 items-center', {
        'justify-start': a.container_alignment === 'left',
        'justify-center': a.container_alignment === 'center',
        'justify-end': a.container_alignment === 'right',
    });

    return (
        <div data-auth-layout className="grid min-h-svh lg:grid-cols-2">
            {/* Left: form column */}
            <div className="flex flex-col gap-4 p-6 md:p-10">
                {/* Logo / app name */}
                <div className="flex justify-center gap-2 md:justify-start">
                    <Link href={home()} className="flex items-center gap-2 font-medium">
                        {a.logo_url ? (
                            <img src={a.logo_url} alt={String(name)} className="size-6 rounded object-contain" />
                        ) : (
                            <div
                                className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
                                style={a.primary_color ? { backgroundColor: a.primary_color } : {}}
                            >
                                <AppLogoIcon className="size-4 fill-current" />
                            </div>
                        )}
                        {name}
                    </Link>
                </div>

                {/* Centered form area */}
                <div className={containerClass}>
                    <div className="flex w-full max-w-xs flex-col gap-6">
                        <div className={headingClass}>
                            <h1 className="text-2xl font-bold">{title}</h1>
                            <p className="text-balance text-sm text-muted-foreground">{description}</p>
                        </div>
                        {children}
                    </div>
                </div>
            </div>

            {/* Right: image / brand panel */}
            <div
                className="relative hidden lg:block"
                style={
                    a.background_image
                        ? { backgroundImage: `url(${a.background_image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
                        : { backgroundColor: 'rgb(24 24 27)' }
                }
            />

            {/* Custom CSS */}
            {a.custom_css && <style>{a.custom_css}</style>}
        </div>
    );
}