import { Form, Head } from '@inertiajs/react';
import { useState } from 'react';
import { toast } from 'sonner';
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
import { DatePicker } from '@/components/inputs';
import { FileUpload } from '@/components/inputs';
import { InputError } from '@/components/ui';
import { PhoneNumberInput } from '@/components/inputs';
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 { Textarea } from '@/components/ui/textarea';
import { edit } from '@/routes/profile';

type UserData = {
    id: number;
    email: string;
    username: string;
    photo_key: string | null;
    photo_url: string | null;
    userProfile: {
        full_name: string;
        phone_number: string | null;
        gender: string | null;
        birth_date: string | null;
        address: string | null;
    } | null;
};

type Props = {
    user: UserData;
    mustVerifyEmail: boolean;
    status?: string;
};

export default function Profile({ user }: Props) {
    const [birthDate, setBirthDate] = useState<Date | undefined>(
        user.userProfile?.birth_date
            ? new Date(user.userProfile.birth_date)
            : undefined,
    );
    const [photoKey, setPhotoKey] = useState<string | null>(
        user.photo_key ?? null,
    );
    const [photoUploading, setPhotoUploading] = useState(false);

    return (
        <>
            <Head title="Profil" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto px-4 md:px-6">
                <Form
                    {...ProfileController.update.form()}
                    options={{
                        preserveScroll: true,
                    }}
                    onError={() => {
                        toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.');
                    }}
                >
                    {({ processing, errors }) => (
                        <div className="grid gap-6">
                            <Card>
                                <CardHeader>
                                    <CardTitle>Foto Profil</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <input
                                        type="hidden"
                                        name="photo"
                                        value={photoKey ?? ''}
                                    />
                                    <FileUpload
                                        value={photoKey}
                                        onChange={setPhotoKey}
                                        existingUrl={user.photo_url}
                                        folder="profile"
                                        onUploadingChange={setPhotoUploading}
                                    />
                                    <InputError message={errors.photo} />
                                </CardContent>
                            </Card>

                            <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"
                                            defaultValue={user.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"
                                            defaultValue={user.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"
                                            defaultValue={
                                                user.userProfile?.full_name ??
                                                ''
                                            }
                                        />
                                        <InputError
                                            message={errors.full_name}
                                        />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="phone_number">
                                            No. Telepon
                                        </Label>
                                        <PhoneNumberInput
                                            name="phone_number"
                                            defaultValue={
                                                user.userProfile
                                                    ?.phone_number ?? ''
                                            }
                                        />
                                        <InputError
                                            message={errors.phone_number}
                                        />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label>Jenis Kelamin</Label>
                                        <RadioGroup
                                            name="gender"
                                            defaultValue={
                                                user.userProfile?.gender ?? ''
                                            }
                                            className="flex gap-4"
                                        >
                                            <div className="flex items-center space-x-2">
                                                <RadioGroupItem
                                                    value="male"
                                                    id="settings-gender-male"
                                                />
                                                <Label
                                                    htmlFor="settings-gender-male"
                                                    className="font-normal"
                                                >
                                                    Laki-laki
                                                </Label>
                                            </div>
                                            <div className="flex items-center space-x-2">
                                                <RadioGroupItem
                                                    value="female"
                                                    id="settings-gender-female"
                                                />
                                                <Label
                                                    htmlFor="settings-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={birthDate}
                                            onChange={setBirthDate}
                                            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}
                                            defaultValue={
                                                user.userProfile?.address ?? ''
                                            }
                                        />
                                        <InputError message={errors.address} />
                                    </div>
                                </CardContent>
                            </Card>

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