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

const ProfilScreen = () => {
  const navigation = useNavigation();

  const handleLogout = () => {
    Alert.alert("Konfirmasi", "Anda yakin ingin keluar?", [
      { text: "Batal" },
      { text: "Keluar", onPress: () => navigation.replace("AksesAkun") },
    ]);
  };

  const handleShare = async () => {
    try {
      await Share.share({
        message: "Lihat aplikasi lingkungan ini!",
      });
    } catch (error) {
      console.error("Error sharing: ", error);
    }
  };

  return (
    <View style={styles.container}>
      {/* Header dengan Foto Profil */}
      <View style={styles.header}>
        <View style={styles.profileInfo}>
          <Image
            source={require("../../assets/images/fotoprofil.jpeg")}
            style={styles.profileImage}
          />
          <Text style={styles.profileName}>Hi Dina 👋</Text>
          <Text style={styles.environmentStatus}>
            Terus jaga lingkungan sekitar agar tetap hijau dan asri! 🌱
          </Text>
        </View>
      </View>

      {/* Info dan Motivasi */}
      <View style={styles.motivationSection}>
        <Text style={styles.motivationText}>PAHLAWAN LINGKUNGAN</Text>
      </View>

      {/* Tombol dan Informasi */}
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.navigate("InformasiPribadiStackScreen", {
              screen: "InformasiPribadi",
            });
          }}
        >
          <Ionicons name="person-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Informasi Pribadi</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.navigate("StatusPenukaranKoinStackScreen", {
              screen: "StatusPengirimanScreen",
            });
          }}
        >
          <Ionicons name="cash-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Status Penukaran Koin</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.navigate("StatusPengaduanStack", {
              screen: "StatusPengaduanStack",
            });
          }}
        >
          <Ionicons name="alert-circle-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Status Pengaduan</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            navigation.replace("DonasiStackScreen");
          }}
        >
          <Ionicons name="heart-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Donasi</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={handleShare}>
          <Ionicons name="share-social-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Bagikan ke Media Sosial</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} onPress={handleLogout}>
          <Ionicons name="log-out-outline" size={24} color="black" />
          <Text style={styles.buttonText}>Keluar Akun</Text>
        </TouchableOpacity>
      </View>

      {/* Bottom Navigation */}
      <View style={styles.bottomNavContainer}>
        <BottomNav />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  profileImage: {
    width: 150,
    height: 150,
    borderRadius: 100,
    borderWidth: 5,
    borderColor: "#388e3c",
    marginBottom: 10,
    marginTop: 50,
  },
  profileInfo: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  profileName: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#000",
  },
  environmentStatus: {
    fontSize: 16,
    color: "#2e7d32",
    marginTop: 5,
    fontStyle: "italic",
  },
  motivationSection: {
    marginTop: 10,
    backgroundColor: "#f0f0f0",
    padding: 10,
    borderRadius: 12,
    marginBottom: 10,
    marginRight: 100,
    marginLeft: 100,
    borderWidth: 0.5,
  },
  motivationText: {
    fontSize: 15,
    color: "#000",
    textAlign: "center",
    fontWeight: "600",
  },
  buttonContainer: {
    marginTop: 20,
    marginLeft: 10,
  },
  button: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
  },
  buttonText: {
    marginLeft: 10,
    fontSize: 16,
    color: "#333",
  },
  bottomNavContainer: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: 60,
    flexDirection: "row",
    justifyContent: "space-around",
    backgroundColor: "#fff",
    paddingVertical: 8,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 5,
  },
});

export default ProfilScreen;