import React from 'react'
import WorldAnalyticsSummaryCard from './WorldAnalyticsSummaryCard'

function formatNumber(value) {
  return new Intl.NumberFormat('en-US').format(Number(value || 0))
}

function formatPercent(value) {
  return `${Math.round(Number(value || 0) * 100)}%`
}

export default function WorldAnalyticsMetricGrid({ summary = {} }) {
  const cards = [
    {
      label: 'Views',
      value: formatNumber(summary.views),
      hint: summary.top_source_surface?.label
        ? `Top source: ${summary.top_source_surface.label} • ${formatPercent(summary.top_source_surface.clickthrough_rate)} CTR`
        : 'Traffic to the world page.',
    },
    {
      label: 'Unique Visitors',
      value: formatNumber(summary.unique_visitors),
      hint: 'Distinct visitors in the selected window.',
    },
    {
      label: 'Promotion Impressions',
      value: formatNumber(summary.promotion_impressions),
      hint: `Source CTR: ${formatPercent(summary.promotion_clickthrough_rate)}`,
      tone: 'accent',
    },
    {
      label: 'CTA Clicks',
      value: formatNumber(summary.cta_clicks),
      hint: 'Tracked world and challenge actions.',
      tone: 'accent',
    },
    {
      label: 'Submissions',
      value: formatNumber(summary.submissions),
      hint: `Live: ${formatNumber(summary.approved_live_participations)} • Approval: ${formatPercent(summary.approval_rate)}`,
      tone: 'emerald',
    },
    {
      label: 'Reward Grants',
      value: formatNumber(summary.reward_grants),
      hint: `Challenge clicks: ${formatNumber(summary.challenge_clicks)} • View-to-submit: ${formatPercent(summary.view_to_submission_conversion)}`,
    },
  ]

  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
      {cards.map((card) => <WorldAnalyticsSummaryCard key={card.label} {...card} />)}
    </div>
  )
}