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

function StatCard({ icon, label, value, color = 'sky' }) {
  const colors = {
    sky:    'from-sky-500/20 to-sky-500/5 border-sky-500/20 text-sky-400',
    rose:   'from-rose-500/20 to-rose-500/5 border-rose-500/20 text-rose-400',
    amber:  'from-amber-500/20 to-amber-500/5 border-amber-500/20 text-amber-400',
    violet: 'from-violet-500/20 to-violet-500/5 border-violet-500/20 text-violet-400',
  }

  return (
    <div className={`rounded-2xl border bg-gradient-to-br p-6 ${colors[color]}`}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">{label}</p>
          <p className="mt-2 text-3xl font-bold text-white">{value.toLocaleString()}</p>
        </div>
        <div className={`flex h-12 w-12 items-center justify-center rounded-xl bg-white/5`}>
          <i className={`${icon} text-xl ${colors[color].split(' ').at(-1)}`} />
        </div>
      </div>
    </div>
  )
}

export default function Dashboard({ stats }) {
  return (
    <AdminLayout title="Dashboard" subtitle="Overview of your Skinbase platform">
      <Head title="Admin Dashboard" />

      {/* Stats grid */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard icon="fa-solid fa-users"         label="Total Users"     value={stats.total_users}     color="sky" />
        <StatCard icon="fa-solid fa-user-plus"     label="New Today"       value={stats.new_users_today} color="violet" />
        <StatCard icon="fa-solid fa-shield-halved" label="Staff Members"   value={stats.staff_count}     color="rose" />
        <StatCard icon="fa-solid fa-user-shield"   label="Moderators"      value={stats.moderator_count} color="amber" />
      </div>

      {/* Quick links */}
      <div className="mt-10">
        <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Quick Actions</h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {[
            { label: 'Daily Activity',     href: '/moderation/activity',                    icon: 'fa-solid fa-calendar-day',       desc: 'Review everything created or moderated on a selected day' },
            { label: 'Manage Users',        href: '/moderation/users',                       icon: 'fa-solid fa-users',              desc: 'Search, promote or demote users' },
            { label: 'Staff Roles',         href: '/moderation/users?role=admin',            icon: 'fa-solid fa-shield-halved',      desc: 'View all admins, managers and editorial staff' },
            { label: 'Username Queue',      href: '/moderation/usernames/moderation',        icon: 'fa-solid fa-id-badge',           desc: 'Review pending username requests' },
            { label: 'Upload Queue',        href: '/moderation/uploads',                     icon: 'fa-solid fa-cloud-arrow-up',     desc: 'Moderate pending artwork submissions' },
            { label: 'Stories',             href: '/moderation/stories',                     icon: 'fa-solid fa-feather-pointed',    desc: 'Browse all creator stories' },
            { label: 'Artworks',            href: '/moderation/artworks',                    icon: 'fa-solid fa-images',             desc: 'Browse all uploaded artworks' },
            { label: 'Enhance Jobs',        href: '/moderation/enhance',                     icon: 'fa-solid fa-up-right-and-down-left-from-center', desc: 'Inspect queued, failed, and completed image enhance jobs' },
            { label: 'Featured Artworks',   href: '/moderation/artworks/featured',           icon: 'fa-solid fa-star',               desc: 'Curate the homepage featured artwork lineup' },
            { label: 'AI Biography',        href: '/moderation/ai-biography',                icon: 'fa-solid fa-wand-magic-sparkles', desc: 'Review generated creator biographies and moderation flags' },
          ].map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="group flex items-start gap-4 rounded-2xl border border-white/[0.07] bg-white/[0.03] p-5 transition hover:border-white/15 hover:bg-white/[0.06]"
            >
              <div className="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-rose-500/10">
                <i className={`${item.icon} text-rose-400`} />
              </div>
              <div>
                <p className="font-semibold text-white group-hover:text-rose-300 transition">{item.label}</p>
                <p className="mt-0.5 text-xs text-slate-500">{item.desc}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </AdminLayout>
  )
}
