import { useEffect, useState } from 'react'
import { apiFetch, getCurrentUser, logout } from '../../lib/auth'
import { Badge } from '../ui/badge'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Select } from '../ui/select'
import { useToast } from '../ui/toast'

type Period = 'day' | 'week' | 'month'

interface AdminStats {
  total_teachers: number
  total_sessions: number
  total_participants: number
  avg_per_session: number
  status_distribution: { red: number; yellow: number; green: number }
}

interface AdminCourse {
  id: string
  title: string
  status: 'draft' | 'active' | 'completed'
  instructor_email: string | null
  created_at: string
  session_count: number
  avg_participants: number
}

interface CourseResponse {
  data: AdminCourse[]
  total: number
  limit: number
  offset: number
}

function number(value: number) {
  return new Intl.NumberFormat().format(value)
}

function periodLabel(period: Period) {
  return period === 'day' ? 'hari ini' : period === 'week' ? 'minggu ini' : 'bulan ini'
}

function statusVariant(status: AdminCourse['status']) {
  if (status === 'active') return 'success' as const
  if (status === 'completed') return 'default' as const
  return 'neutral' as const
}

function StatCard({ label, value, detail }: { label: string; value: string; detail: string }) {
  return (
    <Card>
      <CardContent className="p-5">
        <p className="text-sm text-body">{label}</p>
        <p className="mt-2 text-3xl font-bold tracking-tight text-ink">{value}</p>
        <p className="mt-1 text-xs text-muted">{detail}</p>
      </CardContent>
    </Card>
  )
}

function DistributionBar({ distribution }: { distribution: AdminStats['status_distribution'] }) {
  const total = distribution.red + distribution.yellow + distribution.green
  const value = (count: number) => (total > 0 ? Math.round((count / total) * 100) : 0)
  const items = [
    { label: 'Red', count: distribution.red, percent: value(distribution.red), color: 'bg-red', text: 'text-red' },
    { label: 'Yellow', count: distribution.yellow, percent: value(distribution.yellow), color: 'bg-yellow', text: 'text-yellow' },
    { label: 'Green', count: distribution.green, percent: value(distribution.green), color: 'bg-green', text: 'text-green' },
  ]

  return (
    <div className="space-y-4">
      <div className="flex h-4 overflow-hidden rounded-full bg-line">
        {items.map((item) => (
          <div key={item.label} className={item.color} style={{ width: `${item.percent}%` }} />
        ))}
      </div>
      <div className="grid grid-cols-3 gap-3">
        {items.map((item) => (
          <div key={item.label}>
            <div className="flex items-center gap-2">
              <span className={`h-2.5 w-2.5 rounded-full ${item.color}`} />
              <span className="text-sm text-body">{item.label}</span>
            </div>
            <p className={`mt-1 text-xl font-semibold ${item.text}`}>{item.percent}%</p>
            <p className="text-xs text-muted">{number(item.count)} responses</p>
          </div>
        ))}
      </div>
    </div>
  )
}

