import { update } from '@/routes/password';
import { Form, Head } from '@inertiajs/react';

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 AuthLayout from '@/layouts/auth-layout';
import { CaretRightIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

interface ResetPasswordProps {
  token: string;
  email: string;
}

export default function ResetPassword({ token, email }: ResetPasswordProps) {
  const { t } = useTranslation();

  return (
    <AuthLayout
      title={t('Reset password')}
      description={t('Please enter your new password below')}
    >
      <Head title={t('Reset password')} />

      <Form
        {...update.form()}
        transform={(data) => ({ ...data, token, email })}
        resetOnSuccess={['password', 'password_confirmation']}
      >
        {({ processing, errors }) => (
          <div className="grid gap-6">
            <div className="grid gap-2">
              <Label
                htmlFor="email"
                className="px-1 text-black/70 dark:text-white/50"
              >
                {t('Email')}
              </Label>
              <Input
                id="email"
                type="email"
                name="email"
                autoComplete="email"
                value={email}
                className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                readOnly
              />
              <InputError message={errors.email} className="mt-2" />
            </div>

            <div className="grid gap-2">
              <Label
                htmlFor="password"
                className="px-1 text-black/70 dark:text-white/50"
              >
                {t('Password')}
              </Label>
              <Input
                id="password"
                type="password"
                name="password"
                autoComplete="new-password"
                className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                autoFocus
                placeholder={t('Password')}
              />
              <InputError message={errors.password} />
            </div>

            <div className="grid gap-2">
              <Label
                htmlFor="password_confirmation"
                className="px-1 text-black/70 dark:text-white/50"
              >
                {t('Confirm password')}
              </Label>
              <Input
                id="password_confirmation"
                type="password"
                name="password_confirmation"
                autoComplete="new-password"
                className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                placeholder={t('Confirm password')}
              />
              <InputError
                message={errors.password_confirmation}
                className="mt-2"
              />
            </div>

            <Button
              type="submit"
              variant="primary"
              className="w-full"
              tabIndex={4}
              loading={processing}
              disabled={processing}
            >
              <span>{t('Reset Password')}</span>
              <CaretRightIcon weight="bold" />
            </Button>
          </div>
        )}
      </Form>
    </AuthLayout>
  );
}
