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

const kpiItems = [
  { key: 'views',      label: 'Views',      icon: 'fa-eye',          color: 'text-emerald-400' },
  { key: 'favourites', label: 'Favourites',  icon: 'fa-heart',       color: 'text-pink-400' },
  { key: 'shares',     label: 'Shares',      icon: 'fa-share-nodes', color: 'text-amber-400' },
  { key: 'comments',   label: 'Comments',    icon: 'fa-comment',     color: 'text-blue-400' },
  { key: 'downloads',  label: 'Downloads',   icon: 'fa-download',    color: 'text-purple-400' },
]

const metricCards = [
  { key: 'ranking_score',       label: 'Ranking Score',       icon: 'fa-trophy',        color: 'text-yellow-400' },
  { key: 'heat_score',          label: 'Heat Score',          icon: 'fa-fire',          color: 'text-orange-400' },
  { key: 'engagement_velocity', label: 'Engagement Velocity', icon: 'fa-bolt',          color: 'text-cyan-400' },
]

export default function StudioArtworkAnalytics() {
  const { props } = usePage()
  const { artwork, analytics } = props

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

      {/* Artwork header */}
      <div className="flex items-center gap-4 mb-8 bg-nova-900/60 border border-white/10 rounded-2xl p-4">
        {artwork?.thumb_url && (
          <img
            src={artwork.thumb_url}
            alt={artwork.title}
            className="w-20 h-20 rounded-xl object-cover bg-nova-800"
          />
        )}
        <div>
          <h2 className="text-lg font-bold text-white">{artwork?.title}</h2>
          <p className="text-xs text-slate-500 mt-1">/{artwork?.slug}</p>
        </div>
      </div>

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

      {/* Performance metrics */}
      <h3 className="text-base font-bold text-white mb-4">Performance Metrics</h3>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        {metricCards.map((item) => (
          <div key={item.key} className="bg-nova-900/60 border border-white/10 rounded-2xl p-5">
            <div className="flex items-center gap-2 mb-3">
              <div className={`w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center ${item.color}`}>
                <i className={`fa-solid ${item.icon} text-lg`} />
              </div>
              <span className="text-sm font-medium text-slate-300">{item.label}</span>
            </div>
            <p className="text-3xl font-bold text-white tabular-nums">
              {(analytics?.[item.key] ?? 0).toFixed(1)}
            </p>
          </div>
        ))}
      </div>

      {/* Placeholder sections for future features */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6">
          <h4 className="text-sm font-semibold text-white mb-3">
            <i className="fa-solid fa-chart-line mr-2 text-slate-500" />
            Traffic Sources
          </h4>
          <div className="flex items-center justify-center py-8">
            <div className="text-center">
              <i className="fa-solid fa-chart-pie text-3xl text-slate-700 mb-3" />
              <p className="text-xs text-slate-500">Coming soon</p>
              <p className="text-[10px] text-slate-600 mt-1">Traffic source tracking is on the roadmap</p>
            </div>
          </div>
        </div>

        <div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6">
          <h4 className="text-sm font-semibold text-white mb-3">
            <i className="fa-solid fa-share-from-square mr-2 text-slate-500" />
            Shares by Platform
          </h4>
          <div className="flex items-center justify-center py-8">
            <div className="text-center">
              <i className="fa-solid fa-share-nodes text-3xl text-slate-700 mb-3" />
              <p className="text-xs text-slate-500">Coming soon</p>
              <p className="text-[10px] text-slate-600 mt-1">Platform-level share tracking coming in v2</p>
            </div>
          </div>
        </div>

        <div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6 lg:col-span-2">
          <h4 className="text-sm font-semibold text-white mb-3">
            <i className="fa-solid fa-trophy mr-2 text-slate-500" />
            Ranking History
          </h4>
          <div className="flex items-center justify-center py-8">
            <div className="text-center">
              <i className="fa-solid fa-chart-area text-3xl text-slate-700 mb-3" />
              <p className="text-xs text-slate-500">Coming soon</p>
              <p className="text-[10px] text-slate-600 mt-1">Historical ranking data will be tracked in a future update</p>
            </div>
          </div>
        </div>
      </div>
    </StudioLayout>
  )
}