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 { 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" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
      {/* Background Pattern */}
      <Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05))' }} />
      
      <Box style={{ position: 'relative', width: '100%', maxWidth: '28rem', padding: '0 1rem' }}>
        {/* Header */}
        <Box style={{ textAlign: 'center' }} mb={8}>
          <Surface variant="muted" rounded="2xl" border padding={4} style={{ width: '4rem', height: '4rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 1rem' }}>
            <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 style={{ position: 'relative', overflow: 'hidden' }}>
          {/* Background accent */}
          <Box style={{ position: 'absolute', top: 0, right: 0, width: '8rem', height: '8rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.1), transparent)', borderBottomLeftRadius: '9999px' }} />

          {!viewData.showSuccess ? (
            <form onSubmit={formActions.handleSubmit}>
              <Stack gap={5} style={{ position: 'relative' }}>
                {/* Email */}
                <Box>
                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
                    Email Address
                  </Text>
                  <Box position="relative">
                    <Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-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}
                      style={{ paddingLeft: '2.5rem' }}
                      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} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.3)' }}>
                    <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 style={{ textAlign: 'center' }}>
                  <Link href="/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>
            </form>
          ) : (
            <Stack gap={4} style={{ position: 'relative' }}>
              <Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' }}>
                <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} style={{ backgroundColor: '#262626' }}>
                          <Text size="xs" color="text-primary-blue" style={{ wordBreak: 'break-all' }}>{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} style={{ 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>
  );
}