'use client'

import { useQuery } from '@tanstack/react-query'
import { useSession } from 'next-auth/react'
import { createKubernetesClient } from '@/lib/kubernetes-client'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/Card'
import { Server, CheckCircle, XCircle } from 'lucide-react'

export default function KubernetesClusters() {
  const { data: session } = useSession()
  const k8s = createKubernetesClient(session?.accessToken as string)

  const { data: clusterInfo, isLoading } = useQuery({
    queryKey: ['kubernetes-cluster'],
    queryFn: () => k8s.getClusterInfo(),
    refetchInterval: 30000,
  })

  const { data: namespaces = [] } = useQuery({
    queryKey: ['kubernetes-namespaces'],
    queryFn: () => k8s.listNamespaces(),
    enabled: !!clusterInfo,
  })

  const { data: pods = [] } = useQuery({
    queryKey: ['kubernetes-pods'],
    queryFn: () => k8s.listPods(),
    enabled: !!clusterInfo,
  })

  const { data: deployments = [] } = useQuery({
    queryKey: ['kubernetes-deployments'],
    queryFn: () => k8s.listDeployments(),
    enabled: !!clusterInfo,
  })

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  if (!clusterInfo) {
    return (
      <Card>
        <CardContent className="p-8 text-center text-gray-400">
          Unable to connect to Kubernetes cluster
        </CardContent>
      </Card>
    )
  }

  const nodeHealthPercentage =
    clusterInfo.nodes && clusterInfo.nodes.total > 0
      ? Math.round((clusterInfo.nodes.ready / clusterInfo.nodes.total) * 100)
      : 0

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Kubernetes Clusters</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-400">Cluster</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              <Server className="h-5 w-5 text-blue-500" />
              <div>
                <div className="text-lg font-bold">{clusterInfo.name}</div>
                <div className="text-sm text-gray-400">{clusterInfo.version}</div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-400">Nodes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-2">
              {nodeHealthPercentage === 100 ? (
                <CheckCircle className="h-5 w-5 text-green-500" />
              ) : (
                <XCircle className="h-5 w-5 text-yellow-500" />
              )}
              <div>
                <div className="text-lg font-bold">
                  {clusterInfo.nodes?.ready || 0} / {clusterInfo.nodes?.total || 0}
                </div>
                <div className="text-sm text-gray-400">{nodeHealthPercentage}% healthy</div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-400">Namespaces</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-lg font-bold">{namespaces.length}</div>
            <div className="text-sm text-gray-400">Total namespaces</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium text-gray-400">Workloads</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-1">
              <div className="flex justify-between">
                <span className="text-sm text-gray-400">Pods:</span>
                <span className="text-sm font-medium">{pods.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-sm text-gray-400">Deployments:</span>
                <span className="text-sm font-medium">{deployments.length}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

