import { useForm } from '@inertiajs/react';
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

type Option = { id: number; name: string };
type Customer = {
    id?: number;
    customer_category_id?: number | null;
    team_id?: number | null;
    sales_id?: number | null;
    code?: string | null;
    name?: string;
    address?: string | null;
    phone?: string | null;
    email?: string | null;
    contact_person?: string | null;
    type?: 'individual' | 'company';
    credit_limit?: string | number | null;
    status?: 'active' | 'inactive';
    notes?: string | null;
};

export function CustomerForm({ customer, categories, teams, salesUsers }: { customer?: Customer; categories: Option[]; teams: Option[]; salesUsers: Option[] }) {
    const form = useForm({
        customer_category_id: customer?.customer_category_id?.toString() ?? '',
        team_id: customer?.team_id?.toString() ?? '',
        sales_id: customer?.sales_id?.toString() ?? '',
        code: customer?.code ?? '',
        name: customer?.name ?? '',
        address: customer?.address ?? '',
        phone: customer?.phone ?? '',
        email: customer?.email ?? '',
        contact_person: customer?.contact_person ?? '',
        type: customer?.type ?? 'company',
        credit_limit: customer?.credit_limit?.toString() ?? '0',
        status: customer?.status ?? 'active',
        notes: customer?.notes ?? '',
    });

    const submit = (event: React.FormEvent) => {
        event.preventDefault();
        if (customer?.id) {
            form.put(`/crm/customers/${customer.id}`);
        } else {
            form.post('/crm/customers');
        }
    };

    return (
        <form onSubmit={submit} className="space-y-6">
            <div className="grid gap-5 md:grid-cols-2">
                <Field label="Kode Customer" error={form.errors.code}><Input value={form.data.code} onChange={e => form.setData('code', e.target.value)} placeholder="CUS-0001" /></Field>
                <Field label="Nama Customer *" error={form.errors.name}><Input value={form.data.name} onChange={e => form.setData('name', e.target.value)} required /></Field>
                <Field label="Kategori" error={form.errors.customer_category_id}>
                    <Select value={form.data.customer_category_id || undefined} onValueChange={v => form.setData('customer_category_id', v)}><SelectTrigger><SelectValue placeholder="Pilih kategori" /></SelectTrigger><SelectContent>{categories.map(x => <SelectItem key={x.id} value={String(x.id)}>{x.name}</SelectItem>)}</SelectContent></Select>
                </Field>
                <Field label="Team" error={form.errors.team_id}>
                    <Select value={form.data.team_id || undefined} onValueChange={v => form.setData('team_id', v)}><SelectTrigger><SelectValue placeholder="Pilih team" /></SelectTrigger><SelectContent>{teams.map(x => <SelectItem key={x.id} value={String(x.id)}>{x.name}</SelectItem>)}</SelectContent></Select>
                </Field>
                <Field label="Sales" error={form.errors.sales_id}>
                    <Select value={form.data.sales_id || undefined} onValueChange={v => form.setData('sales_id', v)}><SelectTrigger><SelectValue placeholder="Pilih sales" /></SelectTrigger><SelectContent>{salesUsers.map(x => <SelectItem key={x.id} value={String(x.id)}>{x.name}</SelectItem>)}</SelectContent></Select>
                </Field>
                <Field label="Tipe" error={form.errors.type}>
                    <Select value={form.data.type} onValueChange={(v: 'individual' | 'company') => form.setData('type', v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="company">Perusahaan</SelectItem><SelectItem value="individual">Individual</SelectItem></SelectContent></Select>
                </Field>
                <Field label="Contact Person" error={form.errors.contact_person}><Input value={form.data.contact_person} onChange={e => form.setData('contact_person', e.target.value)} /></Field>
                <Field label="Telepon" error={form.errors.phone}><Input value={form.data.phone} onChange={e => form.setData('phone', e.target.value)} /></Field>
                <Field label="Email" error={form.errors.email}><Input type="email" value={form.data.email} onChange={e => form.setData('email', e.target.value)} /></Field>
                <Field label="Limit Kredit" error={form.errors.credit_limit}><Input type="number" min="0" value={form.data.credit_limit} onChange={e => form.setData('credit_limit', e.target.value)} /></Field>
                <Field label="Status" error={form.errors.status}>
                    <Select value={form.data.status} onValueChange={(v: 'active' | 'inactive') => form.setData('status', v)}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="active">Aktif</SelectItem><SelectItem value="inactive">Tidak Aktif</SelectItem></SelectContent></Select>
                </Field>
            </div>
            <Field label="Alamat" error={form.errors.address}><Textarea value={form.data.address} onChange={e => form.setData('address', e.target.value)} rows={3} /></Field>
            <Field label="Catatan" error={form.errors.notes}><Textarea value={form.data.notes} onChange={e => form.setData('notes', e.target.value)} rows={4} /></Field>
            <div className="flex justify-end gap-2"><Button type="button" variant="outline" onClick={() => window.history.back()}>Batal</Button><Button type="submit" disabled={form.processing}>{form.processing ? 'Menyimpan...' : 'Simpan Customer'}</Button></div>
        </form>
    );
}

function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
    return <div className="space-y-2"><Label>{label}</Label>{children}{error ? <p className="text-sm text-destructive">{error}</p> : null}</div>;
}