import { Head, Link, useForm } from '@inertiajs/react';
import { ArrowLeft, Save } from 'lucide-react';
import AppLayout from '@/layouts/app-layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';

type Option = { id: number; name: string };
type Props = { categories: Option[]; teams: Option[]; salesUsers: Array<Option & { role_id: number | null }> };

type FormData = { customer_category_id: string; team_id: string; sales_id: string; code: string; name: string; address: string; latitude: string; longitude: string; phone: string; email: string; contact_person: string; type: string; credit_limit: string; status: string; notes: string };

const initial: FormData = { customer_category_id: '', team_id: '', sales_id: '', code: '', name: '', address: '', latitude: '', longitude: '', phone: '', email: '', contact_person: '', type: 'individual', credit_limit: '0', status: 'active', notes: '' };

export default function CustomerCreate({ categories, teams, salesUsers }: Props) {
    const { data, setData, post, processing, errors } = useForm<FormData>(initial);
    const submit = (e: React.FormEvent) => { e.preventDefault(); post('/customers'); };
    const field = (key: keyof FormData, label: string, type = 'text', required = false) => <div className="space-y-2"><Label>{label}{required && ' *'}</Label><Input type={type} value={data[key]} onChange={e => setData(key, e.target.value)} />{errors[key] && <p className="text-destructive text-xs">{errors[key]}</p>}</div>;
    return <><Head title="Customer Baru" /><div className="flex flex-1 flex-col gap-6 p-4 md:p-6"><div><Button variant="ghost" asChild><Link href="/customers"><ArrowLeft className="mr-2 size-4" /> Kembali</Link></Button><h1 className="mt-3 text-2xl font-semibold">Tambah Customer</h1></div><form onSubmit={submit} className="space-y-6"><Card className="shadow-none"><CardHeader><CardTitle>Informasi Customer</CardTitle></CardHeader><CardContent className="grid gap-5 md:grid-cols-2">{field('name','Nama Customer','text',true)}{field('code','Kode Customer')}{field('contact_person','Contact Person')}{field('phone','Telepon')}{field('email','Email','email')}
        <div className="space-y-2"><Label>Tipe</Label><Select value={data.type} onValueChange={v => setData('type', v)}><SelectTrigger className="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="individual">Individu</SelectItem><SelectItem value="company">Perusahaan</SelectItem></SelectContent></Select></div>
        <div className="space-y-2"><Label>Status</Label><Select value={data.status} onValueChange={v => setData('status', v)}><SelectTrigger className="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="active">Active</SelectItem><SelectItem value="inactive">Inactive</SelectItem></SelectContent></Select></div>
        <div className="space-y-2"><Label>Kategori</Label><Select value={data.customer_category_id || undefined} onValueChange={v => setData('customer_category_id', v)}><SelectTrigger className="w-full"><SelectValue placeholder="Pilih kategori" /></SelectTrigger><SelectContent>{categories.map(o => <SelectItem key={o.id} value={String(o.id)}>{o.name}</SelectItem>)}</SelectContent></Select></div>
        <div className="space-y-2"><Label>Team</Label><Select value={data.team_id || undefined} onValueChange={v => setData('team_id', v)}><SelectTrigger className="w-full"><SelectValue placeholder="Pilih team" /></SelectTrigger><SelectContent>{teams.map(o => <SelectItem key={o.id} value={String(o.id)}>{o.name}</SelectItem>)}</SelectContent></Select></div>
        <div className="space-y-2"><Label>Sales</Label><Select value={data.sales_id || undefined} onValueChange={v => setData('sales_id', v)}><SelectTrigger className="w-full"><SelectValue placeholder="Pilih sales" /></SelectTrigger><SelectContent>{salesUsers.map(o => <SelectItem key={o.id} value={String(o.id)}>{o.name}</SelectItem>)}</SelectContent></Select></div>
        {field('credit_limit','Credit Limit','number')}{field('latitude','Latitude','number')}{field('longitude','Longitude','number')}<div className="space-y-2 md:col-span-2"><Label>Alamat</Label><Textarea value={data.address} onChange={e => setData('address', e.target.value)} />{errors.address && <p className="text-destructive text-xs">{errors.address}</p>}</div><div className="space-y-2 md:col-span-2"><Label>Catatan</Label><Textarea value={data.notes} onChange={e => setData('notes', e.target.value)} /></div>
        </CardContent></Card><div className="flex justify-end"><Button disabled={processing}><Save className="mr-2 size-4" /> Simpan Customer</Button></div></form></div></>;
}
CustomerCreate.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={[{ title: 'Customers', href: '/customers' }, { title: 'Tambah', href: '/customers/create' }]}>{page}</AppLayout>;
