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 { useMedio } from '../hooks/useMedio'
import { DeactivateMedioModal } from '../components/DeactivateMedioModal'
import { tipoMedioLabel } from '../tipoMedio'
import { formatInstantOrDash } from '@/lib/dateFormat'

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

  const { data: medio, isLoading } = useMedio(medioId)

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

  if (!medio) {
    return (
      <div className="py-12 text-center text-muted-foreground">
        Medio 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">{medio.nombre}</h1>
        <Button variant="ghost" size="sm" onClick={() => navigate('/admin/medios')}>
          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">Código</span>
          <span className="font-mono">{medio.codigo}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Tipo</span>
          <Badge variant="secondary">{tipoMedioLabel(medio.tipo)}</Badge>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Plataforma ID</span>
          <span>{medio.plataformaEmpresaId ?? '—'}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Estado</span>
          {medio.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(medio.fechaCreacion)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Modificado</span>
          <span>{formatInstantOrDash(medio.fechaModificacion)}</span>
        </div>
      </div>

      <CanPerform permission="administracion:medios:gestionar">
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            onClick={() => navigate(`/admin/medios/${medioId}/edit`)}
          >
            Editar
          </Button>
          <DeactivateMedioModal
            medioId={medioId}
            medioNombre={medio.nombre}
            activo={medio.activo}
          />
        </div>
      </CanPerform>
    </div>
  )
}
