import { useForm } from '@inertiajs/react'
import { toast } from 'sonner'
import { Button } from '@ui/components/ui/button'
import { Input } from '@ui/components/ui/input'
import { Label } from '@ui/components/ui/label'
import { Checkbox } from '@ui/components/ui/checkbox'
import { Textarea } from '@ui/components/ui/textarea'

interface TeamItem {
    id: number
    code: string
    name: string
    description?: string | null
    is_active: boolean
}

interface Props {
    item?: TeamItem
    onSuccess: () => void
    onCancel: () => void
}

export function MasterTeamForm({ item, onSuccess, onCancel }: Props) {
    const { data, setData, post, put, processing, errors } = useForm({
        code: item?.code ?? '',
        name: item?.name ?? '',
        description: item?.description ?? '',
        is_active: item?.is_active ?? true,
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        const path = item ? `/master-data/master-teams/${item.id}` : '/master-data/master-teams'
        const method = item ? put : post
        method(path, {
            data: { ...data, code: data.code.toUpperCase() },
            onSuccess: () => {
                toast.success(item ? 'Master tim diperbarui.' : 'Master tim ditambahkan.')
                onSuccess()
            },
            onError: (bag) => toast.error(Object.values(bag)[0] ?? 'Terjadi kesalahan.'),
        })
    }

    return (
        <form onSubmit={submit} className='space-y-4'>
            <div className='space-y-1.5'>
                <Label>Kode</Label>
                <p className='text-xs text-muted-foreground'>Opsional. Jika dikosongkan, sistem akan generate kode otomatis.</p>
                <Input value={data.code} onChange={(e) => setData('code', e.target.value.toUpperCase())} />
                {errors.code && <p className='text-xs text-destructive'>{errors.code}</p>}
            </div>
            <div className='space-y-1.5'>
                <Label>Nama Tim</Label>
                <Input value={data.name} onChange={(e) => setData('name', e.target.value)} />
                {errors.name && <p className='text-xs text-destructive'>{errors.name}</p>}
            </div>
            <div className='space-y-1.5'>
                <Label>Deskripsi</Label>
                <Textarea value={data.description} onChange={(e) => setData('description', e.target.value)} rows={3} />
                {errors.description && <p className='text-xs text-destructive'>{errors.description}</p>}
            </div>
            <div className='flex items-center gap-2'>
                <Checkbox checked={data.is_active} onCheckedChange={(v) => setData('is_active', !!v)} id='mt-active' />
                <Label htmlFor='mt-active' className='cursor-pointer font-normal'>Aktif</Label>
            </div>
            <div className='flex justify-end gap-2'>
                <Button type='button' variant='outline' onClick={onCancel} disabled={processing}>Batal</Button>
                <Button type='submit' disabled={processing}>{processing ? 'Menyimpan...' : 'Simpan'}</Button>
            </div>
        </form>
    )
}