thrilltrack-explorer/components/auth/PasswordResetForm.tsx

'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { authService } from '@/lib/services/auth';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, Loader2, CheckCircle2 } from 'lucide-react';

const resetRequestSchema = z.object({
  email: z.string().email('Invalid email address'),
});

const resetConfirmSchema = z
  .object({
    password: z
      .string()
      .min(8, 'Password must be at least 8 characters')
      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
      .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
      .regex(/[0-9]/, 'Password must contain at least one number'),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ['confirmPassword'],
  });

type ResetRequestData = z.infer<typeof resetRequestSchema>;
type ResetConfirmData = z.infer<typeof resetConfirmSchema>;

interface PasswordResetFormProps {
  token?: string;
  uid?: string;
  onSuccess?: () => void;
  onBack?: () => void;
}

export function PasswordResetForm({ token, uid, onSuccess, onBack }: PasswordResetFormProps) {
  const [error, setError] = useState<string>('');
  const [isLoading, setIsLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const {
    register: registerRequest,
    handleSubmit: handleSubmitRequest,
    formState: { errors: requestErrors },
  } = useForm<ResetRequestData>({
    resolver: zodResolver(resetRequestSchema),
  });

  const {
    register: registerConfirm,
    handleSubmit: handleSubmitConfirm,
    formState: { errors: confirmErrors },
  } = useForm<ResetConfirmData>({
    resolver: zodResolver(resetConfirmSchema),
  });

  const onSubmitRequest = async (data: ResetRequestData) => {
    setError('');
    setIsLoading(true);

    try {
      await authService.requestPasswordReset(data.email);
      setSuccess(true);
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to send reset email');
    } finally {
      setIsLoading(false);
    }
  };

  const onSubmitConfirm = async (data: ResetConfirmData) => {
    if (!token || !uid) {
      setError('Invalid reset link');
      return;
    }

    setError('');
    setIsLoading(true);

    try {
      await authService.confirmPasswordReset({
        uid,
        token,
        new_password: data.password,
      });
      setSuccess(true);
      setTimeout(() => {
        onSuccess?.();
      }, 2000);
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Failed to reset password');
    } finally {
      setIsLoading(false);
    }
  };

  if (success) {
    return (
      <div className="text-center space-y-4">
        <div className="mx-auto w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
          <CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-400" />
        </div>
        <div>
          <h3 className="text-lg font-semibold">
            {token ? 'Password Reset!' : 'Email Sent!'}
          </h3>
          <p className="text-sm text-muted-foreground mt-2">
            {token
              ? 'Your password has been reset successfully. You can now log in with your new password.'
              : 'Check your email for a link to reset your password. If it doesn\'t appear within a few minutes, check your spam folder.'}
          </p>
        </div>
        {onBack && (
          <Button onClick={onBack} variant="outline">
            Back to Login
          </Button>
        )}
      </div>
    );
  }

  // Reset confirmation form (when token and uid are provided)
  if (token && uid) {
    return (
      <form onSubmit={handleSubmitConfirm(onSubmitConfirm)} className="space-y-4">
        <div className="text-center mb-4">
          <h3 className="text-lg font-semibold">Set New Password</h3>
          <p className="text-sm text-muted-foreground mt-1">
            Enter your new password below
          </p>
        </div>

        {error && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        <div className="space-y-2">
          <Label htmlFor="password">New Password</Label>
          <Input
            id="password"
            type="password"
            placeholder="••••••••"
            {...registerConfirm('password')}
            disabled={isLoading}
          />
          {confirmErrors.password && (
            <p className="text-sm text-destructive">{confirmErrors.password.message}</p>
          )}
        </div>

        <div className="space-y-2">
          <Label htmlFor="confirmPassword">Confirm Password</Label>
          <Input
            id="confirmPassword"
            type="password"
            placeholder="••••••••"
            {...registerConfirm('confirmPassword')}
            disabled={isLoading}
          />
          {confirmErrors.confirmPassword && (
            <p className="text-sm text-destructive">{confirmErrors.confirmPassword.message}</p>
          )}
        </div>

        <Button type="submit" className="w-full" disabled={isLoading}>
          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          Reset Password
        </Button>
      </form>
    );
  }

  // Reset request form (default)
  return (
    <form onSubmit={handleSubmitRequest(onSubmitRequest)} className="space-y-4">
      <div className="text-center mb-4">
        <h3 className="text-lg font-semibold">Reset Password</h3>
        <p className="text-sm text-muted-foreground mt-1">
          Enter your email and we'll send you a link to reset your password
        </p>
      </div>

      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          placeholder="you@example.com"
          {...registerRequest('email')}
          disabled={isLoading}
          autoFocus
        />
        {requestErrors.email && (
          <p className="text-sm text-destructive">{requestErrors.email.message}</p>
        )}
      </div>

      <Button type="submit" className="w-full" disabled={isLoading}>
        {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
        Send Reset Link
      </Button>

      {onBack && (
        <div className="text-sm text-center">
          <button
            type="button"
            onClick={onBack}
            className="text-muted-foreground hover:text-foreground"
            disabled={isLoading}
          >
            Back to login
          </button>
        </div>
      )}
    </form>
  );
}