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

export default function RequestDetail({ params }: { params: { id: string } }) {
  const [data, setData] = useState<any>(null);
  const [err, setErr] = useState<string | null>(null);

  async function load() {
    try {
      const res = await api<any>(`/booking-requests/${params.id}`, { auth: true });
      setData(res);
      setErr(null);
    } catch (e: any) {
      setErr(e.message);
    }
  }

  useEffect(() => {
    load();
    const t = setInterval(load, 2500);
    return () => clearInterval(t);
  }, [params.id]);

  if (err) return <div className="text-red-600">{err}</div>;
  if (!data) return <div>Loading…</div>;

  return (
    <div className="grid gap-3">
      <h1 className="text-xl font-semibold">Request</h1>
      <div className="border rounded p-3">
        <div><b>Status:</b> {data.status}</div>
        <div><b>Type:</b> {data.requestType}</div>
        <div><b>Mode:</b> {data.serviceMode}</div>
      </div>

      <div className="border rounded p-3">
        <h2 className="font-semibold mb-2">Offers</h2>
        <div className="grid gap-2">
          {(data.offers ?? []).map((o: any) => (
            <div key={o.id} className="border rounded p-2 text-sm">
              <div><b>Provider:</b> {o.providerId}</div>
              <div><b>State:</b> {o.state}</div>
              <div><b>Expires:</b> {new Date(o.expiresAt).toLocaleString()}</div>
            </div>
          ))}
        </div>
      </div>

      {data.booking && (
        <div className="border rounded p-3">
          <h2 className="font-semibold mb-2">Booking</h2>
          <div><b>Status:</b> {data.booking.status}</div>
          <div><b>Booking ID:</b> {data.booking.id}</div>
          <Link className="underline" href={`/client/booking/${data.booking.id}/deposit`}>Pay Deposit</Link>
        </div>
      )}
    </div>
  );
}