import React, { useState } from "react";
import {
  ScrollView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Icon library for the media buttons

const KontribusiAdmin = ({ navigation, route }) => {
  // Destructuring safely with fallback values if route.params is undefined
  const {
    judulPengaduan = "Sampah berantakan",
    tempatPengaduan = "Jl Raya Madiun Nganjuk",
  } = route?.params || {};

  const [catatan, setCatatan] = useState("");

  return (
    <ScrollView style={styles.container}>
      {/* Title and Back Button */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>KONTRIBUSI SEKARANG</Text>
      </View>

      {/* Contribution Info Container */}
      <View style={styles.contributionContainer}>
        <View style={styles.infoBox}>
          <Text style={styles.infoText1}>{judulPengaduan}</Text>
          <Text style={styles.infoText2}>{tempatPengaduan}</Text>
        </View>

        {/* Add Media Row (Foto & Video) */}
        <View style={styles.mediaRow}>
          <TouchableOpacity style={styles.mediaButton}>
            <Ionicons name="image-outline" size={30} color="#2D572C" />
            <Text style={styles.mediaButtonText}>Tambah Foto</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.mediaButton}>
            <Ionicons name="videocam-outline" size={30} color="#2D572C" />
            <Text style={styles.mediaButtonText}>Tambah Video</Text>
          </TouchableOpacity>
        </View>

        {/* Catatan (Note Input) */}
        <TextInput
          style={styles.input}
          placeholder="Catatan"
          multiline
          value={catatan}
          onChangeText={setCatatan}
        />
      </View>

      {/* Koin Message */}
      <Text style={styles.koinText}>Dapatkan +520 Koin</Text>

      {/* Post Button at Bottom */}
      <TouchableOpacity
        style={styles.postButton}
        onPress={() => navigation.navigate("KontribusiBerhasilAdmin")}
      >
        <Text style={styles.postButtonText}>Posting</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // marginTop: 30,
    backgroundColor: "#f9f9f9",
  },
  header: {
    marginTop: 40,
    flexDirection: "row", // Aligns items horizontally
    alignItems: "center", // Vertically centers items
    padding: 15,
    backgroundColor: "#fff", // Dark green background
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  backButton: {
    marginRight: 15, // Adds spacing between the back button and the title
  },
  title: {
    fontSize: 22,
    color: "#000",
    fontWeight: "bold",
    flex: 1, // Ensures title takes up remaining space
    textAlign: "left",
  },
  contributionContainer: {
    padding: 20,
    backgroundColor: "#fff",
    marginBottom: 20,
    borderRadius: 12,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 4,
    // elevation: 5, // For Android shadow
  },
  infoBox: {
    marginBottom: 20,
  },
  infoText1: {
    fontSize: 22,
    color: "#333",
    fontWeight: "700",
    marginBottom: 5,
  },
  infoText2: {
    fontSize: 18,
    color: "#777",
    fontWeight: "400",
  },
  mediaRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 25,
  },
  mediaButton: {
    alignItems: "center",
    flex: 1,
    padding: 15,
    backgroundColor: "#E8F5E9", // Light green background
    borderRadius: 10,
    marginHorizontal: 10,
    borderWidth: 1,
    borderColor: "#2D572C",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 3 },
    shadowRadius: 5,
    elevation: 3,
  },
  mediaButtonText: {
    fontSize: 14,
    color: "#2D572C",
    marginTop: 5,
  },
  input: {
    height: 100,
    borderColor: "#2D572C",
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 15,
    backgroundColor: "#fff",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 5,
    elevation: 2,
  },
  koinText: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    color: "#2D572C",
    marginBottom: 20,
  },
  postButton: {
    backgroundColor: "#2D572C", // Dark Green
    paddingVertical: 15,
    borderRadius: 10,
    marginBottom: 20,
    alignItems: "center",
    width: "90%",
    alignSelf: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 8,
    elevation: 5,
  },
  postButtonText: {
    fontSize: 18,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default KontribusiAdmin;