import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { RupiahInput } from '@/components/rupiah-input';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index as employeeIndex, store } from '@/routes/admin/hr/employees';
import { Form, Head } from '@inertiajs/react';
import { AlertCircle, ArrowLeft } from 'lucide-react';
import { useState } from 'react';

export default function EmployeeCreate() {
    const [joinDate, setJoinDate] = useState<Date | undefined>(undefined);
    const [resignDate, setResignDate] = useState<Date | undefined>(undefined);

    return (
        <>
            <Head title="Tambah Pegawai" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <div className="flex items-center justify-between">
                    <div>
                        <h2 className="text-2xl font-semibold tracking-tight">
                            Tambah Pegawai
                        </h2>
                    </div>
                    <Button asChild variant='outline'>
                        <a href={employeeIndex.url()}>
                            <ArrowLeft className="h-4 w-4" />
                            Kembali
                        </a>
                    </Button>
                </div>

                <Alert>
                    <AlertCircle className="h-4 w-4" />
                    <AlertTitle>Informasi Kata Sandi</AlertTitle>
                    <AlertDescription>
                        Kata sandi default untuk akun baru adalah Minimal8@
                    </AlertDescription>
                </Alert>

                <Form
                    action={store()}
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-6">
                                <Card>
                                    <CardHeader>
                                        <CardTitle>Akun</CardTitle>
                                    </CardHeader>
                                    <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div className="grid gap-2">
                                            <Label htmlFor="email">
                                                Email <span className="text-destructive">*</span>
                                            </Label>
                                            <Input
                                                id="email"
                                                name="email"
                                                type="email"
                                                placeholder="Masukkan email"
                                            />
                                            <InputError message={errors.email} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="username">
                                                Username <span className="text-destructive">*</span>
                                            </Label>
                                            <Input
                                                id="username"
                                                name="username"
                                                placeholder="Masukkan username"
                                            />
                                            <InputError message={errors.username} />
                                        </div>
                                    </CardContent>
                                </Card>

                                <Card>
                                    <CardHeader>
                                        <CardTitle>Profil</CardTitle>
                                    </CardHeader>
                                    <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div className="grid gap-2">
                                            <Label htmlFor="full_name">
                                                Nama Lengkap <span className="text-destructive">*</span>
                                            </Label>
                                            <Input
                                                id="full_name"
                                                name="full_name"
                                                placeholder="Masukkan nama lengkap"
                                            />
                                            <InputError message={errors.full_name} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="phone_number">
                                                Nomor HP
                                            </Label>
                                            <Input
                                                id="phone_number"
                                                name="phone_number"
                                                placeholder="Masukkan nomor HP"
                                            />
                                            <InputError message={errors.phone_number} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>Jenis Kelamin</Label>
                                            <RadioGroup name="gender" className="flex gap-4">
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem value="male" id="gender-male" />
                                                    <Label htmlFor="gender-male" className="font-normal">Laki-laki</Label>
                                                </div>
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem value="female" id="gender-female" />
                                                    <Label htmlFor="gender-female" className="font-normal">Perempuan</Label>
                                                </div>
                                            </RadioGroup>
                                            <InputError message={errors.gender} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>Tanggal Lahir</Label>
                                            <DatePicker
                                                name="birth_date"
                                                value={undefined}
                                                onChange={() => {}}
                                                placeholder="Pilih tanggal lahir"
                                            />
                                            <InputError message={errors.birth_date} />
                                        </div>
                                        <div className="grid gap-2 md:col-span-2">
                                            <Label htmlFor="address">
                                                Alamat
                                            </Label>
                                            <Textarea
                                                id="address"
                                                name="address"
                                                placeholder="Masukkan alamat"
                                                rows={3}
                                            />
                                            <InputError message={errors.address} />
                                        </div>
                                    </CardContent>
                                </Card>

                                <Card>
                                    <CardHeader>
                                        <CardTitle>Pegawai</CardTitle>
                                    </CardHeader>
                                    <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div className="grid gap-2">
                                            <Label>Tanggal Masuk <span className="text-destructive">*</span></Label>
                                            <DatePicker
                                                name="join_date"
                                                value={joinDate}
                                                onChange={setJoinDate}
                                                placeholder="Pilih tanggal masuk"
                                            />
                                            <InputError message={errors.join_date} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>Tanggal Keluar</Label>
                                            <DatePicker
                                                name="resign_date"
                                                value={resignDate}
                                                onChange={setResignDate}
                                                placeholder="Pilih tanggal keluar"
                                            />
                                            <InputError message={errors.resign_date} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>Status Kepegawaian <span className="text-destructive">*</span></Label>
                                            <Select name="employment_status" defaultValue="full_time">
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Pilih status kepegawaian" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="full_time">Full Time</SelectItem>
                                                    <SelectItem value="part_time">Part Time</SelectItem>
                                                    <SelectItem value="contract">Kontrak</SelectItem>
                                                    <SelectItem value="internship">Magang</SelectItem>
                                                    <SelectItem value="resigned">Keluar</SelectItem>
                                                </SelectContent>
                                            </Select>
                                            <InputError message={errors.employment_status} />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="base_salary">
                                                Gaji Pokok <span className="text-destructive">*</span>
                                            </Label>
                                            <RupiahInput name="base_salary" min={1} />
                                            <InputError message={errors.base_salary} />
                                        </div>
                                    </CardContent>
                                </Card>
                            </div>

                            <div className="flex items-center gap-4 mt-6">
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Menyimpan...' : 'Simpan'}
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </div>
        </>
    );
}

EmployeeCreate.layout = {
    breadcrumbs: [
        {
            title: 'HR',
            href: employeeIndex.url(),
        },
        {
            title: 'Pegawai',
            href: employeeIndex.url(),
        },
        {
            title: 'Tambah',
            href: '#',
        },
    ],
};
