'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
 *
 * All state and logic lives in useKorrekturWorkspace hook.
 * UI is composed from extracted components in _components/.
 */

import { useParams, useRouter } from 'next/navigation'
import {
  useKorrekturWorkspace,
  TopNavigationBar,
  EinigungModal,
  DocumentViewer,
  CorrectionPanel,
} from './_components'

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

  const ws = useKorrekturWorkspace(klausurId, studentId, router.push)

  if (ws.loading) {
    return (
      <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>
    )
  }

  return (
    <div className="min-h-screen bg-slate-50">
      <TopNavigationBar
        klausurId={klausurId}
        currentIndex={ws.currentIndex}
        studentsCount={ws.students.length}
        workflow={ws.workflow}
        saving={ws.saving}
        totals={ws.totals}
        onGoToStudent={ws.goToStudent}
      />

      {/* Einigung Modal */}
      {ws.showEinigungModal && ws.workflow && (
        <EinigungModal
          workflow={ws.workflow}
          einigungGrade={ws.einigungGrade}
          einigungNotes={ws.einigungNotes}
          submittingWorkflow={ws.submittingWorkflow}
          onGradeChange={ws.setEinigungGrade}
          onNotesChange={ws.setEinigungNotes}
          onSubmit={ws.submitEinigung}
          onClose={() => ws.setShowEinigungModal(false)}
        />
      )}

      {/* Error display */}
      {ws.error && (
        <div className="mx-6 mt-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">{ws.error}</span>
          <button onClick={() => ws.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 p-6 h-[calc(100vh-80px)]">
        <DocumentViewer
          documentUrl={ws.documentUrl}
          filePath={ws.student?.file_path}
          ocrText={ws.student?.ocr_text}
          zoom={ws.zoom}
          currentPage={ws.currentPage}
          totalPages={ws.totalPages}
          annotations={ws.annotations}
          selectedTool={ws.selectedTool}
          selectedAnnotation={ws.selectedAnnotation}
          annotationCounts={ws.annotationCounts}
          onZoomChange={ws.setZoom}
          onSelectTool={ws.setSelectedTool}
          onCurrentPageChange={ws.setCurrentPage}
          onCreateAnnotation={ws.createAnnotation}
          onSelectAnnotation={(ann) => {
            ws.setSelectedAnnotation(ann)
            ws.setActiveTab('annotationen')
          }}
        />

        <CorrectionPanel
          klausur={ws.klausur}
          klausurId={klausurId}
          studentId={studentId}
          annotations={ws.annotations}
          gradeInfo={ws.gradeInfo}
          criteriaScores={ws.criteriaScores}
          gutachten={ws.gutachten}
          workflow={ws.workflow}
          totals={ws.totals}
          selectedAnnotation={ws.selectedAnnotation}
          activeTab={ws.activeTab}
          generatingGutachten={ws.generatingGutachten}
          saving={ws.saving}
          exporting={ws.exporting}
          submittingWorkflow={ws.submittingWorkflow}
          onSetActiveTab={ws.setActiveTab}
          onCriteriaChange={ws.handleCriteriaChange}
          onSelectTool={ws.setSelectedTool}
          onSelectAnnotation={ws.setSelectedAnnotation}
          onUpdateAnnotation={ws.updateAnnotation}
          onDeleteAnnotation={ws.deleteAnnotation}
          onSetGutachten={ws.setGutachten}
          onGenerateGutachten={ws.generateGutachten}
          onSaveGutachten={ws.saveGutachten}
          onExportGutachtenPDF={ws.exportGutachtenPDF}
          onSubmitErstkorrektur={ws.submitErstkorrektur}
          onStartZweitkorrektur={ws.startZweitkorrektur}
          onSubmitZweitkorrektur={ws.submitZweitkorrektur}
          onOpenEinigung={() => ws.setShowEinigungModal(true)}
        />
      </div>
    </div>
  )
}
