import { Head, Link } from '@inertiajs/react';
import { ArrowLeft, ArrowRight, CalendarDays, CarFront, Check, ClipboardCheck, Clock3, Headset, Luggage, MapPin, MessageSquare, Navigation, Phone, Plane, Route as RouteIcon, ShieldCheck } from 'lucide-react';
import SiteFooter from '@/components/home/site-footer';
import SiteHeader from '@/components/home/site-header';
import type { TransferRoute } from '@/types/booking';

export default function RouteShow({ route }: { route: TransferRoute }) {
    const title = `${route.origin} to ${route.destination}`;
    const checklist = [
        { icon: ClipboardCheck, title: 'Meet & greet protocol', text: `Your chauffeur will hold a digital tablet displaying your booking name at ${route.origin}.` },
        { icon: Luggage, title: 'Wayfinding support', text: 'Follow the illuminated ground transportation signs; your chauffeur will help with luggage.' },
        { icon: ShieldCheck, title: 'Journey protection', text: 'Complimentary waiting time and live schedule monitoring are included with this transfer.' },
    ];

    return (
        <>
            <Head title={`${title} Guide`} />
            <div className="min-h-screen bg-mist font-google text-navy dark:bg-ink dark:text-white">
                <SiteHeader variant="solid" />
                <main className="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
                    <Link href="/" className="inline-flex items-center gap-2 rounded-lg bg-[#f5f0e8] px-5 py-3 text-sm font-semibold shadow-sm transition hover:bg-gold/20 dark:bg-white/10"><ArrowLeft className="size-4" /> Go back</Link>

                    <section className="mt-12 rounded-[22px] border border-navy/5 bg-white p-6 shadow-[0_12px_40px_-24px_rgba(11,31,51,0.35)] sm:p-9 dark:border-white/10 dark:bg-ocean">
                        <div className="flex flex-col justify-between gap-6 lg:flex-row lg:items-start">
                            <div>
                                <span className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1.5 text-xs font-bold tracking-wide text-blue-900 uppercase dark:bg-blue-400/15 dark:text-blue-100"><span className="size-2 rounded-full bg-blue-600" /> Curated visual itinerary</span>
                                <h1 className="mt-4 max-w-3xl text-3xl leading-[1.12] font-semibold tracking-tight sm:text-[42px]">Trip &amp; Location Guide — {title}</h1>
                                <p className="mt-4 max-w-2xl text-[15px] leading-7 text-navy/65 dark:text-white/70">Visual overview of your pickup point, scenic transit route, and destination drop-off with door-to-door clarity.</p>
                            </div>
                            <div className="shrink-0 lg:text-right"><span className="inline-flex items-center gap-2 rounded-lg bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-200"><Check className="size-4" /> Confirmed Executive Transfer</span><p className="mt-4 flex items-center gap-2 text-xs text-navy/65 lg:justify-end dark:text-white/70"><CarFront className="size-4 text-blue-700" /> Mercedes-Benz E-Class <CalendarDays className="ml-2 size-4 text-blue-700" /> Flexible schedule</p></div>
                        </div>
                        <div className="mt-9 grid gap-3 rounded-2xl bg-[#f2f5f8] p-4 sm:grid-cols-2 lg:grid-cols-4 dark:bg-ink">
                            {[
                                { icon: Plane, label: 'ORIGIN PICKUP', value: route.origin },
                                { icon: Clock3, label: 'TRANSIT TIME', value: route.duration },
                                { icon: RouteIcon, label: 'TOTAL DISTANCE', value: route.distance },
                                { icon: MapPin, label: 'FINAL DESTINATION', value: route.destination },
                            ].map(({ icon: Icon, label, value }) => <div key={label} className="flex items-center gap-3 rounded-lg p-2"><span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-ocean text-white dark:bg-navy"><Icon className="size-5" /></span><div className="min-w-0"><p className="text-[10px] font-bold tracking-wide text-navy/60 dark:text-white/60">{label}</p><p className="truncate text-sm font-semibold">{value}</p></div></div>)}
                        </div>
                    </section>

                    <div className="mt-5 grid items-start gap-5 lg:grid-cols-[minmax(0,1.65fr)_minmax(300px,0.8fr)]">
                        <section className="overflow-hidden rounded-2xl bg-white shadow-sm dark:bg-ocean">
                            <div className="relative aspect-[16/7] min-h-72 overflow-hidden bg-mist"><img src={route.image ?? '/images/hero-bg.png'} alt={title} className="size-full object-cover" /><span className="absolute top-4 left-4 inline-flex items-center gap-2 rounded-lg bg-navy px-3 py-2 text-xs font-semibold text-white shadow-lg"><span className="size-2 rounded-full bg-gold" /> Step 01: Arrival orientation</span></div>
                            <div className="p-6 sm:p-9">
                                <p className="text-xs font-bold tracking-wide text-blue-700 uppercase">Origin pickup point</p>
                                <div className="mt-2 flex flex-col justify-between gap-4 sm:flex-row sm:items-center"><h2 className="text-2xl font-semibold">Origin: {route.origin}</h2><Link href={`/?route=${route.id}#book`} className="inline-flex items-center justify-center gap-2 rounded-lg bg-gold px-4 py-2.5 text-sm font-semibold text-white hover:bg-gold-dark">Book this route <ArrowRight className="size-4" /></Link></div>
                                <div className="mt-5 flex items-start gap-3 rounded-xl bg-[#f1f4f8] p-4 dark:bg-ink"><MapPin className="mt-0.5 size-5 shrink-0 text-blue-700" /><div><p className="text-sm font-semibold">Specific meeting point</p><p className="mt-1 text-sm text-navy/65 dark:text-white/70">Executive chauffeur curbside pickup at the main arrivals entrance.</p></div></div>
                                <h3 className="mt-8 text-lg font-semibold">Visual guidance checklist &amp; tips</h3>
                                <div className="mt-4 space-y-3">{checklist.map(({ icon: Icon, title: itemTitle, text }) => <div key={itemTitle} className="flex items-start gap-3 rounded-xl bg-[#fbfaf8] p-4 dark:bg-ink"><span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white"><Icon className="size-4" /></span><div className="text-sm"><p className="font-semibold">{itemTitle}</p><p className="mt-1 text-navy/65 dark:text-white/70">{text}</p></div></div>)}</div>
                            </div>
                        </section>

                        <aside className="space-y-3">
                            <section className="rounded-2xl border border-navy/5 bg-white p-6 shadow-[0_12px_40px_-24px_rgba(11,31,51,0.35)] dark:border-white/10 dark:bg-ocean"><div className="flex items-center justify-between"><p className="text-xs font-bold tracking-wide text-blue-700 uppercase">Assigned chauffeur</p><span className="rounded bg-emerald-50 px-2 py-1 text-[10px] font-bold text-emerald-700">On schedule</span></div><div className="mt-5 flex items-center gap-3"><span className="flex size-14 items-center justify-center rounded-full bg-blue-900 text-xl font-semibold text-white">MV</span><div><h2 className="text-xl font-semibold">Marcus Vance</h2><p className="text-xs text-navy/60 dark:text-white/60">★ 4.98 · 1,420 completed trips</p><p className="mt-1 text-xs font-semibold text-blue-700">Voyage Executive Fleet Level V</p></div></div><div className="mt-5 rounded-xl bg-[#f1f4f8] p-4 text-xs dark:bg-ink"><p className="flex justify-between gap-3"><span>Vehicle class:</span><strong>Mercedes-Benz E-Class Sedan</strong></p><p className="mt-3 flex justify-between gap-3"><span>Color / finish:</span><strong>Obsidian Black</strong></p></div><div className="mt-4 grid grid-cols-2 gap-2"><button type="button" className="inline-flex items-center justify-center gap-2 rounded-lg bg-mist py-3 text-sm font-semibold dark:bg-ink"><Phone className="size-4 text-blue-700" /> Call</button><button type="button" className="inline-flex items-center justify-center gap-2 rounded-lg bg-mist py-3 text-sm font-semibold dark:bg-ink"><MessageSquare className="size-4 text-blue-700" /> Message</button></div><Link href={`/?route=${route.id}#book`} className="mt-3 flex items-center justify-center gap-2 rounded-lg bg-gold py-3 text-sm font-semibold text-white hover:bg-gold-dark"><Navigation className="size-4" /> Open booking flow</Link></section>
                            <section className="rounded-2xl border border-navy/5 bg-white p-6 shadow-[0_12px_40px_-24px_rgba(11,31,51,0.35)] dark:border-white/10 dark:bg-ocean"><p className="text-xs font-bold tracking-wide text-blue-700 uppercase">Destination intelligence</p><div className="mt-4 rounded-xl bg-[#f1f4f8] p-4 dark:bg-ink"><p className="text-xs text-navy/60 dark:text-white/60">DESTINATION</p><p className="mt-1 text-lg font-semibold">{route.destination}</p><p className="mt-2 text-sm text-navy/65 dark:text-white/70">Arrival guidance, local drop-off support, and direct chauffeur assistance.</p></div><div className="mt-3 rounded-xl bg-blue-50 p-4 text-sm dark:bg-blue-400/10"><p className="flex items-center gap-2 font-semibold text-blue-800 dark:text-blue-200"><Headset className="size-4" /> 24/7 concierge desk</p><p className="mt-2 text-xs leading-5 text-navy/65 dark:text-white/70">Need help with luggage, local directions, or schedule changes? Our team is available around the clock.</p><p className="mt-3 text-xs font-bold text-blue-700">+1 800 555-0199</p></div></section>
                        </aside>
                    </div>
                </main>
                <SiteFooter />
            </div>
        </>
    );
}
