"use client"

import Link from "next/link"
import { useMemo } from "react"
import { useQuery } from "convex/react"
import type { Id } from "@/convex/_generated/dataModel"
import { api } from "@/convex/_generated/api"
import { useAuth } from "@/lib/auth-client"

export function MachineBreadcrumbs({ tenantId, machineId }: { tenantId: string; machineId: string }) {
  const { convexUserId } = useAuth()
  const list = useQuery(
    convexUserId ? api.machines.listByTenant : "skip",
    convexUserId ? { tenantId, includeMetadata: false } : ("skip" as const)
  ) as Array<{ id: Id<"machines">; hostname: string }> | undefined
  const hostname = useMemo(() => list?.find((m) => m.id === (machineId as unknown as Id<"machines">))?.hostname ?? "Detalhe", [list, machineId])

  return (
    <nav className="mb-4 text-sm text-neutral-600">
      <ol className="flex items-center gap-2">
        <li>
          <Link href="/admin/machines" className="underline-offset-4 hover:underline">Máquinas</Link>
        </li>
        <li className="text-neutral-400">/</li>
        <li className="text-neutral-800">{hostname}</li>
      </ol>
    </nav>
  )
}