export function AdminDashboard() {
  const { error: showError } = useToast()
  const user = getCurrentUser()
  const [period, setPeriod] = useState<Period>('month')
  const [stats, setStats] = useState<AdminStats | null>(null)
  const [courses, setCourses] = useState<CourseResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [coursesLoading, setCoursesLoading] = useState(true)
  const [page, setPage] = useState(0)

  const loadStats = async (selectedPeriod: Period) => {
    try {
      const data = await apiFetch<AdminStats>(`/api/admin/stats?period=${selectedPeriod}`)
      setStats(data)
    } catch (cause) {
      showError('Statistik gagal dimuat', cause instanceof Error ? cause.message : 'Request failed')
    } finally {
      setLoading(false)
    }
  }

  const loadCourses = async (offset: number) => {
    setCoursesLoading(true)
    try {
      const data = await apiFetch<CourseResponse>(`/api/admin/courses?limit=10&offset=${offset}`)
      setCourses(data)
    } catch (cause) {
      showError('Course gagal dimuat', cause instanceof Error ? cause.message : 'Request failed')
    } finally {
      setCoursesLoading(false)
    }
  }

  useEffect(() => {
    loadStats(period)
  }, [period])

  useEffect(() => {
    loadCourses(page * 10)
  }, [page])

  const pageCount = courses ? Math.max(1, Math.ceil(courses.total / courses.limit)) : 1
  const currentPage = courses ? Math.floor(courses.offset / courses.limit) + 1 : page + 1

  return (
    <div className="min-h-screen bg-cream">
      <header className="border-b border-line bg-paper">
        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-ink text-sm font-bold text-white">S</div>
            <div>
              <p className="font-semibold leading-none text-ink">Signal-Learn</p>
              <p className="mt-1 text-xs text-muted">Ikhtisar operasional</p>
            </div>
            <Badge>Admin</Badge>
          </div>
          <div className="flex items-center gap-3">
            <span className="hidden text-sm text-body sm:inline">{user?.email}</span>
            <Button variant="ghost" size="sm" onClick={logout}>Logout</Button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl space-y-8 px-4 py-8 sm:px-6">
        <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
          <div>
            <p className="text-sm font-medium text-clay">Kondisi platform</p>
            <h1 className="mt-1 text-3xl font-bold tracking-tight text-ink">Dasbor admin</h1>
            <p className="mt-2 text-sm text-body">Gambaran umum aktivitas kelas dan partisipasi.</p>
          </div>
          <Select className="w-full sm:w-36" value={period} onChange={(event) => setPeriod(event.target.value as Period)}>
              <option value="day">Hari ini</option>
              <option value="week">Minggu ini</option>
              <option value="month">Bulan ini</option>
          </Select>
        </div>

        {loading || !stats ? (
          <div className="rounded-xl border border-line bg-paper p-8 text-center text-sm text-body">Memuat statistik…</div>
        ) : (
          <>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <StatCard label="Guru" value={number(stats.total_teachers)} detail="Total guru terdaftar" />
              <StatCard label="Sesi" value={number(stats.total_sessions)} detail={`Sesi ${periodLabel(period)}`} />
              <StatCard label="Peserta" value={number(stats.total_participants)} detail={`Bergabung ${periodLabel(period)}`} />
              <StatCard label="Rata-rata jangkauan" value={stats.avg_per_session.toFixed(1)} detail="Peserta per sesi" />
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Distribusi status</CardTitle>
                <p className="text-sm text-body">Respons status akhir dari sesi yang selesai.</p>
              </CardHeader>
              <CardContent><DistributionBar distribution={stats.status_distribution} /></CardContent>
            </Card>
          </>
        )}

        <Card>
          <CardHeader className="flex-row items-end justify-between space-y-0">
            <div>
              <CardTitle>Courses</CardTitle>
              <p className="mt-1 text-sm text-body">Seluruh course di platform.</p>
            </div>
            {courses && <span className="text-sm text-muted">{number(courses.total)} total</span>}
          </CardHeader>
          <CardContent className="p-0">
            {coursesLoading && !courses ? (
              <div className="p-8 text-center text-sm text-body">Memuat course…</div>
            ) : courses?.data.length ? (
              <div className="overflow-x-auto">
                <table className="w-full min-w-[680px] text-left text-sm">
                  <thead className="border-y border-line bg-cream text-xs uppercase tracking-wide text-muted">
                    <tr>
                      <th className="px-5 py-3 font-medium">Course</th>
                      <th className="px-5 py-3 font-medium">Pengajar</th>
                      <th className="px-5 py-3 font-medium">Status</th>
                      <th className="px-5 py-3 text-right font-medium">Sesi</th>
                      <th className="px-5 py-3 text-right font-medium">Rata-rata</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {courses.data.map((course) => (
                      <tr key={course.id} className="transition hover:bg-cream">
                        <td className="px-5 py-4">
                          <p className="font-medium text-ink">{course.title}</p>
                           <p className="mt-1 text-xs text-muted">Dibuat {new Date(course.created_at).toLocaleDateString()}</p>
                        </td>
                        <td className="px-5 py-4 text-body">{course.instructor_email ?? '—'}</td>
                        <td className="px-5 py-4"><Badge variant={statusVariant(course.status)}>{course.status}</Badge></td>
                        <td className="px-5 py-4 text-right tabular-nums text-body">{number(course.session_count)}</td>
                        <td className="px-5 py-4 text-right tabular-nums text-body">{course.avg_participants.toFixed(1)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="p-8 text-center text-sm text-body">Belum ada course.</div>
            )}
            {courses && pageCount > 1 && (
              <div className="flex items-center justify-between border-t border-line px-5 py-4">
                 <p className="text-sm text-body">Halaman {currentPage} dari {pageCount}</p>
                <div className="flex gap-2">
                   <Button variant="outline" size="sm" disabled={page === 0 || coursesLoading} onClick={() => setPage((value) => value - 1)}>Sebelumnya</Button>
                   <Button variant="outline" size="sm" disabled={page + 1 >= pageCount || coursesLoading} onClick={() => setPage((value) => value + 1)}>Berikutnya</Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}