'use client'

import { useQuery } from '@tanstack/react-query'
import { gql } from 'graphql-tag'
import { apolloClient } from '@/lib/graphql/client'
import { ResourceGraphEditor } from '@/components/editors/ResourceGraphEditor'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Network } from 'lucide-react'
import { useState } from 'react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

const GET_RESOURCE_GRAPH = gql`
  query GetResourceGraph($query: ResourceGraphQuery) {
    resourceGraph(query: $query) {
      nodes {
        id
        resourceType
        provider
        name
        region
      }
      edges {
        id
        source
        target
        relationshipType
      }
    }
  }
`

export function NetworkTopologyView() {
  const [filter, setFilter] = useState<{
    provider?: string
    region?: string
    resourceType?: string
  }>({})

  const { data, isLoading } = useQuery({
    queryKey: ['resourceGraph', filter],
    queryFn: async () => {
      const result = await apolloClient.query({
        query: GET_RESOURCE_GRAPH,
        variables: {
          query: Object.keys(filter).length > 0 ? filter : undefined,
        },
      })
      return result.data.resourceGraph
    },
  })

  return (
    <div className="space-y-4">
      <Card className="border-studio-medium bg-studio-dark">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Network className="h-6 w-6 text-phoenix-fire" />
              <CardTitle className="text-2xl text-white">Network Topology</CardTitle>
            </div>
            <div className="flex gap-2">
              <Select
                value={filter.provider || 'all'}
                onValueChange={(value) =>
                  setFilter({ ...filter, provider: value === 'all' ? undefined : value })
                }
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Provider" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Providers</SelectItem>
                  <SelectItem value="PROXMOX">Proxmox</SelectItem>
                  <SelectItem value="KUBERNETES">Kubernetes</SelectItem>
                  <SelectItem value="CLOUDFLARE">Cloudflare</SelectItem>
                </SelectContent>
              </Select>
              <Select
                value={filter.region || 'all'}
                onValueChange={(value) =>
                  setFilter({ ...filter, region: value === 'all' ? undefined : value })
                }
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Region" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Regions</SelectItem>
                  <SelectItem value="us-east-1">US East</SelectItem>
                  <SelectItem value="us-west-1">US West</SelectItem>
                  <SelectItem value="eu-central-1">EU Central</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="text-gray-400">Loading topology...</div>
          ) : (
            <ResourceGraphEditor query={filter} />
          )}
        </CardContent>
      </Card>
    </div>
  )
}

