import React, { useEffect, useState } from 'react'
import { usePage } from '@inertiajs/react'
import LeaderboardTabs from '../../components/leaderboard/LeaderboardTabs'
import LeaderboardList from '../../components/leaderboard/LeaderboardList'
import SeoHead from '../../components/seo/SeoHead'

const TYPE_TABS = [
  { value: 'creator', label: 'Creators' },
  { value: 'artwork', label: 'Artworks' },
  { value: 'story', label: 'Stories' },
]

const PERIOD_TABS = [
  { value: 'daily', label: 'Daily' },
  { value: 'weekly', label: 'Weekly' },
  { value: 'monthly', label: 'Monthly' },
  { value: 'all_time', label: 'All-time' },
]

const API_BY_TYPE = {
  creator: '/api/leaderboard/creators',
  artwork: '/api/leaderboard/artworks',
  story: '/api/leaderboard/stories',
}

export default function LeaderboardPage() {
  const { props } = usePage()
  const { initialType = 'creator', initialPeriod = 'weekly', initialData = { items: [] }, seo = {} } = props

  const [type, setType] = useState(initialType)
  const [period, setPeriod] = useState(initialPeriod)
  const [data, setData] = useState(initialData)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (type === initialType && period === initialPeriod) {
      return
    }

    let cancelled = false

    async function load() {
      setLoading(true)
      try {
        const response = await window.axios.get(`${API_BY_TYPE[type]}?period=${period}`)
        if (!cancelled && response.data) {
          setData(response.data)
        }
      } finally {
        if (!cancelled) {
          setLoading(false)
        }
      }
    }

    load()

    try {
      const url = new URL(window.location.href)
      url.searchParams.set('type', type === 'creator' ? 'creators' : `${type}s`)
      url.searchParams.set('period', period === 'all_time' ? 'all' : period)
      window.history.replaceState({}, '', url.toString())
    } catch (_) {}

    return () => {
      cancelled = true
    }
  }, [type, period, initialType, initialPeriod])

  const items = Array.isArray(data?.items) ? data.items : []

  return (
    <>
      <SeoHead seo={seo} title={seo?.title || 'Leaderboard — Skinbase'} description={seo?.description || 'Top creators, artworks, and stories on Skinbase.'} />

      <div className="min-h-screen bg-[radial-gradient(circle_at_top,rgba(14,165,233,0.14),transparent_34%),linear-gradient(180deg,#020617_0%,#0f172a_48%,#020617_100%)] pb-16 text-slate-100">
        <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
          <header className="rounded-[2rem] border border-white/10 bg-slate-950/70 px-6 py-8 shadow-[0_35px_120px_rgba(2,6,23,0.75)] backdrop-blur">
            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">Skinbase Competition Board</p>
            <h1 className="mt-4 max-w-3xl text-4xl font-black tracking-tight text-white sm:text-5xl">
              Top creators, standout artworks, and stories with momentum.
            </h1>
            <p className="mt-4 max-w-2xl text-sm leading-6 text-slate-300 sm:text-base">
              Switch between creators, artworks, and stories, then filter by daily, weekly, monthly, or all-time performance.
            </p>
          </header>

          <div className="mt-6 space-y-4">
            <LeaderboardTabs items={TYPE_TABS} active={type} onChange={setType} sticky label="Leaderboard type" />
            <LeaderboardTabs items={PERIOD_TABS} active={period} onChange={setPeriod} label="Leaderboard period" />
          </div>

          {loading ? (
            <div className="mt-6 rounded-3xl border border-white/10 bg-white/[0.03] px-6 py-5 text-sm text-slate-400">
              Refreshing leaderboard...
            </div>
          ) : null}

          <div className="mt-8">
            <LeaderboardList items={items} type={type} />
          </div>
        </div>
      </div>
    </>
  )
}