"use client"

import { useEffect, useState } from "react"
import { CallWaiterButton } from "@/components/call-waiter-button"
import { useOrderMode } from "@/hooks/use-order-mode"

/**
 * Botón flotante para llamar al mesero, visible en todo el recorrido del
 * comensal y no solo en la pantalla de la cuenta.
 *
 * El encuadre correcto del pedido por QR es «pide sin esperar, o llamá a tu
 * mesero cuando quieras», nunca como único camino: donde el QR reemplaza al
 * mesero pierde, donde lo acompaña gana. Un botón escondido en una sola
 * pantalla no cumple esa promesa.
 *
 * Se dibuja abajo a la izquierda para no chocar con el carrito, que vive abajo
 * a la derecha.
 */
export function FloatingCallWaiter() {
  const orderMode = useOrderMode()
  const [session, setSession] = useState<{
    id: string
    tableNumber: string
    locationId: string
  } | null>(null)

  const tableCode = orderMode.tableCode
  const sessionToken = orderMode.sessionToken

  useEffect(() => {
    // Sin mesa o sin token no hay a quién llamar: el botón no se muestra.
    if (!orderMode.isLoaded || !orderMode.isTable || !tableCode || !sessionToken) {
      setSession(null)
      return
    }

    let cancelado = false

    const cargar = async () => {
      try {
        const res = await fetch(
          `/api/table-sessions?tableCode=${tableCode}&token=${sessionToken}`
        )
        if (!res.ok) return
        const data = await res.json()
        if (cancelado) return

        // Solo con una cuenta abierta de verdad tiene sentido llamar al mesero.
        if (data.session?.id && data.session.status === "OPEN") {
          setSession({
            id: data.session.id,
            tableNumber: data.table?.number || tableCode,
            locationId: String(data.table?.locationId ?? data.session.locationId ?? ""),
          })
        } else {
          setSession(null)
        }
      } catch {
        // Si no se puede consultar, no mostramos el botón: mejor eso que un
        // botón que falla al tocarlo.
      }
    }

    cargar()
    return () => {
      cancelado = true
    }
  }, [orderMode.isLoaded, orderMode.isTable, tableCode, sessionToken])

  if (!session) return null

  return (
    <div className="fixed bottom-6 left-4 z-40 sm:bottom-8 sm:left-6">
      <CallWaiterButton
        sessionId={session.id}
        tableCode={tableCode!}
        tableNumber={session.tableNumber}
        locationId={session.locationId}
        variant="default"
        className="rounded-full shadow-lg bg-white text-naranja-vip border border-naranja-vip hover:bg-naranja-vip hover:text-white h-12 px-5"
      />
    </div>
  )
}