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,
    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 { Textarea } from '@/components/ui/textarea';
import { index, update } from '@/routes/admin/users/administrators';

type Role = { id: number; name: string };

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;
    roles: { id: number; name: string }[];
};

type Props = {
    user: User;
    roles: Role[];
};

export default function AdministratorEdit({ user, roles }: 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 [role, setRole] = useState(user.roles?.[0]?.name ?? '');

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

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <PageHeader
                    title="Edit Administrator"
                    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-3">
                                    <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>
                                    <div className="grid gap-2">
                                        <Label>
                                            Role{' '}
                                            <span className="text-red-500">
                                                *
                                            </span>
                                        </Label>
                                        <input
                                            type="hidden"
                                            name="role"
                                            value={role}
                                        />
                                        <Combobox
                                            value={role}
                                            onValueChange={(v) =>
                                                setRole(v ?? '')
                                            }
                                        >
                                            <ComboboxInput
                                                placeholder="Pilih role"
                                                className="w-full"
                                            />
                                            <ComboboxContent>
                                                <ComboboxList>
                                                    {roles.map((r) => (
                                                        <ComboboxItem
                                                            key={r.id}
                                                            value={r.name}
                                                        >
                                                            {r.name}
                                                        </ComboboxItem>
                                                    ))}
                                                </ComboboxList>
                                            </ComboboxContent>
                                        </Combobox>
                                        <InputError message={errors.role} />
                                    </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>

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