'use client'

/**
 * Korrektur-Workspace
 *
 * Main correction interface with 2/3 - 1/3 layout:
 * - Left (2/3): Document viewer with annotation overlay
 * - Right (1/3): Criteria scoring, Gutachten editor, Annotations
 */

import { useState, useEffect, useCallback, useMemo } from 'react'
import { useParams, useRouter } from 'next/navigation'
import AdminLayout from '@/components/admin/AdminLayout'
import Link from 'next/link'
import AnnotationLayer from '../../components/AnnotationLayer'
import AnnotationToolbar from '../../components/AnnotationToolbar'
import AnnotationPanel from '../../components/AnnotationPanel'
import EHSuggestionPanel from '../../components/EHSuggestionPanel'
import type {
  Klausur,
  StudentWork,
  Annotation,
  CriteriaScores,
  GradeInfo,
  AnnotationType,
  AnnotationPosition,
} from '../../types'
import { ANNOTATION_COLORS } from '../../types'

// Examiner workflow types
interface ExaminerInfo {
  id: string
  assigned_at: string
  notes?: string
}

interface ExaminerResult {
  grade_points: number
  criteria_scores?: CriteriaScores
  notes?: string
  submitted_at: string
}

interface ExaminerWorkflow {
  student_id: string
  workflow_status: string
  visibility_mode: string
  user_role: 'ek' | 'zk' | 'dk' | 'viewer'
  first_examiner?: ExaminerInfo
  second_examiner?: ExaminerInfo
  third_examiner?: ExaminerInfo
  first_result?: ExaminerResult
  first_result_visible?: boolean
  second_result?: ExaminerResult
  third_result?: ExaminerResult
  grade_difference?: number
  final_grade?: number
  consensus_reached?: boolean
  consensus_type?: string
  einigung?: {
    final_grade: number
    notes: string
    type: string
    submitted_by: string
    submitted_at: string
    ek_grade: number
    zk_grade: number
  }
  drittkorrektur_reason?: string
}

// Workflow status labels
const WORKFLOW_STATUS_LABELS: Record<string, { label: string; color: string }> = {
  not_started: { label: 'Nicht gestartet', color: 'bg-slate-100 text-slate-700' },
  ek_in_progress: { label: 'EK in Arbeit', color: 'bg-blue-100 text-blue-700' },
  ek_completed: { label: 'EK abgeschlossen', color: 'bg-blue-200 text-blue-800' },
  zk_assigned: { label: 'ZK zugewiesen', color: 'bg-amber-100 text-amber-700' },
  zk_in_progress: { label: 'ZK in Arbeit', color: 'bg-amber-200 text-amber-800' },
  zk_completed: { label: 'ZK abgeschlossen', color: 'bg-amber-300 text-amber-900' },
  einigung_required: { label: 'Einigung erforderlich', color: 'bg-orange-100 text-orange-700' },
  einigung_completed: { label: 'Einigung abgeschlossen', color: 'bg-green-100 text-green-700' },
  drittkorrektur_required: { label: 'DK erforderlich', color: 'bg-red-100 text-red-700' },
  drittkorrektur_assigned: { label: 'DK zugewiesen', color: 'bg-red-200 text-red-800' },
  drittkorrektur_in_progress: { label: 'DK in Arbeit', color: 'bg-red-300 text-red-900' },
  completed: { label: 'Abgeschlossen', color: 'bg-green-200 text-green-800' },
}

const ROLE_LABELS: Record<string, { label: string; color: string }> = {
  ek: { label: 'Erstkorrektor', color: 'bg-blue-500' },
  zk: { label: 'Zweitkorrektor', color: 'bg-amber-500' },
  dk: { label: 'Drittkorrektor', color: 'bg-purple-500' },
  viewer: { label: 'Betrachter', color: 'bg-slate-500' },
}

const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'

// Grade thresholds and labels
const GRADE_LABELS: Record<number, string> = {
  15: '1+', 14: '1', 13: '1-', 12: '2+', 11: '2', 10: '2-',
  9: '3+', 8: '3', 7: '3-', 6: '4+', 5: '4', 4: '4-',
  3: '5+', 2: '5', 1: '5-', 0: '6'
}

type ActiveTab = 'kriterien' | 'gutachten' | 'annotationen' | 'eh-vorschlaege'

