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 DetailDitolak = () => {
  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}>DETAIL DITOLAK</Text>
      </View>

      {/* Report Section */}
      <View style={styles.reportContainer}>
        <View style={styles.reportHeader}>
          <View style={styles.profileContainer}>
            <Image
              source={{
                uri: "https://www.w3schools.com/howto/img_avatar2.png", // Ganti dengan foto profil asli
              }}
              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}>Ditolak</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>

        {/* Alasan Ditolak */}
        <View style={styles.alasanContainer}>
          <Text style={styles.alasanTitle}>Alasan Ditolak:</Text>
          <Text style={styles.alasanText}>
            Pengaduan ini ditolak karena lokasi yang dilaporkan tidak sesuai
            pada foto backButtonContainer yang dikirim.
          </Text>
        </View>

        {/* 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>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 16,
    marginTop: 0,
  },
  header: {
    marginTop: 40,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  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,
  },
  alasanContainer: {
    marginTop: 20,
    padding: 12,
    borderRadius: 8,
    backgroundColor: "#FFF3F3",
    borderWidth: 1,
    borderColor: "#F5B7B1",
  },
  alasanTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#D9534F",
  },
  alasanText: {
    fontSize: 14,
    color: "#721c24",
    marginTop: 8,
  },
  imageContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    marginBottom: 12,
    marginTop: 12,
  },
  reportImage: {
    width: 100,
    height: 100,
    borderRadius: 8,
    marginRight: 5,
    marginLeft: 5,
  },
});

export default DetailDitolak;