import React from 'react'
import { Link, usePage } from '@inertiajs/react'
import StudioLayout from '../../Layouts/StudioLayout'

const kpiItems = [
  { key: 'views', label: 'Views', icon: 'fa-eye', color: 'text-emerald-400' },
  { key: 'likes', label: 'Likes', icon: 'fa-heart', color: 'text-pink-400' },
  { key: 'saves', label: 'Saves', icon: 'fa-bookmark', color: 'text-amber-400' },
  { key: 'remixes', label: 'Remixes', icon: 'fa-code-branch', color: 'text-cyan-400' },
  { key: 'comments', label: 'Comments', icon: 'fa-comment', color: 'text-blue-400' },
  { key: 'challenge_entries', label: 'Challenges', icon: 'fa-trophy', color: 'text-violet-400' },
]

const secondaryItems = [
  { key: 'favorites', label: 'Favorites', icon: 'fa-star' },
  { key: 'shares', label: 'Shares', icon: 'fa-share-nodes' },
  { key: 'downloads', label: 'Downloads', icon: 'fa-download' },
]

export default function StudioCardAnalytics() {
  const { props } = usePage()
  const { card, analytics } = props

  return (
    <StudioLayout title={`Analytics: ${card?.title || 'Nova Card'}`}>
      <Link href="/studio/cards" className="mb-6 inline-flex items-center gap-2 text-sm text-slate-400 transition-colors hover:text-white">
        <i className="fa-solid fa-arrow-left" />
        Back to Cards
      </Link>

      <div className="mb-8 flex items-center gap-4 rounded-2xl border border-white/10 bg-nova-900/60 p-4">
        {card?.preview_url ? <img src={card.preview_url} alt={card.title} className="h-20 w-20 rounded-xl object-cover bg-nova-800" /> : null}
        <div>
          <h2 className="text-lg font-bold text-white">{card?.title}</h2>
          <p className="mt-1 text-xs text-slate-500">/{card?.slug}</p>
          <p className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-400">{card?.status} • {card?.visibility}</p>
        </div>
      </div>

      <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
        {kpiItems.map((item) => (
          <div key={item.key} className="rounded-2xl border border-white/10 bg-nova-900/60 p-5">
            <div className="mb-2 flex items-center gap-2">
              <i className={`fa-solid ${item.icon} ${item.color}`} />
              <span className="text-xs font-medium uppercase tracking-wider text-slate-400">{item.label}</span>
            </div>
            <p className="text-2xl font-bold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</p>
          </div>
        ))}
      </div>

      <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
        <div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
          <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Ranking signals</h3>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
              <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Trending score</div>
              <div className="mt-2 text-3xl font-bold tabular-nums text-white">{Number(analytics?.trending_score ?? 0).toFixed(2)}</div>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
              <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Last engaged</div>
              <div className="mt-2 text-sm text-white">{analytics?.last_engaged_at || 'No activity yet'}</div>
            </div>
          </div>
        </div>

        <div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
          <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Secondary metrics</h3>
          <div className="space-y-3">
            {secondaryItems.map((item) => (
              <div key={item.key} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
                <div className="flex items-center gap-2 text-sm text-slate-300">
                  <i className={`fa-solid ${item.icon} text-slate-500`} />
                  {item.label}
                </div>
                <div className="text-base font-semibold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </StudioLayout>
  )
}