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 { useSeccion } from '../hooks/useSeccion'
import { DeactivateSeccionModal } from '../components/DeactivateSeccionModal'
import { MedioInactivoBanner } from '../components/MedioInactivoBanner'
import { tipoSeccionLabel } from '../tipoSeccion'
import { useMedio } from '../../medios/hooks/useMedio'
import { formatInstantOrDash } from '@/lib/dateFormat'

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

  const { data: seccion, isLoading } = useSeccion(seccionId)
  const { data: medio } = useMedio(seccion?.medioId ?? 0)
  const medioInactivo = medio?.activo === false

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

  if (!seccion) {
    return (
      <div className="py-12 text-center text-muted-foreground">
        Sección no encontrada.
      </div>
    )
  }

  return (
    <div className="max-w-xl space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">{seccion.nombre}</h1>
        <Button variant="ghost" size="sm" onClick={() => navigate('/admin/secciones')}>
          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">{seccion.codigo}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Medio ID</span>
          <span>{seccion.medioId}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Tipo</span>
          <Badge variant="secondary" className="capitalize">
            {tipoSeccionLabel(seccion.tipo)}
          </Badge>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Estado</span>
          {seccion.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(seccion.fechaCreacion)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Modificado</span>
          <span>{formatInstantOrDash(seccion.fechaModificacion)}</span>
        </div>
      </div>

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

      <CanPerform permission="administracion:secciones:gestionar">
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            disabled={medioInactivo}
            onClick={() => navigate(`/admin/secciones/${seccionId}/edit`)}
          >
            Editar
          </Button>
          <DeactivateSeccionModal
            seccionId={seccionId}
            seccionNombre={seccion.nombre}
            activo={seccion.activo}
            disabled={medioInactivo}
          />
        </div>
      </CanPerform>
    </div>
  )
}
