import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { admin } from '../api/endpoints'
import { compact } from '../lib/format'
import { Stat, Card } from './ui'

export default function AdminDashboard() {
  const [data, setData] = useState(null)

  useEffect(() => {
    admin.analytics().then(setData).catch(() => {})
  }, [])

  if (!data) return <p className="text-gray-400">Loading analytics…</p>

  const t = data.totals
  const a = data.ads

  return (
    <div className="space-y-6">
      <h1 className="text-xl font-extrabold">Analytics Dashboard</h1>

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
        <Stat label="Real Views" value={compact(t.real_views)} accent="text-[var(--brand)]" />
        <Stat label="Real Likes" value={compact(t.real_likes)} />
        <Stat label="Comments" value={compact(t.real_comments)} />
        <Stat label="Shares" value={compact(t.real_shares)} />
        <Stat label="Videos" value={t.videos} />
        <Stat label="Published" value={t.published} accent="text-emerald-500" />
        <Stat label="Locked" value={t.locked} accent="text-amber-500" />
        <Stat label="Drafts" value={t.draft} />
        <Stat label="Users" value={t.users} />
        <Stat label="Banned" value={t.banned_users} accent="text-rose-500" />
        <Stat label="Subscribers" value={t.subscribers} />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card title="Ad Unlock Performance">
          <div className="grid grid-cols-2 gap-3">
            <Stat label="Total Ad Visits" value={a.total_visits} />
            <Stat label="Valid Visits" value={a.valid_visits} accent="text-emerald-500" />
            <Stat label="Invalid / Too Early" value={a.invalid_visits} accent="text-rose-500" />
            <Stat label="Unlocks Granted" value={a.unlocks_granted} accent="text-[var(--brand)]" />
          </div>
          <div className="mt-4">
            <div className="mb-1 flex justify-between text-sm font-medium">
              <span>Unlock completion rate</span>
              <span className="text-[var(--brand)]">{a.completion_rate}%</span>
            </div>
            <div className="h-3 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
              <div
                className="h-full rounded-full bg-[var(--brand)]"
                style={{ width: `${a.completion_rate}%` }}
              />
            </div>
          </div>
        </Card>

        <Card title="Top Videos (by real views)">
          <ul className="space-y-2">
            {data.top_videos.map((v, i) => (
              <li key={v.id} className="flex items-center gap-3 text-sm">
                <span className="w-5 text-center font-bold text-gray-400">{i + 1}</span>
                <Link to={`/watch/${v.slug}`} className="flex-1 truncate font-medium hover:text-[var(--brand)]">
                  {v.title}
                </Link>
                <span className="text-gray-500">{compact(v.real_views)} real</span>
                <span className="text-xs text-gray-400">({compact(v.display_views)} shown)</span>
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </div>
  )
}
