'use client';

import React from 'react';
import {
  Lock,
  Eye,
  EyeOff,
  AlertCircle,
  Flag,
  Shield,
  CheckCircle2,
  ArrowLeft,
} 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 { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';

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) {
  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}>
            Create a new secure password for your account
          </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">
                {/* New Password */}
                <Box>
                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
                    New Password
                  </Text>
                  <Box position="relative">
                    <Box position="absolute" left="3" top="50%" zIndex={10}>
                      <Icon icon={Lock} size={4} color="#6b7280" />
                    </Box>
                    <Input
                      id="newPassword"
                      name="newPassword"
                      type={uiState.showPassword ? 'text' : 'password'}
                      value={viewData.formState.fields.newPassword.value}
                      onChange={formActions.handleChange}
                      variant={viewData.formState.fields.newPassword.error ? 'error' : 'default'}
                      placeholder="••••••••"
                      disabled={mutationState.isPending}
                      autoComplete="new-password"
                    />
                    <Box
                      as="button"
                      type="button"
                      onClick={() => formActions.setShowPassword(!uiState.showPassword)}
                      position="absolute"
                      right="3"
                      top="50%"
                      zIndex={10}
                      bg="transparent"
                      borderStyle="none"
                      cursor="pointer"
                    >
                      <Icon icon={uiState.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
                    </Box>
                  </Box>
                  {viewData.formState.fields.newPassword.error && (
                    <Text size="xs" color="text-error-red" block mt={1}>
                      {viewData.formState.fields.newPassword.error}
                    </Text>
                  )}
                </Box>

                {/* Confirm Password */}
                <Box>
                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
                    Confirm Password
                  </Text>
                  <Box position="relative">
                    <Box position="absolute" left="3" top="50%" zIndex={10}>
                      <Icon icon={Lock} size={4} color="#6b7280" />
                    </Box>
                    <Input
                      id="confirmPassword"
                      name="confirmPassword"
                      type={uiState.showConfirmPassword ? 'text' : 'password'}
                      value={viewData.formState.fields.confirmPassword.value}
                      onChange={formActions.handleChange}
                      variant={viewData.formState.fields.confirmPassword.error ? 'error' : 'default'}
                      placeholder="••••••••"
                      disabled={mutationState.isPending}
                      autoComplete="new-password"
                    />
                    <Box
                      as="button"
                      type="button"
                      onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
                      position="absolute"
                      right="3"
                      top="50%"
                      zIndex={10}
                      bg="transparent"
                      borderStyle="none"
                      cursor="pointer"
                    >
                      <Icon icon={uiState.showConfirmPassword ? EyeOff : Eye} size={4} color="#6b7280" />
                    </Box>
                  </Box>
                  {viewData.formState.fields.confirmPassword.error && (
                    <Text size="xs" color="text-error-red" block mt={1}>
                      {viewData.formState.fields.confirmPassword.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 ? 'Resetting...' : 'Reset Password'}
                </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>
                    <Text size="xs" color="text-gray-400" block mt={1}>
                      Your password has been successfully reset
                    </Text>
                  </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 password reset</Text>
          </Stack>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={CheckCircle2} size={4} color="#737373" />
            <Text size="sm" color="text-gray-500">Encrypted transmission</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>
  );
}