import { Link, useForm } from '@inertiajs/react'
import { ArrowLeft } from 'lucide-react'
import AppLayout from '@/Layouts/AppLayout'
import { useToast } from '@/Components/Toast'
import VehicleForm from './VehicleForm'

const SECONDARY_BTN = 'inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary'

// '0000-00-00' is the project's "blank date" sentinel — never show it in a date input.
const dateOrBlank = (v) => (!v || v === '0000-00-00' ? '' : v)

export default function Edit({ vehicle, lookups }) {
    const { show: showToast } = useToast()
    const form = useForm({
        UserIDOwner: vehicle.UserIDOwner ?? null,
        VehicleTypeID: vehicle.VehicleTypeID ?? null,
        VehicleBrandID: vehicle.VehicleBrandID ?? null,
        VehicleBrandTypeID: vehicle.VehicleBrandTypeID ?? null,
        VehicleColorID: vehicle.VehicleColorID ?? null,
        VehicleFuelTypeID: vehicle.VehicleFuelTypeID ?? null,
        ProductionYear: vehicle.ProductionYear || '',
        ChassisNumber: vehicle.ChassisNumber ?? '',
        EngineNumber: vehicle.EngineNumber ?? '',
        LisencePlate: vehicle.LisencePlate ?? '',
        LisenceExpiryDate: dateOrBlank(vehicle.LisenceExpiryDate),
        Insurance: vehicle.Insurance ?? '',
        InsuranceExpiryDate: dateOrBlank(vehicle.InsuranceExpiryDate),
        PolicyNumber: vehicle.PolicyNumber ?? '',
        Remark: vehicle.Description ?? '',
    })

    const submit = (e) => {
        e.preventDefault()
        form.put(route('vehicles.update', vehicle.ID), {
            onError: () => showToast('Please check the form and try again.', 'error'),
        })
    }

    return (
        <section className="flex min-w-0 flex-col gap-5">
            <header className="flex items-start justify-between gap-4">
                <div>
                    <p className="m-0 mb-1.5 flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                        <Link href={route('vehicles.index')} className="text-muted-foreground no-underline hover:text-primary">Vehicle</Link>
                        <span aria-hidden="true">›</span>
                        <span className="text-primary">Edit</span>
                    </p>
                    <h1 className="m-0 text-2xl font-extrabold leading-[1.2] tracking-tight text-foreground">Edit Vehicle</h1>
                </div>
                <Link href={route('vehicles.index')} className={SECONDARY_BTN}><ArrowLeft className="size-3.5" /> Back</Link>
            </header>

            <VehicleForm form={form} lookups={lookups} onSubmit={submit} cancelHref={route('vehicles.index')} />
        </section>
    )
}

Edit.layout = [AppLayout]