import { useNavigate, useParams } from 'react-router-dom'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { CanPerform } from '@/components/auth/CanPerform'
import { usePuntoDeVenta } from '../hooks/usePuntosDeVenta'
import { useMedio } from '../../medios/hooks/useMedio'
import { DeactivatePuntoDeVentaModal } from '../components/DeactivatePuntoDeVentaModal'
import { MedioInactivoBanner } from '../components/MedioInactivoBanner'
import { PdvInactivoBanner } from '../components/PdvInactivoBanner'
import { formatInstantOrDash } from '@/lib/dateFormat'

export function PuntoDeVentaDetailPage() {
  const { id } = useParams<{ id: string }>()
  const puntoDeVentaId = Number(id)
  const navigate = useNavigate()

  const { data: pdv, isLoading } = usePuntoDeVenta(puntoDeVentaId)
  const { data: medio } = useMedio(pdv?.medioId ?? 0)
  const medioInactivo = medio?.activo === false
  const pdvInactivo = pdv?.activo === false

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <span className="text-muted-foreground">Cargando...</span>
      </div>
    )
  }

  if (!pdv) {
    return (
      <div className="py-12 text-center text-muted-foreground">
        Punto de venta no encontrado.
      </div>
    )
  }

  return (
    <div className="max-w-xl space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">{pdv.nombre}</h1>
        <Button variant="ghost" size="sm" onClick={() => navigate('/admin/puntos-de-venta')}>
          Volver
        </Button>
      </div>

      <div className="rounded-md border border-border p-4 space-y-3">
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Número AFIP</span>
          <span className="font-mono">{pdv.numeroAFIP}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Medio ID</span>
          <span>{pdv.medioId}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Estado</span>
          {pdv.activo
            ? <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Activo</Badge>
            : <Badge variant="secondary" className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Inactivo</Badge>
          }
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Creado</span>
          <span>{formatInstantOrDash(pdv.fechaCreacion)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Modificado</span>
          <span>{formatInstantOrDash(pdv.fechaModificacion)}</span>
        </div>
      </div>

      {pdvInactivo && (
        <PdvInactivoBanner puntoDeVentaNombre={pdv.nombre} />
      )}

      {medioInactivo && medio && (
        <MedioInactivoBanner medioNombre={medio.nombre} />
      )}

      <CanPerform permission="administracion:puntos_de_venta:gestionar">
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            disabled={medioInactivo}
            onClick={() => navigate(`/admin/puntos-de-venta/${puntoDeVentaId}/edit`)}
          >
            Editar
          </Button>
          <DeactivatePuntoDeVentaModal
            puntoDeVentaId={puntoDeVentaId}
            puntoDeVentaNombre={pdv.nombre}
            activo={pdv.activo}
            disabled={medioInactivo}
          />
        </div>
      </CanPerform>

    </div>
  )
}
