import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
import { send } from '@/routes/verification';
import { type BreadcrumbItem, type SharedData } from '@/types';
import { Transition } from '@headlessui/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

import DeleteUser from '@/components/delete-user';
import HeadingSmall from '@/components/heading-small';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { edit } from '@/routes/settings/profile';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Profile settings',
        href: edit().url,
    },
];

export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
  const { t } = useTranslation('auth');
  const { auth, supportedLocales } = usePage<SharedData>().props as SharedData & { supportedLocales: string[] };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={t('auth.settings.profile.title', 'Profile settings')} />

            <SettingsLayout>
                <div className="space-y-6">
                    <HeadingSmall title={t('auth.settings.profile.section_title', 'Profile information')} description={t('auth.settings.profile.description', 'Update your name and email address')} />

                    <Form
                        {...ProfileController.update.form()}
                        options={{
                            preserveScroll: true,
                        }}
                        className="space-y-6"
                    >
                        {({ processing, recentlySuccessful, errors }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label htmlFor="name">{t('auth.settings.profile.name', 'Name')}</Label>

                                    <Input
                                      id="name"
                                      type="text"
                                      className="mt-1 block w-full"
                                      defaultValue={auth.user.name ?? ''}
                                      name="name"
                                      required
                                      autoComplete="name"
                                      placeholder={t('auth.settings.profile.name_placeholder', 'Dein Name')}
                                    />

                                    <InputError className="mt-2" message={errors.name} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="email">{t('auth.settings.profile.email', 'Email address')}</Label>

                                    <Input
                                      id="email"
                                      type="email"
                                      className="mt-1 block w-full"
                                      defaultValue={auth.user.email}
                                      name="email"
                                      required
                                      autoComplete="username"
                                      placeholder={t('auth.settings.profile.email_placeholder')}
                                    />

                                    <InputError className="mt-2" message={errors.email} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="username">{t('auth.settings.profile.username', 'Username')}</Label>

                                    <Input
                                      id="username"
                                      className="mt-1 block w-full"
                                      defaultValue={auth.user?.username ?? ''}
                                      name="username"
                                      autoComplete="username"
                                      placeholder={t('auth.settings.profile.username_placeholder')}
                                    />

                                    <InputError className="mt-2" message={errors.username} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="preferred_locale">{t('auth.settings.profile.language', 'Language')}</Label>

                                    <select
                                        id="preferred_locale"
                                        name="preferred_locale"
                                        defaultValue={auth.user?.preferred_locale ?? 'en'}
                                        className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                    >
                                        {(supportedLocales ?? ['de', 'en']).map((l) => (
                                            <option key={l} value={l}>
                                                {l.toUpperCase()}
                                            </option>
                                        ))}
                                    </select>

                                    <InputError className="mt-2" message={errors.preferred_locale} />
                                </div>

                                {mustVerifyEmail && auth.user.email_verified_at === null && (
                                    <div>
                                        <p className="-mt-4 text-sm text-muted-foreground">
                                          {t('auth.settings.profile.email_unverified', 'Your email address is unverified.')} {' '}
                                          <Link
                                            href={send()}
                                            as="button"
                                            className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
                                          >
                                            {t('auth.settings.profile.resend_verification', 'Click here to resend the verification email.')}
                                          </Link>
                                        </p>

                                        {status === 'verification-link-sent' && (
                                            <div className="mt-2 text-sm font-medium text-green-600">
                                              {t('auth.settings.profile.verification_sent', 'A new verification link has been sent to your email address.')}
                                            </div>
                                        )}
                                    </div>
                                )}

                                <div className="flex items-center gap-4">
                                    <Button disabled={processing}>{t('common.ui.save', 'Save')}</Button>

                                    <Transition
                                        show={recentlySuccessful}
                                        enter="transition ease-in-out"
                                        enterFrom="opacity-0"
                                        leave="transition ease-in-out"
                                        leaveTo="opacity-0"
                                    >
                                        <p className="text-sm text-neutral-600">{t('common.ui.saved', 'Saved')}</p>
                                    </Transition>
                                </div>
                            </>
                        )}
                    </Form>
                </div>

                <DeleteUser />
            </SettingsLayout>
        </AppLayout>
    );
}
