CAPSTONE

import React, { useState } from 'react';
import { Image, StyleSheet, Platform, Button, View, Modal, TextInput, Text, TouchableOpacity } from 'react-native';

import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';

export default function HomeScreen() {
  const [adminModalVisible, setAdminModalVisible] = useState(false);
  const [customerModalVisible, setCustomerModalVisible] = useState(false);
  const [signUpVisible, setSignUpVisible] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleAdminPress = () => setAdminModalVisible(true);
  const handleCustomerPress = () => setCustomerModalVisible(true);

  const handleLogin = (role) => {
    alert(`${role} Login\nUsername: ${username}\nPassword: ${password}`);
    setUsername('');
    setPassword('');
    setAdminModalVisible(false);
    setCustomerModalVisible(false);
  };

  const handleSignUp = () => {
    alert(`Sign Up\nEmail: ${email}\nUsername: ${username}\nPassword: ${password}`);
    setEmail('');
    setUsername('');
    setPassword('');
    setSignUpVisible(false);
    setCustomerModalVisible(false);
  };

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/logo.jpg')}
          style={styles.reactLogo}
        />
      }>
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">SERVICE HUB</ThemedText>
        <HelloWave />
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 1: Explore Services</ThemedText>
        <ThemedText>
          Browse through a wide variety of services tailored to your needs. Whether it's home maintenance, personal errands, or professional consultations, find what suits you best.
        </ThemedText>
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 2: Book with Ease</ThemedText>
        <ThemedText>
          Select your desired service and schedule it at your convenience. Our user-friendly platform makes booking simple and hassle-free.
        </ThemedText>
      </ThemedView>
      <ThemedView style={styles.stepContainer}>
        <ThemedText type="subtitle">Step 3: Enjoy Quality Service</ThemedText>
        <ThemedText>
          Sit back and relax as our trusted professionals deliver top-quality service, ensuring your satisfaction every step of the way.
        </ThemedText>
      </ThemedView>
      <ThemedText type="subtitle">Which one are you?</ThemedText>
      <ThemedView style={styles.buttonContainer}>
        <View style={styles.button}>
          <Button title="ADMIN" onPress={handleAdminPress} color="#841584" />
        </View>
        <View style={styles.button}>
          <Button title="Customer" onPress={handleCustomerPress} color="#841584" />
        </View>
      </ThemedView>

      {/* Admin Login Modal */}
      <Modal
        animationType="slide"
        transparent={true}
        visible={adminModalVisible}
        onRequestClose={() => {
          setAdminModalVisible(!adminModalVisible);
        }}>
        <View style={styles.modalContainer}>
          <View style={styles.modalView}>
            <Text style={styles.modalTitle}>Admin Login</Text>
            <TextInput
              style={styles.input}
              placeholder="Username"
              value={username}
              onChangeText={setUsername}
            />
            <TextInput
              style={styles.input}
              placeholder="Password"
              secureTextEntry
              value={password}
              onChangeText={setPassword}
            />
            <TouchableOpacity style={styles.loginButton} onPress={() => handleLogin('Admin')}>
              <Text style={styles.loginButtonText}>Login</Text>
            </TouchableOpacity>
            <Button title="Close" onPress={() => setAdminModalVisible(false)} color="#841584" />
          </View>
        </View>
      </Modal>

      {/* Customer Login Modal */}
      <Modal
        animationType="fade"
        transparent={true}
        visible={customerModalVisible}
        onRequestClose={() => {
          setCustomerModalVisible(!customerModalVisible);
        }}>
        <View style={styles.customerModalContainer}>
          <View style={styles.customerModalView}>
            <Text style={styles.customerModalTitle}>Customer Login</Text>
            <TextInput
              style={styles.customerInput}
              placeholder="Email"
              value={username}
              onChangeText={setUsername}
              keyboardType="email-address"
            />
            <TextInput
              style={styles.customerInput}
              placeholder="Password"
              secureTextEntry
              value={password}
              onChangeText={setPassword}
            />
            <TouchableOpacity style={styles.customerLoginButton} onPress={() => handleLogin('Customer')}>
              <Text style={styles.customerLoginButtonText}>Sign In</Text>
            </TouchableOpacity>
            <Text style={styles.signUpText} onPress={() => setSignUpVisible(true)}>Don't have an account? Sign Up</Text>
            <Button title="Close" onPress={() => setCustomerModalVisible(false)} color="#841584" />
          </View>
        </View>
      </Modal>

      {/* Sign Up Modal */}
      <Modal
        animationType="slide"
        transparent={true}
        visible={signUpVisible}
        onRequestClose={() => {
          setSignUpVisible(!signUpVisible);
        }}>
        <View style={styles.modalContainer}>
          <View style={styles.modalView}>
            <Text style={styles.modalTitle}>Sign Up</Text>
            <TextInput
              style={styles.input}
              placeholder="Email"
              value={email}
              onChangeText={setEmail}
              keyboardType="email-address"
            />
            <TextInput
              style={styles.input}
              placeholder="Username"
              value={username}
              onChangeText={setUsername}
            />
            <TextInput
              style={styles.input}
              placeholder="Password"
              secureTextEntry
              value={password}
              onChangeText={setPassword}
            />
            <TextInput
              style={styles.input}
              placeholder="Mobile Number"
              secureTextEntry
              value={password}
              onChangeText={setPassword}
            />
            <TouchableOpacity style={styles.loginButton} onPress={handleSignUp}>
              <Text style={styles.loginButtonText}>Sign Up</Text>
            </TouchableOpacity>
            <Button title="Close" onPress={() => setSignUpVisible(false)} color="#841584" />
          </View>
        </View>
      </Modal>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingVertical: 16, 
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 250,
    width: 450,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginVertical: 16,
  },
  button: {
    flex: 1,
    marginHorizontal: 10,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalView: {
    width: 300,
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  input: {
    width: '100%',
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginBottom: 10,
  },
  loginButton: {
    backgroundColor: '#841584',
    padding: 10,
    borderRadius: 5,
    marginBottom: 10,
  },
  loginButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  customerModalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  customerModalView: {
    width: 300,
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  customerModalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  customerInput: {
    width: '100%',
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginBottom: 10,
  },
  customerLoginButton: {
    backgroundColor: '#841584',
    padding: 12,
    borderRadius: 5,
    marginBottom: 15,
  },
  customerLoginButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  signUpText: {
    color: '#841584',
    marginVertical: 10,
    textDecorationLine: 'underline',
    fontSize: 14,
  },
});