import { FormEvent } from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { CrmSelect } from '@/components/crm-select';

type Props = { orders: any[]; couriers: any[] };
export default function Create({ orders, couriers }: Props) {
    const form = useForm({ order_id: '', courier_id: '', scheduled_date: '', notes: '' });
    const submit = (e: FormEvent) => { e.preventDefault(); form.post('/crm/deliveries'); };
    return <AppLayout breadcrumbs={[{ title: 'Pengiriman', href: '/crm/deliveries' }, { title: 'Buat Surat Jalan', href: '/crm/deliveries/create' }]}>
        <Head title="Buat Surat Jalan" /><div className="crm-page space-y-6"><div><h1 className="text-2xl font-semibold tracking-tight">Buat Surat Jalan</h1><p className="text-sm text-muted-foreground">Pilih order yang sudah disetujui untuk diproses ke pengiriman.</p></div>
            <form onSubmit={submit} className="max-w-3xl space-y-5 rounded-xl border bg-card p-6 shadow-sm">
                <div><Label>Order</Label><CrmSelect className="mt-2 w-full" value={form.data.order_id} onChange={e => form.setData('order_id', e.target.value)}><option value="">Pilih order</option>{orders.map(o => <option key={o.id} value={o.id}>{o.order_number} — {o.customer?.name ?? '-'} — Rp {Number(o.grand_total).toLocaleString('id-ID')}</option>)}</CrmSelect>{form.errors.order_id && <p className="mt-1 text-sm text-destructive">{form.errors.order_id}</p>}</div>
                <div className="grid gap-4 md:grid-cols-2"><div><Label>Kurir</Label><CrmSelect className="mt-2 w-full" value={form.data.courier_id} onChange={e => form.setData('courier_id', e.target.value)}><option value="">Assign nanti</option>{couriers.map(c => <option key={c.id} value={c.id}>{c.name}{c.phone ? ` — ${c.phone}` : ''}</option>)}</CrmSelect></div><div><Label>Jadwal Pengiriman</Label><Input className="mt-2" type="date" value={form.data.scheduled_date} onChange={e => form.setData('scheduled_date', e.target.value)} /></div></div>
                <div><Label>Catatan</Label><Textarea className="mt-2 min-h-28" value={form.data.notes} onChange={e => form.setData('notes', e.target.value)} placeholder="Catatan untuk tim pengiriman..." /></div>
                <div className="flex justify-end gap-2"><Button type="button" variant="outline" asChild><Link href="/crm/deliveries">Batal</Link></Button><Button disabled={form.processing}>Buat Surat Jalan</Button></div>
            </form></div></AppLayout>;
}
