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

'use client'

import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

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 — horizontal bar chart for readability
  const countryBarData = (data.byCountry || []).slice(0, 15).map((c) => ({
    country: getCountryName(c.country),
    Projects: c.count,
  }))

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

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

  return (
    <div className="space-y-6">
      {/* Summary stats row */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold tabular-nums">{data.total}</p>
            <p className="text-xs text-muted-foreground">Total Projects</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold tabular-nums">{(data.byCountry || []).length}</p>
            <p className="text-xs text-muted-foreground">Countries</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold tabular-nums">{(data.byCategory || []).length}</p>
            <p className="text-xs text-muted-foreground">Categories</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold tabular-nums">{(data.byOceanIssue || []).length}</p>
            <p className="text-xs text-muted-foreground">Ocean Issues</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Country Distribution — horizontal bars */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Geographic Distribution</CardTitle>
          </CardHeader>
          <CardContent>
            {countryBarData.length > 0 ? (
              <BarChart
                data={countryBarData}
                index="country"
                categories={['Projects']}
                colors={['cyan']}
                showLegend={false}
                layout="horizontal"
                yAxisWidth={120}
                className="h-[360px]"
              />
            ) : (
              <p className="text-muted-foreground text-center py-8">No geographic data</p>
            )}
          </CardContent>
        </Card>

        {/* Competition Categories — horizontal bars */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Competition Categories</CardTitle>
          </CardHeader>
          <CardContent>
            {categoryData.length > 0 ? (
              categoryData.length <= 4 ? (
                /* Clean stacked bars for few categories */
                <div className="space-y-4 pt-2">
                  {categoryData.map((c) => {
                    const maxCount = Math.max(...categoryData.map((d) => d.Projects))
                    const pct = maxCount > 0 ? (c.Projects / maxCount) * 100 : 0
                    return (
                      <div key={c.category} className="space-y-1.5">
                        <div className="flex items-center justify-between text-sm">
                          <span className="font-medium">{c.category}</span>
                          <span className="tabular-nums text-muted-foreground">{c.Projects}</span>
                        </div>
                        <div className="h-3 w-full rounded-full bg-muted overflow-hidden">
                          <div
                            className="h-full rounded-full bg-[#053d57] transition-all duration-500"
                            style={{ width: `${pct}%` }}
                          />
                        </div>
                      </div>
                    )
                  })}
                </div>
              ) : (
                <BarChart
                  data={categoryData}
                  index="category"
                  categories={['Projects']}
                  colors={['indigo']}
                  layout="horizontal"
                  yAxisWidth={140}
                  showLegend={false}
                  className="h-[280px]"
                />
              )
            ) : (
              <p className="text-muted-foreground text-center py-8">No category data</p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Ocean Issues — horizontal bars for readability */}
      {oceanIssueData.length > 0 && (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Ocean Issues Addressed</CardTitle>
          </CardHeader>
          <CardContent>
            <BarChart
              data={oceanIssueData}
              index="issue"
              categories={['Projects']}
              colors={['blue']}
              showLegend={false}
              layout="horizontal"
              yAxisWidth={200}
              className="h-[400px]"
            />
          </CardContent>
        </Card>
      )}

      {/* Tags — clean pill cloud */}
      {(data.byTag || []).length > 0 && (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Project Tags</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {(data.byTag || []).slice(0, 30).map((tag) => (
                <Badge
                  key={tag.tag}
                  variant="outline"
                  className="px-3 py-1 text-sm font-normal"
                >
                  {tag.tag}
                  <span className="ml-1.5 text-muted-foreground tabular-nums">({tag.count})</span>
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}