"use client"

/*
 * File: EmailScreen.tsx
 * Description: Email input screen for onboarding flow with gradient background.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import type React from "react"
import { useState } from "react"
import { View, Text, StyleSheet, TextInput } from "react-native"
import { Button } from "../../../../shared/src/components/Button"
import OnboardingContainer from "./OnboardingContainer"
import IconContainer from "./IconContainer"
import { Colors, Spacing, Typography } from "../../../../shared/src/theme"
import { showError } from "../../../../shared/src/utils/helpers/Toast"
import { validateEmail } from "../../../../shared/src/utils/validation/validators"
import Icon from "react-native-vector-icons/Feather"

interface EmailScreenProps {
  onContinue: (email: string) => void
  onBack: () => void
}

const EmailScreen: React.FC<EmailScreenProps> = ({ onContinue, onBack }) => {
  const [email, setEmail] = useState("")
  const [loading, setLoading] = useState(false)

  const handleContinue = () => {
    if (!email.trim()) {
      showError("Validation Error", "Email address is required.")
      return
    }
    if (!validateEmail(email)) {
      showError("Validation Error", "Please enter a valid email address.")
      return
    }

    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      onContinue(email)
    }, 1000)
  }

  return (
    <OnboardingContainer onBack={onBack}>
      <IconContainer iconName="mail" />

      <Text style={styles.title}>What's your email?</Text>
      <Text style={styles.subtitle}>Please enter your email address.</Text>

      <View style={styles.inputContainer}>
        <Icon name="mail" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="Email address"
          value={email}
          onChangeText={setEmail}
          style={styles.inputField}
          autoCapitalize="none"
          keyboardType="email-address"
          placeholderTextColor={Colors.textMuted}
        />
      </View>

      <Button title="Continue" onPress={handleContinue} style={styles.button} loading={loading} />
    </OnboardingContainer>
  )
}

const styles = StyleSheet.create({
  title: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.title,
    color: Colors.textPrimary,
    textAlign: "center",
    marginBottom: Spacing.sm,
  },
  subtitle: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textSecondary,
    textAlign: "center",
    marginBottom: Spacing.xl,
  },
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.inputBackground,
    borderWidth: 1,
    borderColor: Colors.border,
    borderRadius: 12,
    marginBottom: Spacing.xl,
    paddingHorizontal: Spacing.md,
    paddingVertical: 2,
    shadowColor: Colors.backButtonShadow,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  inputIcon: {
    marginRight: Spacing.sm,
  },
  inputField: {
    flex: 1,
    paddingVertical: Spacing.md,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
  },
  button: {
    marginTop: Spacing.md,
    paddingVertical:Spacing.lg,
  },
})

export default EmailScreen

/*
 * End of File: EmailScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */