import { login } from '@/routes';
import { store } from '@/routes/register';
import { Form, Head } from '@inertiajs/react';

import RecaptchaWidget from '@/components/common/recaptcha-widget';
import SocialLoginButtons from '@/components/common/social-login-buttons';
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 { useState } from 'react';
import { useTranslation } from 'react-i18next';

export default function Register() {
  const { t } = useTranslation();
  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
  const referralCode =
    typeof window !== 'undefined'
      ? new URLSearchParams(window.location.search).get('referral_code')
      : null;

  return (
    <AuthLayout
      title={t('Create an account')}
      description={t('Enter your details below to create your account')}
    >
      <Head title={t('Register')} />
      <Form
        {...store.form()}
        resetOnSuccess={['password', 'password_confirmation']}
        disableWhileProcessing
        className="flex flex-col gap-6"
      >
        {({ processing, errors }) => (
          <>
            <div className="grid gap-6">
              <div className="grid gap-2">
                <Label
                  htmlFor="first_name"
                  className="px-1 text-black/70 dark:text-white/50"
                >
                  {t('First Name')}
                </Label>
                <Input
                  id="first_name"
                  type="text"
                  required
                  autoFocus
                  tabIndex={1}
                  autoComplete="first_name"
                  className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                  name="first_name"
                  placeholder={t('First name')}
                />
                <InputError message={errors.first_name} className="mt-2" />
              </div>

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

              <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"
                  required
                  tabIndex={2}
                  autoComplete="email"
                  className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                  name="email"
                  placeholder="email@example.com"
                />
                <InputError message={errors.email} />
              </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"
                  required
                  tabIndex={3}
                  autoComplete="new-password"
                  className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                  name="password"
                  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"
                  required
                  tabIndex={4}
                  autoComplete="new-password"
                  className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
                  name="password_confirmation"
                  placeholder={t('Confirm password')}
                />
                <InputError message={errors.password_confirmation} />
              </div>

              {referralCode && (
                <input
                  type="hidden"
                  name="referral_code"
                  value={referralCode}
                />
              )}

              <RecaptchaWidget onChange={setRecaptchaToken} />
              {recaptchaToken && (
                <input
                  type="hidden"
                  name="g-recaptcha-response"
                  value={recaptchaToken}
                />
              )}

              <Button
                type="submit"
                variant="primary"
                className="mt-2 w-full"
                tabIndex={4}
                loading={processing}
                disabled={processing}
              >
                <span>{t('Create account')}</span>
                <CaretRightIcon weight="bold" />
              </Button>
            </div>

            <SocialLoginButtons />

            <div className="text-center text-sm text-black/50 dark:text-white/50">
              {t('Already have an account?')}{' '}
              <TextLink
                href={login()}
                tabIndex={6}
                className="font-semibold text-primary"
              >
                {t('Log in')}
              </TextLink>
            </div>
          </>
        )}
      </Form>
    </AuthLayout>
  );
}
