import { useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { api } from '@/lib/api'
import { hasWebsiteScope, scopedQueryKey } from '@/lib/queryKeys'
import { useAppStore } from '@/store/useAppStore'
import { SafeHtml } from '@/components/SafeHtml'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { CheckCircle2, Send } from 'lucide-react'

const ACTIVE_SESSION_KEY = 'irt-student-active-session'

type SessionResponse = {
  session_id: string
  wp_user_id: string
  website_id: number
  tryout_id: string
  start_time: string
  end_time: string | null
  expires_at: string | null
  is_completed: boolean
  total_benar: number
  NM: number | null
  NN: number | null
}

type NextItemResponse = {
  status: 'item' | 'completed'
  item_id?: number
  stem?: string
  options?: Record<string, string>
  slot?: number
  level?: string
  display_level?: string
  generated_by?: string
  source_snapshot_question_id?: number | null
  reason?: string
  items_answered?: number
}

function formatRemaining(seconds: number | null) {
  if (seconds === null) return '-'
  const clamped = Math.max(0, seconds)
  const minutes = Math.floor(clamped / 60)
  const rest = clamped % 60
  return `${minutes}:${String(rest).padStart(2, '0')}`
}

function getErrorMessage(error: unknown) {
  return error instanceof Error ? error.message : 'Request failed.'
}

export default function StudentSession() {
  const { sessionId } = useParams<{ sessionId: string }>()
  const { websiteId } = useAppStore()
  const queryClient = useQueryClient()
  const navigate = useNavigate()
  const [selectedResponse, setSelectedResponse] = useState('')
  const [now, setNow] = useState(0)
  const itemStartedAtRef = useRef(0)

  const sessionKey = scopedQueryKey(websiteId, 'student-session', sessionId)
  const nextItemKey = scopedQueryKey(websiteId, 'student-next-item', sessionId)

  const sessionQuery = useQuery({
    queryKey: sessionKey,
    queryFn: async () => {
      const res = await api.get<SessionResponse>(`/session/${sessionId}`)
      return res.data
    },
    enabled: hasWebsiteScope(websiteId) && Boolean(sessionId),
  })

  const nextItemQuery = useQuery({
    queryKey: nextItemKey,
    queryFn: async () => {
      const res = await api.get<NextItemResponse>(`/session/${sessionId}/next_item`)
      return res.data
    },
    enabled: hasWebsiteScope(websiteId) && Boolean(sessionId) && !sessionQuery.data?.is_completed,
  })

  const submitMutation = useMutation({
    mutationFn: async () => {
      if (!nextItemQuery.data?.item_id) throw new Error('No active item.')
      const startedAt = itemStartedAtRef.current || Date.now()
      const timeSpent = Math.max(0, Math.round((Date.now() - startedAt) / 1000))
      await api.post(`/session/${sessionId}/submit_answer`, {
        item_id: nextItemQuery.data.item_id,
        response: selectedResponse,
        time_spent: timeSpent,
      })
    },
    onSuccess: () => {
      setSelectedResponse('')
      itemStartedAtRef.current = Date.now()
      queryClient.invalidateQueries({ queryKey: nextItemKey })
      queryClient.invalidateQueries({ queryKey: sessionKey })
    },
  })

  const completeMutation = useMutation({
    mutationFn: async () => {
      const res = await api.post(`/session/${sessionId}/complete`, {
        end_time: new Date().toISOString(),
        user_answers: [],
      })
      return res.data
    },
    onSuccess: () => {
      localStorage.removeItem(ACTIVE_SESSION_KEY)
      queryClient.invalidateQueries({ queryKey: sessionKey })
      navigate(`/student/result/${sessionId}`)
    },
  })

  const expiresAt = sessionQuery.data?.expires_at
  useEffect(() => {
    if (!expiresAt) {
      return
    }
    const timer = window.setInterval(() => setNow(Date.now()), 1000)
    return () => window.clearInterval(timer)
  }, [expiresAt])

  useEffect(() => {
    if (sessionId && !sessionQuery.data?.is_completed) {
      localStorage.setItem(ACTIVE_SESSION_KEY, sessionId)
    }
  }, [sessionId, sessionQuery.data?.is_completed])

  useEffect(() => {
    if (nextItemQuery.data?.item_id) {
      itemStartedAtRef.current = Date.now()
    }
  }, [nextItemQuery.data?.item_id])

  const options = useMemo(() => Object.entries(nextItemQuery.data?.options || {}), [nextItemQuery.data?.options])
  const remainingSeconds = useMemo(() => {
    if (!expiresAt || !now) return null
    return Math.ceil((new Date(expiresAt).getTime() - now) / 1000)
  }, [expiresAt, now])

  if (!hasWebsiteScope(websiteId)) {
    return <div className="text-muted-foreground">Select a website to load the session.</div>
  }

  if (sessionQuery.isLoading || nextItemQuery.isLoading) {
    return <Skeleton className="h-[520px] w-full" />
  }

  if (sessionQuery.isError || !sessionQuery.data) {
    return (
      <Alert variant="destructive">
        <AlertTitle>Session failed to load</AlertTitle>
        <AlertDescription>Check the active website and session ID.</AlertDescription>
      </Alert>
    )
  }

  if (sessionQuery.data.is_completed) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Session Completed</CardTitle>
          <CardDescription>{sessionQuery.data.session_id}</CardDescription>
        </CardHeader>
        <CardContent>
          <Button onClick={() => navigate(`/student/result/${sessionId}`)}>View Result</Button>
        </CardContent>
      </Card>
    )
  }

  const nextItem = nextItemQuery.data

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Tryout Session</h1>
          <p className="text-muted-foreground mt-1">
            {sessionQuery.data.tryout_id} · Student {sessionQuery.data.wp_user_id}
          </p>
        </div>
        <div className="flex gap-2">
          <Badge variant="secondary">Answered {nextItem?.items_answered ?? 0}</Badge>
          <Badge variant={remainingSeconds !== null && remainingSeconds < 300 ? 'destructive' : 'outline'}>
            {formatRemaining(remainingSeconds)}
          </Badge>
        </div>
      </div>

      {(submitMutation.isError || completeMutation.isError || nextItemQuery.isError) && (
        <Alert variant="destructive">
          <AlertTitle>Session action failed</AlertTitle>
          <AlertDescription>
            {getErrorMessage(submitMutation.error || completeMutation.error || nextItemQuery.error)}
          </AlertDescription>
        </Alert>
      )}

      {nextItem?.status === 'completed' ? (
        <Card>
          <CardHeader>
            <CardTitle>Ready to Complete</CardTitle>
            <CardDescription>{nextItem.reason || 'No more questions are available for this session.'}</CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={() => completeMutation.mutate()} disabled={completeMutation.isPending}>
              <CheckCircle2 className="mr-2 h-4 w-4" />
              {completeMutation.isPending ? 'Completing...' : 'Complete Session'}
            </Button>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>Question {nextItem?.slot ?? '-'}</CardTitle>
            <CardDescription className="capitalize">{nextItem?.display_level || nextItem?.level || 'item'}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="rounded-md border p-4">
              <SafeHtml html={nextItem?.stem || ''} />
            </div>
            <div className="grid gap-3 md:grid-cols-2">
              {options.map(([key, value]) => (
                <button
                  key={key}
                  type="button"
                  onClick={() => setSelectedResponse(key)}
                  className={`rounded-md border p-4 text-left transition-colors ${
                    selectedResponse === key ? 'border-primary bg-primary/5' : 'hover:bg-muted'
                  }`}
                >
                  <span className="font-mono font-semibold">{key}.</span>{' '}
                  <SafeHtml html={value} className="inline" />
                </button>
              ))}
            </div>
            <div className="flex justify-end">
              <Button
                onClick={() => submitMutation.mutate()}
                disabled={!selectedResponse || submitMutation.isPending}
              >
                <Send className="mr-2 h-4 w-4" />
                {submitMutation.isPending ? 'Submitting...' : 'Submit Answer'}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}