"use client";
import { useEffect, useState } from "react";
import { api } from "@/lib/api";

export default function ProviderOffers() {
  const [offers, setOffers] = useState<any[]>([]);
  const [err, setErr] = useState<string | null>(null);
  const [msg, setMsg] = useState<string>("");

  async function load() {
    try {
      const res = await api<any[]>("/provider/offers", { auth: true });
      setOffers(res);
      setErr(null);
    } catch (e: any) {
      setErr(e.message);
    }
  }

  useEffect(() => {
    load();
    const t = setInterval(load, 2000);
    return () => clearInterval(t);
  }, []);

  async function accept(id: string) {
    setMsg("Accepting...");
    const res = await api<any>(`/provider/offers/${id}/accept`, {
      method: "POST",
      body: JSON.stringify({ providerNote: "" }),
      auth: true,
    });
    setMsg(`Accepted. Booking ${res.bookingId} pending deposit.`);
    load();
  }

  async function decline(id: string) {
    setMsg("Declining...");
    await api<any>(`/provider/offers/${id}/decline`, {
      method: "POST",
      body: JSON.stringify({ reason: "Busy" }),
      auth: true,
    });
    setMsg("Declined.");
    load();
  }

  return (
    <div className="grid gap-3">
      <h1 className="text-xl font-semibold">Incoming Offers</h1>
      {err && <div className="text-red-600">{err}</div>}
      {msg && <div className="text-sm opacity-80">{msg}</div>}
      <div className="grid gap-2">
        {offers.map(o => (
          <div key={o.id} className="border rounded p-3 text-sm">
            <div><b>Offer:</b> {o.id}</div>
            <div><b>Request:</b> {o.bookingRequestId}</div>
            <div><b>Expires:</b> {new Date(o.expiresAt).toLocaleString()}</div>
            <div className="mt-2 flex gap-2">
              <button className="bg-black text-white rounded px-3 py-1" onClick={() => accept(o.id)}>Accept</button>
              <button className="border rounded px-3 py-1" onClick={() => decline(o.id)}>Decline</button>
            </div>
          </div>
        ))}
      </div>
      {!offers.length && <div className="opacity-70">No offers right now.</div>}
    </div>
  );
}