import { Form, Head, Link } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Combobox,
    ComboboxChip,
    ComboboxChips,
    ComboboxChipsInput,
    ComboboxContent,
    ComboboxEmpty,
    ComboboxItem,
    ComboboxList,
    useComboboxAnchor,
} from '@/components/ui/combobox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { PhoneInput } from '@/components/ui/phone-input';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import { index, store } from '@/routes/admin/users/lecturers';
import { formatDepartmentLabel } from '@/types/department';

type Department = { id: number; name: string; degree_level: string | null };

type Props = {
    departments: Department[];
};

export default function LecturerCreate({ departments }: Props) {
    const [gender, setGender] = useState('');
    const [birthDate, setBirthDate] = useState<Date | undefined>();
    const [selectedDepartments, setSelectedDepartments] = useState<
        Department[]
    >([]);
    const departmentAnchor = useComboboxAnchor();

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

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <PageHeader
                    title="Tambah Dosen"
                    actions={
                        <Button variant="outline" asChild>
                            <Link href={index.url()}>
                                <ArrowLeft className="h-4 w-4" />
                                Kembali
                            </Link>
                        </Button>
                    }
                />

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

                            <Card>
                                <CardHeader>
                                    <CardTitle>Profil Pribadi</CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-4 md:grid-cols-2">
                                    <div className="grid gap-2">
                                        <Label htmlFor="full_name">
                                            Nama Lengkap{' '}
                                            <span className="text-red-500">
                                                *
                                            </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 Telepon{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <PhoneInput
                                            id="phone_number"
                                            name="phone_number"
                                            placeholder="08xx xxxx xxxx"
                                        />
                                        <InputError
                                            message={errors.phone_number}
                                        />
                                    </div>
                                    <div className="grid gap-4 md:col-span-2 md:grid-cols-3">
                                        <div className="grid gap-2">
                                            <Label>
                                                Jenis Kelamin{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <input
                                                type="hidden"
                                                name="gender"
                                                value={gender}
                                            />
                                            <RadioGroup
                                                value={gender}
                                                onValueChange={setGender}
                                                className="flex gap-4"
                                            >
                                                <div className="flex items-center gap-2">
                                                    <RadioGroupItem
                                                        value="male"
                                                        id="male"
                                                    />
                                                    <Label
                                                        htmlFor="male"
                                                        className="font-normal"
                                                    >
                                                        Laki-laki
                                                    </Label>
                                                </div>
                                                <div className="flex items-center gap-2">
                                                    <RadioGroupItem
                                                        value="female"
                                                        id="female"
                                                    />
                                                    <Label
                                                        htmlFor="female"
                                                        className="font-normal"
                                                    >
                                                        Perempuan
                                                    </Label>
                                                </div>
                                            </RadioGroup>
                                            <InputError
                                                message={errors.gender}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>
                                                Tempat Lahir{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <Input
                                                name="birth_place"
                                                placeholder="Masukkan tempat lahir"
                                            />
                                            <InputError
                                                message={errors.birth_place}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>
                                                Tanggal Lahir{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <input
                                                type="hidden"
                                                name="birth_date"
                                                value={
                                                    birthDate
                                                        ? format(
                                                              birthDate,
                                                              'yyyy-MM-dd',
                                                          )
                                                        : ''
                                                }
                                            />
                                            <DatePicker
                                                value={birthDate}
                                                onChange={setBirthDate}
                                            />
                                            <InputError
                                                message={errors.birth_date}
                                            />
                                        </div>
                                    </div>
                                    <div className="grid gap-2 md:col-span-2">
                                        <Label htmlFor="address">
                                            Alamat{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <Textarea
                                            id="address"
                                            name="address"
                                            placeholder="Masukkan alamat"
                                        />
                                        <InputError message={errors.address} />
                                    </div>
                                </CardContent>
                            </Card>

                            <Card>
                                <CardHeader>
                                    <CardTitle>Informasi Dosen</CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-4 md:grid-cols-2">
                                    <div className="grid gap-2">
                                        <Label htmlFor="lecturer_number">
                                            NIDN{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <Input
                                            id="lecturer_number"
                                            name="lecturer_number"
                                            placeholder="Masukkan NIDN"
                                        />
                                        <InputError
                                            message={errors.lecturer_number}
                                        />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label>
                                            Jurusan{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        {selectedDepartments.map((dept) => (
                                            <input
                                                key={dept.id}
                                                type="hidden"
                                                name="department_ids[]"
                                                value={dept.id}
                                            />
                                        ))}
                                        <Combobox
                                            items={departments}
                                            multiple
                                            value={selectedDepartments}
                                            onValueChange={
                                                setSelectedDepartments
                                            }
                                            itemToStringLabel={
                                                formatDepartmentLabel
                                            }
                                            isItemEqualToValue={(a, b) =>
                                                a.id === b.id
                                            }
                                        >
                                            <ComboboxChips
                                                ref={departmentAnchor}
                                            >
                                                {selectedDepartments.map(
                                                    (dept) => (
                                                        <ComboboxChip
                                                            key={dept.id}
                                                            aria-label={formatDepartmentLabel(
                                                                dept,
                                                            )}
                                                        >
                                                            {formatDepartmentLabel(
                                                                dept,
                                                            )}
                                                        </ComboboxChip>
                                                    ),
                                                )}
                                                <ComboboxChipsInput
                                                    placeholder={
                                                        selectedDepartments.length ===
                                                        0
                                                            ? 'Pilih jurusan'
                                                            : ''
                                                    }
                                                />
                                            </ComboboxChips>
                                            <ComboboxContent
                                                anchor={departmentAnchor}
                                            >
                                                <ComboboxEmpty>
                                                    Jurusan tidak ditemukan.
                                                </ComboboxEmpty>
                                                <ComboboxList>
                                                    {(dept: Department) => (
                                                        <ComboboxItem
                                                            key={dept.id}
                                                            value={dept}
                                                        >
                                                            {formatDepartmentLabel(
                                                                dept,
                                                            )}
                                                        </ComboboxItem>
                                                    )}
                                                </ComboboxList>
                                            </ComboboxContent>
                                        </Combobox>
                                        <InputError
                                            message={errors.department_ids}
                                        />
                                    </div>
                                </CardContent>
                            </Card>

                            <div className="flex justify-end">
                                <Button type="submit" disabled={processing}>
                                    <Save className="h-4 w-4" />
                                    Simpan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </div>
        </>
    );
}
