NeoScan_Physician/app/modules/Auth/components/NameScreen.tsx

"use client"

/*
 * File: NameScreen.tsx
 * Description: Name input screen with gradient background and shared components.
 * 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 Icon from "react-native-vector-icons/Feather"

interface NameScreenProps {
  onContinue: (firstName: string, lastName: string, username: string) => void
  onBack: () => void
}

const NameScreen: React.FC<NameScreenProps> = ({ onContinue, onBack }) => {
  const [firstName, setFirstName] = useState("")
  const [lastName, setLastName] = useState("")
  const [username, setUsername] = useState("")
  const [loading, setLoading] = useState(false)

  const handleContinue = () => {
    if (!firstName.trim() || !lastName.trim() || !username.trim()) {
      showError("Validation Error", "First name, last name, and username are required.")
      return
    }

    if (firstName.trim().length < 2 ) {
      showError("Validation Error", "Names must be at least 2 characters long.")
      return
    }

    if (username.trim().length < 3) {
      showError("Validation Error", "Username must be at least 3 characters long.")
      return
    }

    // Basic username validation (alphanumeric and underscores only)
    const usernameRegex = /^[a-zA-Z0-9_]+$/
    if (!usernameRegex.test(username.trim())) {
      showError("Validation Error", "Username can only contain letters, numbers, and underscores.")
      return
    }

    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      onContinue(firstName.trim(), lastName.trim(), username.trim())
    }, 1000)
  }

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

      <Text style={styles.title}>What's your name?</Text>
      <Text style={styles.subtitle}>Please enter your details to get started.</Text>

      <View style={styles.inputContainer}>
        <Icon name="user" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="First Name"
          value={firstName}
          onChangeText={setFirstName}
          style={styles.inputField}
          autoCapitalize="words"
          placeholderTextColor={Colors.textMuted}
        />
      </View>

      <View style={styles.inputContainer}>
        <Icon name="user" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="Last Name"
          value={lastName}
          onChangeText={setLastName}
          style={styles.inputField}
          autoCapitalize="words"
          placeholderTextColor={Colors.textMuted}
        />
      </View>

      <View style={styles.inputContainer}>
        <Icon name="at-sign" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="Username"
          value={username}
          onChangeText={setUsername}
          style={styles.inputField}
          autoCapitalize="none"
          autoCorrect={false}
          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.md,
    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.xl,
  },
})

export default NameScreen

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