gridpilot.gg/apps/website/templates/auth/ResetPasswordTemplate.tsx

'use client';

import { AuthCard } from '@/components/auth/AuthCard';
import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
import { AuthForm } from '@/components/auth/AuthForm';
import { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';
import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { PasswordField } from '@/ui/PasswordField';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { AlertCircle, ArrowLeft, CheckCircle2, Shield } from 'lucide-react';
import React from 'react';

interface ResetPasswordTemplateProps {
  viewData: ResetPasswordViewData;
  formActions: {
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
    setShowSuccess: (show: boolean) => void;
    setShowPassword: (show: boolean) => void;
    setShowConfirmPassword: (show: boolean) => void;
  };
  uiState: {
    showPassword: boolean;
    showConfirmPassword: boolean;
  };
  mutationState: {
    isPending: boolean;
    error: string | null;
  };
}

export function ResetPasswordTemplate({
  viewData,
  formActions,
  uiState,
  mutationState,
}: ResetPasswordTemplateProps) {
  const isSubmitting = mutationState.isPending;

  return (
    <AuthCard 
      title="Reset Password" 
      description={viewData.showSuccess ? undefined : "Create a new secure password for your account"}
    >
      {!viewData.showSuccess ? (
        <AuthForm onSubmit={formActions.handleSubmit}>
          <Stack gap={4}>
            <PasswordField
              label="New Password"
              id="newPassword"
              name="newPassword"
              value={viewData.formState.fields.newPassword.value}
              onChange={formActions.handleChange}
              errorMessage={viewData.formState.fields.newPassword.error}
              placeholder="••••••••"
              disabled={isSubmitting}
              autoComplete="new-password"
              showPassword={uiState.showPassword}
              onTogglePassword={() => formActions.setShowPassword(!uiState.showPassword)}
            />

            <PasswordField
              label="Confirm Password"
              id="confirmPassword"
              name="confirmPassword"
              value={viewData.formState.fields.confirmPassword.value}
              onChange={formActions.handleChange}
              errorMessage={viewData.formState.fields.confirmPassword.error}
              placeholder="••••••••"
              disabled={isSubmitting}
              autoComplete="new-password"
              showPassword={uiState.showConfirmPassword}
              onTogglePassword={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
            />
          </Stack>

          {mutationState.error && (
            <Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
              <Stack direction="row" align="start" gap={3}>
                <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
                <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
              </Stack>
            </Box>
          )}

          <Button
            type="submit"
            variant="primary"
            disabled={isSubmitting}
            fullWidth
            icon={isSubmitting ? <LoadingSpinner size={4} /> : <Shield size={16} />}
          >
            {isSubmitting ? 'Resetting...' : 'Reset Password'}
          </Button>

          <Box textAlign="center">
            <Link href={routes.auth.login}>
              <Stack direction="row" align="center" justify="center" gap={2} group>
                <Icon icon={ArrowLeft} size={3.5} color="var(--color-primary)" groupHoverScale />
                <Text size="sm" weight="bold" color="text-primary-accent">Back to Login</Text>
              </Stack>
            </Link>
          </Box>
        </AuthForm>
      ) : (
        <Stack gap={6}>
          <Box p={4} bg="success-green/10" border borderColor="success-green/30" rounded="md">
            <Stack direction="row" align="start" gap={3}>
              <Icon icon={CheckCircle2} size={5} color="var(--color-success)" />
              <Box>
                <Text size="sm" color="text-success-green" weight="bold" block>Password Reset</Text>
                <Text size="xs" color="text-gray-400" block mt={1}>{viewData.successMessage}</Text>
              </Box>
            </Stack>
          </Box>

          <Button
            type="button"
            variant="secondary"
            onClick={() => window.location.href = '/auth/login'}
            fullWidth
          >
            Return to Login
          </Button>
        </Stack>
      )}

      <AuthFooterLinks>
        <Text size="xs" color="text-gray-600">
          Need help?{' '}
          <Link href="/support">Contact support</Link>
        </Text>
      </AuthFooterLinks>
    </AuthCard>
  );
}