import { Search } from 'lucide-react';
import type { FormEvent } from 'react';
import { useState } from 'react';
import type { RoutePrefill } from '@/types/booking';
import BookingCard from './booking-card';
import GuestBookingDialog from './guest-booking-dialog';

type Props = {
    prefill: RoutePrefill | null;
    prefillKey: number;
    onPrefill: (prefill: RoutePrefill) => void;
    autoDetectLocation: boolean;
};

export default function Hero({
    prefill,
    prefillKey,
    onPrefill,
    autoDetectLocation,
}: Props) {
    const [query, setQuery] = useState('');

    const handleSearch = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        onPrefill({ routeId: null, origin: '', destination: query.trim() });
    };

    return (
        <section className="relative">
            <div className="absolute inset-x-0 top-0 h-[560px] overflow-hidden sm:h-[640px] lg:h-[700px]">
                <img
                    src="/images/hero-bg.png"
                    alt=""
                    className="size-full object-cover object-[70%_center]"
                />
                <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/50 to-transparent lg:from-white/70 lg:via-white/10" />
                <div className="absolute inset-x-0 bottom-0 h-[30%] bg-gradient-to-b from-transparent via-slate-500/20 to-slate-700/40 [mask-image:linear-gradient(to_bottom,transparent,black_45%)] backdrop-blur-md" />
            </div>

            <div className="relative mx-auto max-w-7xl px-4 pt-32 sm:px-6 lg:px-10 lg:pt-36">
                <span className="inline-block rounded-md bg-sand px-4 py-1.5 text-xs font-medium text-gold-dark">
                    Guaranteed Punctual Ground Transfers
                </span>

                <h1 className="mt-6 max-w-xl font-google text-4xl leading-[1.1] font-semibold tracking-tight text-navy sm:text-5xl lg:text-6xl">
                    Premium Mobility &amp; Airport Transit, Perfected.
                </h1>

                <p className="mt-5 max-w-md text-sm text-navy/80">
                    Reliable fixed-fare airport transfers, executive city
                    transit, all-day excursions
                </p>

                <div className="mt-6 flex max-w-lg flex-col gap-3 sm:flex-row">
                    <form
                        onSubmit={handleSearch}
                        className="flex flex-1 items-center gap-2 rounded-md border border-navy/15 bg-white py-1 pr-1 pl-3"
                    >
                        <Search className="size-4 shrink-0 text-navy/60" />
                        <input
                            type="search"
                            value={query}
                            onChange={(event) => setQuery(event.target.value)}
                            placeholder="Search destination..."
                            aria-label="Search destination"
                            className="w-full bg-transparent py-1.5 text-sm text-navy outline-none placeholder:text-navy/50"
                        />
                        <button
                            type="submit"
                            className="rounded px-3 py-1.5 text-sm font-medium text-navy transition-colors hover:bg-mist"
                        >
                            Search
                        </button>
                    </form>
                    <GuestBookingDialog>
                        <button
                            type="button"
                            className="rounded-md bg-gold px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-gold-dark"
                        >
                            Book as a guest
                        </button>
                    </GuestBookingDialog>
                </div>

                <div className="mt-14 lg:mt-20">
                    <BookingCard
                        key={prefillKey}
                        prefill={prefill}
                        autoDetectLocation={autoDetectLocation}
                    />
                </div>
            </div>
        </section>
    );
}