'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 { Globe, Clock, FileText } from 'lucide-react'

const GET_CULTURAL_CONTEXT = gql`
  query GetCulturalContext($regionId: ID!) {
    culturalContext(regionId: $regionId) {
      region {
        id
        name
        code
        country
      }
      language
      timezone
      culturalNorms
      complianceRequirements {
        framework
        requirements
      }
      dataResidency {
        requirements
        compliance {
          framework
          requirements
        }
      }
    }
  }
`

export function CulturalContextView({ regionId }: { regionId: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ['culturalContext', regionId],
    queryFn: async () => {
      const result = await apolloClient.query({
        query: GET_CULTURAL_CONTEXT,
        variables: { regionId },
      })
      return result.data.culturalContext
    },
  })

  if (isLoading) return <div>Loading cultural context...</div>
  if (!data) return <div>No cultural context found</div>

  return (
    <div className="space-y-4">
      <Card className="border-studio-medium bg-studio-dark">
        <CardHeader>
          <div className="flex items-center gap-3">
            <Globe className="h-6 w-6 text-sankofa-gold" />
            <CardTitle className="text-white">
              Cultural Context: {data.region?.name}
            </CardTitle>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="flex items-center gap-2">
              <span className="text-gray-400">Language:</span>
              <span className="text-white">{data.language || 'Not specified'}</span>
            </div>
            <div className="flex items-center gap-2">
              <Clock className="h-4 w-4 text-gray-400" />
              <span className="text-gray-400">Timezone:</span>
              <span className="text-white">{data.timezone || 'Not specified'}</span>
            </div>
          </div>

          {data.complianceRequirements && data.complianceRequirements.length > 0 && (
            <div>
              <h3 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
                <FileText className="h-5 w-5" />
                Compliance Requirements
              </h3>
              <div className="space-y-2">
                {data.complianceRequirements.map((req: any, idx: number) => (
                  <div key={idx} className="p-3 bg-studio-medium rounded">
                    <p className="font-semibold text-white">{req.framework}</p>
                    <ul className="list-disc list-inside text-gray-400 text-sm mt-1">
                      {req.requirements.map((r: string, i: number) => (
                        <li key={i}>{r}</li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
          )}

          {data.dataResidency && (
            <div>
              <h3 className="text-lg font-semibold text-white mb-2">Data Residency</h3>
              <div className="p-3 bg-studio-medium rounded">
                <ul className="list-disc list-inside text-gray-400 text-sm">
                  {data.dataResidency.requirements.map((req: string, i: number) => (
                    <li key={i}>{req}</li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

