import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Pastikan menggunakan Ionicons yang benar
import { useNavigation } from "@react-navigation/native";
import MapView, { Marker } from "react-native-maps"; // Import MapView
import { Picker } from "@react-native-picker/picker"; // Hanya gunakan ini saja

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

  // State untuk form input
  const [namaTPS, setNamaTPS] = useState("");
  const [luasTPS, setLuasTPS] = useState("");
  const [dayaTampung, setDayaTampung] = useState("");
  const [jenisTPS, setJenisTPS] = useState("Container");
  const [alamat, setAlamat] = useState("");
  const [kecamatan, setKecamatan] = useState("Nganjuk");
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);

  // Fungsi untuk menangani penyimpanan TPS baru
  const handleTambahTPS = () => {
    if (
      !namaTPS ||
      !luasTPS ||
      !dayaTampung ||
      !alamat ||
      !latitude ||
      !longitude
    ) {
      Alert.alert("Form belum lengkap", "Mohon lengkapi semua data TPS.");
      return;
    }

    // Aksi penyimpanan TPS baru (misalnya kirim ke backend atau state global)
    Alert.alert("Berhasil", "TPS baru berhasil ditambahkan!");

    // Kembali ke halaman daftar TPS
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>TAMBAH LOKASI TPS</Text>
      </View>

      {/* Form Input TPS */}
      <View style={styles.formContainer}>
        <TextInput
          style={styles.input}
          placeholder="Nama TPS"
          value={namaTPS}
          onChangeText={setNamaTPS}
        />
        <TextInput
          style={styles.input}
          placeholder="Luas TPS (m2)"
          value={luasTPS}
          keyboardType="numeric"
          onChangeText={setLuasTPS}
        />
        <TextInput
          style={styles.input}
          placeholder="Daya Tampung"
          value={dayaTampung}
          keyboardType="numeric"
          onChangeText={setDayaTampung}
        />

        <Text style={styles.label}>Pilih Jenis TPS</Text>
        <Picker
          selectedValue={jenisTPS}
          style={styles.picker}
          onValueChange={(itemValue) => setJenisTPS(itemValue)}
        >
          <Picker.Item label="Container" value="Container" />
          <Picker.Item label="Depo Kecil" value="Depo Kecil" />
        </Picker>

        {/* Form Detail Lokasi */}
        <TextInput
          style={styles.input}
          placeholder="Alamat"
          value={alamat}
          onChangeText={setAlamat}
        />

        <Text style={styles.label}>Pilih Kecamatan</Text>
        <Picker
          selectedValue={kecamatan}
          style={styles.picker}
          onValueChange={(itemValue) => setKecamatan(itemValue)}
        >
          <Picker.Item label="Nganjuk" value="Nganjuk" />
          <Picker.Item label="Bagor" value="Bagor" />
          <Picker.Item label="Wilangan" value="Wilangan" />
          <Picker.Item label="Baron" value="Baron" />
        </Picker>

        <TextInput
          style={styles.input}
          placeholder="Latitude"
          value={latitude}
          keyboardType="numeric"
          onChangeText={setLatitude}
        />
        <TextInput
          style={styles.input}
          placeholder="Longitude"
          value={longitude}
          keyboardType="numeric"
          onChangeText={setLongitude}
        />

        {/* Peta */}
        {latitude && longitude ? (
          <MapView
            style={styles.map}
            initialRegion={{
              latitude: parseFloat(latitude),
              longitude: parseFloat(longitude),
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          >
            <Marker
              coordinate={{
                latitude: parseFloat(latitude),
                longitude: parseFloat(longitude),
              }}
            />
          </MapView>
        ) : null}

        {/* Tombol Simpan */}
        <TouchableOpacity style={styles.saveButton} onPress={handleTambahTPS}>
          <Text style={styles.saveButtonText}>SIMPAN</Text>
        </TouchableOpacity>
      </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: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  formContainer: {
    marginTop: -15,
    padding: 15,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 15,
    marginBottom: 12,
    fontSize: 14,
  },
  label: {
    fontSize: 14,
    fontWeight: "bold",
    marginBottom: 5,
  },
  picker: {
    height: 50,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    marginBottom: 12,
  },
  map: {
    height: 200,
    marginBottom: 20,
  },
  saveButton: {
    width: "100%",
    padding: 15,
    backgroundColor: "#2D572C", // Warna hijau untuk tombol kirim
    alignItems: "center",
    borderRadius: 15,
  },
  saveButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export default TambahTPS;