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

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">{Number(value || 0).toLocaleString()}</p>
    </div>
  )
}

function formatDelta(delta) {
  if (delta === null || delta === undefined) {
    return 'new'
  }

  if (Number(delta) === 0) {
    return '0%'
  }

  return `${Number(delta) > 0 ? '+' : ''}${Number(delta).toLocaleString()}%`
}

function PromptLibraryTrend({ trend }) {
  const current = trend?.current || {}
  const deltas = trend?.deltas || {}

  const items = [
    { label: 'Views', value: Number(current.views || 0).toLocaleString(), delta: deltas.views },
    { label: 'Unique Visitors', value: Number(current.uniqueVisitors || 0).toLocaleString(), delta: deltas.uniqueVisitors },
    { label: 'Engaged Views', value: Number(current.engagedViews || 0).toLocaleString(), delta: deltas.engagedViews },
    { label: 'Engagement Rate', value: `${Number(current.engagementRate || 0).toLocaleString()}%`, delta: deltas.engagementRate },
  ]

  return (
    <div className="rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Prompt Library Trend</p>
          <p className="mt-2 text-sm text-slate-300">{trend?.range?.current?.from} to {trend?.range?.current?.to} compared with {trend?.range?.previous?.from} to {trend?.range?.previous?.to}</p>
        </div>
        <div className="rounded-full border border-white/[0.08] bg-black/20 px-4 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
          Popularity {Number(current.popularityScore || 0).toLocaleString()}
        </div>
      </div>

      <div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {items.map((item) => (
          <div key={item.label} className="rounded-2xl border border-white/[0.08] bg-black/20 p-5">
            <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{item.label}</p>
            <p className="mt-3 text-2xl font-bold text-white">{item.value}</p>
            <p className="mt-2 text-xs uppercase tracking-[0.18em] text-sky-200">{formatDelta(item.delta)} vs previous</p>
          </div>
        ))}
      </div>
    </div>
  )
}

function PopularPromptPeriodUsage({ usage }) {
  const periods = usage?.periods || []

  return (
    <div className="rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Popular Prompt Period Usage</p>
          <p className="mt-2 text-sm text-slate-300">Which ranking window people actually open on the public popular-prompts page.</p>
        </div>
        <div className="rounded-full border border-white/[0.08] bg-black/20 px-4 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
          {Number(usage?.totalViews || 0).toLocaleString()} views · {Number(usage?.totalVisitors || 0).toLocaleString()} visitors
        </div>
      </div>

      <div className="mt-5 space-y-3">
        {periods.length ? periods.map((period) => (
          <div key={period.period} className="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <p className="text-sm font-semibold text-white">{period.label}</p>
                <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{period.period}</p>
              </div>
              <div className="grid gap-2 text-right sm:grid-cols-3 sm:gap-6">
                <div>
                  <p className="text-sm font-semibold text-sky-100">{Number(period.views || 0).toLocaleString()}</p>
                  <p className="text-xs uppercase tracking-[0.18em] text-slate-500">Views</p>
                </div>
                <div>
                  <p className="text-sm font-semibold text-sky-100">{Number(period.uniqueVisitors || 0).toLocaleString()}</p>
                  <p className="text-xs uppercase tracking-[0.18em] text-slate-500">Visitors</p>
                </div>
                <div>
                  <p className="text-sm font-semibold text-sky-100">{Number(period.share || 0).toLocaleString()}%</p>
                  <p className="text-xs uppercase tracking-[0.18em] text-slate-500">Share</p>
                </div>
              </div>
            </div>
          </div>
        )) : <p className="rounded-2xl border border-dashed border-white/[0.08] bg-black/20 px-4 py-6 text-sm text-slate-400">No popular prompt period events have been tracked in this range yet.</p>}
      </div>
    </div>
  )
}

function ContentList({ title, items = [] }) {
  return (
    <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">{title}</p>
      <div className="mt-4 space-y-3">
        {items.length ? items.map((item) => (
          <div key={`${item.content_type}-${item.content_id || 'none'}`} className="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <p className="text-sm font-semibold text-white">{item.title}</p>
                <p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{item.content_type_label}</p>
              </div>
              <div className="text-right">
                <p className="text-sm font-semibold text-sky-100">{item.popularity_score}</p>
                <p className="text-xs uppercase tracking-[0.18em] text-slate-500">popularity</p>
              </div>
            </div>
          </div>
        )) : <p className="rounded-2xl border border-dashed border-white/[0.08] bg-black/20 px-4 py-6 text-sm text-slate-400">No rollup data yet for this range.</p>}
      </div>
    </div>
  )
}

export default function AcademyAnalyticsOverview({ nav = [], range, stats, promptLibraryTrend = null, popularPromptPeriodUsage = null, topContent = [], topWeek = [] }) {
  return (
    <AdminLayout title="Academy Analytics" subtitle="Daily rollup overview for Academy traffic, engagement, and subscription intent.">
      <Head title="Admin · Academy Analytics" />

      <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="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard label="Views" value={stats.views} />
          <StatCard label="Unique Visitors" value={stats.uniqueVisitors} />
          <StatCard label="Logged-in Views" value={stats.userViews} />
          <StatCard label="Guest Views" value={stats.guestViews} />
          <StatCard label="Subscriber Views" value={stats.subscriberViews} />
          <StatCard label="Prompt Copies" value={stats.promptCopies} />
          <StatCard label="Likes" value={stats.likes} />
          <StatCard label="Saves" value={stats.saves} />
          <StatCard label="Lesson Completions" value={stats.lessonCompletions} />
          <StatCard label="Course Starts" value={stats.courseStarts} />
          <StatCard label="Upgrade Clicks" value={stats.upgradeClicks} />
        </div>

        {promptLibraryTrend ? <PromptLibraryTrend trend={promptLibraryTrend} /> : null}
        {popularPromptPeriodUsage ? <PopularPromptPeriodUsage usage={popularPromptPeriodUsage} /> : null}

        <div className="grid gap-6 xl:grid-cols-2">
          <ContentList title="Top Content In Range" items={topContent} />
          <ContentList title="Top Content This Week" items={topWeek} />
        </div>
      </div>
    </AdminLayout>
  )
}