import { useNavigate, useParams } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { useUser } from '../hooks/useUser'
import { useDeactivateUser } from '../hooks/useDeactivateUser'
import { useReactivateUser } from '../hooks/useReactivateUser'
import { ResetPasswordModal } from '../components/ResetPasswordModal'
import { useAuthStore } from '@/stores/authStore'

export function UserDetailPage() {
  const { id } = useParams<{ id: string }>()
  const userId = Number(id)
  const navigate = useNavigate()
  const loggedUserId = useAuthStore((s) => s.user?.id)

  const { data: user, isLoading } = useUser(userId)
  const { mutate: deactivate, isPending: deactivating } = useDeactivateUser()
  const { mutate: reactivate, isPending: reactivating } = useReactivateUser()

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

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

  const busy = deactivating || reactivating

  return (
    <div className="max-w-xl space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">
          {user.nombre} {user.apellido}
        </h1>
        <Button variant="ghost" size="sm" onClick={() => navigate('/usuarios')}>
          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">Usuario</span>
          <span className="font-mono">{user.username}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Email</span>
          <span>{user.email ?? '—'}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Rol</span>
          <Badge variant="secondary" className="capitalize">{user.rol}</Badge>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Estado</span>
          {user.activo
            ? <Badge variant="secondary" className="bg-green-100 text-green-800">Activo</Badge>
            : <Badge variant="secondary" className="bg-red-100 text-red-800">Inactivo</Badge>
          }
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button
          variant="outline"
          onClick={() => navigate(`/usuarios/${userId}/editar`)}
        >
          Editar
        </Button>

        {user.activo ? (
          <Button
            variant="outline"
            disabled={busy}
            onClick={() => deactivate(userId)}
          >
            {deactivating ? 'Desactivando...' : 'Desactivar'}
          </Button>
        ) : (
          <Button
            variant="outline"
            disabled={busy}
            onClick={() => reactivate(userId)}
          >
            {reactivating ? 'Reactivando...' : 'Reactivar'}
          </Button>
        )}

        {loggedUserId !== userId && <ResetPasswordModal userId={userId} />}
      </div>
    </div>
  )
}
