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 { 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'

// DATE columns arrive as 'YYYY-MM-DD'; <input type="date"> wants exactly that, so slice
// rather than constructing a Date (which would shift the day across timezones).
const day = (v) => (v ? String(v).slice(0, 10) : '')

export default function Edit({ periode }) {
    const { show: showToast } = useToast()
    const form = useForm({
        PeriodeName: periode.PeriodeName ?? '',
        StartDate: day(periode.StartDate),
        EndDate: day(periode.EndDate),
    })

    const submit = (e) => {
        e.preventDefault()
        form.put(route('budget-and-target-periodes.update', periode.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-danger-text">{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('budget-and-target-periodes.index')} className="text-muted-foreground no-underline hover:text-primary">Budget and Target Period</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 Budget and Target Period</h1>
                </div>
                <Link href={route('budget-and-target-periodes.index')} className={SECONDARY_BTN}><ArrowLeft className="size-3.5" /> Back</Link>
            </header>

            <form onSubmit={submit} className="flex flex-col gap-5">
                <article className={CARD}>
                    <div className="grid gap-5 sm:grid-cols-2">
                        <div className="sm:col-span-2">
                            <FloatingField label="Period Name *" type="text" autoFocus
                                value={form.data.PeriodeName}
                                onChange={(e) => form.setData('PeriodeName', e.target.value)} />
                            {err('PeriodeName')}
                        </div>
                        <div>
                            <FloatingField label="Start Date *" type="date"
                                value={form.data.StartDate}
                                onChange={(e) => form.setData('StartDate', e.target.value)} />
                            {err('StartDate')}
                        </div>
                        <div>
                            <FloatingField label="End Date *" type="date"
                                value={form.data.EndDate}
                                onChange={(e) => form.setData('EndDate', e.target.value)} />
                            {err('EndDate')}
                        </div>
                    </div>
                </article>
                <div className="flex items-center gap-3 border-t border-border/60 pt-4">
                    <button type="submit" disabled={form.processing} className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-5 text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-50">
                        {form.processing
                            ? <><Loader2 className="size-3.5 animate-spin" /> Saving…</>
                            : <>Save <ArrowRight className="size-3.5" /></>}
                    </button>
                    <Link href={route('budget-and-target-periodes.index')} className={SECONDARY_BTN}>Cancel</Link>
                </div>
            </form>
        </section>
    )
}

Edit.layout = [AppLayout]