import { Head, useForm, Link } from '@inertiajs/react';
import React from 'react';
import type { FormEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, 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 AppLayout from '@/layouts/app-layout';

export default function Create() {
    const { data, setData, post, processing, errors } = useForm({
        name: '', 
        email: '', 
        password: '', 
        nip: '', 
        position: '', 
        status: 'PKWT', 
        join_date: '',
    });

    const submit = (e: FormEvent) => {
        e.preventDefault();
        post('/admin/employees');
    };

    return (
        <AppLayout>
            <Head title="Tambah Karyawan" />
            <div className="p-8 max-w-2xl mx-auto">
                <Card>
                    <CardHeader>
                        <CardTitle>Tambah Karyawan</CardTitle>
                        <CardDescription>Masukkan data detail karyawan baru.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={submit} className="space-y-4">
                            <div className="space-y-2">
                                <Label>Nama Lengkap</Label>
                                <Input value={data.name} onChange={e => setData('name', e.target.value)} />
                                {errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
                            </div>

                            <div className="space-y-2">
                                <Label>Email</Label>
                                <Input type="email" value={data.email} onChange={e => setData('email', e.target.value)} />
                                {errors.email && <p className="text-xs text-red-500">{errors.email}</p>}
                            </div>

                            <div className="space-y-2">
                                <Label>Password Default</Label>
                                <Input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label>NIP</Label>
                                    <Input value={data.nip} onChange={e => setData('nip', e.target.value)} />
                                </div>
                                <div className="space-y-2">
                                    <Label>Tanggal Masuk</Label>
                                    <Input type="date" value={data.join_date} onChange={e => setData('join_date', e.target.value)} />
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label>Jabatan</Label>
                                    <Select onValueChange={(val) => setData('position', val)}>
                                        <SelectTrigger><SelectValue placeholder="Pilih" /></SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="Staff">Staff</SelectItem>
                                            <SelectItem value="Supervisor">Supervisor</SelectItem>
                                            <SelectItem value="Manager">Manager</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="space-y-2">
                                    <Label>Status</Label>
                                    <Select onValueChange={(val) => setData('status', val)}>
                                        <SelectTrigger><SelectValue placeholder="Pilih" /></SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="PKWT">PKWT</SelectItem>
                                            <SelectItem value="PKWTT">PKWTT</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>

                            <div className="flex justify-end gap-2 pt-4">
                                <Button variant="outline" asChild><Link href="/admin/employees">Batal</Link></Button>
                                <Button type="submit" disabled={processing}>Simpan</Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}