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

export default function InformasiPribadi() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.backIcon}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerText}>INFORMASI PRIBADI</Text>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        {/* Profile */}
        <View style={styles.profileContainer}>
          <Image
            source={require("../../../assets/images/fotoprofil.jpeg")}
            style={styles.profileImage}
          />
          <Text style={styles.profileName}>Dina Dwi Anisa</Text>
          <Text style={styles.profileRole}>Pahlawan Lingkungan</Text>
        </View>

        {/* Info Card */}
        <View style={styles.card}>
          <InfoRow label="Email" value="dinadwi03@gmail.com" />
          <InfoRow label="No. HP" value="087786770760" />
          <InfoRow
            label="Alamat"
            value="Jl Letjen. S.Parman IV Cangkringan Nganjuk"
          />
          <InfoRow label="Tanggal Bergabung" value="03 Januari 2025" />
          <InfoRow label="Jumlah Pengaduan" value="21 Postingan" />
          <InfoRow label="Koin" value="2150" />
        </View>

        {/* Edit Button */}
        <TouchableOpacity
          style={styles.editButton}
          onPress={() => navigation.navigate("EditInformasiPribadi")}
        >
          <Text style={styles.editButtonText}>EDIT</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const InfoRow = ({ label, value }) => (
  <View style={styles.infoRow}>
    <Text style={styles.infoLabel}>{label}</Text>
    <Text style={styles.infoValue}>{value}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    backgroundColor: "#fff",
    paddingVertical: 20,
    paddingHorizontal: 16,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 40,
  },
  backIcon: {
    marginRight: 16,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
    marginTop: 0,
  },
  content: {
    padding: 20,
  },
  profileContainer: {
    alignItems: "center",
    marginBottom: 20,
  },
  profileImage: {
    width: 100,
    height: 100,
    borderRadius: 60,
    borderWidth: 2,
    borderColor: "#2e7d32",
  },
  profileName: {
    fontSize: 18,
    fontWeight: "bold",
    marginTop: 10,
  },
  profileRole: {
    fontSize: 14,
    color: "#2e7d32",
    marginTop: 2,
  },
  card: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    elevation: 3,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 5,
    marginBottom: 20,
  },
  infoRow: {
    marginBottom: 15,
  },
  infoLabel: {
    fontSize: 13,
    color: "#888",
    marginBottom: 4,
  },
  infoValue: {
    fontSize: 15,
    fontWeight: "600",
    color: "#333",
  },
  link: {
    color: "#1976d2",
    fontWeight: "500",
  },
  editButton: {
    marginTop: 20,
    backgroundColor: "#2f4f2f",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  editButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});