import { Form, Head } from '@inertiajs/react'; import { Car, Plus, Star } from 'lucide-react'; import { useState } from 'react'; import { FormField } from '@/components/form-field'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { VehicleSizeCategoryIcon } from '@/components/vehicle-size-category-icon'; import { cn } from '@/lib/utils'; import type { VehicleSizeCategoryOption } from '@/lib/vehicle-sizes'; type SavedVehicle = { id: number; make: string; model: string; year: number; color: string | null; size: string; is_default: boolean; }; type Props = { vehicleSizeCategories: VehicleSizeCategoryOption[]; draft?: { size?: string; make?: string; model?: string; year?: string | number; color?: string; license_plate?: string; }; savedVehicles?: SavedVehicle[] | null; defaultVehicle?: { id: number; make: string; model: string; year: number; color: string | null; size: string } | null; }; export default function Step2Vehicle({ vehicleSizeCategories, draft, savedVehicles, defaultVehicle, }: Props) { const hasSaved = savedVehicles && savedVehicles.length > 0; // Which saved vehicle is selected (null = "use a different vehicle") const [selectedSavedId, setSelectedSavedId] = useState(() => { if (!hasSaved) { return null; } // If there's a draft already (e.g. back-navigated), don't auto-select if (draft && Object.keys(draft).some((k) => draft[k as keyof typeof draft])) { return null; } return defaultVehicle?.id ?? savedVehicles![0].id; }); const selectedSaved = hasSaved && selectedSavedId !== null ? (savedVehicles!.find((v) => v.id === selectedSavedId) ?? null) : null; // Vehicle size for the size picker (synced with saved selection or manual) const [vehicleSize, setVehicleSize] = useState(() => { if (selectedSaved) { return selectedSaved.size; } return draft?.size ?? vehicleSizeCategories[0]?.slug ?? 'sedan'; }); const handleSelectSaved = (v: SavedVehicle) => { setSelectedSavedId(v.id); setVehicleSize(v.size); }; const handleUseNew = () => { setSelectedSavedId(null); setVehicleSize(draft?.size ?? vehicleSizeCategories[0]?.slug ?? 'sedan'); }; const selectedCategory = vehicleSizeCategories.find((c) => c.slug === vehicleSize); return ( <>
{({ processing }) => (

Tell us about your vehicle

We use this to price your service and assign the right technician.

{/* ── Saved vehicles selector (authenticated users only) ── */} {hasSaved && (

Your saved vehicles

{savedVehicles!.map((v) => { const active = selectedSavedId === v.id; return ( ); })} {/* Use different vehicle option */}
)} {/* ── Hidden fields when using a saved vehicle ── */} {selectedSaved && ( <> )} {/* ── Manual entry form (guests or "use different vehicle") ── */} {!selectedSaved && ( <> {/* Vehicle size picker */}

Vehicle size

{vehicleSizeCategories.map((category) => ( ))}
{selectedCategory?.description && (

{selectedCategory.description}

)}
{/* Make / model / year / color */}
)} {/* ── Selected vehicle summary (when saved vehicle chosen) ── */} {selectedSaved && (

Selected vehicle

{selectedSaved.year} {selectedSaved.make} {selectedSaved.model}

{selectedSaved.size}{selectedSaved.color ? ` · ${selectedSaved.color}` : ''}

)}
)}
); }