import React from 'react'

function formatCount(value) {
  const number = Number(value || 0)
  if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
  if (number >= 1_000) return `${(number / 1_000).toFixed(1).replace(/\.0$/, '')}k`
  return `${number}`
}

export default function ArtworkStats({ artwork, stats: statsProp }) {
  const stats = statsProp || artwork?.stats || {}
  const width = artwork?.dimensions?.width || 0
  const height = artwork?.dimensions?.height || 0

  return (
    <section className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
      <h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Statistics</h2>
      <dl className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
        <div className="rounded-lg bg-nova-900/30 px-3 py-2">
          <dt className="text-soft">👁 Views</dt>
          <dd className="mt-1 font-medium text-white">{formatCount(stats.views)} views</dd>
        </div>
        <div className="rounded-lg bg-nova-900/30 px-3 py-2">
          <dt className="text-soft">⬇️ Downloads</dt>
          <dd className="mt-1 font-medium text-white">{formatCount(stats.downloads)} downloads</dd>
        </div>
        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
          <dt className="text-soft">❤️ Likes</dt>
          <dd className="mt-1 font-medium text-white">{formatCount(stats.likes)} likes</dd>
        </div>
        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
          <dt className="text-soft">⭐ Favorites</dt>
          <dd className="mt-1 font-medium text-white">{formatCount(stats.favorites)} favorites</dd>
        </div>
        <div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2 sm:block">
          <dt className="text-soft">Resolution</dt>
          <dd className="mt-1 font-medium text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
        </div>
      </dl>
    </section>
  )
}