import { Link, useForm } from '@inertiajs/react'
import { ArrowLeft, ArrowRight } 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'

export default function Edit({ bank, quotationPriceDescOptions }) {
    const { show: showToast } = useToast();
    const form = useForm({
        Bank: bank.Bank ?? '',
        ACNo: bank.ACNo ?? '',
        AN: bank.AN ?? '',
        Cabang: bank.Cabang ?? '',
        Remark: bank.Remark ?? '',
        QuotationPriceDescID: bank.QuotationPriceDescID ?? '',
    })

    const submit = (e) => {
        e.preventDefault()
        form.put(route('banks.update', bank.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('banks.index')} className="text-muted-foreground no-underline hover:text-primary">Banks</Link>
                        <span aria-hidden="true">›</span>
                        <span className="text-primary">Edit Bank</span>
                    </p>
                    <h1 className="m-0 text-2xl font-extrabold leading-[1.2] tracking-tight text-foreground">Edit Bank</h1>
                </div>
                <Link href={route('banks.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 grid-cols-2 gap-x-5 gap-y-4 max-[700px]:grid-cols-1">
                        <div><FloatingField label="Nama Bank *" type="text" autoFocus value={form.data.Bank} onChange={(e) => form.setData('Bank', e.target.value)} />{err('Bank')}</div>
                        <div><FloatingField label="Nomor Rekening *" type="text" value={form.data.ACNo} onChange={(e) => form.setData('ACNo', e.target.value)} />{err('ACNo')}</div>
                        <div><FloatingField label="Atas Nama *" type="text" value={form.data.AN} onChange={(e) => form.setData('AN', e.target.value)} />{err('AN')}</div>
                        <div><FloatingField label="Cabang *" type="text" value={form.data.Cabang} onChange={(e) => form.setData('Cabang', e.target.value)} />{err('Cabang')}</div>
                        <div className="col-span-2 max-[700px]:col-span-1">
                            <FloatingField as="select" label="Quotation Price Description" value={form.data.QuotationPriceDescID ?? ''} onChange={(e) => form.setData('QuotationPriceDescID', e.target.value)}>
                                <option value="">— Pilih (opsional) —</option>
                                {quotationPriceDescOptions.map((opt) => <option key={opt.ID} value={opt.ID}>{opt.QuotationUnitPriceDescName}</option>)}
                            </FloatingField>
                            {err('QuotationPriceDescID')}
                        </div>
                        <div className="col-span-2 max-[700px]:col-span-1">
                            <FloatingField as="textarea" label="Catatan" value={form.data.Remark} onChange={(e) => form.setData('Remark', e.target.value)} />
                            {err('Remark')}
                        </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 ? 'Menyimpan…' : 'Update'} <ArrowRight className="size-3.5" />
                    </button>
                    <Link href={route('banks.index')} className={SECONDARY_BTN}>Batal</Link>
                </div>
            </form>
        </section>
    )
}

Edit.layout = [AppLayout]