"use client"

/*
 * File: PasswordScreen.tsx
 * Description: Password creation 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, TouchableOpacity } 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 PasswordScreenProps {
  onContinue: (password: string) => void
  onBack: () => void
}

const PasswordScreen: React.FC<PasswordScreenProps> = ({ onContinue, onBack }) => {
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isPasswordVisible, setPasswordVisible] = useState(false)
  const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false)
  const [loading, setLoading] = useState(false)

  const validatePassword = (pwd: string): boolean => {
    return pwd.length >= 8
  }

  const handleContinue = () => {
    if (!password.trim() || !confirmPassword.trim()) {
      showError("Validation Error", "Both password fields are required.")
      return
    }

    if (!validatePassword(password)) {
      showError("Validation Error", "Password must be at least 8 characters long.")
      return
    }

    if (password !== confirmPassword) {
      showError("Validation Error", "Passwords do not match.")
      return
    }

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

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

      <Text style={styles.title}>Create a password</Text>
      <Text style={styles.subtitle}>Password must be at least 8 characters</Text>

      <View style={styles.inputContainer}>
        <Icon name="lock" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
          style={styles.inputField}
          secureTextEntry={!isPasswordVisible}
          placeholderTextColor={Colors.textMuted}
        />
        <TouchableOpacity onPress={() => setPasswordVisible(!isPasswordVisible)} style={styles.eyeIcon}>
          <Icon name={isPasswordVisible ? "eye-off" : "eye"} size={22} color={Colors.textSecondary} />
        </TouchableOpacity>
      </View>

      <View style={styles.inputContainer}>
        <Icon name="lock" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
        <TextInput
          placeholder="Confirm Password"
          value={confirmPassword}
          onChangeText={setConfirmPassword}
          style={styles.inputField}
          secureTextEntry={!isConfirmPasswordVisible}
          placeholderTextColor={Colors.textMuted}
        />
        <TouchableOpacity onPress={() => setConfirmPasswordVisible(!isConfirmPasswordVisible)} style={styles.eyeIcon}>
          <Icon name={isConfirmPasswordVisible ? "eye-off" : "eye"} size={22} color={Colors.textSecondary} />
        </TouchableOpacity>
      </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,
  },
  eyeIcon: {
    paddingLeft: Spacing.sm,
  },
  button: {
    marginTop: Spacing.xl,
  },
})

export default PasswordScreen

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