import { useMemo, useState, type MouseEvent } from 'react'
import { Badge } from '../ui/badge'
import { Button } from '../ui/button'
import { Dialog, DialogFooter } from '../ui/dialog'
import { Input } from '../ui/input'
import { Select } from '../ui/select'

export interface SessionListItem {
  session_id: string
  course_id: string
  course_title: string
  session_code: string
  is_active: boolean
  session_start_time: string | null
  session_end_time?: string | null
}

interface SessionGroup {
  course_id: string
  course_title: string
  sessions: SessionListItem[]
}

export interface CourseListItem {
  id: string
  title: string
  status: 'draft' | 'active' | 'completed'
}

interface SessionListProps {
  sessions: SessionListItem[]
  courses?: CourseListItem[]
  selectedSessionId: string | null
  loading?: boolean
  starting?: boolean
  actionLoading?: boolean
  onSelect: (sessionId: string) => void
  onStart: (courseId: string) => void
  onReview: (sessionId: string) => void
  onArchiveCourse: (courseId: string) => void
  onDeleteCourse: (courseId: string) => void
  onArchiveSession: (courseId: string, sessionId: string) => void
  onDeleteSession: (courseId: string, sessionId: string) => void
}

type Action = { type: 'archive-course' | 'delete-course' | 'archive-session' | 'delete-session'; title: string; courseId: string; sessionId?: string } | null
const PAGE_SIZE = 10

