import { Head, Link, usePage } from '@inertiajs/react';
import { ArrowRight, MapPinned, Shield, Target, Trophy, Users } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { dashboard, login, register } from '@/routes';

export default function Welcome({
    canRegister = true,
}: {
    canRegister?: boolean;
}) {
    const { auth } = usePage().props;

    return (
        <>
            <Head title="Clay Shooter" />

            <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(192,139,54,0.16),_transparent_28%),linear-gradient(180deg,_var(--background),_color-mix(in_oklab,_var(--background)_95%,_black))]">
                <div className="mx-auto flex min-h-screen w-full max-w-7xl flex-col px-4 py-5 sm:px-6 lg:px-8">
                    <header className="flex items-center justify-between py-4">
                        <div>
                            <p className="text-lg font-semibold tracking-tight">
                                Clay Shooter
                            </p>
                            <p className="text-sm text-muted-foreground">
                                Professional sporting clays scoring
                            </p>
                        </div>

                        <nav className="flex items-center gap-3">
                            {auth.user ? (
                                <Link href={dashboard()}>
                                    <Button>Dashboard</Button>
                                </Link>
                            ) : (
                                <>
                                    <Link href={login()}>
                                        <Button variant="ghost">Log in</Button>
                                    </Link>
                                    {canRegister && (
                                        <Link href={register()}>
                                            <Button>Register</Button>
                                        </Link>
                                    )}
                                </>
                            )}
                        </nav>
                    </header>

                    <main className="flex flex-1 items-center py-8 md:py-12">
                        <div className="grid gap-8 lg:grid-cols-[1.15fr_0.85fr] lg:items-center">
                            <div className="space-y-6">
                                <Badge className="bg-primary/10 text-primary hover:bg-primary/10">
                                    Built for clubs, shoots, and course staff
                                </Badge>
                                <div className="space-y-4">
                                    <h1 className="max-w-3xl text-4xl font-semibold tracking-tight md:text-6xl">
                                        A clean scoring platform for sporting clays operations.
                                    </h1>
                                    <p className="max-w-2xl text-base leading-7 text-muted-foreground md:text-lg">
                                        Start with strong admin fundamentals: secure user authentication, controlled staff access, mobile-friendly venue management, and stand records with clay presentation details.
                                    </p>
                                </div>

                                <div className="flex flex-col gap-3 sm:flex-row">
                                    {auth.user ? (
                                        <Link href={dashboard()}>
                                            <Button size="lg" className="w-full sm:w-auto">
                                                Open dashboard
                                                <ArrowRight className="ml-2 size-4" />
                                            </Button>
                                        </Link>
                                    ) : (
                                        <>
                                            <Link href={login()}>
                                                <Button size="lg" className="w-full sm:w-auto">
                                                    Sign in
                                                </Button>
                                            </Link>
                                            {canRegister && (
                                                <Link href={register()}>
                                                    <Button
                                                        size="lg"
                                                        variant="secondary"
                                                        className="w-full sm:w-auto"
                                                    >
                                                        Create account
                                                    </Button>
                                                </Link>
                                            )}
                                        </>
                                    )}
                                </div>

                                <div className="grid gap-3 sm:grid-cols-3">
                                    <Card className="border-border/70 bg-card/75">
                                        <CardHeader className="pb-2">
                                            <Users className="size-5 text-primary" />
                                            <CardTitle className="text-base">
                                                Secure staff access
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="text-sm text-muted-foreground">
                                            Separate standard users from admins who manage the shoot setup.
                                        </CardContent>
                                    </Card>
                                    <Card className="border-border/70 bg-card/75">
                                        <CardHeader className="pb-2">
                                            <MapPinned className="size-5 text-primary" />
                                            <CardTitle className="text-base">
                                                Course management
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="text-sm text-muted-foreground">
                                            Organize locations, course notes, and stand details from the same admin area.
                                        </CardContent>
                                    </Card>
                                    <Card className="border-border/70 bg-card/75">
                                        <CardHeader className="pb-2">
                                            <Target className="size-5 text-primary" />
                                            <CardTitle className="text-base">
                                                Clay setup ready
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="text-sm text-muted-foreground">
                                            Track clays per round and presentation notes as the base for live scoring.
                                        </CardContent>
                                    </Card>
                                </div>
                            </div>

                            <div className="grid gap-4">
                                <div className="rounded-[2rem] border border-border/70 bg-[linear-gradient(180deg,_rgba(27,40,36,0.96),_rgba(15,21,19,0.98))] p-6 text-white shadow-xl">
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <p className="text-sm uppercase tracking-[0.2em] text-[#d5b56d]">
                                                Admin overview
                                            </p>
                                            <h2 className="mt-2 text-2xl font-semibold">
                                                Range setup at a glance
                                            </h2>
                                        </div>
                                        <Shield className="size-8 text-[#d5b56d]" />
                                    </div>
                                    <div className="mt-6 grid gap-3">
                                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                                            <p className="text-sm text-white/70">
                                                Locations
                                            </p>
                                            <p className="mt-1 text-3xl font-semibold">
                                                Organized
                                            </p>
                                        </div>
                                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                                            <p className="text-sm text-white/70">
                                                Stands
                                            </p>
                                            <p className="mt-1 text-3xl font-semibold">
                                                Configurable
                                            </p>
                                        </div>
                                        <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                                            <p className="text-sm text-white/70">
                                                Mobile use
                                            </p>
                                            <p className="mt-1 text-3xl font-semibold">
                                                Ready
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div className="grid gap-4 sm:grid-cols-2">
                                    <Card className="border-border/70">
                                        <CardHeader>
                                            <Trophy className="size-5 text-primary" />
                                            <CardTitle className="text-base">
                                                Designed for growth
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="text-sm text-muted-foreground">
                                            This first release creates the admin and venue structure that scorecards and live leaderboards will build on.
                                        </CardContent>
                                    </Card>
                                    <Card className="border-border/70">
                                        <CardHeader>
                                            <Target className="size-5 text-primary" />
                                            <CardTitle className="text-base">
                                                Course-first workflow
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent className="text-sm text-muted-foreground">
                                            Capture what each stand throws before worrying about score entry screens.
                                        </CardContent>
                                    </Card>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </>
    );
}
