'use client';

import * as React from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { apiClient, ApiError } from '@/lib/api/client';
import { resetPasswordSchema, type ResetPasswordFormValues } from '@/lib/validators/auth';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { FormField } from '@/components/ui/form-field';

export default function RedefinirSenhaPage() {
  const { token } = useParams<{ token: string }>();
  const [done, setDone] = React.useState(false);
  const [tokenInvalido, setTokenInvalido] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<ResetPasswordFormValues>({ resolver: zodResolver(resetPasswordSchema) });

  const onSubmit = async (values: ResetPasswordFormValues) => {
    setError(null);
    setTokenInvalido(false);
    try {
      await apiClient.post('/auth/password/reset', { token, nova_senha: values.novaSenha });
      setDone(true);
    } catch (err) {
      if (err instanceof ApiError && err.statusCode === 401) {
        setTokenInvalido(true);
      } else if (err instanceof ApiError) {
        setError(err.message);
      } else {
        setError('Não foi possível conectar. Tente novamente.');
      }
    }
  };

  return (
    <main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
      <div className="flex w-full max-w-[420px] flex-col gap-6 rounded-xl border border-border bg-surface p-6 shadow-sm sm:p-8">
        <div className="flex flex-col gap-2 text-center">
          <h1 className="text-xl font-semibold text-foreground">Redefinir senha</h1>
        </div>

        {done ? (
          <div className="flex flex-col gap-4">
            <p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
              Senha redefinida com sucesso.
            </p>
            <Link
              href="/login"
              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
            >
              Ir para o login
            </Link>
          </div>
        ) : tokenInvalido ? (
          <div className="flex flex-col gap-4">
            <p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
              Este link de redefinição é inválido ou já expirou.
            </p>
            <Link
              href="/esqueci-senha"
              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
            >
              Solicitar um novo link
            </Link>
          </div>
        ) : (
          <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
            <FormField
              label="Nova senha"
              error={errors.novaSenha?.message}
              helpText="Mínimo de 10 caracteres."
            >
              <Input type="password" autoComplete="new-password" {...register('novaSenha')} />
            </FormField>
            <FormField label="Confirmar nova senha" error={errors.confirmarSenha?.message}>
              <Input type="password" autoComplete="new-password" {...register('confirmarSenha')} />
            </FormField>

            {error && (
              <p role="alert" className="rounded-lg bg-danger/10 p-3 text-sm text-danger">
                {error}
              </p>
            )}

            <Button type="submit" loading={isSubmitting} className="w-full">
              Redefinir senha
            </Button>
          </form>
        )}
      </div>
    </main>
  );
}