'use client'

import { useQuery } from '@tanstack/react-query'
import { gql } from 'graphql-tag'
import { apolloClient } from '@/lib/graphql/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Shield, AlertTriangle, CheckCircle, XCircle } from 'lucide-react'

const GET_PILLAR = gql`
  query GetPillar($code: PillarCode!) {
    pillar(code: $code) {
      id
      code
      name
      description
      controls {
        id
        code
        name
        description
        findings {
          id
          status
          severity
          title
        }
      }
    }
  }
`

export function PillarView({ pillarCode }: { pillarCode: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ['pillar', pillarCode],
    queryFn: async () => {
      const result = await apolloClient.query({
        query: GET_PILLAR,
        variables: { code: pillarCode },
      })
      return result.data.pillar
    },
  })

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

  const pillar = data

  return (
    <div className="space-y-4">
      <Card className="border-studio-medium bg-studio-dark">
        <CardHeader>
          <div className="flex items-center gap-3">
            <Shield className="h-8 w-8 text-phoenix-fire" />
            <div>
              <CardTitle className="text-2xl text-white">{pillar?.name}</CardTitle>
              <p className="text-sm text-gray-400 mt-1">{pillar?.description}</p>
            </div>
          </div>
        </CardHeader>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        {pillar?.controls?.map((control: any) => {
          const passCount = control.findings?.filter((f: any) => f.status === 'PASS').length || 0
          const failCount = control.findings?.filter((f: any) => f.status === 'FAIL').length || 0
          const totalFindings = control.findings?.length || 0

          return (
            <Card key={control.id} className="border-studio-medium bg-studio-dark">
              <CardHeader>
                <CardTitle className="text-lg text-white">
                  {control.code}: {control.name}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-400 mb-4">{control.description}</p>
                <div className="flex items-center gap-4">
                  <div className="flex items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-status-success" />
                    <span className="text-sm">{passCount} Pass</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <XCircle className="h-5 w-5 text-status-error" />
                    <span className="text-sm">{failCount} Fail</span>
                  </div>
                  <Badge variant={totalFindings > 0 && failCount === 0 ? 'default' : 'destructive'}>
                    {totalFindings === 0 ? 'No Findings' : `${Math.round((passCount / totalFindings) * 100)}% Compliant`}
                  </Badge>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}

