import { Link, usePage } from '@inertiajs/react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { dashboard, login, register } from '@/routes';

export default function HomeLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const { auth } = usePage().props as any;

    return (
        <div className="relative flex min-h-screen flex-col justify-between overflow-hidden bg-background text-foreground selection:bg-primary/20">
            {/* Visual Ambient Background Blobs */}
            <div className="pointer-events-none absolute top-[-10%] left-[-10%] -z-10 h-[500px] w-[500px] rounded-full bg-primary/10 blur-3xl" />
            <div className="pointer-events-none absolute right-[-10%] bottom-[20%] -z-10 h-[600px] w-[600px] rounded-full bg-emerald-500/5 blur-3xl" />

            {/* Tech Grid Overlay */}
            <div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:14px_24px]" />

            {/* Header navbar */}
            <header className="sticky top-0 z-50 border-b border-border/60 bg-background/80 backdrop-blur-md">
                <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
                    <Link href="/" className="flex items-center gap-2.5">
                        <div className="flex size-8 items-center justify-center overflow-hidden rounded-lg border border-border bg-card shadow-xs">
                            <img
                                src="/logo.png"
                                alt="ghostcompiler-api logo"
                                className="size-full object-cover"
                            />
                        </div>
                        <span className="bg-linear-to-r from-primary to-emerald-400 bg-clip-text text-lg font-extrabold tracking-tight text-transparent">
                            ghostcompiler-api
                        </span>
                    </Link>

                    <nav className="flex items-center gap-6">
                        <a
                            href="/docs"
                            className="hidden text-sm font-medium text-muted-foreground transition-colors hover:text-foreground sm:inline-block"
                        >
                            API Docs
                        </a>
                        <Link
                            href="/terms"
                            className="hidden text-sm font-medium text-muted-foreground transition-colors hover:text-foreground sm:inline-block"
                        >
                            Terms
                        </Link>

                        {auth.user ? (
                            <Button
                                asChild
                                className="bg-primary font-semibold text-primary-foreground shadow-xs hover:bg-primary/90"
                            >
                                <Link href={dashboard()}>
                                    Developer Dashboard
                                </Link>
                            </Button>
                        ) : (
                            <div className="flex items-center gap-3">
                                <Button variant="ghost" asChild>
                                    <Link href={login()}>Log in</Link>
                                </Button>
                                <Button
                                    asChild
                                    className="bg-primary font-semibold text-primary-foreground shadow-xs hover:bg-primary/90"
                                >
                                    <Link href={register()}>Get API Key</Link>
                                </Button>
                            </div>
                        )}
                    </nav>
                </div>
            </header>

            {/* Main Page Area */}
            <main className="flex-1">{children}</main>

            {/* Footer */}
            <footer className="mt-auto border-t border-border bg-card/60 py-10 backdrop-blur-xs">
                <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 px-4 text-sm text-muted-foreground sm:px-6 md:flex-row lg:px-8">
                    <Link href="/" className="flex items-center gap-2.5">
                        <div className="flex size-6 items-center justify-center overflow-hidden rounded-md">
                            <img
                                src="/logo.png"
                                alt="ghostcompiler-api logo"
                                className="size-full object-cover"
                            />
                        </div>
                        <span className="font-bold text-foreground">
                            ghostcompiler-api
                        </span>
                    </Link>
                    <div className="flex flex-wrap items-center gap-6">
                        <a
                            href="/docs"
                            className="font-medium transition-colors hover:text-foreground"
                        >
                            Documentation
                        </a>
                        <Link
                            href="/terms"
                            className="font-medium transition-colors hover:text-foreground"
                        >
                            Terms of Service
                        </Link>
                        <Link
                            href="/license"
                            className="font-medium transition-colors hover:text-foreground"
                        >
                            API License
                        </Link>
                        <a
                            href="https://github.com/ghostcompiler/currency-api-dashboard"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-medium transition-colors hover:text-foreground"
                        >
                            GitHub
                        </a>
                    </div>
                    <p className="text-xs">
                        &copy; 2026 ghostcompiler-api. Rates synced daily.
                    </p>
                </div>
            </footer>
        </div>
    );
}