"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Banknote, CreditCard, DollarSign, QrCode, Smartphone, Wallet } from "lucide-react"
import { cn } from "@/lib/utils"

/**
 * Método, moneda y propina de un cobro del panel. Salió de
 * `table-checkout-dialog.tsx` para usarse igual en tres sitios: la cuenta
 * completa, el cobro a una persona y el pago libre de una cuenta dividida.
 */

export type PaymentMethod = "cash" | "card" | "transfer" | "pago_movil" | "zelle" | "usdt"
export type Moneda = "USD" | "VES"

export const paymentMethods: { id: PaymentMethod; name: string; icon: React.ReactNode }[] = [
  { id: "cash", name: "Efectivo", icon: <Banknote className="h-4 w-4" /> },
  { id: "card", name: "Tarjeta", icon: <CreditCard className="h-4 w-4" /> },
  { id: "transfer", name: "Transfer", icon: <Smartphone className="h-4 w-4" /> },
  { id: "pago_movil", name: "Pago Móvil", icon: <Smartphone className="h-4 w-4" /> },
  { id: "zelle", name: "Zelle", icon: <Wallet className="h-4 w-4" /> },
  { id: "usdt", name: "USDT", icon: <QrCode className="h-4 w-4" /> },
]

export function nombreDeMetodo(id: PaymentMethod) {
  return paymentMethods.find((m) => m.id === id)?.name ?? id
}

interface CobroControlesProps {
  /** Monto sobre el que se calcula el % de propina. */
  base: number
  method: PaymentMethod
  onMethod: (m: PaymentMethod) => void
  currency: Moneda
  onCurrency: (c: Moneda) => void
  tip: number
  onTip: (t: number) => void
  /** Teléfono del mesero: botones más bajos y propina en una fila. */
  compact?: boolean
}

export function CobroControles({ base, method, onMethod, currency, onCurrency, tip, onTip, compact = false }: CobroControlesProps) {
  const [porcentaje, setPorcentaje] = useState(0)

  // Si cambió el monto y la propina era un %, se recalcula sobre el nuevo.
  useEffect(() => {
    if (porcentaje > 0) onTip(Math.round(base * (porcentaje / 100) * 100) / 100)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [base])

  const elegirPorcentaje = (p: number) => {
    setPorcentaje(p)
    onTip(Math.round(base * (p / 100) * 100) / 100)
  }

  return (
    <div className={cn("space-y-5", compact && "space-y-3")}>
      <div>
        <Label className="text-primary mb-2 block">Método de pago</Label>
        <div className="grid grid-cols-3 gap-2">
          {paymentMethods.map((m) => (
            <Button
              key={m.id}
              type="button"
              variant={method === m.id ? "default" : "outline"}
              className={cn("flex-col h-auto gap-1", compact ? "py-2" : "py-3", method === m.id && "bg-primary")}
              onClick={() => onMethod(m.id)}
            >
              {m.icon}
              <span className="text-xs">{m.name}</span>
            </Button>
          ))}
        </div>
      </div>

      <div>
        <Label className="text-primary mb-2 flex items-center gap-2">
          <DollarSign className="h-4 w-4" />
          Moneda con la que pagó
        </Label>
        <div className="grid grid-cols-2 gap-2">
          {(["USD", "VES"] as Moneda[]).map((c) => (
            <Button
              key={c}
              type="button"
              variant={currency === c ? "default" : "outline"}
              className={cn(compact && "h-9", currency === c && "bg-verde-neon hover:bg-verde-neon/90 text-verde-bosque")}
              onClick={() => onCurrency(c)}
            >
              {c === "USD" ? "USD" : "Bolívares"}
            </Button>
          ))}
        </div>
      </div>

      <div>
        <Label className="text-primary mb-2 block">Propina</Label>
        <div className={cn("grid gap-2", compact ? "grid-cols-5" : "grid-cols-4 mb-3")}>
          {[0, 5, 10, 15].map((p) => (
            <Button
              key={p}
              type="button"
              size="sm"
              variant={porcentaje === p ? "default" : "outline"}
              className={cn(porcentaje === p && "bg-cta hover:bg-cta/90")}
              onClick={() => elegirPorcentaje(p)}
            >
              {p}%
            </Button>
          ))}
          {compact && (
            <Input
              type="number"
              inputMode="decimal"
              min={0}
              step="0.01"
              placeholder="Otra"
              aria-label="Propina en dólares"
              value={porcentaje === 0 && tip > 0 ? tip : ""}
              onChange={(e) => {
                setPorcentaje(0)
                onTip(Math.max(0, Number.parseFloat(e.target.value) || 0))
              }}
              className="h-8 border-primary/20 px-2"
            />
          )}
        </div>
        {!compact && (
          <Input
            type="number"
            inputMode="decimal"
            min={0}
            step="0.01"
            placeholder="Monto personalizado (USD)"
            value={porcentaje === 0 && tip > 0 ? tip : ""}
            onChange={(e) => {
              setPorcentaje(0)
              onTip(Math.max(0, Number.parseFloat(e.target.value) || 0))
            }}
            className="border-primary/20"
          />
        )}
      </div>
    </div>
  )
}