"use client";
import { useState } from "react";
import { api } from "@/lib/api";
import { useRouter } from "next/navigation";

export default function RequestPage() {
  const [categoryId, setCategoryId] = useState("");
  const [serviceId, setServiceId] = useState("");
  const [mode, setMode] = useState<"AT_HOME"|"IN_SALON">("AT_HOME");
  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: mode,
      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/requests/${res.requestId}`);
  }

  return (
    <div className="max-w-xl border rounded p-4">
      <h1 className="text-xl font-semibold mb-3">Broadcast Request</h1>

      <label className="block text-sm mb-1">Category ID</label>
      <input className="w-full border rounded p-2 mb-3" value={categoryId} onChange={(e)=>setCategoryId(e.target.value)} />

      <label className="block text-sm mb-1">Service ID (optional)</label>
      <input className="w-full border rounded p-2 mb-3" value={serviceId} onChange={(e)=>setServiceId(e.target.value)} />

      <label className="block text-sm mb-1">Service Mode</label>
      <select className="w-full border rounded p-2 mb-3" value={mode} onChange={(e)=>setMode(e.target.value as any)}>
        <option value="AT_HOME">At Home</option>
        <option value="IN_SALON">In Salon</option>
      </select>

      <div className="grid grid-cols-2 gap-2 mb-3">
        <div>
          <label className="block text-sm mb-1">Lat</label>
          <input className="w-full border rounded p-2" value={lat} onChange={(e)=>setLat(e.target.value)} />
        </div>
        <div>
          <label className="block text-sm mb-1">Lng</label>
          <input className="w-full border rounded p-2" value={lng} onChange={(e)=>setLng(e.target.value)} />
        </div>
      </div>

      <label className="block text-sm mb-1">Address</label>
      <input className="w-full border rounded p-2 mb-3" value={addressText} onChange={(e)=>setAddressText(e.target.value)} />

      <button className="w-full bg-black text-white rounded p-2" onClick={submit}>Send Broadcast</button>
    </div>
  );
}