import { Head, Link, usePage } from '@inertiajs/react';
import { type PropsWithChildren, type ReactNode } from 'react';
import { LanguageSwitcher } from '@/components/language-switcher';
import { useBrand } from '@/contexts/brand-context';
import { useFavicon } from '@/hooks/use-favicon';
import { getImagePath } from '@/utils/helpers';
import ApplicationLogo from '@/components/application-logo';
import CookieConsent from '@/components/cookie-consent';
import { CreditCard } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface AuthLayoutProps {
    name?: string;
    title?: string;
    description?: string;
    status?: string;
    statusType?: "error" | "success" | "warning" | "info";
    sideContent?: ReactNode;
    isCenteredHeader?: boolean;
    icon?: ReactNode;
}

export default function AuthSimpleLayout({
    children,
    title,
    description,
    status,
    statusType,
    sideContent,
    isCenteredHeader,
    icon,
}: PropsWithChildren<AuthLayoutProps>) {
    const { settings, getPrimaryColor } = useBrand();
    const { i18n } = useTranslation();
    const currentLanguage = i18n.language || 'en';
    const dir = (settings.layoutDirection == 'rtl' || ['ar', 'he'].includes(currentLanguage)) ? 'rtl' : 'ltr';
    const { adminAllSetting } = usePage().props as any;
    useFavicon();

    const logoSrc = settings.themeMode === 'dark' ? (settings.logo_light || settings.logo_dark) : (settings.logo_dark || settings.logo_light);
    const primaryColor = getPrimaryColor();
    const companyName = settings.titleText || 'ERPGo SaaS';

    return (
        <div className={`${dir} min-h-[100dvh] h-[100dvh] overflow-hidden flex flex-col [@media(min-width:769px)]:flex-row w-full bg-white dark:bg-gray-900 font-sans`} dir={dir} style={{ direction: dir }}>
            <Head title={title} />
            <style>{`
                .bg-primary {
                    background-color: ${primaryColor} !important;
                    color: white !important;
                }
                .bg-primary:hover {
                    background-color: ${primaryColor}dd !important;
                }
                .border-primary {
                    border-color: ${primaryColor} !important;
                }
                .text-primary {
                    color: ${primaryColor} !important;
                }
                .focus\\:border-primary:focus {
                    border-color: ${primaryColor} !important;
                }
                .dark .bg-primary {
                    background-color: ${primaryColor} !important;
                    color: white !important;
                }
                .dark .bg-primary:hover {
                    background-color: ${primaryColor}dd !important;
                }
            `}</style>
            {sideContent ?
                (<>
                    <div className="w-full [@media(min-width:769px)]:w-[50%] xl:w-[45%] flex flex-col justify-between h-full p-4 sm:p-6 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1 lg:p-8 [@media(max-width:1300px)]:p-4 [@media(max-height:850px)]:p-3 [@media(max-height:620px)]:p-1 relative overflow-hidden">
                        {/* Language Switcher for Mobile */}
                        <div className="absolute top-6 end-6 z-20 [@media(min-width:769px)]:hidden">
                            <LanguageSwitcher />
                        </div>

                        {/* Header - Logo */}
                        <div className="flex justify-center">
                            <div className="inline-block mt-6">
                                {logoSrc ? (
                                    <img src={getImagePath(logoSrc)} alt="Logo" className="h-30 sm:h-30 [@media(max-height:850px)]:h-20 [@media(max-height:620px)]:h-14 w-auto max-w-[200px] object-contain auth-logo" />
                                ) : (
                                    <div className="flex items-center justify-center space-x-2">
                                        <CreditCard className="h-10 w-10 sm:h-12 sm:w-12 [@media(max-height:850px)]:h-8 [@media(max-height:850px)]:w-8 [@media(max-height:620px)]:h-6 [@media(max-height:620px)]:w-6 auth-logo-icon" style={{ color: primaryColor }} />
                                        <span className="text-3xl sm:text-4xl [@media(max-height:850px)]:text-2xl [@media(max-height:620px)]:text-xl font-bold text-gray-900 tracking-tight auth-logo-text">ERPGo Saas</span>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Main Form Content */}
                        <div className={`flex-1 flex flex-col justify-center w-full max-w-lg mx-auto py-4 [@media(max-height:680px)]:py-1 ltr:text-left rtl:text-right`}>
                            <div className={`flex flex-col ${isCenteredHeader ? 'items-center text-center' : 'items-start ltr:text-left rtl:text-right'}`}>
                                {icon && (
                                    <div className={`mb-4 [@media(max-height:680px)]:mb-1 flex items-center justify-center rounded-full auth-icon ${isCenteredHeader ? 'h-16 w-16' : 'h-12 w-12'}`} style={{ backgroundColor: `${primaryColor}20` }}>
                                        {icon}
                                    </div>
                                )}
                                <h1 className="text-[28px] [@media(max-height:850px)]:text-[20px] [@media(max-height:620px)]:text-[16px] font-bold text-gray-900 dark:text-white mb-2 [@media(max-height:680px)]:mb-0.5 auth-title">{title}</h1>
                                <div className={`w-8 h-1 mb-3 [@media(max-height:680px)]:mb-1 ${isCenteredHeader ? 'mx-auto' : ''}`} style={{ backgroundColor: primaryColor }}></div>
                                {description && (
                                    <p className="text-gray-500 dark:text-gray-400 mb-8 [@media(max-height:850px)]:mb-2 [@media(max-height:620px)]:mb-1 [@media(max-height:850px)]:text-xs auth-desc">{description}</p>
                                )}
                            </div>

                            {status && (
                                <div className={`mb-6 text-sm font-medium ${statusType === 'success' ? 'text-green-700 bg-green-50 border-green-200' : 'text-red-700 bg-red-50 border-red-200'} p-3 rounded-lg border`}>
                                    {status}
                                </div>
                            )}

                            {children}
                        </div>

                        {/* Footer - Copyright Info */}
                        <div className="text-gray-400 dark:text-gray-500 text-xs sm:text-sm text-center">
                            {settings.footerText || `© ${new Date().getFullYear()} ${companyName}. All rights reserved.`}
                        </div>
                    </div>
                    {/* Right Side (Graphics/Promotional) */}
                    <div className="hidden [@media(min-width:769px)]:flex flex-col w-full [@media(min-width:769px)]:w-[50%] xl:w-[55%] bg-slate-50 dark:bg-gray-950 items-center justify-start py-8 lg:py-12 [@media(max-width:1300px)]:py-6 [@media(max-height:850px)]:py-4 [@media(max-height:620px)]:py-2 px-8 lg:px-12 [@media(max-width:1300px)]:px-6 [@media(max-height:850px)]:px-4 [@media(max-height:620px)]:px-2 relative overflow-hidden">
                        {/* Language Switcher for Desktop */}
                        <div className="absolute top-12 end-12 z-20">
                            <LanguageSwitcher />
                        </div>

                        {/* Promotional Content */}
                        <div className={`w-full max-w-[800px] z-10 my-auto`}>
                            {sideContent}
                        </div>

                        {/* Decorative Background Elements */}
                        <div className="absolute top-0 ltr:right-0 rtl:left-0 ltr:-mt-20 rtl:-mt-20 ltr:-mr-20 rtl:-ml-20 w-[600px] h-[600px] rounded-full mix-blend-multiply opacity-10 blur-3xl pointer-events-none" style={{ backgroundColor: primaryColor }}></div>

                        <div className="absolute top-12 ltr:right-24 rtl:left-24 opacity-20 pointer-events-none">
                            {/* Dots pattern top right */}
                            <svg width="80" height="80" fill="none" viewBox="0 0 80 80">
                                <pattern id="dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
                                    <circle cx="2" cy="2" r="2" fill="currentColor" style={{ color: primaryColor }} />
                                </pattern>
                                <rect x="0" y="0" width="80" height="80" fill="url(#dots)" />
                            </svg>
                        </div>

                        <div className="absolute bottom-0 ltr:left-0 rtl:right-0 ltr:-mb-20 rtl:-mb-20 ltr:-ml-20 rtl:-mr-20 w-[400px] h-[400px] rounded-full mix-blend-multiply opacity-[0.05] blur-3xl pointer-events-none" style={{ backgroundColor: primaryColor }}></div>

                        <div className="absolute bottom-0 ltr:right-0 rtl:left-0 ltr:-mb-20 rtl:-mb-20 ltr:-mr-20 rtl:-ml-20 w-[400px] h-[400px] rounded-full mix-blend-multiply opacity-[0.05] blur-3xl pointer-events-none" style={{ backgroundColor: primaryColor }}></div>
                    </div>
                </>) :
                (<div className="min-h-screen bg-gray-50 relative overflow-hidden w-full">
                    {/* Enhanced Background Design */}
                    <div className="absolute inset-0">
                        {/* Base Gradient */}
                        <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-gray-50 to-stone-100 dark:from-slate-900 dark:via-slate-800 dark:to-stone-900"></div>

                        {/* Elegant Pattern Overlay */}
                        <div
                            className="absolute inset-0 opacity-70 dark:opacity-30"
                            style={{
                                backgroundImage: `radial-gradient(circle at 30% 70%, ${primaryColor} 1px, transparent 1px)`,
                                backgroundSize: '80px 80px'
                            }}
                        ></div>
                    </div>

                    {/* Language Switcher */}
                    <div className="absolute top-6 right-6 z-10 md:block hidden">
                        <LanguageSwitcher />
                    </div>

                    <div className="flex items-center justify-center min-h-screen p-6">
                        <div className="w-full max-w-md">
                            {/* Logo */}
                            <div className="text-center mb-8">
                                <div className="relative lg:inline-block lg:px-6">
                                    <Link href={route('dashboard')} className="inline-block max-w-[180px]">
                                        {logoSrc ? (
                                            <img
                                                src={getImagePath(logoSrc)}
                                                alt={settings.titleText || 'Logo'}
                                                className="w-auto mx-auto"
                                            />
                                        ) : (
                                            <ApplicationLogo className="h-8 w-8 mx-auto text-primary" />
                                        )}
                                    </Link>
                                </div>
                            </div>

                            {/* Main Card */}
                            <div className="relative">
                                {/* Corner accents */}
                                <div
                                    className="absolute -top-3 -left-3 w-6 h-6 border-l-2 border-t-2 rounded-tl-md"
                                    style={{ borderColor: primaryColor }}
                                ></div>
                                <div
                                    className="absolute -bottom-3 -right-3 w-6 h-6 border-r-2 border-b-2 rounded-br-md"
                                    style={{ borderColor: primaryColor }}
                                ></div>

                                <div className="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg lg:p-8 p-4 lg:pt-5 shadow-sm">
                                    {/* Header */}
                                    <div className="text-center mb-4">
                                        <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white mb-1.5">{title}</h1>
                                        <div
                                            className="w-12 h-px mx-auto mb-2.5"
                                            style={{ backgroundColor: primaryColor }}
                                        ></div>
                                        <p className="text-gray-700 dark:text-gray-300 text-sm">{description}</p>
                                    </div>

                                    {/* Content */}
                                    {children}
                                </div>
                            </div>

                            {/* Footer */}
                            <div className="text-center mt-6">
                                <div className="inline-flex items-center space-x-2 bg-white dark:bg-slate-800/80 backdrop-blur-sm rounded-md px-4 py-2 border border-gray-200 dark:border-slate-700">
                                    <p className="text-sm text-gray-500 dark:text-gray-400">{settings.footerText || '© 2026 ERPGo. All rights reserved.'}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)}
            <CookieConsent settings={adminAllSetting || {}} />
        </div>
    );
}