/**
 * KorrekturDocumentViewer — center panel document display.
 *
 * Extracted from KorrekturPage.tsx.
 */

import { StudentKlausur } from '../services/api'

interface KorrekturDocumentViewerProps {
  currentStudent: StudentKlausur | null
}

export default function KorrekturDocumentViewer({ currentStudent }: KorrekturDocumentViewerProps) {
  return (
    <div className="korrektur-main">
      <div className="viewer-container">
        <div className="viewer-toolbar">
          <div style={{ fontSize: 14, fontWeight: 500 }}>
            {currentStudent ? currentStudent.student_name : 'Dokument-Ansicht'}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {currentStudent && (
              <>
                <button className="btn btn-ghost" style={{ padding: '6px 12px' }}>
                  OCR-Text
                </button>
                <button className="btn btn-ghost" style={{ padding: '6px 12px' }}>
                  Original
                </button>
              </>
            )}
          </div>
        </div>

        <div className="viewer-content">
          {!currentStudent ? (
            <div className="document-placeholder">
              <div className="document-placeholder-icon">{'\uD83D\uDCC4'}</div>
              <div style={{ fontSize: 16, marginBottom: 8 }}>Keine Arbeit ausgewaehlt</div>
              <div style={{ fontSize: 14 }}>
                Waehlen Sie eine Schuelerarbeit aus der Liste oder laden Sie eine neue hoch
              </div>
            </div>
          ) : currentStudent.file_path ? (
            <div className="document-viewer">
              <div className="document-info-bar">
                <span className="file-name">{'\uD83D\uDCC4'} {currentStudent.student_name}</span>
                <span className="file-status">{'\u2713'} Hochgeladen</span>
              </div>
              <div className="document-frame">
                {currentStudent.file_path.endsWith('.pdf') ? (
                  <iframe
                    src={`/api/v1/students/${currentStudent.id}/file`}
                    title="Schuelerarbeit"
                    style={{ width: '100%', height: '100%', minHeight: '600px' }}
                  />
                ) : (
                  <img
                    src={`/api/v1/students/${currentStudent.id}/file`}
                    alt={`Arbeit von ${currentStudent.student_name}`}
                    style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
                  />
                )}
              </div>
            </div>
          ) : (
            <div className="document-placeholder">
              <div className="document-placeholder-icon">{'\uD83D\uDCC4'}</div>
              <div style={{ fontSize: 16, marginBottom: 8 }}>Keine Datei vorhanden</div>
              <div style={{ fontSize: 14 }}>
                Laden Sie eine Schuelerarbeit hoch, um mit der Korrektur zu beginnen.
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
