'use client'

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Server, Play, Pause, Trash2 } from 'lucide-react'

interface VM {
  id: string
  name: string
  status: string
  cpu: number
  memory: number
  disk: number
}

export function VMList() {
  const { data: vms, isLoading } = useQuery<VM[]>({
    queryKey: ['vms'],
    queryFn: async () => {
      // Use Crossplane client to get VMs
      const { createCrossplaneClient } = await import('@/lib/crossplane-client')
      const { useSession } = await import('next-auth/react')
      
      // Get session token if available
      const session = typeof window !== 'undefined' 
        ? await import('next-auth/react').then(m => {
            // This is a workaround - in a real component we'd use the hook
            // For now, we'll use the client without auth or get token from storage
            return null
          })
        : null
      
      const client = createCrossplaneClient()
      const vms = await client.getVMs()
      
      // Transform Crossplane VM format to component format
      return vms.map((vm: any) => ({
        id: vm.metadata?.name || vm.metadata?.uid || '',
        name: vm.metadata?.name || 'Unknown',
        status: vm.status?.state || 'unknown',
        cpu: vm.spec?.forProvider?.cpu || 0,
        memory: vm.spec?.forProvider?.memory || 0,
        disk: vm.spec?.forProvider?.disk || 0,
      }))
    },
  })

  if (isLoading) return <div>Loading VMs...</div>

  return (
    <div className="space-y-4">
      {vms?.map((vm) => (
        <Card key={vm.id}>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <Server className="h-5 w-5" />
                <div>
                  <CardTitle>{vm.name}</CardTitle>
                  <p className="text-sm text-gray-500">Status: {vm.status}</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="outline" size="sm">
                  <Play className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <Pause className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 gap-4 text-sm">
              <div>
                <span className="text-gray-500">CPU:</span> {vm.cpu} cores
              </div>
              <div>
                <span className="text-gray-500">Memory:</span> {vm.memory} GB
              </div>
              <div>
                <span className="text-gray-500">Disk:</span> {vm.disk} GB
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

