import { Link, useForm } from '@inertiajs/react'
import { ArrowLeft, ArrowRight, Loader2 } from 'lucide-react'
import AppLayout from '@/Layouts/AppLayout'
import { FloatingField } from '@/Components/Proto/UI/FloatingField'
import { Button } from '@/Components/ui/button'
import { useToast } from '@/Components/Toast'

const CARD = 'rounded-2xl border border-border bg-card shadow-sm p-6'
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'

export default function Edit({ vehicleServiceType }) {
    const { show: showToast } = useToast()
    const form = useForm({ VehicleServiceTypeName: vehicleServiceType.VehicleServiceTypeName ?? '' })

    const submit = (e) => {
        e.preventDefault()
        form.put(route('vehicle-service-types.update', vehicleServiceType.ID), {
            onError: () => showToast('Please check the form and try again.', 'error'),
        })
    }
    const err = (k) => (form.errors[k] ? <p className="mt-1 text-[11px] font-semibold text-destructive">{form.errors[k]}</p> : null)

    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('vehicle-service-types.index')} className="text-muted-foreground no-underline hover:text-primary">Vehicle Service Type</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 Service Type</h1>
                </div>
                <Link href={route('vehicle-service-types.index')} className={SECONDARY_BTN}><ArrowLeft className="size-3.5" /> Back</Link>
            </header>

            <form onSubmit={submit} className="flex flex-col gap-5">
                <article className={CARD}>
                    <FloatingField label="Name *" type="text" autoFocus
                        value={form.data.VehicleServiceTypeName}
                        onChange={(e) => form.setData('VehicleServiceTypeName', e.target.value)} />
                    {err('VehicleServiceTypeName')}
                </article>
                <div className="flex items-center gap-3 border-t border-border/60 pt-4">
                    <Button type="submit" disabled={form.processing} onClick={submit}>
                        {form.processing
                            ? <><Loader2 className="size-3.5 animate-spin" /> Menyimpan…</>
                            : <>Simpan <ArrowRight className="size-3.5" /></>}
                    </Button>
                    <Link href={route('vehicle-service-types.index')} className={SECONDARY_BTN}>Batal</Link>
                </div>
            </form>
        </section>
    )
}

Edit.layout = [AppLayout]