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,
    ComboboxContent,
    ComboboxEmpty,
    ComboboxInput,
    ComboboxItem,
    ComboboxList,
} 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 {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index, update } from '@/routes/admin/users/students';
import { formatDepartmentLabel } from '@/types/department';

type Department = { id: number; name: string; degree_level: string | null };
type Lecturer = {
    id: number;
    lecturer_number: string;
    user: { profile: { full_name: string } | null } | null;
};

type User = {
    id: number;
    username: string;
    email: string;
    profile: {
        full_name: string;
        phone_number: string;
        address: string;
        gender: string;
        birth_date: string;
        birth_place: string;
    } | null;
    student: {
        student_number: string;
        department_id: number;
        enrollment_year: number;
        current_semester: number;
        academic_advisor_id: number;
    } | null;
};

type Props = {
    user: User;
    departments: Department[];
    lecturers: Lecturer[];
};

export default function StudentEdit({ user, departments, lecturers }: Props) {
    const [gender, setGender] = useState(user.profile?.gender ?? '');
    const [birthDate, setBirthDate] = useState<Date | undefined>(
        user.profile?.birth_date
            ? new Date(user.profile.birth_date)
            : undefined,
    );
    const [advisor, setAdvisor] = useState<Lecturer | null>(
        lecturers.find(
            (lect) => lect.id === user.student?.academic_advisor_id,
        ) ?? null,
    );

    return (
        <>
            <Head title="Edit Mahasiswa" />

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

                <Form action={update(user.id)} 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"
                                            defaultValue={user.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"
                                            defaultValue={user.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"
                                            defaultValue={
                                                user.profile?.full_name ?? ''
                                            }
                                        />
                                        <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"
                                            value={
                                                user.profile?.phone_number ?? ''
                                            }
                                        />
                                        <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"
                                                defaultValue={
                                                    user.profile?.birth_place ??
                                                    ''
                                                }
                                            />
                                            <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"
                                            defaultValue={
                                                user.profile?.address ?? ''
                                            }
                                        />
                                        <InputError message={errors.address} />
                                    </div>
                                </CardContent>
                            </Card>

                            <Card>
                                <CardHeader>
                                    <CardTitle>Informasi Mahasiswa</CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-4 md:grid-cols-2">
                                    <div className="grid gap-2">
                                        <Label htmlFor="student_number">
                                            NIM{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <Input
                                            id="student_number"
                                            name="student_number"
                                            defaultValue={
                                                user.student?.student_number ??
                                                ''
                                            }
                                        />
                                        <InputError
                                            message={errors.student_number}
                                        />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label>
                                            Jurusan{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <Select
                                            name="department_id"
                                            defaultValue={
                                                user.student?.department_id
                                                    ? String(
                                                          user.student
                                                              .department_id,
                                                      )
                                                    : undefined
                                            }
                                        >
                                            <SelectTrigger className="w-full">
                                                <SelectValue placeholder="Pilih jurusan" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {departments.map((dept) => (
                                                    <SelectItem
                                                        key={dept.id}
                                                        value={String(dept.id)}
                                                    >
                                                        {formatDepartmentLabel(
                                                            dept,
                                                        )}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                        <InputError
                                            message={errors.department_id}
                                        />
                                    </div>
                                    <div className="grid gap-4 md:col-span-2 md:grid-cols-3">
                                        <div className="grid gap-2">
                                            <Label htmlFor="enrollment_year">
                                                Tahun Masuk{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <Input
                                                id="enrollment_year"
                                                name="enrollment_year"
                                                type="number"
                                                defaultValue={
                                                    user.student
                                                        ?.enrollment_year ?? ''
                                                }
                                            />
                                            <InputError
                                                message={errors.enrollment_year}
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="current_semester">
                                                Semester Berjalan{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <Input
                                                id="current_semester"
                                                name="current_semester"
                                                type="number"
                                                min={1}
                                                max={14}
                                                defaultValue={
                                                    user.student
                                                        ?.current_semester ?? 1
                                                }
                                            />
                                            <InputError
                                                message={
                                                    errors.current_semester
                                                }
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label>
                                                Dosen Wali{' '}
                                                <span className="text-red-500">
                                                    *
                                                </span>
                                            </Label>
                                            <input
                                                type="hidden"
                                                name="academic_advisor_id"
                                                value={advisor?.id ?? ''}
                                            />
                                            <Combobox
                                                items={lecturers}
                                                value={advisor}
                                                onValueChange={setAdvisor}
                                                itemToStringLabel={(lect) =>
                                                    `${lect.user?.profile?.full_name ?? 'N/A'} - ${lect.lecturer_number}`
                                                }
                                                isItemEqualToValue={(a, b) =>
                                                    a.id === b.id
                                                }
                                            >
                                                <ComboboxInput
                                                    placeholder="Pilih dosen wali"
                                                    className="w-full"
                                                />
                                                <ComboboxContent>
                                                    <ComboboxEmpty>
                                                        Dosen tidak ditemukan.
                                                    </ComboboxEmpty>
                                                    <ComboboxList>
                                                        {(lect: Lecturer) => (
                                                            <ComboboxItem
                                                                key={lect.id}
                                                                value={lect}
                                                            >
                                                                {lect.user
                                                                    ?.profile
                                                                    ?.full_name ??
                                                                    'N/A'}{' '}
                                                                -{' '}
                                                                {
                                                                    lect.lecturer_number
                                                                }
                                                            </ComboboxItem>
                                                        )}
                                                    </ComboboxList>
                                                </ComboboxContent>
                                            </Combobox>
                                            <InputError
                                                message={
                                                    errors.academic_advisor_id
                                                }
                                            />
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>

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