"use client"

import { useState } from "react"
import { Users, ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
import type { ItemPedidoMesa } from "@/hooks/use-table-orders"

/**
 * Franja «lo que esta mesa ya pidió», encima del menú.
 *
 * Existe para que dos comensales de la misma mesa no pidan lo mismo sin
 * saberlo: cada uno arma su carrito en su teléfono y hasta ahora nadie veía lo
 * que el otro ya había enviado.
 *
 * Se pinta con los tokens del tema Palco (nada de `bg-white` ni grises claros:
 * el sitio del cliente es oscuro).
 */
export function PedidoDeLaMesa({
  items,
  className,
}: {
  items: ItemPedidoMesa[]
  className?: string
}) {
  const [abierto, setAbierto] = useState(false)
  if (items.length === 0) return null

  const unidades = items.reduce((a, i) => a + i.quantity, 0)
  const resumen = items
    .slice(0, 3)
    .map((i) => `${i.quantity} ${i.name}`)
    .join(" · ")
  const hayMas = items.length > 3

  return (
    <div
      className={cn(
        "rounded-xl border border-verde-neon/30 bg-verde-neon/10 px-4 py-3",
        className
      )}
    >
      <button
        type="button"
        onClick={() => setAbierto((v) => !v)}
        aria-expanded={abierto}
        className="flex w-full items-start gap-3 text-left"
      >
        <Users className="mt-0.5 h-5 w-5 flex-shrink-0 text-verde-neon" />
        <div className="min-w-0 flex-1">
          <p className="text-sm font-semibold text-crema">
            Tu mesa ya pidió {unidades} {unidades === 1 ? "cosa" : "cosas"}
          </p>
          <p className="mt-0.5 truncate text-xs text-muted-foreground">
            {abierto ? "Toca para ocultar el detalle" : resumen + (hayMas ? "…" : "")}
          </p>
        </div>
        <ChevronDown
          className={cn(
            "mt-0.5 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform",
            abierto && "rotate-180"
          )}
        />
      </button>

      {abierto && (
        <ul className="mt-3 space-y-1.5 border-t border-verde-neon/20 pt-3">
          {items.map((i) => (
            <li
              key={i.name}
              className="flex items-baseline justify-between gap-3 text-sm"
            >
              <span className="min-w-0 truncate text-crema/90">{i.name}</span>
              <span className="flex-shrink-0 font-mono text-verde-neon">×{i.quantity}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}