"use client";

import { useState } from "react";
import { BellRing, CheckCircle2, Utensils } from "lucide-react";

export function TableServiceActions({
  token,
  compact = false,
  waiterEnabled = true,
}: {
  token: string;
  compact?: boolean;
  waiterEnabled?: boolean;
}) {
  const [status, setStatus] = useState<"idle" | "sending" | "called" | "error">("idle");
  const [message, setMessage] = useState("");

  async function callWaiter() {
    setStatus("sending");
    setMessage("");
    try {
      const response = await fetch("/api/waiter-calls", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error ?? "Unable to call waiter.");
      setStatus("called");
      setMessage(
        data.existing
          ? "Your waiter call is already active."
          : "Waiter called. Someone will be with you shortly."
      );
    } catch (error) {
      setStatus("error");
      setMessage(error instanceof Error ? error.message : "Unable to call waiter.");
    }
  }

  if (compact) {
    if (!waiterEnabled) return null;
    return (
      <div className="menu-waiter-dock">
        <button type="button" onClick={callWaiter} disabled={status === "sending" || status === "called"}>
          {status === "called" ? <CheckCircle2 /> : <BellRing />}
          {status === "sending" ? "Calling..." : status === "called" ? "Waiter Called" : "Call Waiter"}
        </button>
        {message ? <span className={status === "error" ? "error" : ""}>{message}</span> : null}
      </div>
    );
  }

  return (
    <div className="table-service-actions">
      <a href={`/menu?table=${encodeURIComponent(token)}`}>
        <Utensils size={23} />
        <span>
          <strong>View Restaurant Menu</strong>
          Browse food and drink options
        </span>
      </a>
      {waiterEnabled ? (
        <button type="button" onClick={callWaiter} disabled={status === "sending" || status === "called"}>
          {status === "called" ? <CheckCircle2 size={23} /> : <BellRing size={23} />}
          <span>
            <strong>{status === "sending" ? "Calling Waiter..." : status === "called" ? "Waiter Called" : "Call a Waiter"}</strong>
            {status === "called" ? "Your request is active" : "Notify the service dashboard"}
          </span>
        </button>
      ) : null}
      {message ? <p className={status === "error" ? "error" : ""}>{message}</p> : null}
    </div>
  );
}