import { store } from '@/actions/App/Http/Controllers/Settings/PasswordController';
import InputError from '@/components/input-error';
import AppLayout from '@/layouts/app-layout';
import SettingsLayout from '@/layouts/settings/layout';
import { type BreadcrumbItem } from '@/types';
import { Transition } from '@headlessui/react';
import { Form, Head } from '@inertiajs/react';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';

import HeadingSmall from '@/components/heading-small';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { edit } from '@/routes/password';

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

export default function Password() {
  const { t } = useTranslation('auth');
  const passwordInput = useRef<HTMLInputElement>(null);
  const currentPasswordInput = useRef<HTMLInputElement>(null);

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

            <SettingsLayout>
                <div className="space-y-6">
                    <HeadingSmall title={t('auth.settings.password.section_title', 'Update password')} description={t('auth.settings.password.description', 'Ensure your account is using a long, random password to stay secure')} />

                    <Form
                        {...store.form()}
                        options={{
                            preserveScroll: true,
                        }}
                        resetOnError={['password', 'password_confirmation', 'current_password']}
                        resetOnSuccess
                        onError={(errors) => {
                            if (errors.password) {
                                passwordInput.current?.focus();
                            }

                            if (errors.current_password) {
                                currentPasswordInput.current?.focus();
                            }
                        }}
                        className="space-y-6"
                    >
                        {({ errors, processing, recentlySuccessful }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label htmlFor="current_password">{t('auth.settings.password.current', 'Current password')}</Label>

                                    <Input
                                      id="current_password"
                                      ref={currentPasswordInput}
                                      name="current_password"
                                      type="password"
                                      className="mt-1 block w-full"
                                      autoComplete="current-password"
                                      placeholder={t('auth.settings.password.current_placeholder')}
                                    />

                                    <InputError message={errors.current_password} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="password">{t('auth.settings.password.new', 'New password')}</Label>

                                    <Input
                                      id="password"
                                      ref={passwordInput}
                                      name="password"
                                      type="password"
                                      className="mt-1 block w-full"
                                      autoComplete="new-password"
                                      placeholder={t('auth.settings.password.new_placeholder')}
                                    />

                                    <InputError message={errors.password} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="password_confirmation">{t('auth.settings.password.confirm', 'Confirm password')}</Label>

                                    <Input
                                      id="password_confirmation"
                                      name="password_confirmation"
                                      type="password"
                                      className="mt-1 block w-full"
                                      autoComplete="new-password"
                                      placeholder={t('auth.settings.password.confirm_placeholder')}
                                    />

                                    <InputError message={errors.password_confirmation} />
                                </div>

                                <div className="flex items-center gap-4">
                                    <Button disabled={processing}>{t('auth.settings.password.save_button', 'Save password')}</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')}</p>
                                    </Transition>
                                </div>
                            </>
                        )}
                    </Form>
                </div>
            </SettingsLayout>
        </AppLayout>
    );
}
