import React from 'react'

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

export default function WorldAnalyticsSectionPerformance({ sections = [], entities = [] }) {
  return (
    <div className="grid gap-4 xl:grid-cols-2">
      <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">Section performance</div>
        <div className="mt-4 grid gap-3">
          {Array.isArray(sections) && sections.length > 0 ? sections.slice(0, 6).map((item) => (
            <div key={item.section_key} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
              <div>
                <div className="text-sm font-semibold text-white">{item.label}</div>
                <div className="mt-1 text-xs uppercase tracking-[0.14em] text-slate-500">{item.section_key}</div>
              </div>
              <div className="text-sm font-semibold text-sky-100">{formatNumber(item.clicks)}</div>
            </div>
          )) : <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-4 py-3 text-sm text-slate-400">No tracked section engagement yet.</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">Top clicked entities</div>
        <div className="mt-4 grid gap-3">
          {Array.isArray(entities) && entities.length > 0 ? entities.slice(0, 6).map((item) => (
            <div key={`${item.entity_type}-${item.entity_id}`} className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
              <div className="flex items-center justify-between gap-3">
                <div className="text-sm font-semibold text-white">{item.entity_title}</div>
                <div className="text-sm font-semibold text-sky-100">{formatNumber(item.clicks)}</div>
              </div>
              <div className="mt-1 text-xs uppercase tracking-[0.14em] text-slate-500">{item.section_key || item.entity_type}</div>
            </div>
          )) : <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-4 py-3 text-sm text-slate-400">No linked entity clicks recorded yet.</div>}
        </div>
      </div>
    </div>
  )
}