function formatDate(value: string | null) {
  if (!value) return 'Belum dimulai'
  return new Date(value).toLocaleString('id-ID', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
}

function MoreIcon() {
  return <svg viewBox="0 0 16 16" className="h-4 w-4" fill="currentColor" aria-hidden="true"><circle cx="3" cy="8" r="1" /><circle cx="8" cy="8" r="1" /><circle cx="13" cy="8" r="1" /></svg>
}

export function SessionList({ sessions, courses = [], selectedSessionId, loading = false, starting = false, actionLoading = false, onSelect, onStart, onReview, onArchiveCourse, onDeleteCourse, onArchiveSession, onDeleteSession }: SessionListProps) {
  const [query, setQuery] = useState('')
  const [filter, setFilter] = useState<'all' | 'live' | 'completed'>('all')
  const [page, setPage] = useState(0)
  const [menuKey, setMenuKey] = useState<string | null>(null)
  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 })
  const [action, setAction] = useState<Action>(null)

  const toggleMenu = (key: string, event: MouseEvent<HTMLButtonElement>) => {
    if (menuKey === key) {
      setMenuKey(null)
      return
    }
    const rect = event.currentTarget.getBoundingClientRect()
    const menuWidth = 176
    setMenuPosition({ top: rect.bottom + 4, left: Math.max(8, Math.min(window.innerWidth - menuWidth - 8, rect.right - menuWidth)) })
    setMenuKey(key)
  }

  const groups = useMemo<SessionGroup[]>(() => {
    const normalized = query.trim().toLowerCase()
    const grouped = new Map<string, SessionGroup>()
    for (const course of courses) {
      if (!normalized || course.title.toLowerCase().includes(normalized)) {
        grouped.set(course.id, { course_id: course.id, course_title: course.title, sessions: [] })
      }
    }
    for (const session of sessions) {
      const matchesQuery = !normalized || session.course_title.toLowerCase().includes(normalized) || session.session_code.toLowerCase().includes(normalized)
      const matchesFilter = filter === 'all' || (filter === 'live' ? session.is_active : !session.is_active)
      if (!matchesQuery || !matchesFilter) continue
      const existing = grouped.get(session.course_id)
      if (existing) existing.sessions.push(session)
      else grouped.set(session.course_id, { course_id: session.course_id, course_title: session.course_title, sessions: [session] })
    }
    return Array.from(grouped.values())
  }, [filter, query, sessions])

  const pageCount = Math.max(1, Math.ceil(groups.length / PAGE_SIZE))
  const currentPage = Math.min(page, pageCount - 1)
  const visibleGroups = groups.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE)

  const confirmAction = () => {
    if (!action) return
    if (action.type === 'archive-course') onArchiveCourse(action.courseId)
    if (action.type === 'delete-course') onDeleteCourse(action.courseId)
    if (action.type === 'archive-session' && action.sessionId) onArchiveSession(action.courseId, action.sessionId)
    if (action.type === 'delete-session' && action.sessionId) onDeleteSession(action.courseId, action.sessionId)
    setAction(null)
  }

  return (
    <section className="flex min-h-[560px] flex-col rounded-2xl border border-line bg-paper shadow-sm">
      <div className="flex flex-col gap-4 border-b border-line p-4 sm:flex-row sm:items-end sm:justify-between sm:p-5">
        <div><p className="text-xs font-bold uppercase tracking-widest text-clay">Course & session</p><h2 className="mt-1 text-xl font-bold tracking-tight text-ink">Ruang kelas Anda</h2></div>
        <div className="flex flex-col gap-2 sm:flex-row"><Input value={query} onChange={(event) => { setQuery(event.target.value); setPage(0) }} placeholder="Cari course atau kode…" className="sm:w-56" aria-label="Cari course atau session" /><Select value={filter} onChange={(event) => { setFilter(event.target.value as typeof filter); setPage(0) }} className="sm:w-36"><option value="all">Semua status</option><option value="live">Live</option><option value="completed">Selesai</option></Select></div>
      </div>

      <div className="flex-1">{loading ? <p className="p-8 text-center text-sm text-body">Memuat session…</p> : visibleGroups.length === 0 ? <p className="p-8 text-center text-sm text-body">Tidak ada course atau session yang cocok.</p> : <div className="overflow-x-auto"><table className="w-full min-w-[820px] text-left text-sm"><thead className="bg-cream text-xs uppercase tracking-wide text-muted"><tr><th className="px-5 py-3 font-medium">Course / session</th><th className="px-5 py-3 font-medium">Waktu</th><th className="px-5 py-3 font-medium">Kode</th><th className="px-5 py-3 font-medium">Status</th><th className="px-5 py-3 text-right font-medium">Aksi</th></tr></thead><tbody className="divide-y divide-line">{visibleGroups.map((group) => { const courseKey = `course:${group.course_id}`; const courseMenu = menuKey === courseKey; const hasActive = group.sessions.some((session) => session.is_active); return <>
        <tr key={`course-${group.course_id}`} className="bg-cream/70"><td colSpan={4} className="px-5 py-3"><div className="flex items-center gap-2"><span className="h-2 w-2 rounded-full bg-sage-soft" /><strong className="text-sm text-ink">{group.course_title}</strong><span className="text-xs text-muted">{group.sessions.length} session</span></div></td><td className="px-5 py-3"><div className="flex items-center justify-end gap-2"><Button size="sm" variant="outline" disabled={hasActive} loading={starting} onClick={() => onStart(group.course_id)}>Buat session</Button><Button size="icon" variant="ghost" onClick={(event) => toggleMenu(courseKey, event)} aria-label={`Aksi course ${group.course_title}`} aria-expanded={courseMenu} title="Aksi course"><MoreIcon /></Button>{courseMenu && <div style={{ top: menuPosition.top, left: menuPosition.left }} className="fixed z-50 w-44 rounded-lg border border-line bg-paper p-1 text-left shadow-lg"><button disabled={hasActive} className="block w-full rounded-md px-3 py-2 text-sm text-body hover:bg-cream disabled:cursor-not-allowed disabled:text-muted" onClick={() => { setAction({ type: 'archive-course', title: group.course_title, courseId: group.course_id }); setMenuKey(null) }}>Arsipkan course</button><button className="block w-full rounded-md px-3 py-2 text-sm text-red hover:bg-red-soft" onClick={() => { setAction({ type: 'delete-course', title: group.course_title, courseId: group.course_id }); setMenuKey(null) }}>Hapus course</button>{hasActive && <span className="block px-3 pb-1 text-[11px] text-muted">Akhiri session aktif dulu.</span>}</div>}</div></td></tr>
        {group.sessions.map((session) => { const sessionKey = `session:${session.session_id}`; const sessionMenu = menuKey === sessionKey; const selected = session.session_id === selectedSessionId; return <tr key={session.session_id} className={`transition-colors ${selected ? 'bg-sage-soft/70' : 'hover:bg-cream'}`}><td className="py-4 pl-9 pr-5"><button type="button" className="text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-clay" onClick={() => onSelect(session.session_id)}><span className="flex items-center gap-2 font-medium text-ink"><span className={`h-2 w-2 rounded-full ${session.is_active ? 'bg-green' : 'bg-muted'}`} />{session.is_active ? 'Session live' : 'Session selesai'}</span></button></td><td className="whitespace-nowrap px-5 py-4 text-body">{formatDate(session.session_start_time)}</td><td className="px-5 py-4 font-mono text-xs text-body">{session.session_code}</td><td className="px-5 py-4">{session.is_active ? <Badge variant="success">Live</Badge> : <Badge variant="neutral">Selesai</Badge>}</td><td className="px-5 py-4"><div className="flex items-center justify-end gap-2">{session.is_active ? <Button size="sm" onClick={() => onSelect(session.session_id)}>Buka monitoring</Button> : <Button size="sm" variant="outline" onClick={() => onStart(session.course_id)} loading={starting}>Mulai lagi</Button>}<Button size="icon" variant="ghost" onClick={(event) => toggleMenu(sessionKey, event)} aria-label="Aksi session" aria-expanded={sessionMenu} title="Aksi session"><MoreIcon /></Button>{sessionMenu && <div style={{ top: menuPosition.top, left: menuPosition.left }} className="fixed z-50 w-44 rounded-lg border border-line bg-paper p-1 text-left shadow-lg">{!session.is_active && <button className="block w-full rounded-md px-3 py-2 text-sm text-body hover:bg-cream" onClick={() => { onReview(session.session_id); setMenuKey(null) }}>Lihat review</button>}<button disabled={session.is_active} className="block w-full rounded-md px-3 py-2 text-sm text-body hover:bg-cream disabled:cursor-not-allowed disabled:text-muted" onClick={() => { setAction({ type: 'archive-session', title: group.course_title, courseId: group.course_id, sessionId: session.session_id }); setMenuKey(null) }}>Arsipkan session</button><button disabled={session.is_active} className="block w-full rounded-md px-3 py-2 text-sm text-red hover:bg-red-soft disabled:cursor-not-allowed disabled:text-muted" onClick={() => { setAction({ type: 'delete-session', title: group.course_title, courseId: group.course_id, sessionId: session.session_id }); setMenuKey(null) }}>Hapus session</button></div>}</div></td></tr> })}
      </> })}</tbody></table></div>}</div>

      <div className="mt-auto flex flex-col gap-3 border-t border-line px-5 py-4 text-sm text-body sm:flex-row sm:items-center sm:justify-between"><span>{groups.length === 0 ? '0' : currentPage * PAGE_SIZE + 1}-{Math.min((currentPage + 1) * PAGE_SIZE, groups.length)} dari {groups.length} course</span><div className="flex gap-2"><Button size="sm" variant="outline" disabled={currentPage === 0} onClick={() => setPage((value) => Math.max(0, value - 1))}>Sebelumnya</Button><Button size="sm" variant="outline" disabled={currentPage + 1 >= pageCount} onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}>Berikutnya</Button></div></div>
      <Dialog open={action !== null} onOpenChange={(open) => !open && setAction(null)} title={action?.type.includes('archive') ? 'Arsipkan?' : 'Hapus?'} description={action ? `${action.title} akan ${action.type.includes('archive') ? 'dipindahkan ke arsip. Histori tetap tersimpan.' : 'dihapus dari daftar aktif.'}` : undefined}><DialogFooter><Button variant="outline" onClick={() => setAction(null)}>Batal</Button><Button variant="destructive" loading={actionLoading} onClick={confirmAction}>{action?.type.includes('archive') ? 'Arsipkan' : 'Hapus'}</Button></DialogFooter></Dialog>
    </section>
  )
}