export default function KorrekturWorkspacePage() {
  const params = useParams()
  const router = useRouter()
  const klausurId = params.klausurId as string
  const studentId = params.studentId as string

  // State
  const [klausur, setKlausur] = useState<Klausur | null>(null)
  const [student, setStudent] = useState<StudentWork | null>(null)
  const [students, setStudents] = useState<StudentWork[]>([])
  const [annotations, setAnnotations] = useState<Annotation[]>([])
  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState<ActiveTab>('kriterien')
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)
  const [zoom, setZoom] = useState(100)
  const [documentUrl, setDocumentUrl] = useState<string | null>(null)
  const [generatingGutachten, setGeneratingGutachten] = useState(false)
  const [exporting, setExporting] = useState(false)

  // Annotation state
  const [selectedTool, setSelectedTool] = useState<AnnotationType | null>(null)
  const [selectedAnnotation, setSelectedAnnotation] = useState<Annotation | null>(null)

  // Form state
  const [criteriaScores, setCriteriaScores] = useState<CriteriaScores>({})
  const [gutachten, setGutachten] = useState('')

  // Examiner workflow state
  const [workflow, setWorkflow] = useState<ExaminerWorkflow | null>(null)
  const [showEinigungModal, setShowEinigungModal] = useState(false)
  const [einigungGrade, setEinigungGrade] = useState<number>(0)
  const [einigungNotes, setEinigungNotes] = useState('')
  const [submittingWorkflow, setSubmittingWorkflow] = useState(false)

  // Current student index
  const currentIndex = students.findIndex(s => s.id === studentId)

  // Annotation counts by type
  const annotationCounts = useMemo(() => {
    const counts: Record<AnnotationType, number> = {
      rechtschreibung: 0,
      grammatik: 0,
      inhalt: 0,
      struktur: 0,
      stil: 0,
      comment: 0,
      highlight: 0,
    }
    annotations.forEach((ann) => {
      counts[ann.type] = (counts[ann.type] || 0) + 1
    })
    return counts
  }, [annotations])

  // Fetch all data
  const fetchData = useCallback(async () => {
    try {
      setLoading(true)

      // Fetch klausur
      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}`)
      if (klausurRes.ok) {
        setKlausur(await klausurRes.json())
      }

      // Fetch students list
      const studentsRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}/students`)
      if (studentsRes.ok) {
        const data = await studentsRes.json()
        setStudents(Array.isArray(data) ? data : data.students || [])
      }

      // Fetch current student
      const studentRes = await fetch(`${API_BASE}/api/v1/students/${studentId}`)
      if (studentRes.ok) {
        const studentData = await studentRes.json()
        setStudent(studentData)
        setCriteriaScores(studentData.criteria_scores || {})
        setGutachten(studentData.gutachten || '')
      }

      // Fetch grade info
      const gradeInfoRes = await fetch(`${API_BASE}/api/v1/grade-info`)
      if (gradeInfoRes.ok) {
        setGradeInfo(await gradeInfoRes.json())
      }

      // Fetch examiner workflow status
      const workflowRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner-workflow`)
      if (workflowRes.ok) {
        const workflowData = await workflowRes.json()
        setWorkflow(workflowData)

        // If Einigung is required, pre-populate the grade field
        if (workflowData.workflow_status === 'einigung_required' && workflowData.first_result && workflowData.second_result) {
          const avgGrade = Math.round((workflowData.first_result.grade_points + workflowData.second_result.grade_points) / 2)
          setEinigungGrade(avgGrade)
        }
      }

      // Fetch annotations (use filtered endpoint if we have a workflow)
      const annotationsEndpoint = workflow?.user_role === 'zk'
        ? `${API_BASE}/api/v1/students/${studentId}/annotations-filtered`
        : `${API_BASE}/api/v1/students/${studentId}/annotations`

      const annotationsRes = await fetch(annotationsEndpoint)
      if (annotationsRes.ok) {
        const annotationsData = await annotationsRes.json()
        setAnnotations(Array.isArray(annotationsData) ? annotationsData : annotationsData.annotations || [])
      }

      // Build document URL
      setDocumentUrl(`${API_BASE}/api/v1/students/${studentId}/file`)

      setError(null)
    } catch (err) {
      console.error('Failed to fetch data:', err)
      setError('Fehler beim Laden der Daten')
    } finally {
      setLoading(false)
    }
  }, [klausurId, studentId])

  // Create annotation
  const createAnnotation = useCallback(async (position: AnnotationPosition, type: AnnotationType) => {
    try {
      const newAnnotation = {
        page: currentPage,
        position,
        type,
        text: '',
        severity: type === 'rechtschreibung' || type === 'grammatik' ? 'minor' : 'major',
        role: 'first_examiner',
        linked_criterion: ['rechtschreibung', 'grammatik', 'inhalt', 'struktur', 'stil'].includes(type)
          ? type
          : undefined,
      }

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/annotations`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newAnnotation),
      })

      if (res.ok) {
        const created = await res.json()
        setAnnotations((prev) => [...prev, created])
        setSelectedAnnotation(created)
        setActiveTab('annotationen') // Switch to annotations tab to edit
      } else {
        const errorData = await res.json()
        setError(errorData.detail || 'Fehler beim Erstellen der Annotation')
      }
    } catch (err) {
      console.error('Failed to create annotation:', err)
      setError('Fehler beim Erstellen der Annotation')
    }
  }, [studentId, currentPage])

  // Update annotation
  const updateAnnotation = useCallback(async (id: string, updates: Partial<Annotation>) => {
    try {
      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates),
      })

      if (res.ok) {
        const updated = await res.json()
        setAnnotations((prev) => prev.map((ann) => (ann.id === id ? updated : ann)))
        if (selectedAnnotation?.id === id) {
          setSelectedAnnotation(updated)
        }
      } else {
        const errorData = await res.json()
        setError(errorData.detail || 'Fehler beim Aktualisieren der Annotation')
      }
    } catch (err) {
      console.error('Failed to update annotation:', err)
      setError('Fehler beim Aktualisieren der Annotation')
    }
  }, [selectedAnnotation?.id])

  // Delete annotation
  const deleteAnnotation = useCallback(async (id: string) => {
    try {
      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, {
        method: 'DELETE',
      })

      if (res.ok) {
        setAnnotations((prev) => prev.filter((ann) => ann.id !== id))
        if (selectedAnnotation?.id === id) {
          setSelectedAnnotation(null)
        }
      } else {
        const errorData = await res.json()
        setError(errorData.detail || 'Fehler beim Loeschen der Annotation')
      }
    } catch (err) {
      console.error('Failed to delete annotation:', err)
      setError('Fehler beim Loeschen der Annotation')
    }
  }, [selectedAnnotation?.id])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  // Save criteria scores
  const saveCriteriaScores = useCallback(async (newScores: CriteriaScores) => {
    try {
      setSaving(true)
      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/criteria`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ criteria_scores: newScores }),
      })

      if (res.ok) {
        const updated = await res.json()
        setStudent(updated)
      } else {
        setError('Fehler beim Speichern')
      }
    } catch (err) {
      console.error('Failed to save criteria:', err)
      setError('Fehler beim Speichern')
    } finally {
      setSaving(false)
    }
  }, [studentId])

  // Save gutachten
  const saveGutachten = useCallback(async () => {
    try {
      setSaving(true)
      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ gutachten }),
      })

      if (res.ok) {
        const updated = await res.json()
        setStudent(updated)
      } else {
        setError('Fehler beim Speichern')
      }
    } catch (err) {
      console.error('Failed to save gutachten:', err)
      setError('Fehler beim Speichern')
    } finally {
      setSaving(false)
    }
  }, [studentId, gutachten])

  // Generate gutachten
  const generateGutachten = useCallback(async () => {
    try {
      setGeneratingGutachten(true)
      setError(null)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten/generate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ criteria_scores: criteriaScores }),
      })

      if (res.ok) {
        const data = await res.json()
        const generatedText = [
          data.einleitung || '',
          '',
          data.hauptteil || '',
          '',
          data.fazit || '',
        ].filter(Boolean).join('\n\n')

        setGutachten(generatedText)
        setActiveTab('gutachten')
      } else {
        const errorData = await res.json()
        setError(errorData.detail || 'Fehler bei der Gutachten-Generierung')
      }
    } catch (err) {
      console.error('Failed to generate gutachten:', err)
      setError('Fehler bei der Gutachten-Generierung')
    } finally {
      setGeneratingGutachten(false)
    }
  }, [studentId, criteriaScores])

  // Export PDF functions
  const exportGutachtenPDF = useCallback(async () => {
    try {
      setExporting(true)
      setError(null)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/export/gutachten`)

      if (res.ok) {
        const blob = await res.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `Gutachten_${student?.anonym_id?.replace(/\s+/g, '_') || 'Student'}_${new Date().toISOString().split('T')[0]}.pdf`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      } else {
        setError('Fehler beim PDF-Export')
      }
    } catch (err) {
      console.error('Failed to export PDF:', err)
      setError('Fehler beim PDF-Export')
    } finally {
      setExporting(false)
    }
  }, [studentId, student?.anonym_id])

  const exportAnnotationsPDF = useCallback(async () => {
    try {
      setExporting(true)
      setError(null)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/export/annotations`)

      if (res.ok) {
        const blob = await res.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `Anmerkungen_${student?.anonym_id?.replace(/\s+/g, '_') || 'Student'}_${new Date().toISOString().split('T')[0]}.pdf`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      } else {
        setError('Fehler beim PDF-Export')
      }
    } catch (err) {
      console.error('Failed to export annotations PDF:', err)
      setError('Fehler beim PDF-Export')
    } finally {
      setExporting(false)
    }
  }, [studentId, student?.anonym_id])

  // Handle criteria change
  const handleCriteriaChange = (criterion: string, value: number) => {
    const newScores = { ...criteriaScores, [criterion]: value }
    setCriteriaScores(newScores)
    // Auto-save after short delay
    saveCriteriaScores(newScores)
  }

  // Calculate total points - moved before workflow functions to avoid "used before declaration" error
  const calculateTotalPoints = useCallback(() => {
    if (!gradeInfo?.criteria) return { raw: 0, weighted: 0, gradePoints: 0 }

    let totalWeighted = 0
    let totalWeight = 0

    Object.entries(gradeInfo.criteria).forEach(([key, criterion]) => {
      const score = criteriaScores[key] || 0
      totalWeighted += score * (criterion.weight / 100)
      totalWeight += criterion.weight
    })

    const percentage = totalWeight > 0 ? (totalWeighted / totalWeight) * 100 : 0

    // Calculate grade points from percentage
    let gradePoints = 0
    const thresholds = [
      { points: 15, min: 95 }, { points: 14, min: 90 }, { points: 13, min: 85 },
      { points: 12, min: 80 }, { points: 11, min: 75 }, { points: 10, min: 70 },
      { points: 9, min: 65 }, { points: 8, min: 60 }, { points: 7, min: 55 },
      { points: 6, min: 50 }, { points: 5, min: 45 }, { points: 4, min: 40 },
      { points: 3, min: 33 }, { points: 2, min: 27 }, { points: 1, min: 20 },
    ]

    for (const t of thresholds) {
      if (percentage >= t.min) {
        gradePoints = t.points
        break
      }
    }

    return {
      raw: Math.round(totalWeighted),
      weighted: Math.round(percentage),
      gradePoints,
    }
  }, [gradeInfo, criteriaScores])

  const totals = calculateTotalPoints()

  // Submit Erstkorrektur (EK completes their work)
  const submitErstkorrektur = useCallback(async () => {
    try {
      setSubmittingWorkflow(true)

      // First assign as EK if not already assigned
      const assignRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          examiner_id: 'current-user', // In production, get from auth context
          examiner_role: 'first_examiner',
        }),
      })

      if (!assignRes.ok && assignRes.status !== 400) {
        // 400 might mean already assigned, which is fine
        const error = await assignRes.json()
        throw new Error(error.detail || 'Fehler bei der Zuweisung')
      }

      // Submit result
      const submitRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner/result`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          grade_points: totals.gradePoints,
          notes: gutachten,
        }),
      })

      if (submitRes.ok) {
        // Refresh workflow status
        fetchData()
      } else {
        const error = await submitRes.json()
        setError(error.detail || 'Fehler beim Abschliessen der Erstkorrektur')
      }
    } catch (err) {
      console.error('Failed to submit Erstkorrektur:', err)
      setError('Fehler beim Abschliessen der Erstkorrektur')
    } finally {
      setSubmittingWorkflow(false)
    }
  }, [studentId, totals.gradePoints, gutachten, fetchData])

  // Start Zweitkorrektur
  const startZweitkorrektur = useCallback(async (zweitkorrektorId: string) => {
    try {
      setSubmittingWorkflow(true)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/start-zweitkorrektur`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          zweitkorrektor_id: zweitkorrektorId,
        }),
      })

      if (res.ok) {
        fetchData()
      } else {
        const error = await res.json()
        setError(error.detail || 'Fehler beim Starten der Zweitkorrektur')
      }
    } catch (err) {
      console.error('Failed to start Zweitkorrektur:', err)
      setError('Fehler beim Starten der Zweitkorrektur')
    } finally {
      setSubmittingWorkflow(false)
    }
  }, [studentId, fetchData])

  // Submit Zweitkorrektur
  const submitZweitkorrektur = useCallback(async () => {
    try {
      setSubmittingWorkflow(true)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/submit-zweitkorrektur`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          grade_points: totals.gradePoints,
          criteria_scores: criteriaScores,
          gutachten: gutachten ? { text: gutachten } : null,
          notes: '',
        }),
      })

      if (res.ok) {
        const result = await res.json()
        // Show result message
        if (result.workflow_status === 'completed') {
          alert(`Auto-Konsens erreicht! Endnote: ${result.final_grade} Punkte`)
        } else if (result.workflow_status === 'einigung_required') {
          setShowEinigungModal(true)
        } else if (result.workflow_status === 'drittkorrektur_required') {
          alert(`Drittkorrektur erforderlich: Differenz ${result.grade_difference} Punkte`)
        }
        fetchData()
      } else {
        const error = await res.json()
        setError(error.detail || 'Fehler beim Abschliessen der Zweitkorrektur')
      }
    } catch (err) {
      console.error('Failed to submit Zweitkorrektur:', err)
      setError('Fehler beim Abschliessen der Zweitkorrektur')
    } finally {
      setSubmittingWorkflow(false)
    }
  }, [studentId, totals.gradePoints, criteriaScores, gutachten, fetchData])

  // Submit Einigung
  const submitEinigung = useCallback(async (type: 'agreed' | 'split' | 'escalated') => {
    try {
      setSubmittingWorkflow(true)

      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/einigung`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          final_grade: einigungGrade,
          einigung_notes: einigungNotes,
          einigung_type: type,
        }),
      })

      if (res.ok) {
        const result = await res.json()
        setShowEinigungModal(false)
        if (result.workflow_status === 'drittkorrektur_required') {
          alert('Eskaliert zu Drittkorrektur')
        } else {
          alert(`Einigung abgeschlossen: Endnote ${result.final_grade} Punkte`)
        }
        fetchData()
      } else {
        const error = await res.json()
        setError(error.detail || 'Fehler bei der Einigung')
      }
    } catch (err) {
      console.error('Failed to submit Einigung:', err)
      setError('Fehler bei der Einigung')
    } finally {
      setSubmittingWorkflow(false)
    }
  }, [studentId, einigungGrade, einigungNotes, fetchData])

  // Navigation
  const goToStudent = (direction: 'prev' | 'next') => {
    const newIndex = direction === 'prev' ? currentIndex - 1 : currentIndex + 1
    if (newIndex >= 0 && newIndex < students.length) {
      router.push(`/lehrer/klausur-korrektur/${klausurId}/${students[newIndex].id}`)
    }
  }

  if (loading) {
    return (
      <AdminLayout title="Lädt..." description="">
        <div className="flex items-center justify-center h-[calc(100vh-200px)]">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
        </div>
      </AdminLayout>
    )
  }

  return (
    <AdminLayout
      title={`Korrektur: ${student?.anonym_id || 'Student'}`}
      description={klausur?.title || ''}
    >
      {/* Top Navigation Bar */}
      <div className="bg-white border-b border-slate-200 -mx-6 -mt-6 px-6 py-3 mb-4 flex items-center justify-between sticky top-0 z-10">
        {/* Back link */}
        <Link
          href={`/lehrer/klausur-korrektur/${klausurId}`}
          className="text-primary-600 hover:text-primary-800 flex items-center gap-1 text-sm"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Zurück
        </Link>

        {/* Student navigation */}
        <div className="flex items-center gap-4">
          <button
            onClick={() => goToStudent('prev')}
            disabled={currentIndex <= 0}
            className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <span className="text-sm font-medium">
            {currentIndex + 1} / {students.length}
          </span>
          <button
            onClick={() => goToStudent('next')}
            disabled={currentIndex >= students.length - 1}
            className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>

        {/* Workflow status and role */}
        <div className="flex items-center gap-3">
          {/* Role badge */}
          {workflow && (
            <div className="flex items-center gap-2">
              <span
                className={`px-2 py-1 text-xs font-medium rounded-full text-white ${
                  ROLE_LABELS[workflow.user_role]?.color || 'bg-slate-500'
                }`}
              >
                {ROLE_LABELS[workflow.user_role]?.label || workflow.user_role}
              </span>

              {/* Workflow status badge */}
              <span
                className={`px-2 py-1 text-xs font-medium rounded-full ${
                  WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.color || 'bg-slate-100'
                }`}
              >
                {WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.label || workflow.workflow_status}
              </span>

              {/* Visibility mode indicator for ZK */}
              {workflow.user_role === 'zk' && workflow.visibility_mode !== 'full' && (
                <span className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
                  {workflow.visibility_mode === 'blind' ? 'Blind-Modus' : 'Semi-Blind'}
                </span>
              )}
            </div>
          )}

          {saving && (
            <span className="text-sm text-slate-500 flex items-center gap-1">
              <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary-600"></div>
              Speichern...
            </span>
          )}
          <div className="text-right">
            <div className="text-lg font-bold text-slate-800">
              {totals.gradePoints} Punkte
            </div>
            <div className="text-sm text-slate-500">
              Note: {GRADE_LABELS[totals.gradePoints] || '-'}
            </div>
          </div>
        </div>
      </div>

      {/* Einigung Modal */}
      {showEinigungModal && workflow && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg mx-4">
            <h3 className="text-lg font-semibold mb-4">Einigung erforderlich</h3>

            {/* Grade comparison */}
            <div className="bg-slate-50 rounded-lg p-4 mb-4">
              <div className="grid grid-cols-2 gap-4 text-center">
                <div>
                  <div className="text-sm text-slate-500">Erstkorrektor</div>
                  <div className="text-2xl font-bold text-blue-600">
                    {workflow.first_result?.grade_points || '-'} P
                  </div>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Zweitkorrektor</div>
                  <div className="text-2xl font-bold text-amber-600">
                    {workflow.second_result?.grade_points || '-'} P
                  </div>
                </div>
              </div>
              <div className="text-center mt-2 text-sm text-slate-500">
                Differenz: {workflow.grade_difference} Punkte
              </div>
            </div>

            {/* Final grade selection */}
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Endnote festlegen
              </label>
              <input
                type="range"
                min={Math.min(workflow.first_result?.grade_points || 0, workflow.second_result?.grade_points || 0) - 1}
                max={Math.max(workflow.first_result?.grade_points || 15, workflow.second_result?.grade_points || 15) + 1}
                value={einigungGrade}
                onChange={(e) => setEinigungGrade(parseInt(e.target.value))}
                className="w-full"
              />
              <div className="text-center text-2xl font-bold mt-2">
                {einigungGrade} Punkte ({GRADE_LABELS[einigungGrade] || '-'})
              </div>
            </div>

            {/* Notes */}
            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 mb-2">
                Begruendung
              </label>
              <textarea
                value={einigungNotes}
                onChange={(e) => setEinigungNotes(e.target.value)}
                placeholder="Begruendung fuer die Einigung..."
                className="w-full p-2 border border-slate-300 rounded-lg text-sm"
                rows={3}
              />
            </div>

            {/* Actions */}
            <div className="flex gap-2">
              <button
                onClick={() => submitEinigung('agreed')}
                disabled={submittingWorkflow || !einigungNotes}
                className="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
              >
                Einigung bestaetigen
              </button>
              <button
                onClick={() => submitEinigung('escalated')}
                disabled={submittingWorkflow}
                className="py-2 px-4 bg-red-100 text-red-700 rounded-lg hover:bg-red-200"
              >
                Eskalieren
              </button>
              <button
                onClick={() => setShowEinigungModal(false)}
                className="py-2 px-4 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200"
              >
                Abbrechen
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Error display */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
          <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span className="text-red-800">{error}</span>
          <button onClick={() => setError(null)} className="ml-auto">
            <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      )}

      {/* Main Layout: 2/3 - 1/3 */}
      <div className="flex gap-6 h-[calc(100vh-280px)]">
        {/* Left: Document Viewer (2/3) */}
        <div className="w-2/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
          {/* Toolbar */}
          <AnnotationToolbar
            selectedTool={selectedTool}
            onSelectTool={setSelectedTool}
            zoom={zoom}
            onZoomChange={setZoom}
            annotationCounts={annotationCounts}
          />

          {/* Document display with annotation overlay */}
          <div className="flex-1 overflow-auto p-4 bg-slate-100">
            {documentUrl ? (
              <div
                className="mx-auto bg-white shadow-lg relative"
                style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top center' }}
              >
                {/* Document */}
                {student?.file_path?.endsWith('.pdf') ? (
                  <iframe
                    src={documentUrl}
                    className="w-full h-[800px] border-0"
                    title="Studentenarbeit"
                  />
                ) : (
                  <div className="relative">
                    <img
                      src={documentUrl}
                      alt="Studentenarbeit"
                      className="max-w-full"
                      onError={(e) => {
                        (e.target as HTMLImageElement).src = '/placeholder-document.png'
                      }}
                    />
                    {/* Annotation Layer Overlay */}
                    <AnnotationLayer
                      annotations={annotations.filter((ann) => ann.page === currentPage)}
                      selectedTool={selectedTool}
                      onCreateAnnotation={createAnnotation}
                      onSelectAnnotation={(ann) => {
                        setSelectedAnnotation(ann)
                        setActiveTab('annotationen')
                      }}
                      selectedAnnotationId={selectedAnnotation?.id}
                    />
                  </div>
                )}
              </div>
            ) : (
              <div className="flex items-center justify-center h-full text-slate-400">
                Kein Dokument verfuegbar
              </div>
            )}
          </div>

          {/* Page navigation (for multi-page documents) */}
          <div className="border-t border-slate-200 p-2 flex items-center justify-center gap-2 bg-slate-50">
            <button
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage <= 1}
              className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <span className="text-sm">
              Seite {currentPage} / {totalPages}
            </span>
            <button
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage >= totalPages}
              className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>

          {/* OCR Text (collapsible) */}
          {student?.ocr_text && (
            <details className="border-t border-slate-200">
              <summary className="p-3 bg-slate-50 cursor-pointer text-sm font-medium text-slate-600 hover:bg-slate-100">
                OCR-Text anzeigen
              </summary>
              <div className="p-4 max-h-48 overflow-auto text-sm text-slate-700 bg-slate-50">
                <pre className="whitespace-pre-wrap font-sans">{student.ocr_text}</pre>
              </div>
            </details>
          )}
        </div>

        {/* Right: Correction Panel (1/3) */}
        <div className="w-1/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
          {/* Tabs */}
          <div className="border-b border-slate-200">
            <nav className="flex">
              {[
                { id: 'kriterien' as const, label: 'Kriterien' },
                { id: 'annotationen' as const, label: `Notizen (${annotations.length})` },
                { id: 'gutachten' as const, label: 'Gutachten' },
                { id: 'eh-vorschlaege' as const, label: 'EH' },
              ].map(tab => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex-1 px-2 py-3 text-xs font-medium border-b-2 transition-colors ${
                    activeTab === tab.id
                      ? 'border-primary-500 text-primary-600'
                      : 'border-transparent text-slate-500 hover:text-slate-700'
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </nav>
          </div>

          {/* Tab content */}
          <div className="flex-1 overflow-auto p-4">
            {/* Kriterien Tab */}
            {activeTab === 'kriterien' && gradeInfo && (
              <div className="space-y-4">
                {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => {
                  const score = criteriaScores[key] || 0
                  const linkedAnnotations = annotations.filter(
                    (a) => a.linked_criterion === key || a.type === key
                  )
                  const errorCount = linkedAnnotations.length
                  const severityCounts = {
                    minor: linkedAnnotations.filter((a) => a.severity === 'minor').length,
                    major: linkedAnnotations.filter((a) => a.severity === 'major').length,
                    critical: linkedAnnotations.filter((a) => a.severity === 'critical').length,
                  }
                  const criterionColor = ANNOTATION_COLORS[key as AnnotationType] || '#6b7280'

                  return (
                    <div key={key} className="bg-slate-50 rounded-lg p-4">
                      <div className="flex justify-between items-center mb-2">
                        <div className="flex items-center gap-2">
                          <div
                            className="w-3 h-3 rounded-full"
                            style={{ backgroundColor: criterionColor }}
                          />
                          <span className="font-medium text-slate-800">{criterion.name}</span>
                          <span className="text-xs text-slate-500">({criterion.weight}%)</span>
                        </div>
                        <div className="text-lg font-bold text-slate-800">{score}%</div>
                      </div>

                      {/* Annotation count for this criterion */}
                      {errorCount > 0 && (
                        <div className="flex items-center gap-2 mb-2 text-xs">
                          <span className="text-slate-500">{errorCount} Markierungen:</span>
                          {severityCounts.minor > 0 && (
                            <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded">
                              {severityCounts.minor} leicht
                            </span>
                          )}
                          {severityCounts.major > 0 && (
                            <span className="px-1.5 py-0.5 bg-orange-100 text-orange-700 rounded">
                              {severityCounts.major} mittel
                            </span>
                          )}
                          {severityCounts.critical > 0 && (
                            <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded">
                              {severityCounts.critical} schwer
                            </span>
                          )}
                        </div>
                      )}

                      {/* Slider */}
                      <input
                        type="range"
                        min="0"
                        max="100"
                        value={score}
                        onChange={(e) => handleCriteriaChange(key, parseInt(e.target.value))}
                        className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
                        style={{ accentColor: criterionColor }}
                      />

                      {/* Quick buttons */}
                      <div className="flex gap-1 mt-2">
                        {[0, 25, 50, 75, 100].map((val) => (
                          <button
                            key={val}
                            onClick={() => handleCriteriaChange(key, val)}
                            className={`flex-1 py-1 text-xs rounded transition-colors ${
                              score === val
                                ? 'text-white'
                                : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
                            }`}
                            style={score === val ? { backgroundColor: criterionColor } : undefined}
                          >
                            {val}%
                          </button>
                        ))}
                      </div>

                      {/* Quick add annotation button for RS/Grammatik */}
                      {(key === 'rechtschreibung' || key === 'grammatik') && (
                        <button
                          onClick={() => {
                            setSelectedTool(key as AnnotationType)
                          }}
                          className="mt-2 w-full py-1 text-xs border rounded hover:bg-slate-100 flex items-center justify-center gap-1"
                          style={{ borderColor: criterionColor, color: criterionColor }}
                        >
                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M12 4v16m8-8H4"
                            />
                          </svg>
                          {key === 'rechtschreibung' ? 'RS-Fehler' : 'Grammatik-Fehler'} markieren
                        </button>
                      )}
                    </div>
                  )
                })}

                {/* Total and Generate button */}
                <div className="border-t border-slate-200 pt-4 mt-4">
                  <div className="flex justify-between items-center mb-4">
                    <span className="font-semibold text-slate-800">Gesamtergebnis</span>
                    <div className="text-right">
                      <div className="text-2xl font-bold text-primary-600">
                        {totals.gradePoints} Punkte
                      </div>
                      <div className="text-sm text-slate-500">
                        ({totals.weighted}%) - Note {GRADE_LABELS[totals.gradePoints]}
                      </div>
                    </div>
                  </div>

                  {/* Workflow-aware action buttons */}
                  <div className="space-y-2">
                    {/* Generate Gutachten button */}
                    <button
                      onClick={generateGutachten}
                      disabled={generatingGutachten}
                      className="w-full py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                    >
                      {generatingGutachten ? (
                        <>
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-slate-700"></div>
                          Generiere Gutachten...
                        </>
                      ) : (
                        <>
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                          </svg>
                          Gutachten generieren
                        </>
                      )}
                    </button>

                    {/* Workflow action buttons based on status */}
                    {(!workflow || workflow.workflow_status === 'not_started' || workflow.workflow_status === 'ek_in_progress') && (
                      <button
                        onClick={submitErstkorrektur}
                        disabled={submittingWorkflow || !gutachten}
                        className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
                      >
                        {submittingWorkflow ? (
                          <>
                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                            Wird abgeschlossen...
                          </>
                        ) : (
                          <>
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                            Erstkorrektur abschliessen
                          </>
                        )}
                      </button>
                    )}

                    {workflow?.workflow_status === 'ek_completed' && workflow.user_role === 'ek' && (
                      <button
                        onClick={() => {
                          const zkId = prompt('Zweitkorrektor-ID eingeben:')
                          if (zkId) startZweitkorrektur(zkId)
                        }}
                        disabled={submittingWorkflow}
                        className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
                      >
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                        Zur Zweitkorrektur weiterleiten
                      </button>
                    )}

                    {(workflow?.workflow_status === 'zk_assigned' || workflow?.workflow_status === 'zk_in_progress') &&
                      workflow?.user_role === 'zk' && (
                        <button
                          onClick={submitZweitkorrektur}
                          disabled={submittingWorkflow || !gutachten}
                          className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
                        >
                          {submittingWorkflow ? (
                            <>
                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                              Wird abgeschlossen...
                            </>
                          ) : (
                            <>
                              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                              </svg>
                              Zweitkorrektur abschliessen
                            </>
                          )}
                        </button>
                      )}

                    {workflow?.workflow_status === 'einigung_required' && (
                      <button
                        onClick={() => setShowEinigungModal(true)}
                        className="w-full py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 flex items-center justify-center gap-2"
                      >
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                        Einigung starten
                      </button>
                    )}

                    {workflow?.workflow_status === 'completed' && (
                      <div className="bg-green-100 text-green-800 p-4 rounded-lg text-center">
                        <div className="text-2xl font-bold">
                          Endnote: {workflow.final_grade} Punkte
                        </div>
                        <div className="text-sm mt-1">
                          ({GRADE_LABELS[workflow.final_grade || 0]}) - {workflow.consensus_type === 'auto' ? 'Auto-Konsens' : workflow.consensus_type === 'drittkorrektur' ? 'Drittkorrektur' : 'Einigung'}
                        </div>
                      </div>
                    )}

                    {/* Show EK/ZK comparison when both results exist */}
                    {workflow?.first_result && workflow?.second_result && workflow?.workflow_status !== 'completed' && (
                      <div className="bg-slate-50 rounded-lg p-3 mt-2">
                        <div className="text-xs text-slate-500 mb-2">Notenvergleich</div>
                        <div className="flex justify-between">
                          <div className="text-center">
                            <div className="text-sm text-slate-500">EK</div>
                            <div className="font-bold text-blue-600">{workflow.first_result.grade_points}P</div>
                          </div>
                          <div className="text-center">
                            <div className="text-sm text-slate-500">ZK</div>
                            <div className="font-bold text-amber-600">{workflow.second_result.grade_points}P</div>
                          </div>
                          <div className="text-center">
                            <div className="text-sm text-slate-500">Diff</div>
                            <div className={`font-bold ${(workflow.grade_difference || 0) >= 4 ? 'text-red-600' : 'text-slate-700'}`}>
                              {workflow.grade_difference}P
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

            {/* Annotationen Tab */}
            {activeTab === 'annotationen' && (
              <div className="h-full -m-4">
                <AnnotationPanel
                  annotations={annotations}
                  selectedAnnotation={selectedAnnotation}
                  onSelectAnnotation={setSelectedAnnotation}
                  onUpdateAnnotation={updateAnnotation}
                  onDeleteAnnotation={deleteAnnotation}
                />
              </div>
            )}

            {/* Gutachten Tab */}
            {activeTab === 'gutachten' && (
              <div className="h-full flex flex-col">
                <textarea
                  value={gutachten}
                  onChange={(e) => setGutachten(e.target.value)}
                  placeholder="Gutachten hier eingeben oder generieren lassen..."
                  className="flex-1 w-full p-3 border border-slate-300 rounded-lg resize-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                />
                <div className="flex gap-2 mt-4">
                  <button
                    onClick={generateGutachten}
                    disabled={generatingGutachten}
                    className="flex-1 py-2 border border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50 disabled:opacity-50"
                  >
                    {generatingGutachten ? 'Generiere...' : 'Neu generieren'}
                  </button>
                  <button
                    onClick={saveGutachten}
                    disabled={saving}
                    className="flex-1 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
                  >
                    {saving ? 'Speichern...' : 'Speichern'}
                  </button>
                </div>

                {/* PDF Export */}
                {gutachten && (
                  <div className="flex gap-2 mt-2 pt-2 border-t border-slate-200">
                    <button
                      onClick={exportGutachtenPDF}
                      disabled={exporting}
                      className="flex-1 py-2 border border-slate-300 text-slate-600 rounded-lg hover:bg-slate-50 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                      {exporting ? 'Exportiere...' : 'Als PDF exportieren'}
                    </button>
                  </div>
                )}
              </div>
            )}

            {/* EH-Vorschlaege Tab */}
            {activeTab === 'eh-vorschlaege' && (
              <div className="h-full -m-4">
                <EHSuggestionPanel
                  studentId={studentId}
                  klausurId={klausurId}
                  hasEH={!!klausur?.eh_id || true} // Allow fetching even without linked EH (tenant-wide search)
                  apiBase={API_BASE}
                  onInsertSuggestion={(text, criterion) => {
                    // Append suggestion to gutachten
                    setGutachten((prev) =>
                      prev
                        ? `${prev}\n\n[${criterion.toUpperCase()}]: ${text}`
                        : `[${criterion.toUpperCase()}]: ${text}`
                    )
                    setActiveTab('gutachten')
                  }}
                />
              </div>
            )}
          </div>
        </div>
      </div>
    </AdminLayout>
  )
}