pn-new-crm/src/app/(auth)/set-password/page.tsx

'use client';

import { Suspense, useState } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';

const MIN_LENGTH = 9;

const passwordSchema = z
  .object({
    password: z.string().min(MIN_LENGTH, `Must be at least ${MIN_LENGTH} characters`),
    confirmPassword: z.string().min(1, 'Please confirm your password'),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
    path: ['confirmPassword'],
  });

type SetPasswordFormData = z.infer<typeof passwordSchema>;

function SetPasswordInner() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get('token');
  const [isLoading, setIsLoading] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SetPasswordFormData>({
    resolver: zodResolver(passwordSchema),
  });

  async function onSubmit(data: SetPasswordFormData) {
    if (!token) {
      toast.error('Invalid or missing reset token. Please request a new link.');
      return;
    }

    setIsLoading(true);
    try {
      const response = await fetch('/api/auth/set-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, password: data.password }),
      });

      if (!response.ok) {
        const body = await response.json().catch(() => ({}));
        toast.error(body.message ?? body.error ?? 'Failed to set password. Please try again.');
        return;
      }

      toast.success('Password set successfully. You can now sign in.');
      router.push('/login');
    } catch {
      toast.error('Something went wrong. Please try again.');
    } finally {
      setIsLoading(false);
    }
  }

  if (!token) {
    return (
      <BrandedAuthShell>
        <div className="text-center space-y-3">
          <h1 className="text-xl font-semibold text-gray-900">Link is missing or invalid</h1>
          <p className="text-sm text-gray-500">
            Please use the link from the email we sent you. If the link is broken, ask your
            administrator for a new one.
          </p>
          <Link href="/login" className="inline-block text-sm text-[#007bff] hover:underline">
            Back to sign in
          </Link>
        </div>
      </BrandedAuthShell>
    );
  }

  return (
    <BrandedAuthShell>
      <div className="text-center mb-6">
        <h1 className="text-xl font-semibold text-gray-900">Set your password</h1>
        <p className="text-sm text-gray-500 mt-1">Choose a password for your CRM account</p>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
        <div className="space-y-1.5">
          <Label htmlFor="password">New password</Label>
          <Input
            id="password"
            type="password"
            autoComplete="new-password"
            disabled={isLoading}
            className={cn(errors.password && 'border-destructive focus-visible:ring-destructive')}
            {...register('password')}
          />
          <p className="text-xs text-gray-500">At least {MIN_LENGTH} characters.</p>
          {errors.password && <p className="text-sm text-destructive">{errors.password.message}</p>}
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="confirmPassword">Confirm password</Label>
          <Input
            id="confirmPassword"
            type="password"
            autoComplete="new-password"
            disabled={isLoading}
            className={cn(
              errors.confirmPassword && 'border-destructive focus-visible:ring-destructive',
            )}
            {...register('confirmPassword')}
          />
          {errors.confirmPassword && (
            <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
          )}
        </div>

        <Button
          type="submit"
          className="w-full bg-[#007bff] hover:bg-[#0069d9] text-white"
          disabled={isLoading}
        >
          {isLoading ? 'Setting password…' : 'Set password'}
        </Button>
      </form>
    </BrandedAuthShell>
  );
}

export default function SetPasswordPage() {
  return (
    <Suspense fallback={<BrandedAuthShell>{null}</BrandedAuthShell>}>
      <SetPasswordInner />
    </Suspense>
  );
}