import { useEffect, useState } from 'react'
import { apiFetch, ApiError } from '../../lib/auth'
import { Badge } from '../ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'

interface SessionSummary {
  session_id: string
  total_participants: number
  participants_via_link: number
  participants_via_code: number
  codes_generated_count: number
  codes_revoked_count: number
  final_red_count: number
  final_yellow_count: number
  final_green_count: number
  duration_seconds: number
  created_at: string
  breakdown: { red_pct: number; yellow_pct: number; green_pct: number }
}

interface SessionReviewProps {
  sessionId: string
}

function duration(seconds: number) {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const remainder = seconds % 60
  return hours > 0
    ? `${hours}h ${minutes}m`
    : `${minutes}m ${remainder}s`
}

function Distribution({ label, count, percentage, color }: {
  label: string
  count: number
  percentage: number
  color: string
}) {
  return (
    <div>
      <div className="mb-1 flex justify-between text-sm">
        <span className="font-medium text-ink-soft">{label}</span>
        <span className="text-body">{count} ({percentage}%)</span>
      </div>
      <div className="h-3 overflow-hidden rounded-full bg-cream">
        <div className={`h-full rounded-full ${color}`} style={{ width: `${percentage}%` }} />
      </div>
    </div>
  )
}

export function SessionReview({ sessionId }: SessionReviewProps) {
  const [summary, setSummary] = useState<SessionSummary | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    apiFetch<{ data: Array<{ session_id: string; course_id: string }> }>('/api/teacher/sessions')
      .then((sessions) => {
        const session = sessions.data.find((item) => item.session_id === sessionId)
        if (!session) throw new Error('Session not found')
        return apiFetch<SessionSummary>(`/api/courses/${session.course_id}/sessions/${sessionId}/summary`)
      })
      .then((data) => { if (!cancelled) setSummary(data) })
      .catch((cause) => {
        if (cancelled) return
        setError(cause instanceof ApiError ? cause.message : 'Could not load session review')
      })
    return () => {
      cancelled = true
    }
  }, [sessionId])

  if (error) {
    return <div className="rounded-lg bg-red-soft px-4 py-3 text-sm text-red">{error}</div>
  }
  if (!summary) {
    return <p className="text-sm text-body">Loading review…</p>
  }

  return (
    <div className="space-y-6">
      <div>
        <p className="text-sm text-body">Session review</p>
        <h1 className="mt-1 text-2xl font-bold text-ink">Historical Summary</h1>
        <p className="mt-1 text-sm text-body">
          Ended {new Date(summary.created_at).toLocaleString()}
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        <Card><CardContent className="pt-5"><p className="text-sm text-body">Participants</p><p className="mt-1 text-3xl font-bold">{summary.total_participants}</p></CardContent></Card>
        <Card><CardContent className="pt-5"><p className="text-sm text-body">Duration</p><p className="mt-1 text-3xl font-bold">{duration(summary.duration_seconds)}</p></CardContent></Card>
        <Card><CardContent className="pt-5"><p className="text-sm text-body">Codes generated</p><p className="mt-1 text-3xl font-bold">{summary.codes_generated_count}</p></CardContent></Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader><CardTitle>Status distribution</CardTitle></CardHeader>
          <CardContent className="space-y-4">
            <Distribution label="Red" count={summary.final_red_count} percentage={summary.breakdown.red_pct} color="bg-red-soft0" />
            <Distribution label="Yellow" count={summary.final_yellow_count} percentage={summary.breakdown.yellow_pct} color="bg-yellow" />
            <Distribution label="Green" count={summary.final_green_count} percentage={summary.breakdown.green_pct} color="bg-green" />
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle>Join breakdown</CardTitle></CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between"><span className="text-sm text-body">Via code</span><Badge>{summary.participants_via_code}</Badge></div>
            <div className="flex items-center justify-between"><span className="text-sm text-body">Via link</span><Badge>{summary.participants_via_link}</Badge></div>
            <div className="flex items-center justify-between"><span className="text-sm text-body">Codes revoked</span><Badge variant="neutral">{summary.codes_revoked_count}</Badge></div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}