"use client"

import { useCallback, useEffect, useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { Loader2, Send } from "lucide-react"

/**
 * Estado del envío de un pedido al POS INVU + botón de reenvío manual.
 *
 * Vive en el diálogo de detalle de /admin/[sede]/pedidos. El reenvío usa el
 * MISMO num_cita, que en INVU reemplaza la orden existente — es la forma de
 * corregir (citas/delete no está permitido). Si la integración está apagada
 * (kill-switch) no se dibuja nada: cero ruido para las cajeras.
 */

interface InvuLog {
  id: string
  ourNumber: string
  invuOrderId: string | null
  status: "PENDING" | "SENT" | "FAILED" | "RETRYING"
  errorMessage: string | null
  createdAt: string
}

export function InvuStatusIndicator({ orderId }: { orderId: string }) {
  const [logs, setLogs] = useState<InvuLog[] | null>(null)
  const [sending, setSending] = useState(false)

  const cargar = useCallback(async () => {
    try {
      const res = await fetch(`/api/orders/${orderId}/invu`)
      if (res.ok) {
        const data = await res.json()
        setLogs(data.logs ?? [])
      }
    } catch {
      // sin red o sin permiso: el indicador simplemente no se dibuja
    }
  }, [orderId])

  useEffect(() => {
    setLogs(null)
    cargar()
  }, [cargar])

  // Sin historial de envíos no se muestra nada (integración apagada o pedido
  // anterior al encendido): la pantalla de pedidos no cambia para nadie.
  if (!logs || logs.length === 0) return null

  const ultimo = logs[0]
  const enviado = logs.some((l) => l.status === "SENT")

  const reenviar = async () => {
    setSending(true)
    try {
      const res = await fetch(`/api/orders/${orderId}/invu`, { method: "POST" })
      const data = await res.json()
      if (res.ok && data.enviado) {
        toast({ title: "Enviado a INVU", description: `Orden INVU ${data.invuOrderId}` })
      } else {
        toast({
          title: "INVU no recibió la orden",
          description: data.motivo || data.error || "Revisa el detalle del log",
          variant: "destructive",
        })
      }
      await cargar()
    } catch (e: any) {
      toast({ title: "Error de red", description: String(e?.message ?? e), variant: "destructive" })
    } finally {
      setSending(false)
    }
  }

  return (
    <div className="flex items-center gap-2 rounded-lg border p-2 bg-muted/30">
      <span className="text-xs font-medium text-muted-foreground">POS INVU:</span>
      {enviado ? (
        <Badge className="bg-green-100 text-green-700 border-green-300" variant="outline">
          Enviado · {logs.find((l) => l.status === "SENT")?.invuOrderId ?? ultimo.ourNumber}
        </Badge>
      ) : (
        <Badge className="bg-red-100 text-red-700 border-red-300" variant="outline">
          {ultimo.status === "FAILED" ? "Falló" : ultimo.status}
        </Badge>
      )}
      {!enviado && ultimo.errorMessage && (
        <span className="text-xs text-muted-foreground truncate max-w-[200px]" title={ultimo.errorMessage}>
          {ultimo.errorMessage}
        </span>
      )}
      <Button size="sm" variant="outline" className="ml-auto h-7" onClick={reenviar} disabled={sending}>
        {sending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Send className="h-3 w-3 mr-1" />}
        {enviado ? "Reenviar" : "Reintentar"}
      </Button>
    </div>
  )
}