import { useEffect, useState } from 'react'
import { apiFetch } from '../../lib/auth'
import { Badge } from '../ui/badge'
import { Button } from '../ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
import { Dialog, DialogFooter } from '../ui/dialog'
import { useToast } from '../ui/toast'
import { CodeGeneratorModal } from './CodeGeneratorModal'

interface JoinCode {
  id: string
  code: string
  status: 'active' | 'revoked'
  usage_count: number
  generated_at: string
  revoked_at: string | null
}

interface CodeManagementProps {
  courseId: string
  sessionId: string
}

export function CodeManagement({ courseId, sessionId }: CodeManagementProps) {
  const { success, error } = useToast()
  const [codes, setCodes] = useState<JoinCode[]>([])
  const [loading, setLoading] = useState(true)
  const [generatorOpen, setGeneratorOpen] = useState(false)
  const [revokeTarget, setRevokeTarget] = useState<JoinCode | null>(null)
  const [revoking, setRevoking] = useState(false)

  const loadCodes = async () => {
    try {
      const data = await apiFetch<{ data: JoinCode[] }>(
        `/api/courses/${courseId}/sessions/${sessionId}/codes`,
      )
      setCodes(data.data)
    } catch (e) {
      error('Failed to load codes', e instanceof Error ? e.message : 'Unknown error')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (courseId && sessionId) {
      setLoading(true)
      loadCodes()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [courseId, sessionId])

  const handleRevoke = async () => {
    if (!revokeTarget) return
    setRevoking(true)
    try {
      await apiFetch(`/api/courses/${courseId}/sessions/${sessionId}/codes/${revokeTarget.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ status: 'revoked' }),
      })
      success('Code revoked')
      setRevokeTarget(null)
      loadCodes()
    } catch (e) {
      error('Failed to revoke code', e instanceof Error ? e.message : 'Unknown error')
    } finally {
      setRevoking(false)
    }
  }

  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between space-y-0">
        <CardTitle>Join Codes</CardTitle>
        <Button size="sm" onClick={() => setGeneratorOpen(true)}>
          + Generate Code
        </Button>
      </CardHeader>
      <CardContent>
        {loading ? (
          <p className="py-6 text-center text-sm text-body">Loading codes…</p>
        ) : codes.length === 0 ? (
          <p className="py-6 text-center text-sm text-body">
            No codes yet. Generate one so students can join.
          </p>
        ) : (
          <ul className="divide-y divide-line">
            {codes.map((code) => (
              <li key={code.id} className="flex items-center justify-between py-3">
                <div className="flex items-center gap-3">
                  <span className="font-mono text-sm font-semibold text-ink">{code.code}</span>
                  <Badge variant={code.status === 'active' ? 'success' : 'neutral'}>
                    {code.status === 'active' ? 'Active' : 'Revoked'}
                  </Badge>
                  <span className="text-xs text-muted">{code.usage_count} uses</span>
                </div>
                {code.status === 'active' && (
                  <Button variant="outline" size="sm" onClick={() => setRevokeTarget(code)}>
                    Revoke
                  </Button>
                )}
              </li>
            ))}
          </ul>
        )}
      </CardContent>

      <CodeGeneratorModal
        open={generatorOpen}
        onOpenChange={setGeneratorOpen}
        courseId={courseId}
        sessionId={sessionId}
        onCreated={loadCodes}
      />

      <Dialog
        open={revokeTarget !== null}
        onOpenChange={(open) => !open && setRevokeTarget(null)}
        title="Revoke code"
        description={`Revoking "${revokeTarget?.code}" prevents new students from joining with it. Existing participants stay.`}
      >
        <DialogFooter>
          <Button variant="outline" onClick={() => setRevokeTarget(null)}>
            Cancel
          </Button>
          <Button variant="destructive" onClick={handleRevoke} loading={revoking}>
            Revoke
          </Button>
        </DialogFooter>
      </Dialog>
    </Card>
  )
}