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

'use client'

import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
  Legend,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
} from 'recharts'
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
}

const PIE_COLORS = [
  '#053d57', '#de0f1e', '#557f8c', '#f38a52', '#6ad82f',
  '#3be31e', '#c9c052', '#e6382f', '#ed6141', '#0bd90f',
  '#8884d8', '#82ca9d', '#ffc658', '#ff7c7c', '#8dd1e1',
]

/** 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())
}

/** Custom tooltip for the pie chart */
function CountryTooltip({ active, payload }: { active?: boolean; payload?: Array<{ payload: { country: string; count: number; percentage: number } }> }) {
  if (!active || !payload?.length) return null
  const d = payload[0].payload
  return (
    <div className="rounded-md border bg-card px-3 py-2 text-sm shadow-md">
      <p className="font-medium">{getCountryName(d.country)}</p>
      <p className="text-muted-foreground">{d.count} projects ({d.percentage.toFixed(1)}%)</p>
    </div>
  )
}

/** Custom tooltip for bar charts */
function BarTooltip({ active, payload, labelFormatter }: { active?: boolean; payload?: Array<{ value: number }>; label?: string; labelFormatter: (val: string) => string }) {
  if (!active || !payload?.length) return null
  const entry = payload[0]
  const rawPayload = entry as unknown as { payload: Record<string, unknown> }
  const dataPoint = rawPayload.payload
  const rawLabel = (dataPoint.category || dataPoint.issue || '') as string
  return (
    <div className="rounded-md border bg-card px-3 py-2 text-sm shadow-md">
      <p className="font-medium">{labelFormatter(rawLabel)}</p>
      <p className="text-muted-foreground">{entry.value} projects</p>
    </div>
  )
}

export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
  if (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 pie chart (max 10, others grouped)
  const topCountries = data.byCountry.slice(0, 10)
  const otherCountries = data.byCountry.slice(10)
  const countryPieData = 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

  // Pre-format category and ocean issue data for display
  const formattedCategories = data.byCategory.slice(0, 10).map((c) => ({
    ...c,
    category: formatLabel(c.category),
  }))

  const formattedOceanIssues = data.byOceanIssue.slice(0, 15).map((o) => ({
    ...o,
    issue: formatLabel(o.issue),
  }))

  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>
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={countryPieData}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={120}
                    paddingAngle={2}
                    dataKey="count"
                    nameKey="country"
                    label={((props: unknown) => {
                      const p = props as { country: string; percentage: number }
                      return `${getCountryName(p.country)} (${p.percentage.toFixed(0)}%)`
                    }) as unknown as boolean}
                    fontSize={13}
                  >
                    {countryPieData.map((_, index) => (
                      <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip content={<CountryTooltip />} />
                  <Legend
                    formatter={(value: string) => getCountryName(value)}
                    wrapperStyle={{ fontSize: '13px' }}
                  />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

        {/* Category Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Competition Categories</CardTitle>
          </CardHeader>
          <CardContent>
            {formattedCategories.length > 0 ? (
              <div className="h-[400px]">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={formattedCategories}
                    layout="vertical"
                    margin={{ top: 5, right: 30, bottom: 5, left: 120 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                    <XAxis type="number" tick={{ fontSize: 13 }} />
                    <YAxis
                      type="category"
                      dataKey="category"
                      width={110}
                      tick={{ fontSize: 13 }}
                    />
                    <Tooltip content={<BarTooltip labelFormatter={(v) => v} />} />
                    <Bar dataKey="count" fill="#053d57" radius={[0, 4, 4, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            ) : (
              <p className="text-muted-foreground text-center py-8">No category data</p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Ocean Issues */}
      {formattedOceanIssues.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Ocean Issues Addressed</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={formattedOceanIssues}
                  margin={{ top: 20, right: 30, bottom: 80, left: 20 }}
                >
                  <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                  <XAxis
                    dataKey="issue"
                    angle={-35}
                    textAnchor="end"
                    height={100}
                    tick={{ fontSize: 12 }}
                    interval={0}
                  />
                  <YAxis tick={{ fontSize: 13 }} />
                  <Tooltip content={<BarTooltip labelFormatter={(v) => v} />} />
                  <Bar dataKey="count" fill="#557f8c" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </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>
  )
}