import React from 'react'

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 WorldAnalyticsParticipationPanel({ participation = {} }) {
  const currentCards = [
    ['Pending', participation.pending],
    ['Live', participation.live],
    ['Removed', participation.removed],
    ['Blocked', participation.blocked],
    ['Featured', participation.featured],
  ]

  const activityCards = [
    ['Submitted', participation.submitted],
    ['Approved', participation.approved],
    ['Removed Actions', participation.removed_actions],
    ['Blocked Actions', participation.blocked_actions],
    ['Featured Actions', participation.featured_actions],
  ]

  return (
    <div className="grid gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
      <div className="rounded-[24px] border border-white/10 bg-black/20 p-5">
        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Participation state</div>
        <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
          {currentCards.map(([label, value]) => (
            <div key={label} className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
              <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">{label}</div>
              <div className="mt-2 text-xl font-semibold text-white">{formatNumber(value)}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="rounded-[24px] border border-white/10 bg-black/20 p-5">
        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Participation funnel</div>
        <div className="mt-4 grid gap-3">
          {activityCards.map(([label, value]) => (
            <div key={label} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
              <div className="text-sm font-semibold text-white">{label}</div>
              <div className="text-sm font-semibold text-sky-100">{formatNumber(value)}</div>
            </div>
          ))}
        </div>
        <div className="mt-4 grid gap-3 md:grid-cols-2">
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">Approval rate: <span className="font-semibold text-white">{formatPercent(participation.approval_rate)}</span></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">Removal rate: <span className="font-semibold text-white">{formatPercent(participation.removal_rate)}</span></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">Block rate: <span className="font-semibold text-white">{formatPercent(participation.block_rate)}</span></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">View-to-submit: <span className="font-semibold text-white">{formatPercent(participation.view_to_submission_conversion)}</span></div>
        </div>
      </div>
    </div>
  )
}