import { Head, Link, usePage } from '@inertiajs/react';
import {
    Wrench,
    Shield,
    Clock,
    CheckCircle,
    ArrowRight,
    Monitor,
    Wifi,
    Printer,
    KeyRound,
    HelpCircle,
} from 'lucide-react';
import type { User } from '@/types';

type Props = {
    canRegister: boolean;
};

export default function Welcome({ canRegister }: Props) {
    const { auth } = usePage<{ auth?: { user: User } }>().props;

    return (
        <>
            <Head title="ICT HelpDesk — DA-RFO-CAR" />
            <div className="min-h-screen bg-gradient-to-br from-emerald-950 via-emerald-900 to-green-900 text-white">
                {/* Header */}
                <header className="relative z-10">
                    <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/20 backdrop-blur">
                                <Wrench className="h-5 w-5 text-emerald-400" />
                            </div>
                            <div>
                                <h1 className="text-lg font-bold">ICT HelpDesk</h1>
                                <p className="text-[11px] text-emerald-300/80 -mt-0.5">DA-RFO-CAR</p>
                            </div>
                        </div>
                        <div className="flex items-center gap-3">
                            {auth?.user ? (
                                <Link
                                    href="/dashboard"
                                    className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-emerald-400 hover:shadow-lg hover:shadow-emerald-500/25"
                                >
                                    Dashboard
                                    <ArrowRight className="h-4 w-4" />
                                </Link>
                            ) : (
                                <>
                                    <Link
                                        href="/login"
                                        className="rounded-lg px-4 py-2 text-sm font-medium text-emerald-200 transition-colors hover:text-white"
                                    >
                                        Log in
                                    </Link>
                                    {canRegister && (
                                        <Link
                                            href="/register"
                                            className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-emerald-400 hover:shadow-lg hover:shadow-emerald-500/25"
                                        >
                                            Register
                                        </Link>
                                    )}
                                </>
                            )}
                        </div>
                    </nav>
                </header>

                {/* Hero Section */}
                <main className="relative">
                    {/* Background decorations */}
                    <div className="absolute inset-0 overflow-hidden">
                        <div className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-emerald-500/10 blur-3xl" />
                        <div className="absolute -bottom-40 -left-40 h-[500px] w-[500px] rounded-full bg-green-500/10 blur-3xl" />
                    </div>

                    <div className="relative mx-auto max-w-7xl px-6 pt-16 pb-24">
                        <div className="mx-auto max-w-3xl text-center">
                            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-1.5 text-sm text-emerald-300 backdrop-blur">
                                <Shield className="h-4 w-4" />
                                Department of Agriculture — RFO CAR
                            </div>
                            <h2 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
                                ICT Support{' '}
                                <span className="bg-gradient-to-r from-emerald-400 to-green-300 bg-clip-text text-transparent">
                                    Ticketing System
                                </span>
                            </h2>
                            <p className="mt-6 text-lg text-emerald-200/70 leading-relaxed max-w-2xl mx-auto">
                                Submit and track your ICT support requests for hardware repairs, software
                                issues, network problems, and more. Our ICT team is here to help.
                            </p>
                            <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                                {auth?.user ? (
                                    <>
                                        {auth.user.role !== 'admin' && (
                                            <Link
                                                href="/tickets/create"
                                                className="inline-flex items-center gap-2 rounded-xl bg-emerald-500 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition-all hover:bg-emerald-400 hover:-translate-y-0.5"
                                            >
                                                Submit a Ticket
                                                <ArrowRight className="h-4 w-4" />
                                            </Link>
                                        )}
                                        <Link
                                            href="/dashboard"
                                            className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-8 py-3.5 text-sm font-medium text-emerald-200 backdrop-blur transition-all hover:bg-emerald-500/20"
                                        >
                                            View Dashboard
                                        </Link>
                                    </>
                                ) : (
                                    <>
                                        <Link
                                            href="/login"
                                            className="inline-flex items-center gap-2 rounded-xl bg-emerald-500 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition-all hover:bg-emerald-400 hover:-translate-y-0.5"
                                        >
                                            Get Started
                                            <ArrowRight className="h-4 w-4" />
                                        </Link>
                                        {canRegister && (
                                            <Link
                                                href="/register"
                                                className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-8 py-3.5 text-sm font-medium text-emerald-200 backdrop-blur transition-all hover:bg-emerald-500/20"
                                            >
                                                Create Account
                                            </Link>
                                        )}
                                    </>
                                )}
                            </div>
                        </div>

                        {/* Features Grid */}
                        <div className="mt-24 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            {[
                                {
                                    icon: <Monitor className="h-6 w-6" />,
                                    title: 'Hardware & Software',
                                    desc: 'Report issues with computers, laptops, monitors, and software installations.',
                                },
                                {
                                    icon: <Wifi className="h-6 w-6" />,
                                    title: 'Network Issues',
                                    desc: 'Internet connectivity, shared drives, and network access problems.',
                                },
                                {
                                    icon: <Printer className="h-6 w-6" />,
                                    title: 'Printer Support',
                                    desc: 'Paper jams, toner replacement, driver installation, and print queue issues.',
                                },
                                {
                                    icon: <KeyRound className="h-6 w-6" />,
                                    title: 'Account Access',
                                    desc: 'Password resets, email access, and account permission changes.',
                                },
                                {
                                    icon: <Clock className="h-6 w-6" />,
                                    title: 'Real-time Tracking',
                                    desc: 'Track the status of your tickets from submission to resolution.',
                                },
                                {
                                    icon: <CheckCircle className="h-6 w-6" />,
                                    title: 'Quick Resolution',
                                    desc: 'Priority-based queue ensures critical issues are addressed first.',
                                },
                            ].map((feature, i) => (
                                <div
                                    key={i}
                                    className="group rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-6 backdrop-blur transition-all duration-300 hover:border-emerald-500/40 hover:bg-emerald-500/10 hover:-translate-y-1"
                                >
                                    <div className="mb-4 inline-flex rounded-lg bg-emerald-500/20 p-2.5 text-emerald-400 transition-colors group-hover:bg-emerald-500/30">
                                        {feature.icon}
                                    </div>
                                    <h3 className="mb-2 text-base font-semibold">{feature.title}</h3>
                                    <p className="text-sm text-emerald-200/60 leading-relaxed">{feature.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </main>

                {/* Footer */}
                <footer className="relative border-t border-emerald-500/20">
                    <div className="mx-auto max-w-7xl px-6 py-8">
                        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
                            <p className="text-sm text-emerald-300/50">
                                © {new Date().getFullYear()} Department of Agriculture — Regional Field Office CAR
                            </p>
                            <p className="text-xs text-emerald-300/40">
                                ICT Unit · Baguio City, Philippines
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
