'use client';

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

type Area = 'tenant' | 'master';

export default function EsqueciSenhaPage() {
  const [area, setArea] = React.useState<Area>('tenant');
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

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

  const onSubmit = async (values: ForgotPasswordFormValues) => {
    setError(null);
    try {
      // Resposta é sempre genérica (200), mesmo se o e-mail não existir —
      // o backend nunca revela isso (Etapa 13: nunca revelar se o e-mail existe).
      await apiClient.post('/auth/password/forgot', {
        email: values.email,
        usuario_tipo: area === 'master' ? 'master' : 'tenant_user',
      });
      setSent(true);
    } catch (err) {
      setError(
        err instanceof ApiError ? err.message : '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">Esqueci minha senha</h1>
          <p className="text-sm text-muted-foreground">
            Informe seu e-mail — se ele existir no sistema, enviaremos instruções de redefinição.
          </p>
        </div>

        {sent ? (
          <div className="flex flex-col gap-4">
            <p role="status" className="rounded-lg bg-success/10 p-3 text-sm text-success">
              Se o e-mail informado existir, as instruções de redefinição foram enviadas.
            </p>
            <Link
              href="/login"
              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
            >
              Voltar para o login
            </Link>
          </div>
        ) : (
          <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)} noValidate>
            <div
              role="radiogroup"
              aria-label="Tipo de acesso"
              className="grid grid-cols-2 gap-1 rounded-lg bg-muted p-1"
            >
              <button
                type="button"
                role="radio"
                aria-checked={area === 'tenant'}
                onClick={() => setArea('tenant')}
                className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
                  area === 'tenant'
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground'
                }`}
              >
                Sou cliente
              </button>
              <button
                type="button"
                role="radio"
                aria-checked={area === 'master'}
                onClick={() => setArea('master')}
                className={`min-h-9 rounded-md text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${
                  area === 'master'
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground'
                }`}
              >
                Sou administrador
              </button>
            </div>

            <FormField label="E-mail" error={errors.email?.message}>
              <Input type="email" autoComplete="email" {...register('email')} />
            </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">
              Enviar instruções
            </Button>

            <Link
              href="/login"
              className="text-center text-sm text-primary-on-light underline-offset-4 hover:underline"
            >
              Voltar para o login
            </Link>
          </form>
        )}
      </div>
    </main>
  );
}