import { Head, Link, usePage } from '@inertiajs/react';
import {
    ArrowRight,
    Shield,
    ShieldCheck,
    SlidersHorizontal,
} from 'lucide-react';
import SiteFooter from '@/components/home/site-footer';
import SiteHeader from '@/components/home/site-header';
import ChauffeurPreferencesCard from '@/components/onboarding/chauffeur-preferences-card';
import ContactBaselineCard from '@/components/onboarding/contact-baseline-card';
import OnboardingProgress from '@/components/onboarding/onboarding-progress';
import PassengerVerificationCard from '@/components/onboarding/passenger-verification-card';
import { home } from '@/routes';
import { edit as security } from '@/routes/security';
import type {
    Preferences,
    ProfileProgress,
    SelectOption,
} from '@/types/profile';

type Props = {
    preferences: Preferences;
    vehicleTiers: SelectOption[];
    luggageOptions: SelectOption[];
    progress: ProfileProgress;
    twoFactorEnabled: boolean;
};

export default function OnboardingProfile({
    preferences,
    vehicleTiers,
    luggageOptions,
    progress,
    twoFactorEnabled,
}: Props) {
    const { auth } = usePage().props;
    const emailVerified = auth.user.email_verified_at !== null;

    return (
        <>
            <Head title="Profile Creation" />
            <div className="min-h-screen bg-mist font-google text-navy dark:bg-ink dark:text-white">
                <SiteHeader variant="solid" />

                <main className="mx-auto max-w-6xl px-4 pt-14 pb-20 sm:px-6 lg:pt-20">
                    <h1 className="text-center text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
                        Profile Creation
                    </h1>

                    <div className="mt-12 lg:mt-16">
                        <OnboardingProgress progress={progress} />
                    </div>

                    <div className="mt-6 flex flex-col gap-4 border-b border-navy/15 pb-8 sm:flex-row sm:items-start sm:justify-between dark:border-white/20">
                        <div>
                            <h2 className="flex items-center gap-3 text-2xl font-semibold sm:text-3xl">
                                <SlidersHorizontal className="size-5 shrink-0" />
                                Personalize your travel experience
                            </h2>
                            <p className="mt-2 text-base text-navy/80 dark:text-white/90">
                                Configure your chauffeur defaults, travel
                                requirements, and real-time flight telemetry
                                synchronization.
                            </p>
                        </div>
                        {twoFactorEnabled ? (
                            <span className="inline-flex w-fit shrink-0 items-center gap-2 rounded-full border border-green-300 bg-green-50 px-4 py-1.5 text-sm text-green-700 sm:mt-4 dark:border-green-500/40 dark:bg-green-500/10 dark:text-green-400">
                                <ShieldCheck className="size-3.5" />
                                Two-Factor Secured
                            </span>
                        ) : (
                            <Link
                                href={security()}
                                className="inline-flex w-fit shrink-0 items-center gap-2 rounded-full border border-gold bg-gold/10 px-4 py-1.5 text-sm text-gold-dark transition-colors hover:bg-gold/20 sm:mt-4 dark:text-gold"
                            >
                                <Shield className="size-3.5" />
                                Secure with two-factor
                            </Link>
                        )}
                    </div>

                    <div className="mt-4 grid items-start gap-4 lg:grid-cols-[0.95fr_1.35fr]">
                        <div className="space-y-4">
                            <PassengerVerificationCard
                                name={auth.user.name}
                                title={auth.user.job_title}
                                avatar={auth.user.avatar ?? null}
                                verified={emailVerified}
                            />
                            <ContactBaselineCard
                                name={auth.user.name}
                                email={auth.user.email}
                                phone={auth.user.phone}
                                jobTitle={auth.user.job_title}
                                emailVerified={emailVerified}
                            />
                        </div>
                        <ChauffeurPreferencesCard
                            preferences={preferences}
                            vehicleTiers={vehicleTiers}
                            luggageOptions={luggageOptions}
                        />
                    </div>

                    <div className="mt-8 flex flex-col-reverse items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <p className="text-center text-sm text-navy/70 sm:text-left dark:text-white/70">
                            Changes are saved automatically. You can update them
                            any time from My Profile.
                        </p>
                        <Link
                            href={home()}
                            className="flex items-center justify-center gap-2 rounded-lg bg-gold px-8 py-3 text-base font-semibold text-white transition-colors hover:bg-gold-dark"
                        >
                            Continue
                            <ArrowRight className="size-4" />
                        </Link>
                    </div>
                </main>

                <SiteFooter className="bg-mist dark:bg-ink" />
            </div>
        </>
    );
}
