import { useState } from "react";
import { View, Text, TextInput, Pressable } from "react-native";
import { api } from "../../lib/api";
import { useRouter } from "expo-router";

export default function ClientRequest() {
  const [categoryId, setCategoryId] = useState("");
  const [serviceId, setServiceId] = useState("");
  const [lat, setLat] = useState("-24.658");
  const [lng, setLng] = useState("25.908");
  const [addressText, setAddressText] = useState("Gaborone");
  const router = useRouter();

  async function submit() {
    const body = {
      requestType: "BROADCAST",
      categoryId,
      serviceId: serviceId || null,
      isAsap: true,
      desiredTime: null,
      serviceMode: "AT_HOME",
      location: { lat: Number(lat), lng: Number(lng), addressText },
      notes: "Please be on time",
    };

    const res = await api<{ requestId: string; status: string }>("/booking-requests", {
      method: "POST",
      body: JSON.stringify(body),
      auth: true,
    });

    router.push(`/(client)/request/${res.requestId}`);
  }

  return (
    <View style={{ padding: 16, gap: 10 }}>
      <Text style={{ fontSize: 18, fontWeight: "700" }}>Broadcast Request</Text>
      <TextInput placeholder="Category ID" value={categoryId} onChangeText={setCategoryId}
        style={{ borderWidth: 1, borderRadius: 10, padding: 12 }} />
      <TextInput placeholder="Service ID (optional)" value={serviceId} onChangeText={setServiceId}
        style={{ borderWidth: 1, borderRadius: 10, padding: 12 }} />
      <TextInput placeholder="Lat" value={lat} onChangeText={setLat}
        style={{ borderWidth: 1, borderRadius: 10, padding: 12 }} />
      <TextInput placeholder="Lng" value={lng} onChangeText={setLng}
        style={{ borderWidth: 1, borderRadius: 10, padding: 12 }} />
      <TextInput placeholder="Address" value={addressText} onChangeText={setAddressText}
        style={{ borderWidth: 1, borderRadius: 10, padding: 12 }} />
      <Pressable onPress={submit} style={{ backgroundColor: "black", padding: 12, borderRadius: 10 }}>
        <Text style={{ color: "white", textAlign: "center" }}>Send</Text>
      </Pressable>
    </View>
  );
}