"use client"

import { useMemo } from "react"
import { useQuery } from "convex/react"
import { api } from "@/convex/_generated/api"
import { MachineDetails, type MachinesQueryItem } from "@/components/admin/machines/admin-machines-overview"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export function AdminMachineDetailsClient({ tenantId, machineId }: { tenantId: string; machineId: string }) {
  const queryResult = useQuery(api.machines.listByTenant, { tenantId, includeMetadata: true }) as MachinesQueryItem[] | undefined
  const isLoading = queryResult === undefined
  const machine = useMemo(() => {
    if (!queryResult) return null
    return queryResult.find((m) => m.id === machineId) ?? null
  }, [queryResult, machineId])

  if (isLoading) {
    return (
      <Card>
        <CardContent className="space-y-3 p-6">
          <Skeleton className="h-6 w-64" />
          <Skeleton className="h-4 w-80" />
          <Skeleton className="h-48 w-full" />
        </CardContent>
      </Card>
    )
  }

  return <MachineDetails machine={machine} />
}
