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

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

  // State untuk mengatur status tombol
  const [isVerified, setIsVerified] = useState(false); // Menyimpan status verifikasi
  const [showTolakForm, setShowTolakForm] = useState(false); // Menyimpan status tampilkan form alasan tolak
  const [alasanTolak, setAlasanTolak] = useState(""); // Menyimpan alasan tolak pengaduan
  const [isTolakClicked, setIsTolakClicked] = useState(false); // Status tombol tolak pengaduan sudah diklik

  // Fungsi untuk menangani klik tombol verifikasi
  const handleVerifikasi = () => {
    setIsVerified(true); // Mengubah status menjadi diverifikasi
  };

  // Fungsi untuk mengirim alasan tolak pengaduan
  const handleKirimTolak = () => {
    setIsTolakClicked(true); // Mengubah status tombol tolak menjadi sudah diklik
    setShowTolakForm(false); // Menutup form setelah alasan dikirim

    // Navigasi ke halaman DitolakScreen dan mengirim alasan penolakan
    navigation.navigate("DitolakScreen");
  };

  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}>VERIFIKASI</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>
        {/* Status */}
        <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 (Verifikasi) */}
        <TouchableOpacity
          style={isVerified ? styles.verifiedButton : styles.contributeButton}
          onPress={handleVerifikasi}
          disabled={isVerified} // Menonaktifkan tombol jika sudah diverifikasi
        >
          <Text style={styles.contributeTextSudah}>
            {isVerified ? "Sudah Diverifikasi" : "Verifikasi"}
          </Text>
        </TouchableOpacity>

        {/* Button to reject the report, will hide if verified */}
        {!isVerified && (
          <TouchableOpacity
            style={
              isTolakClicked
                ? styles.tolakButtonDisabled
                : styles.contributeButtonTolak
            }
            onPress={() => setShowTolakForm(true)}
            disabled={isTolakClicked} // Menonaktifkan tombol jika sudah diklik
          >
            <Text style={styles.contributeText}>
              {isTolakClicked ? "Tolak Pengaduan" : "Tolak Pengaduan"}
            </Text>
          </TouchableOpacity>
        )}

        {/* Form Alasan Tolak Pengaduan */}
        {showTolakForm && (
          <View style={styles.formContainer}>
            <Text style={styles.formTitle}>Alasan Tolak Pengaduan</Text>
            <TextInput
              style={styles.textInput}
              multiline
              numberOfLines={4}
              placeholder="Tulis alasan penolakan..."
              value={alasanTolak}
              onChangeText={setAlasanTolak}
            />
            <TouchableOpacity
              style={styles.submitButton}
              onPress={handleKirimTolak}
            >
              <Text style={styles.submitText}>Kirim</Text>
            </TouchableOpacity>
          </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,
  },
  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,
  },
  contributeButtonTolak: {
    backgroundColor: "#8b0000",
    padding: 10,
    borderRadius: 8,
    alignItems: "center",
    width: "50%",
    alignContent: "center",
    justifyContent: "center",
    marginLeft: 90,
    marginTop: 20,
  },
  tolakButtonDisabled: {
    backgroundColor: "#A9A9A9", // Disabled gray
    padding: 10,
    borderRadius: 8,
    alignItems: "center",
    width: "50%",
    alignContent: "center",
    justifyContent: "center",
    marginLeft: 90,
    marginTop: 20,
  },
  verifiedButton: {
    backgroundColor: "#777b7e",
    padding: 10,
    borderRadius: 8,
    alignItems: "center",
    width: "50%",
    alignContent: "center",
    justifyContent: "center",
    marginLeft: 90,
    marginTop: 20,
    borderWidth: 0.5,
  },
  contributeTextSudah: {
    color: "#fff",
    fontSize: 16,
  },
  contributeText: {
    color: "#fff",
    fontSize: 16,
  },
  formContainer: {
    marginTop: 20,
  },
  formTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10,
  },
  textInput: {
    height: 100,
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 8,
    padding: 10,
    fontSize: 16,
    textAlignVertical: "top",
  },
  submitButton: {
    backgroundColor: "#2D572C",
    padding: 10,
    borderRadius: 8,
    marginTop: 10,
    alignItems: "center",
  },
  submitText: {
    color: "#fff",
    fontSize: 16,
  },
});

export default DetailVerifikasi;