MOPC-Portal/src/components/charts/diversity-metrics.tsx

'use client'

import { DonutChart, BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { TREMOR_CHART_COLORS } from './chart-theme'

interface DiversityData {
  total: number
  byCountry: { country: string; count: number; percentage: number }[]
  byCategory: { category: string; count: number; percentage: number }[]
  byOceanIssue: { issue: string; count: number; percentage: number }[]
  byTag: { tag: string; count: number; percentage: number }[]
}

interface DiversityMetricsProps {
  data: DiversityData
}

/** Convert ISO 3166-1 alpha-2 code to full country name using Intl API */
function getCountryName(code: string): string {
  if (code === 'Others') return 'Others'
  try {
    const displayNames = new Intl.DisplayNames(['en'], { type: 'region' })
    return displayNames.of(code.toUpperCase()) || code
  } catch {
    return code
  }
}

/** Convert SCREAMING_SNAKE_CASE to Title Case */
function formatLabel(value: string): string {
  if (!value) return value
  return value
    .replace(/_/g, ' ')
    .toLowerCase()
    .replace(/\b\w/g, (c) => c.toUpperCase())
}

export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
  if (!data || data.total === 0) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-12">
          <p className="text-muted-foreground">No project data available</p>
        </CardContent>
      </Card>
    )
  }

  // Top countries for donut chart (max 10, others grouped)
  const topCountries = (data.byCountry || []).slice(0, 10)
  const otherCountries = (data.byCountry || []).slice(10)
  const countryData = otherCountries.length > 0
    ? [...topCountries, {
        country: 'Others',
        count: otherCountries.reduce((sum, c) => sum + c.count, 0),
        percentage: otherCountries.reduce((sum, c) => sum + c.percentage, 0),
      }]
    : topCountries

  const donutData = countryData.map((c) => ({
    name: getCountryName(c.country),
    value: c.count,
  }))

  const categoryData = (data.byCategory || []).slice(0, 10).map((c) => ({
    category: formatLabel(c.category),
    Count: c.count,
  }))

  const oceanIssueData = (data.byOceanIssue || []).slice(0, 15).map((o) => ({
    issue: formatLabel(o.issue),
    Count: o.count,
  }))

  return (
    <div className="space-y-6">
      {/* Summary */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold">{data.total}</div>
            <p className="text-sm text-muted-foreground">Total Projects</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold">{(data.byCountry || []).length}</div>
            <p className="text-sm text-muted-foreground">Countries Represented</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold">{(data.byCategory || []).length}</div>
            <p className="text-sm text-muted-foreground">Categories</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold">{(data.byTag || []).length}</div>
            <p className="text-sm text-muted-foreground">Unique Tags</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Country Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Geographic Distribution</CardTitle>
          </CardHeader>
          <CardContent>
            {donutData.length > 0 ? (
              <DonutChart
                data={donutData}
                category="value"
                index="name"
                colors={[...TREMOR_CHART_COLORS]}
                className="h-[400px]"
              />
            ) : (
              <p className="text-muted-foreground text-center py-8">No geographic data</p>
            )}
          </CardContent>
        </Card>

        {/* Category Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Competition Categories</CardTitle>
          </CardHeader>
          <CardContent>
            {categoryData.length > 0 ? (
              <BarChart
                data={categoryData}
                index="category"
                categories={['Count']}
                colors={['indigo']}
                layout="horizontal"
                yAxisWidth={120}
                showLegend={false}
                className="h-[400px]"
              />
            ) : (
              <p className="text-muted-foreground text-center py-8">No category data</p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Ocean Issues */}
      {oceanIssueData.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Ocean Issues Addressed</CardTitle>
          </CardHeader>
          <CardContent>
            <BarChart
              data={oceanIssueData}
              index="issue"
              categories={['Count']}
              colors={['blue']}
              showLegend={false}
              yAxisWidth={40}
              className="h-[400px]"
              rotateLabelX={{ angle: -35, xAxisHeight: 80 }}
            />
          </CardContent>
        </Card>
      )}

      {/* Tags Cloud */}
      {(data.byTag || []).length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Project Tags</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {(data.byTag || []).slice(0, 30).map((tag) => (
                <Badge
                  key={tag.tag}
                  variant="secondary"
                  className="text-sm"
                  style={{
                    fontSize: `${Math.max(0.75, Math.min(1.4, 0.75 + tag.percentage / 20))}rem`,
                  }}
                >
                  {tag.tag} ({tag.count})
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}