'use client'

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { CSSProperties } from 'react'
import { BarChart3, ChevronRight, CircleHelp, FileText, LayoutDashboard, Mail, Menu, Settings, ShieldCheck, Users, X } from 'lucide-react'
import { djangoUrl } from '@/lib/site-content'
import { DashboardToast, type DashboardToastMessage } from '@/components/dashboard-toast'
import { DashboardLogoutButton, DashboardProfileMenu } from '@/components/dashboard-profile-menu'

type Range = 1 | 7 | 30
type Metric = { key: string; label: string; value: number }
type ChartItem = { key: string; label: string; value: number }
type Trend = { label: string; value: number; height: number }
type NavigationItem = { key: string; label: string; url: string }
export type DashboardData = {
  user: { name: string; email: string; isStaff: boolean; roles: string[] }
  period: Range
  metrics: Metric[]
  requestMix: ChartItem[]
  contentMix: ChartItem[]
  visitorTrend: Trend[]
  orderCompletion: number
  emailDelivery: number
  navigation: NavigationItem[]
}

const rangeOptions: Array<{ value: Range; label: string }> = [
  { value: 1, label: 'Today' },
  { value: 7, label: '7 days' },
  { value: 30, label: '30 days' },
]

const iconFor = (key: string) => {
  if (key === 'dashboard') return LayoutDashboard
  if (key === 'messages') return Mail
  if (key === 'requests') return FileText
  if (key === 'users') return Users
  if (key === 'settings') return Settings
  if (key === 'faqs') return CircleHelp
  return BarChart3
}

function formatValue(value: number) {
  return new Intl.NumberFormat('en-US', { notation: value > 9999 ? 'compact' : 'standard', maximumFractionDigits: 1 }).format(value)
}

function pieStyle(items: ChartItem[]): CSSProperties {
  const colors = ['#0a7794', '#24a0bc', '#025b79', '#f2c94c', '#6f9f45', '#e76f51']
  const total = items.reduce((sum, item) => sum + item.value, 0)
  if (!total) return { background: 'conic-gradient(#e0f3f7 0 100%)' }
  let offset = 0
  const segments = items.map((item, index) => {
    const next = offset + (item.value / total) * 100
    const segment = `${colors[index % colors.length]} ${offset.toFixed(2)}% ${next.toFixed(2)}%`
    offset = next
    return segment
  })
  return { background: `conic-gradient(${segments.join(', ')})` }
}

