"use client"

/**
 * Fila «dato + botón Copiar» para los datos de Pago Móvil (v1.78.0).
 *
 * El cliente tiene la app del banco en el mismo teléfono: en vez de memorizar
 * el número o el RIF y teclearlo, toca «Copiar» al lado de cada dato y lo pega.
 * Lo que va al portapapeles NO es lo que se ve en pantalla sino la forma que
 * acepta la app (solo dígitos, etc.): eso lo decide `lib/pago-movil-copiable.ts`.
 *
 * Se usa en tres pantallas con dos fondos distintos: la pasarela (`payment-flow`,
 * fondo celeste claro), el checkout del hotel (fondo blanco) y el checkout de
 * sede (tema Palco, fondo oscuro) — por eso el `variant`.
 */

import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"
import { Check, Copy } from "lucide-react"
import { cn } from "@/lib/utils"

type Variant = "claro" | "oscuro"

/**
 * Copia texto al portapapeles. `navigator.clipboard` exige HTTPS y a veces
 * no existe (WebView vieja, http en la red local); el respaldo con
 * `execCommand` sigue funcionando ahí.
 */
export async function copiarAlPortapapeles(texto: string): Promise<boolean> {
  if (!texto) return false
  try {
    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(texto)
      return true
    }
  } catch {
    // cae al respaldo
  }
  try {
    const ta = document.createElement("textarea")
    ta.value = texto
    ta.setAttribute("readonly", "")
    ta.style.position = "fixed"
    ta.style.opacity = "0"
    document.body.appendChild(ta)
    ta.select()
    const ok = document.execCommand("copy")
    document.body.removeChild(ta)
    return ok
  } catch {
    return false
  }
}

/** Estado «Copiado» que se apaga solo a los 2 s. */
export function useCopiar(duracionMs = 2000) {
  const [copiado, setCopiado] = useState(false)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

  useEffect(() => () => { if (timer.current) clearTimeout(timer.current) }, [])

  const copiar = useCallback(async (texto: string) => {
    const ok = await copiarAlPortapapeles(texto)
    if (!ok) return false
    setCopiado(true)
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => setCopiado(false), duracionMs)
    return true
  }, [duracionMs])

  return { copiado, copiar }
}

const estilosBoton: Record<Variant, { base: string; copiado: string }> = {
  claro: {
    base: "border-blue-300 bg-white text-blue-700 hover:bg-blue-100 active:bg-blue-200",
    copiado: "border-green-300 bg-green-50 text-green-700",
  },
  oscuro: {
    base: "border-blue-400/40 bg-white/10 text-blue-100 hover:bg-white/20 active:bg-white/30",
    copiado: "border-green-400/50 bg-green-500/20 text-green-200",
  },
}

interface BotonCopiarProps {
  /** Lo que va al portapapeles. Si está vacío, el botón no se muestra. */
  texto: string
  variant?: Variant
  /** Para el lector de pantalla: «Copiar teléfono». */
  ariaLabel?: string
  /** Texto del botón; por defecto solo el ícono + «Copiar». */
  children?: ReactNode
  className?: string
}

export function BotonCopiar({ texto, variant = "claro", ariaLabel, children, className }: BotonCopiarProps) {
  const { copiado, copiar } = useCopiar()
  if (!texto) return null
  const estilos = estilosBoton[variant]
  return (
    <button
      type="button"
      onClick={() => { void copiar(texto) }}
      aria-label={copiado ? "Copiado" : ariaLabel ?? "Copiar"}
      aria-live="polite"
      className={cn(
        "inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors select-none",
        copiado ? estilos.copiado : estilos.base,
        className,
      )}
    >
      {copiado ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
      <span>{copiado ? "Copiado" : children ?? "Copiar"}</span>
    </button>
  )
}

interface DatoCopiableProps {
  etiqueta: string
  icono?: ReactNode
  /** Lo que se ve. */
  valor: ReactNode
  /** Lo que se copia. Vacío → sin botón (dato que no está cargado). */
  valorCopiar: string
  variant?: Variant
  className?: string
  /** Para resaltar el monto. */
  destacado?: boolean
}

export function DatoCopiable({ etiqueta, icono, valor, valorCopiar, variant = "claro", className, destacado }: DatoCopiableProps) {
  return (
    <div className={cn("flex items-center justify-between gap-2", className)}>
      <div className="min-w-0 flex items-center gap-1.5 flex-wrap">
        {icono}
        <strong className={cn(destacado && "text-base")}>{etiqueta}:</strong>
        <span className={cn("break-all", destacado && "text-base font-bold")}>{valor}</span>
      </div>
      <BotonCopiar texto={valorCopiar} variant={variant} ariaLabel={`Copiar ${etiqueta.toLowerCase()}`} />
    </div>
  )
}