'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 { ResetPasswordViewData } from '@/lib/builders/view-data/types/ResetPasswordViewData';

interface ResetPasswordTemplateProps extends 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(props: ResetPasswordTemplateProps) {
  const { formActions, uiState, mutationState, ...viewData } = props;
  
  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}>
            Create a new secure password for your account
          </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' }}>
                {/* New Password */}
                <Box>
                  <Text size="sm" weight="medium" color="text-gray-300" block mb={2}>
                    New Password
                  </Text>
                  <Box position="relative">
                    <Box style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-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}
                      style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
                      autoComplete="new-password"
                    />
                    <Box
                      as="button"
                      type="button"
                      onClick={() => formActions.setShowPassword(!uiState.showPassword)}
                      style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: '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 style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-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}
                      style={{ paddingLeft: '2.5rem', paddingRight: '2.5rem' }}
                      autoComplete="new-password"
                    />
                    <Box
                      as="button"
                      type="button"
                      onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
                      style={{ position: 'absolute', right: '0.75rem', top: '50%', transform: 'translateY(-50%)', zIndex: 10, backgroundColor: 'transparent', border: '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} 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 ? 'Resetting...' : 'Reset Password'}
                </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>
                    <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} 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>
  );
}