import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";

const EditProfileScreen = () => {
  // State for profile fields
  const [profile, setProfile] = useState({
    name: "Okta",
    email: "okta@example.com",
    phone: "08123456789",
    address: "Jl. Raya No. 123, Jakarta",
  });

  // Function to handle input changes
  const handleInputChange = (field, value) => {
    setProfile({
      ...profile,
      [field]: value,
    });
  };

  // Function to handle save button click with confirmation
  const handleSave = () => {
    Alert.alert(
      "Konfirmasi Edit Data",
      "Apakah Anda yakin ingin mengedit data pribadi?",
      [
        {
          text: "Tidak",
          onPress: () => console.log("Edit cancelled"),
          style: "cancel",
        },
        {
          text: "Yakin",
          onPress: () => {
            console.log("Data pribadi berhasil disimpan!");
            // Implement save logic here (e.g., save to API or local storage)
          },
        },
      ],
      { cancelable: false }
    );
  };

  return (
    <ScrollView style={styles.container}>
      {/* Header with Back Button */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => console.log("Go back")}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>Informasi Pribadi</Text>
      </View>

      {/* Profile Picture Section */}
      <View style={styles.profileImageContainer}>
        <Image
          source={{
            uri: "https://imgv3.fotor.com/images/gallery/a-woman-linkedin-picture-with-grey-background-made-by-LinkedIn-Profile-Picture-Maker.jpg",
          }} // Placeholder, replace with real profile picture
          style={styles.profileImage}
        />
        <TouchableOpacity style={styles.changeImageButton}>
          <Text style={styles.changeImageText}>Ubah Foto Profil</Text>
        </TouchableOpacity>
      </View>

      {/* Input Fields for Profile Information */}
      <View style={styles.formSection}>
        <TextInput
          style={styles.inputField}
          value={profile.name}
          placeholder="Nama"
          onChangeText={(text) => handleInputChange("name", text)}
        />
        <TextInput
          style={styles.inputField}
          value={profile.email}
          placeholder="Email"
          onChangeText={(text) => handleInputChange("email", text)}
        />
        <TextInput
          style={styles.inputField}
          value={profile.phone}
          placeholder="No. HP"
          onChangeText={(text) => handleInputChange("phone", text)}
        />
        <TextInput
          style={styles.inputField}
          value={profile.address}
          placeholder="Alamat"
          onChangeText={(text) => handleInputChange("address", text)}
        />
      </View>

      {/* Save Button */}
      <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
        <Text style={styles.saveButtonText}>Simpan</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f9f9f9",
    paddingHorizontal: 20,
    paddingTop: 30,
  },
  header: {
    flexDirection: "row", // Align back button and title in one row
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  profileImageContainer: {
    alignItems: "center",
    marginBottom: 30,
  },
  profileImage: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 10,
  },
  changeImageButton: {
    backgroundColor: "#dcdcdc",
    paddingVertical: 5,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  changeImageText: {
    color: "#333",
    fontSize: 14,
  },
  formSection: {
    marginBottom: 30,
  },
  inputField: {
    backgroundColor: "#fff",
    padding: 15,
    borderRadius: 8,
    marginBottom: 15,
    fontSize: 16,
    borderColor: "#ddd",
    borderWidth: 1,
  },
  saveButton: {
    backgroundColor: "#2D572C", // Green color
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: "center",
  },
  saveButtonText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },

  logoutButtonText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default EditProfileScreen;