import React from 'react'
import { Head } from '@inertiajs/react'
import AdminLayout from '../../../Layouts/AdminLayout'
import AnalyticsNav from './AnalyticsNav'

function MetricCell({ value, suffix = '' }) {
  return <span className="font-semibold text-white">{value}{suffix}</span>
}

export default function AcademyAnalyticsContent({ nav = [], range, title, subtitle, rows = [] }) {
  return (
    <AdminLayout title={title} subtitle={subtitle}>
      <Head title={`Admin · ${title}`} />

      <div className="space-y-6">
        <AnalyticsNav items={nav} />

        <div className="rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-6">
          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Range</p>
          <p className="mt-3 text-sm text-slate-300">{range?.from} to {range?.to}</p>
        </div>

        <div className="overflow-hidden rounded-[28px] border border-white/[0.08] bg-white/[0.03]">
          <div className="overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead className="border-b border-white/[0.08] bg-black/20 text-[11px] uppercase tracking-[0.18em] text-slate-500">
                <tr>
                  <th className="px-4 py-3">Title</th>
                  <th className="px-4 py-3">Type</th>
                  <th className="px-4 py-3">Access</th>
                  <th className="px-4 py-3">Views</th>
                  <th className="px-4 py-3">Unique</th>
                  <th className="px-4 py-3">Engaged</th>
                  <th className="px-4 py-3">Likes</th>
                  <th className="px-4 py-3">Saves</th>
                  <th className="px-4 py-3">Copies</th>
                  <th className="px-4 py-3">Starts</th>
                  <th className="px-4 py-3">Completions</th>
                  <th className="px-4 py-3">Upgrade Clicks</th>
                  <th className="px-4 py-3">Popularity</th>
                  <th className="px-4 py-3">Trend</th>
                </tr>
              </thead>
              <tbody>
                {rows.length ? rows.map((row) => (
                  <tr key={`${row.content_type}-${row.content_id || 'none'}`} className="border-b border-white/[0.06] align-top text-slate-300">
                    <td className="px-4 py-4">
                      <p className="font-semibold text-white">{row.title}</p>
                      <p className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">ID {row.content_id || 'n/a'}</p>
                    </td>
                    <td className="px-4 py-4">{row.content_type_label}</td>
                    <td className="px-4 py-4">{row.access_level || 'n/a'}</td>
                    <td className="px-4 py-4"><MetricCell value={row.views} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.unique_visitors} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.engaged_views} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.likes} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.saves} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.prompt_copies} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.starts} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.completions} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.upgrade_clicks} /></td>
                    <td className="px-4 py-4"><MetricCell value={row.popularity_score} /></td>
                    <td className="px-4 py-4">{row.trend}</td>
                  </tr>
                )) : (
                  <tr>
                    <td colSpan={14} className="px-4 py-10 text-center text-slate-400">No rollup data available yet for this view.</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </AdminLayout>
  )
}