import React from 'react'

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

export default function WorldAnalyticsEditionComparisonCard({ comparison = null }) {
  if (!comparison?.editions || comparison.editions.length < 2) {
    return null
  }

  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Recurring edition comparison</div>
          <div className="mt-2 text-lg font-semibold text-white">{comparison.label}</div>
        </div>
        <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-300">{comparison.recurrence_key}</div>
      </div>

      <div className="mt-4 overflow-x-auto">
        <table className="min-w-full text-left text-sm text-slate-300">
          <thead>
            <tr className="border-b border-white/10 text-[11px] uppercase tracking-[0.16em] text-slate-500">
              <th className="pb-3 pr-4">Edition</th>
              <th className="pb-3 pr-4">Views</th>
              <th className="pb-3 pr-4">Unique</th>
              <th className="pb-3 pr-4">Submissions</th>
              <th className="pb-3 pr-4">Featured</th>
              <th className="pb-3 pr-4">Challenge</th>
              <th className="pb-3">Rewards</th>
            </tr>
          </thead>
          <tbody>
            {comparison.editions.map((edition) => (
              <tr key={edition.world_id} className="border-b border-white/[0.06] last:border-b-0">
                <td className="py-3 pr-4">
                  <div className="font-semibold text-white">{edition.title}</div>
                  <div className="mt-1 text-xs uppercase tracking-[0.14em] text-slate-500">{edition.edition_year || 'Unversioned'}{edition.is_current_world ? ' • current editor' : ''}</div>
                </td>
                <td className="py-3 pr-4">{formatNumber(edition.metrics?.views)}</td>
                <td className="py-3 pr-4">{formatNumber(edition.metrics?.unique_visitors)}</td>
                <td className="py-3 pr-4">{formatNumber(edition.metrics?.submissions)}</td>
                <td className="py-3 pr-4">{formatNumber(edition.metrics?.featured_participations)}</td>
                <td className="py-3 pr-4">{formatNumber(edition.metrics?.challenge_clicks)}</td>
                <td className="py-3">{formatNumber(edition.metrics?.reward_grants)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}