'use client';

import React from 'react';
import {
  Mail,
  Lock,
  Eye,
  EyeOff,
  LogIn,
  AlertCircle,
  Flag,
  Shield,
} 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 { EnhancedFormError } from '@/components/errors/EnhancedFormError';
import { UserRolesPreview } from '@/components/auth/UserRolesPreview';
import { AuthWorkflowMockup } from '@/components/auth/AuthWorkflowMockup';
import { routes } from '@/lib/routing/RouteConfig';
import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
import { FormState } from '@/lib/builders/view-data/types/FormState';

interface LoginTemplateProps {
  viewData: LoginViewData;
  formActions: {
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
    setFormState: React.Dispatch<React.SetStateAction<FormState>>;
    setShowPassword: (show: boolean) => void;
    setShowErrorDetails: (show: boolean) => void;
  };
  mutationState: {
    isPending: boolean;
    error: string | null;
  };
}

export function LoginTemplate({ viewData, formActions, mutationState }: LoginTemplateProps) {
  return (
    <Box as="main" minHeight="100vh" display="flex" 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))" />
      
      {/* Left Side - Info Panel (Hidden on mobile) */}
      <Box display={{ base: 'none', lg: 'flex' }} w={{ lg: '1/2' }} position="relative" alignItems="center" justifyContent="center" p={12}>
        <Box maxWidth="32rem">
          {/* Logo */}
          <Stack direction="row" align="center" gap={3} mb={8}>
            <Surface variant="muted" rounded="xl" border padding={2} bg="bg-blue-500/10" borderColor="border-blue-500/30">
              <Icon icon={Flag} size={6} color="#3b82f6" />
            </Surface>
            <Text size="2xl" weight="bold" color="text-white">GridPilot</Text>
          </Stack>

          <Box mb={4}>
            <Heading level={2}>
              Your Sim Racing Infrastructure
            </Heading>
          </Box>
          
          <Text size="lg" color="text-gray-400" block mb={8}>
            Manage leagues, track performance, join teams, and compete with drivers worldwide. One account, multiple roles.
          </Text>

          {/* Role Cards */}
          <UserRolesPreview variant="full" />

          {/* Workflow Mockup */}
          <Box mt={8}>
            <AuthWorkflowMockup />
          </Box>

          {/* Trust Indicators */}
          <Stack direction="row" align="center" gap={6} mt={8}>
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Shield} size={4} color="#737373" />
              <Text size="sm" color="text-gray-500">Secure login</Text>
            </Stack>
            <Text size="sm" color="text-gray-500">iRacing verified</Text>
          </Stack>
        </Box>
      </Box>

      {/* Right Side - Login Form */}
      <Box flex={1} display="flex" alignItems="center" justifyContent="center" p={{ base: 4, lg: 12 }} position="relative">
        <Box w="full" maxWidth="28rem">
          {/* Mobile Logo/Header */}
          <Box display={{ base: 'block', lg: 'none' }} 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}>Welcome Back</Heading>
            <Text color="text-gray-400" block mt={2}>
              Sign in to continue to GridPilot
            </Text>
          </Box>

          {/* Desktop Header */}
          <Box display={{ base: 'none', lg: 'block' }} textAlign="center" mb={8}>
            <Heading level={2}>Welcome Back</Heading>
            <Text color="text-gray-400" block mt={2}>
              Sign in to access your racing dashboard
            </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)" />

            <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"
                      name="email"
                      type="email"
                      value={viewData.formState.fields.email.value as string}
                      onChange={formActions.handleChange}
                      variant={viewData.formState.fields.email.error ? 'error' : 'default'}
                      placeholder="you@example.com"
                      disabled={viewData.formState.isSubmitting || 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>

                {/* Password */}
                <Box>
                  <Stack direction="row" align="center" justify="between" mb={2}>
                    <Text size="sm" weight="medium" color="text-gray-300">
                      Password
                    </Text>
                    <Link href={routes.auth.forgotPassword}>
                      <Text size="xs" color="text-primary-blue">Forgot password?</Text>
                    </Link>
                  </Stack>
                  <Box position="relative">
                    <Box position="absolute" left="3" top="50%" zIndex={10}>
                      <Icon icon={Lock} size={4} color="#6b7280" />
                    </Box>
                    <Input
                      id="password"
                      name="password"
                      type={viewData.showPassword ? 'text' : 'password'}
                      value={viewData.formState.fields.password.value as string}
                      onChange={formActions.handleChange}
                      variant={viewData.formState.fields.password.error ? 'error' : 'default'}
                      placeholder="••••••••"
                      disabled={viewData.formState.isSubmitting || mutationState.isPending}
                      autoComplete="current-password"
                    />
                    <Box
                      as="button"
                      type="button"
                      onClick={() => formActions.setShowPassword(!viewData.showPassword)}
                      position="absolute"
                      right="3"
                      top="50%"
                      zIndex={10}
                      bg="transparent"
                      borderStyle="none"
                      cursor="pointer"
                    >
                      <Icon icon={viewData.showPassword ? EyeOff : Eye} size={4} color="#6b7280" />
                    </Box>
                  </Box>
                  {viewData.formState.fields.password.error && (
                    <Text size="xs" color="text-error-red" block mt={1}>
                      {viewData.formState.fields.password.error}
                    </Text>
                  )}
                </Box>

                {/* Remember Me */}
                <Stack direction="row" align="center" gap={2}>
                  <Box
                    as="input"
                    id="rememberMe"
                    name="rememberMe"
                    type="checkbox"
                    checked={viewData.formState.fields.rememberMe.value as boolean}
                    onChange={formActions.handleChange}
                    disabled={viewData.formState.isSubmitting || mutationState.isPending}
                  />
                  <Text size="sm" color="text-gray-300">Keep me signed in</Text>
                </Stack>

                {/* Insufficient Permissions Message */}
                {viewData.hasInsufficientPermissions && (
                  <Surface variant="muted" rounded="lg" border padding={4} bg="bg-amber-500/10" borderColor="border-amber-500/30">
                    <Stack direction="row" align="start" gap={3}>
                      <Icon icon={AlertCircle} size={5} color="#f59e0b" />
                      <Box>
                        <Text weight="bold" color="text-warning-amber" block>Insufficient Permissions</Text>
                        <Text size="sm" color="text-gray-300" block mt={1}>
                          You don&apos;t have permission to access that page. Please log in with an account that has the required role.
                        </Text>
                      </Box>
                    </Stack>
                  </Surface>
                )}

                {/* Enhanced Error Display */}
                {viewData.submitError && (
                  <EnhancedFormError
                    error={new Error(viewData.submitError)}
                    onDismiss={() => {
                      formActions.setFormState((prev: FormState) => ({ ...prev, submitError: undefined }));
                    }}
                    showDeveloperDetails={viewData.showErrorDetails}
                  />
                )}

                {/* Submit Button */}
                <Button
                  type="submit"
                  variant="primary"
                  disabled={viewData.formState.isSubmitting || mutationState.isPending}
                  fullWidth
                  icon={mutationState.isPending || viewData.formState.isSubmitting ? <LoadingSpinner size={4} color="white" /> : <Icon icon={LogIn} size={4} />}
                >
                  {mutationState.isPending || viewData.formState.isSubmitting ? 'Signing in...' : 'Sign In'}
                </Button>
              </Stack>
            </Box>

            {/* Divider */}
            <Box position="relative" my={6}>
              <Box position="absolute" inset="0" display="flex" alignItems="center">
                <Box w="full" borderTop borderColor="border-neutral-800" />
              </Box>
              <Box position="relative" display="flex" justifyContent="center">
                <Box px={4} bg="bg-neutral-900">
                  <Text size="xs" color="text-gray-500">or continue with</Text>
                </Box>
              </Box>
            </Box>

            {/* Sign Up Link */}
            <Box textAlign="center" mt={6}>
              <Text size="sm" color="text-gray-400">
                Don&apos;t have an account?{' '}
                <Link
                  href={viewData.returnTo && viewData.returnTo !== '/dashboard' ? `/auth/signup?returnTo=${encodeURIComponent(viewData.returnTo)}` : '/auth/signup'}
                >
                  <Text color="text-primary-blue" weight="medium">Create one</Text>
                </Link>
              </Text>
            </Box>
          </Card>

          {/* Name Immutability Notice */}
          <Box mt={6}>
            <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/30" borderColor="border-neutral-800">
              <Stack direction="row" align="start" gap={3}>
                <Icon icon={AlertCircle} size={5} color="#737373" />
                <Text size="xs" color="text-gray-400">
                  <Text weight="bold">Note:</Text> Your display name cannot be changed after signup. Please ensure it&apos;s correct when creating your account.
                </Text>
              </Stack>
            </Surface>
          </Box>

          {/* Footer */}
          <Box mt={6} textAlign="center">
            <Text size="xs" color="text-gray-500">
              By signing in, you agree to our{' '}
              <Link href="/terms">
                <Text color="text-gray-400">Terms of Service</Text>
              </Link>
              {' '}and{' '}
              <Link href="/privacy">
                <Text color="text-gray-400">Privacy Policy</Text>
              </Link>
            </Text>
          </Box>

          {/* Mobile Role Info */}
          <Box mt={8} display={{ base: 'block', lg: 'none' }}>
            <UserRolesPreview variant="compact" />
          </Box>
        </Box>
      </Box>
    </Box>
  );
}