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

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

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.navigate("PengaduanSampahScreenAdmin")}
        >
          <Ionicons name="arrow-back" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>DALAM PROSES</Text>
      </View>

      {/* First Report */}

      {/* Second Report */}
      <View style={styles.reportContainer}>
        <View style={styles.reportHeader}>
          <View style={styles.profileContainer}>
            <Image
              source={{
                uri: "https://www.w3schools.com/howto/img_avatar2.png", // Replace with actual profile picture URI
              }}
              style={styles.profileImage}
            />
            <Text style={styles.reporterName}>Jihan Pangesti</Text>
          </View>
          <Text style={styles.time}>10/04/2025 13.00 WIB</Text>
        </View>
        <TouchableOpacity style={styles.statusButton}>
          <Text style={styles.reportStatus}>Dalam Proses</Text>
        </TouchableOpacity>
        <Text style={styles.reportDescription}>
          Sampah berserakan di Pasar Lama - JI. Sukarno, Nganjuk
        </Text>
        <Text style={styles.reportNote}>
          Catatan: Mohon segera ditindaklanjuti karena sangat mengganggu
          masyarakat sekitar.
        </Text>

        {/* Images */}
        <View style={styles.imageContainer}>
          <Image
            source={{
              uri: "https://static.toiimg.com/thumb/msid-97714168,imgsize-1547670,width-400,resizemode-4/97714168.jpg",
            }}
            style={styles.reportImage}
          />
          <Image
            source={{
              uri: "https://static.toiimg.com/thumb/msid-87155572,imgsize-1511223,width-400,resizemode-4/87155572.jpg",
            }}
            style={styles.reportImage}
          />
        </View>

        {/* Button to contribute */}
        <TouchableOpacity
          style={styles.contributeButton}
          onPress={() => navigation.navigate("KontribusiAdmin")}
        >
          <Text style={styles.contributeText}>Kontribusi Sekarang</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 16,
    marginTop: 0,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    marginTop: 40,
  },
  backButton: {
    marginRight: 10,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  reportContainer: {
    marginBottom: 20,
    padding: 12,
    borderRadius: 15,
    backgroundColor: "#fff",
    borderWidth: 0.5,
    borderColor: "#000",
  },
  reportHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 10,
  },
  profileContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  profileImage: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  reporterName: {
    fontSize: 16,
    fontWeight: "bold",
  },
  time: {
    fontSize: 14,
    color: "#555",
  },
  statusButton: {
    backgroundColor: "#DDD",
    borderRadius: 8,
    paddingVertical: 5,
    paddingHorizontal: 5,
    marginVertical: 8,
    alignItems: "center",
    width: "32%",
    borderWidth: 0.5,
  },
  reportStatus: {
    color: "#000",
    fontSize: 14,
  },
  reportDescription: {
    fontSize: 16,
    color: "#333",
    marginBottom: 8,
  },
  reportNote: {
    fontSize: 14,
    color: "#000",
    marginBottom: 12,
  },
  imageContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    marginBottom: 12,
  },
  reportImage: {
    width: 100,
    height: 100,
    borderRadius: 8,
    marginRight: 5,
    marginLeft: 5,
  },
  contributeButton: {
    backgroundColor: "#2D572C",
    padding: 10,
    borderRadius: 8,
    alignItems: "center",
    width: "50%",
    alignContent: "center",
    justifyContent: "center",
    marginLeft: 90,
    marginTop: 20,
  },
  contributeText: {
    color: "#fff",
    fontSize: 16,
  },
  coinText: {
    color: "#fff",
    fontSize: 14,
  },
});

export default DetailDalamProses;