import { Head, Link, usePage } from '@inertiajs/react';
import LoginForm from '@/components/auth/login-form';
import { Badge } from '@/components/ui/badge';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { dashboard } from '@/routes';

type Props = {
    canRegister?: boolean;
    canResetPassword?: boolean;
};

const monitoringHighlights = [
    {
        title: 'Live sensor visibility',
        description:
            'Review uplinks, trends, and latest readings from every LoRaWAN device in one place.',
    },
    {
        title: 'Department-aware access',
        description:
            'Teams only see the sensors assigned to their departments, keeping operations tidy and secure.',
    },
    {
        title: 'Rapid issue response',
        description:
            'Spot missing data, weather shifts, and field anomalies quickly so crews can act before downtime spreads.',
    },
];

const platformSignals = [
    'LoRaWAN telemetry ingestion',
    'Sensor history and charting',
    'Webhook-backed device updates',
];

export default function Welcome({
    canRegister = false,
    canResetPassword = false,
}: Props) {
    const { auth, name } = usePage().props as {
        auth: { user: { name: string } | null };
        name: string;
    };

    const isAuthenticated = auth.user !== null;

    return (
        <>
            <Head title="LoRaWAN sensor monitoring">
                <link rel="preconnect" href="https://fonts.bunny.net" />
                <link
                    href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700"
                    rel="stylesheet"
                />
            </Head>

            <div className="relative min-h-screen overflow-hidden bg-slate-950 text-slate-50">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.24),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(14,165,233,0.18),_transparent_28%),linear-gradient(180deg,_rgba(15,23,42,0.96),_rgba(2,6,23,1))]" />
                <div className="absolute inset-x-0 top-0 h-80 bg-[linear-gradient(135deg,rgba(125,211,252,0.12),transparent_55%)]" />

                <div className="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-8 lg:px-8">
                    <header className="flex items-center justify-between">
                        <div>
                            <p className="text-sm font-medium tracking-[0.24em] text-sky-200/80 uppercase">
                                {name}
                            </p>
                            <h1 className="mt-2 text-xl font-semibold text-white">
                                Sensor operations center
                            </h1>
                        </div>

                        {isAuthenticated ? (
                            <Link
                                href={dashboard()}
                                className="inline-flex items-center rounded-full border border-sky-400/40 bg-sky-400/10 px-4 py-2 text-sm font-medium text-sky-100 transition hover:border-sky-300 hover:bg-sky-400/20"
                            >
                                Open dashboard
                            </Link>
                        ) : (
                            <div className="hidden text-sm text-slate-300 md:block">
                                Authorized staff sign in to monitor field devices.
                            </div>
                        )}
                    </header>

                    <main className="grid flex-1 items-center gap-10 py-12 lg:grid-cols-[1.15fr_0.85fr] lg:py-16">
                        <section className="space-y-8">
                            <div className="space-y-5">
                                <Badge
                                    variant="outline"
                                    className="border-sky-300/30 bg-sky-300/10 px-3 py-1 text-sky-100"
                                >
                                    LoRaWAN monitoring platform
                                </Badge>

                                <div className="space-y-4">
                                    <h2 className="max-w-3xl text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
                                        Monitor field sensors, incoming uplinks,
                                        and site conditions from one secure
                                        workspace.
                                    </h2>
                                    <p className="max-w-2xl text-base leading-7 text-slate-300 sm:text-lg">
                                        {name} helps teams track LoRaWAN sensors
                                        across locations, review telemetry
                                        history, and coordinate fast responses
                                        when environmental conditions change.
                                    </p>
                                </div>
                            </div>

                            <div className="grid gap-4 sm:grid-cols-3">
                                {platformSignals.map((signal) => (
                                    <div
                                        key={signal}
                                        className="rounded-2xl border border-white/10 bg-white/5 px-4 py-4 text-sm text-slate-200 shadow-[0_0_0_1px_rgba(255,255,255,0.02)] backdrop-blur"
                                    >
                                        {signal}
                                    </div>
                                ))}
                            </div>

                            <div className="grid gap-4">
                                {monitoringHighlights.map((highlight) => (
                                    <Card
                                        key={highlight.title}
                                        className="border-white/10 bg-white/5 shadow-xl shadow-slate-950/30 backdrop-blur"
                                    >
                                        <CardHeader className="gap-2">
                                            <CardTitle className="text-base text-white">
                                                {highlight.title}
                                            </CardTitle>
                                            <CardDescription className="text-sm leading-6 text-slate-300">
                                                {highlight.description}
                                            </CardDescription>
                                        </CardHeader>
                                    </Card>
                                ))}
                            </div>
                        </section>

                        <section>
                            <Card className="border-white/10 bg-slate-900/80 py-0 shadow-2xl shadow-cyan-950/30 backdrop-blur">
                                <CardHeader className="border-b border-white/10 px-8 py-8">
                                    <CardTitle className="text-2xl text-white">
                                        {isAuthenticated
                                            ? `Welcome back, ${auth.user.name}`
                                            : 'Log in to continue'}
                                    </CardTitle>
                                    <CardDescription className="text-sm leading-6 text-slate-300">
                                        {isAuthenticated
                                            ? 'Jump back into the dashboard to review sensor health, history, and recent webhook traffic.'
                                            : 'Use your assigned account to access dashboards, sensor history, and administrative tools.'}
                                    </CardDescription>
                                </CardHeader>

                                <CardContent className="px-8 py-8">
                                    {isAuthenticated ? (
                                        <div className="space-y-6">
                                            <div className="rounded-2xl border border-emerald-400/25 bg-emerald-400/10 p-4 text-sm leading-6 text-emerald-50">
                                                Your account is already signed in.
                                                Open the dashboard to review the
                                                latest device readings and history.
                                            </div>

                                            <Link
                                                href={dashboard()}
                                                className="inline-flex w-full items-center justify-center rounded-md bg-sky-400 px-4 py-3 text-sm font-medium text-slate-950 transition hover:bg-sky-300"
                                            >
                                                Go to dashboard
                                            </Link>
                                        </div>
                                    ) : (
                                        <div className="space-y-6">
                                            <LoginForm
                                                canResetPassword={
                                                    canResetPassword
                                                }
                                                submitLabel="Access monitoring"
                                                footer={
                                                    <div className="text-center text-sm text-slate-400">
                                                        {canRegister
                                                            ? 'Need access? Ask an administrator for an invite.'
                                                            : 'Need access? Contact an administrator to be invited.'}
                                                    </div>
                                                }
                                            />

                                            <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm leading-6 text-slate-300">
                                                This portal is for authorized
                                                staff managing deployed LoRaWAN
                                                sensors, telemetry history, and
                                                operations workflows.
                                            </div>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        </section>
                    </main>
                </div>
            </div>
        </>
    );
}
