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

function StatCard({ label, value }) {
  return (
    <div className="rounded-2xl border border-white/[0.08] bg-white/[0.04] p-5">
      <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{label}</p>
      <p className="mt-3 text-3xl font-bold text-white">{value.toLocaleString()}</p>
    </div>
  )
}

export default function AcademyDashboard({ stats, links }) {
  return (
    <AdminLayout title="Academy Dashboard" subtitle="Overview of Academy content, challenge activity, and future billing placeholders.">
      <Head title="Admin · Academy Dashboard" />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Lessons" value={stats.lessons} />
        <StatCard label="Prompts" value={stats.prompts} />
        <StatCard label="Prompt Packs" value={stats.packs} />
        <StatCard label="Challenges" value={stats.challenges} />
        <StatCard label="Submissions" value={stats.submissions} />
        <StatCard label="Badges" value={stats.badges} />
        <StatCard label="Creator Subscribers" value={stats.creator_subscribers} />
        <StatCard label="Pro Subscribers" value={stats.pro_subscribers} />
      </div>

      <div className="mt-8 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">Modules</p>
        <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
          {Object.entries(links).map(([key, href]) => (
            <Link key={key} href={href} className="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-4 text-sm font-semibold text-white transition hover:border-white/15 hover:bg-white/[0.05]">
              {key.replaceAll('_', ' ')}
            </Link>
          ))}
        </div>
      </div>
    </AdminLayout>
  )
}