export function AdminDashboard({ initialData, initialError = '' }: { initialData: DashboardData | null; initialError?: string }) {
  const [data, setData] = useState<DashboardData | null>(initialData)
  const [range, setRange] = useState<Range>(7)
  const [error, setError] = useState(initialError)
  const [menuOpen, setMenuOpen] = useState(false)
  const [loading, setLoading] = useState(!initialData && !initialError)
  const [reloadKey, setReloadKey] = useState(0)
  const [toast, setToast] = useState<DashboardToastMessage | null>(initialError ? { message: initialError } : null)
  const skipInitialFetch = useRef(Boolean(initialData))
  const dataRef = useRef<DashboardData | null>(initialData)

  useEffect(() => {
    if (!toast) return
    const timeout = window.setTimeout(() => setToast(null), 5000)
    return () => window.clearTimeout(timeout)
  }, [toast])

  const loadDashboard = useCallback((selectedRange: Range, signal: AbortSignal) => {
    setLoading(true)
    setError('')
    const requestController = new AbortController()
    const timeoutId = window.setTimeout(() => requestController.abort(), 10000)
    const abortRequest = () => requestController.abort()
    signal.addEventListener('abort', abortRequest, { once: true })
    fetch(djangoUrl(`/api/dashboard/?range=${selectedRange}`), { credentials: 'include', cache: 'no-store', signal: requestController.signal })
      .then(async (response) => {
        if (!response.ok) throw new Error(response.status === 401 ? 'Sign in to open the dashboard.' : 'You do not have permission to open this dashboard.')
        return response.json() as Promise<DashboardData>
      })
      .then((payload) => { dataRef.current = payload; setData(payload); setLoading(false); setError('') })
      .catch((reason: unknown) => {
        if (signal.aborted) return
        setLoading(false)
        const message = reason instanceof DOMException && reason.name === 'AbortError' ? 'The Django dashboard API did not respond within 10 seconds.' : reason instanceof Error ? reason.message : 'Dashboard could not be loaded.'
        setToast({ message })
        if (!dataRef.current) setError(message)
      })
      .finally(() => {
        window.clearTimeout(timeoutId)
        signal.removeEventListener('abort', abortRequest)
      })
  }, [])

  useEffect(() => {
    if (skipInitialFetch.current) {
      skipInitialFetch.current = false
      return
    }
    const controller = new AbortController()
    loadDashboard(range, controller.signal)
    return () => controller.abort()
  }, [loadDashboard, range, reloadKey])

  const maxRequest = useMemo(() => Math.max(...(data?.requestMix.map((item) => item.value) ?? [1]), 1), [data])

  if (error) return <main className="grid min-h-screen place-items-center bg-[var(--paper)] px-6 text-center text-[var(--navy)]"><DashboardToast toast={toast || { message: error }} onClose={() => setToast(null)} /><div className="max-w-md rounded-3xl border border-[var(--line)] bg-white p-10 shadow-xl"><ShieldCheck className="mx-auto text-[var(--teal)]" size={40} /><h1 className="mt-5 font-display text-4xl">Dashboard access</h1><p className="mt-4 text-sm leading-6 text-[var(--ink-soft)]">{error}</p><div className="mt-7 flex flex-wrap justify-center gap-3"><button type="button" onClick={() => setReloadKey((value) => value + 1)} className="inline-flex rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-bold text-white">Retry</button><a href="/login" className="inline-flex rounded-full border border-[var(--line)] px-6 py-3 text-sm font-bold text-[var(--navy)]">Sign in</a></div></div></main>
  if (!data) return <main className="grid min-h-screen place-items-center bg-[var(--paper)] text-[var(--teal)]"><div className="flex items-center gap-3 text-sm font-bold"><span className="size-3 animate-pulse rounded-full bg-[var(--teal)]" />Loading RG Admin Panel</div></main>

  return <div className="min-h-screen bg-[var(--paper)] text-[var(--navy)]">
    <aside className={`fixed inset-y-0 left-0 z-50 flex w-64 flex-col bg-[var(--navy)] px-4 py-6 text-white shadow-2xl transition-transform lg:translate-x-0 ${menuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
      <div className="flex items-center justify-between px-2"><a href="/dashboard" className="flex items-center gap-3" aria-label="RG Admin Panel"><span className="grid size-10 place-items-center rounded-xl border border-[var(--aqua)]/40 bg-[var(--aqua)]/15 text-sm font-black">RG</span><span className="font-display text-xl font-semibold leading-none">Admin Panel</span></a><button type="button" className="rounded-lg p-2 text-white/70 hover:bg-white/10 lg:hidden" onClick={() => setMenuOpen(false)} aria-label="Close navigation"><X size={20} /></button></div>
      <nav className="mt-10 grid gap-1" aria-label="RG Admin Panel navigation">{data.navigation.map((item) => { const Icon = iconFor(item.key); return <a key={item.key} href={item.url} className={`group flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold transition hover:bg-white/10 ${item.key === 'dashboard' ? 'bg-white/15 text-white' : 'text-white/70'}`}><Icon size={18} className="text-[var(--aqua)]" /><span className="flex-1">{item.label}</span><ChevronRight size={15} className="opacity-0 transition group-hover:opacity-100" /></a> })}</nav>
      <div className="mt-auto rounded-2xl border border-white/10 bg-white/5 p-4"><p className="text-[10px] font-black uppercase tracking-[.18em] text-[var(--aqua)]">Signed in as</p><p className="mt-2 truncate text-sm font-bold">{data.user.name}</p><p className="mt-1 truncate text-xs text-white/55">{data.user.roles.join(' · ') || (data.user.isStaff ? 'Administrator' : 'Dashboard user')}</p></div>
    </aside>
    {menuOpen && <button type="button" className="fixed inset-0 z-40 bg-[var(--navy)]/40 lg:hidden" onClick={() => setMenuOpen(false)} aria-label="Close navigation overlay" />}
    <div className="lg:pl-64">
      <header className="sticky top-0 z-30 flex min-h-20 items-center justify-between border-b border-[var(--line)] bg-[var(--paper)]/90 px-5 py-3 backdrop-blur-xl sm:px-8"><div className="flex items-center gap-3"><button type="button" className="rounded-xl border border-[var(--line)] bg-white p-2 text-[var(--navy)] lg:hidden" onClick={() => setMenuOpen(true)} aria-label="Open navigation"><Menu size={20} /></button><div><p className="eyebrow">RG Admin Panel</p><h1 className="font-display text-xl font-semibold sm:text-2xl">Dashboard overview</h1></div></div><DashboardProfileMenu name={data.user.name} email={data.user.email} roles={data.user.roles} /></header>
      <main className="mx-auto max-w-[1500px] space-y-7 px-5 py-7 sm:px-8 lg:px-10">
        <section className="flex justify-end"><div className="flex rounded-full border border-[var(--line)] bg-white p-1 shadow-sm" aria-label="Dashboard date range">{rangeOptions.map((option) => <button type="button" key={option.value} onClick={() => setRange(option.value)} className={`rounded-full px-4 py-2 text-xs font-bold transition ${range === option.value ? 'bg-[var(--navy)] text-white shadow-md' : 'text-[var(--teal)] hover:bg-[var(--mist)]'}`} aria-pressed={range === option.value}>{option.label}</button>)}</div></section>
        <section className="grid grid-cols-2 gap-4 xl:grid-cols-4" aria-label="Dashboard statistics">{data.metrics.map((metric, index) => <article key={metric.key} className="group rounded-2xl border border-[var(--line)] bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"><div className="flex items-center justify-between"><span className="text-xs font-bold uppercase tracking-wide text-[var(--ink-soft)]">{metric.label}</span><span className={`size-2 rounded-full ${index % 2 ? 'bg-[var(--blue)]' : 'bg-[var(--teal)]'}`} /></div><strong className="mt-5 block font-display text-4xl text-[var(--navy)]">{formatValue(metric.value)}{metric.key === 'email' ? '%' : ''}</strong><span className="mt-2 block text-xs text-[var(--ink-soft)]">{loading ? 'Updating…' : `Last ${data.period} day${data.period === 1 ? '' : 's'}`}</span></article>)}</section>
        <section className="grid gap-6 xl:grid-cols-[1.25fr_.75fr]" aria-label="Dashboard charts"><article className="rounded-3xl border border-[var(--line)] bg-white p-6 shadow-sm"><div className="flex items-end justify-between gap-3"><div><p className="eyebrow">Trend graph</p><h2 className="mt-2 font-display text-2xl">Visitor activity</h2></div><BarChart3 className="text-[var(--teal)]" size={22} /></div><div className="mt-8 flex h-56 items-end gap-2 border-b border-[var(--line)] sm:gap-3">{data.visitorTrend.length ? data.visitorTrend.map((item) => <div key={item.label} className="group flex min-w-0 flex-1 flex-col items-center justify-end gap-2"><span className="text-[10px] font-bold text-[var(--ink-soft)] opacity-0 transition group-hover:opacity-100">{item.value}</span><i className="w-full max-w-8 rounded-t-lg bg-gradient-to-t from-[var(--navy)] to-[var(--blue)] transition hover:from-[var(--teal)]" style={{ height: `${Math.max(item.height, 4)}%` }} /><span className="text-[10px] text-[var(--ink-soft)]">{item.label}</span></div>) : <p className="mb-8 w-full text-center text-sm text-[var(--ink-soft)]">No visitor data for this period.</p>}</div></article><article className="rounded-3xl border border-[var(--line)] bg-white p-6 shadow-sm"><div><p className="eyebrow">Distribution</p><h2 className="mt-2 font-display text-2xl">Content mix</h2></div><div className="mt-7 flex flex-col items-center gap-6 sm:flex-row sm:items-center"><div className="grid size-44 shrink-0 place-items-center rounded-full p-7" style={pieStyle(data.contentMix)} role="img" aria-label="Content mix chart"><div className="grid size-full place-items-center rounded-full bg-white text-center"><strong className="font-display text-3xl">{data.contentMix.reduce((sum, item) => sum + item.value, 0)}</strong><span className="text-[10px] font-bold uppercase tracking-wide text-[var(--ink-soft)]">Items</span></div></div><ul className="grid w-full gap-3">{data.contentMix.length ? data.contentMix.map((item, index) => <li key={item.key} className="flex items-center gap-2 text-xs"><span className={`size-2 rounded-full ${['bg-[var(--teal)]', 'bg-[var(--blue)]', 'bg-[var(--navy)]', 'bg-amber-400'][index % 4]}`} /><span className="flex-1 text-[var(--ink-soft)]">{item.label}</span><strong>{formatValue(item.value)}</strong></li>) : <li className="text-sm text-[var(--ink-soft)]">No content data.</li>}</ul></div></article></section>
        <section className="grid gap-6 xl:grid-cols-2"><article className="rounded-3xl border border-[var(--line)] bg-white p-6 shadow-sm"><div className="flex items-end justify-between"><div><p className="eyebrow">Customer operations</p><h2 className="mt-2 font-display text-2xl">Request volume</h2></div><FileText className="text-[var(--teal)]" size={22} /></div><div className="mt-7 grid gap-5">{data.requestMix.length ? data.requestMix.map((item) => <div key={item.key}><div className="mb-2 flex justify-between text-xs font-bold"><span>{item.label}</span><span className="text-[var(--teal)]">{formatValue(item.value)}</span></div><div className="h-2 overflow-hidden rounded-full bg-[var(--mist)]"><span className="block h-full rounded-full bg-gradient-to-r from-[var(--teal)] to-[var(--blue)]" style={{ width: `${Math.max((item.value / maxRequest) * 100, item.value ? 5 : 0)}%` }} /></div></div>) : <p className="text-sm text-[var(--ink-soft)]">No request data for this period.</p>}</div></article><article className="rounded-3xl border border-[var(--line)] bg-white p-6 shadow-sm"><div className="flex items-end justify-between"><div><p className="eyebrow">Performance</p><h2 className="mt-2 font-display text-2xl">Completion snapshot</h2></div><ShieldCheck className="text-[var(--teal)]" size={22} /></div><div className="mt-8 grid grid-cols-2 gap-4"><div className="rounded-2xl bg-[var(--mist)] p-5"><span className="text-xs font-bold uppercase tracking-wide text-[var(--ink-soft)]">Order completion</span><strong className="mt-3 block font-display text-4xl">{data.orderCompletion}%</strong><div className="mt-4 h-2 rounded-full bg-white"><span className="block h-full rounded-full bg-[var(--teal)]" style={{ width: `${data.orderCompletion}%` }} /></div></div><div className="rounded-2xl bg-[var(--navy)] p-5 text-white"><span className="text-xs font-bold uppercase tracking-wide text-white/60">Email delivery</span><strong className="mt-3 block font-display text-4xl">{data.emailDelivery}%</strong><div className="mt-4 h-2 rounded-full bg-white/20"><span className="block h-full rounded-full bg-[var(--aqua)]" style={{ width: `${data.emailDelivery}%` }} /></div></div></div></article></section>
        <footer className="flex flex-col justify-between gap-3 border-t border-[var(--line)] pt-5 text-xs text-[var(--ink-soft)] sm:flex-row"><span>RG Admin Panel · Permission-aware dashboard</span><DashboardLogoutButton /></footer>
      </main>
    </div>
  </div>
}