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

'use client';

import React from 'react';
import {
  Mail,
  ArrowLeft,
  AlertCircle,
  Flag,
  Shield,
  CheckCircle2,
} from 'lucide-react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Input } from '@/ui/Input';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { LoadingSpinner } from '@/ui/LoadingSpinner';
import { routes } from '@/lib/routing/RouteConfig';
import { ForgotPasswordViewData } from '@/lib/builders/view-data/types/ForgotPasswordViewData';

interface ForgotPasswordTemplateProps {
  viewData: ForgotPasswordViewData;
  formActions: {
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
    setShowSuccess: (show: boolean) => void;
  };
  mutationState: {
    isPending: boolean;
    error: string | null;
  };
}

export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
  return (
    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" position="relative">
      {/* Background Pattern */}
      <Box position="absolute" inset={0} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))" />
      
      <Box position="relative" w="full" maxWidth="28rem" px={4}>
        {/* Header */}
        <Box textAlign="center" mb={8}>
          <Surface variant="muted" rounded="2xl" border padding={4} w="4rem" h="4rem" display="flex" alignItems="center" justifyContent="center" mx="auto" mb={4}>
            <Icon icon={Flag} size={8} color="#3b82f6" />
          </Surface>
          <Heading level={1}>Reset Password</Heading>
          <Text color="text-gray-400" block mt={2}>
            Enter your email and we will send you a reset link
          </Text>
        </Box>

        <Card position="relative" overflow="hidden">
          {/* Background accent */}
          <Box position="absolute" top={0} right={0} w="8rem" h="8rem" bg="linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)" />

          {!viewData.showSuccess ? (
            <Box as="form" onSubmit={formActions.handleSubmit}>
              <Stack gap={5} position="relative">
                {/* Email */}
                <Box>
                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
                    Email Address
                  </Text>
                  <Box position="relative">
                    <Box position="absolute" left="3" top="50%" zIndex={10}>
                      <Icon icon={Mail} size={4} color="#6b7280" />
                    </Box>
                    <Input
                      id="email"
                      type="email"
                      value={viewData.formState.fields.email.value}
                      onChange={formActions.handleChange}
                      variant={viewData.formState.fields.email.error ? 'error' : 'default'}
                      placeholder="you@example.com"
                      disabled={mutationState.isPending}
                      autoComplete="email"
                    />
                  </Box>
                  {viewData.formState.fields.email.error && (
                    <Text size="xs" color="text-error-red" block mt={1}>
                      {viewData.formState.fields.email.error}
                    </Text>
                  )}
                </Box>

                {/* Error Message */}
                {mutationState.error && (
                  <Surface variant="muted" rounded="lg" border padding={3} bg="bg-red-500/10" borderColor="border-red-500/30">
                    <Stack direction="row" align="start" gap={3}>
                      <Icon icon={AlertCircle} size={5} color="#ef4444" />
                      <Text size="sm" color="text-error-red">{mutationState.error}</Text>
                    </Stack>
                  </Surface>
                )}

                {/* Submit Button */}
                <Button
                  type="submit"
                  variant="primary"
                  disabled={mutationState.isPending}
                  fullWidth
                  icon={mutationState.isPending ? <LoadingSpinner size={4} color="white" /> : <Icon icon={Shield} size={4} />}
                >
                  {mutationState.isPending ? 'Sending...' : 'Send Reset Link'}
                </Button>

                {/* Back to Login */}
                <Box textAlign="center">
                  <Link href={routes.auth.login}>
                    <Stack direction="row" align="center" justify="center" gap={1}>
                      <Icon icon={ArrowLeft} size={4} color="#3b82f6" />
                      <Text size="sm" color="text-primary-blue">Back to Login</Text>
                    </Stack>
                  </Link>
                </Box>
              </Stack>
            </Box>
          ) : (
            <Stack gap={4} position="relative">
              <Surface variant="muted" rounded="lg" border padding={4} bg="bg-green-500/10" borderColor="border-green-500/30">
                <Stack direction="row" align="start" gap={3}>
                  <Icon icon={CheckCircle2} size={6} color="#10b981" />
                  <Box>
                    <Text size="sm" color="text-performance-green" weight="medium" block>{viewData.successMessage}</Text>
                    {viewData.magicLink && (
                      <Box mt={2}>
                        <Text size="xs" color="text-gray-400" block mb={1}>Development Mode - Magic Link:</Text>
                        <Surface variant="muted" rounded="md" border padding={2} bg="bg-neutral-800">
                          <Text size="xs" color="text-primary-blue">{viewData.magicLink}</Text>
                        </Surface>
                        <Text size="xs" color="text-gray-500" block mt={1}>
                          In production, this would be sent via email
                        </Text>
                      </Box>
                    )}
                  </Box>
                </Stack>
              </Surface>

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

        {/* Trust Indicators */}
        <Stack direction="row" align="center" justify="center" gap={6} mt={6}>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Shield} size={4} color="#737373" />
            <Text size="sm" color="text-gray-500">Secure reset process</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={CheckCircle2} size={4} color="#737373" />
            <Text size="sm" color="text-gray-500">15 minute expiration</Text>
          </Stack>
        </Stack>

        {/* Footer */}
        <Box mt={6} textAlign="center">
          <Text size="xs" color="text-gray-500">
            Need help?{' '}
            <Link href="/support">
              <Text color="text-gray-400">Contact support</Text>
            </Link>
          </Text>
        </Box>
      </Box>
    </Box>
  );
}