'use client'

import dynamic from 'next/dynamic'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { getCountryName } from '@/lib/countries'
import { Globe, MapPin } from 'lucide-react'

type CountryData = { countryCode: string; count: number }

type GeographicDistributionProps = {
  data: CountryData[]
  compact?: boolean
}

const LeafletMap = dynamic(() => import('./leaflet-map'), {
  ssr: false,
  loading: () => (
    <div
      className="flex items-center justify-center bg-muted/30 rounded-md animate-pulse"
      style={{ height: 400 }}
    >
      <Globe className="h-8 w-8 text-muted-foreground/40" />
    </div>
  ),
})

const LeafletMapFull = dynamic(() => import('./leaflet-map'), {
  ssr: false,
  loading: () => (
    <div
      className="flex items-center justify-center bg-muted/30 rounded-md animate-pulse"
      style={{ height: 500 }}
    >
      <Globe className="h-8 w-8 text-muted-foreground/40" />
    </div>
  ),
})

export function GeographicDistribution({
  data,
  compact = false,
}: GeographicDistributionProps) {
  const validData = data.filter((d) => d.countryCode !== 'UNKNOWN')
  const unknownCount = data
    .filter((d) => d.countryCode === 'UNKNOWN')
    .reduce((sum, d) => sum + d.count, 0)
  const totalProjects = data.reduce((sum, d) => sum + d.count, 0)
  const countryCount = validData.length

  if (data.length === 0 || totalProjects === 0) {
    return compact ? (
      <div className="flex flex-col items-center justify-center py-8 text-center">
        <Globe className="h-10 w-10 text-muted-foreground/40" />
        <p className="mt-2 text-sm text-muted-foreground">
          No geographic data available
        </p>
      </div>
    ) : (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            Project Origins
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <Globe className="h-12 w-12 text-muted-foreground/30" />
            <p className="mt-3 text-muted-foreground">
              No geographic data available yet
            </p>
          </div>
        </CardContent>
      </Card>
    )
  }

  if (compact) {
    return (
      <div className="space-y-3">
        <LeafletMap data={validData} compact />
        <div className="flex items-center justify-between text-xs text-muted-foreground px-1">
          <span>{countryCount} countries</span>
          {unknownCount > 0 && (
            <span>{unknownCount} projects without country</span>
          )}
        </div>
      </div>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            Project Origins
          </span>
          <span className="text-sm font-normal text-muted-foreground">
            {countryCount} countries &middot; {totalProjects} projects
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <LeafletMapFull data={validData} />
        {unknownCount > 0 && (
          <p className="text-xs text-muted-foreground">
            {unknownCount} project{unknownCount !== 1 ? 's' : ''} without country data
          </p>
        )}
        {/* Top countries table */}
        <div className="space-y-1">
          <p className="text-sm font-medium">Top Countries</p>
          <div className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
            {validData
              .sort((a, b) => b.count - a.count)
              .slice(0, 10)
              .map((d) => (
                <div
                  key={d.countryCode}
                  className="flex items-center justify-between py-1 border-b border-border/50"
                >
                  <span className="text-muted-foreground">
                    {getCountryName(d.countryCode)}
                  </span>
                  <span className="font-medium tabular-nums">{d.count}</span>
                </div>
              ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
