// Components
import { login } from '@/routes';
import { email } from '@/routes/password';
import { Form, Head } from '@inertiajs/react';

import InputError from '@/components/input-error';
import TextLink from '@/components/text-link';
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';

export default function ForgotPassword({ status }: { status?: string }) {
  const { t } = useTranslation();

  return (
    <AuthLayout
      title={t('Forgot password')}
      description={t('Enter your email to receive a password reset link')}
    >
      <Head title={t('Forgot password')} />

      {status && (
        <div className="mb-4 text-center text-sm font-medium text-green-600">
          {status}
        </div>
      )}

      <div className="space-y-6">
        <Form {...email.form()}>
          {({ processing, errors }) => (
            <>
              <div className="grid gap-2">
                <Label
                  htmlFor="email"
                  className="px-1 text-black/70 dark:text-white/50"
                >
                  {t('Email address')}
                </Label>
                <Input
                  id="email"
                  type="email"
                  name="email"
                  autoComplete="off"
                  autoFocus
                  className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                  placeholder="email@example.com"
                />

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

              <div className="my-6 flex items-center justify-start">
                <Button
                  type="submit"
                  variant="primary"
                  className="w-full"
                  tabIndex={4}
                  loading={processing}
                  disabled={processing}
                >
                  <span>{t('Email password reset link')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
              </div>
            </>
          )}
        </Form>

        <div className="space-x-1 text-center text-sm text-black/50 dark:text-white/50">
          <span>{t('Or, return to')}</span>
          <TextLink href={login()} className="font-semibold text-primary">
            {t('log in')}
          </TextLink>
        </div>
      </div>
    </AuthLayout>
  );
}
