import { Head, useForm, Link } from '@inertiajs/react';
import { Separator } from '@radix-ui/react-separator';
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';

// Definisi tipe data props untuk TypeScript
interface EmployeeProps {
    employee: {
        id: number;
        nip: string;
        position: string;
        status: string;
        join_date: string;
        user: {
            name: string;
            email: string;
        } | null;
    };
}

export default function Edit({ employee }: EmployeeProps) {
    // Inisialisasi form dengan data dari database
    const { data, setData, put, processing, errors } = useForm({
        name: employee.user?.name || '',
        email: employee.user?.email || '',
        password: '', // Kosongkan untuk keamanan
        nip: employee.nip || '',
        position: employee.position || '',
        status: employee.status || 'PKWT',
        join_date: employee.join_date || '',
    });

    const submit = (e: FormEvent) => {
        e.preventDefault();
        put(`/admin/employees/${employee.id}`);
    };

    return (
        <AppLayout>
            <Head title={`Edit Karyawan - ${employee.user?.name}`} />
            <div className="p-8 max-w-2xl mx-auto">
                <Card>
                    <CardHeader>
                        <CardTitle>Edit Karyawan</CardTitle>
                        <CardDescription>
                            Perbarui informasi data diri dan kepegawaian karyawan.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={submit} className="space-y-4">
                            {/* Data Profil */}
                            <div className="space-y-2">
                                <Label htmlFor="name">Nama Lengkap</Label>
                                <Input 
                                    id="name" 
                                    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 htmlFor="email">Email</Label>
                                <Input 
                                    id="email" 
                                    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 htmlFor="password">Password Baru (Kosongkan jika tidak diganti)</Label>
                                <Input 
                                    id="password" 
                                    type="password" 
                                    value={data.password} 
                                    onChange={e => setData('password', e.target.value)} 
                                />
                                {errors.password && <p className="text-xs text-red-500">{errors.password}</p>}
                            </div>

                            <Separator className="my-4" />

                            {/* Data Kepegawaian */}
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label htmlFor="nip">NIP</Label>
                                    <Input 
                                        id="nip" 
                                        value={data.nip} 
                                        onChange={e => setData('nip', e.target.value)} 
                                    />
                                    {errors.nip && <p className="text-xs text-red-500">{errors.nip}</p>}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="join_date">Tanggal Masuk</Label>
                                    <Input 
                                        id="join_date" 
                                        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 
                                        value={data.position} 
                                        onValueChange={(val) => setData('position', val)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Pilih Jabatan" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="Staff">Staff</SelectItem>
                                            <SelectItem value="Supervisor">Supervisor</SelectItem>
                                            <SelectItem value="Manager">Manager</SelectItem>
                                            <SelectItem value="HRD">HRD</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="space-y-2">
                                    <Label>Status Kerja</Label>
                                    <Select 
                                        value={data.status} 
                                        onValueChange={(val) => setData('status', val)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Pilih Status" />
                                        </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 Perubahan
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}