/**
 * KorrekturWizardSteps — right panel wizard content for korrektur, bewertung, gutachten.
 *
 * Extracted from KorrekturPage.tsx.
 */

import { StudentKlausur } from '../services/api'
import { CRITERIA, GRADE_LABELS, WizardStep } from '../pages/KorrekturConstants'

interface WizardStepIndicatorProps {
  current: WizardStep
}

function WizardStepIndicator({ current }: WizardStepIndicatorProps) {
  const steps: { key: WizardStep; label: string; number: string }[] = [
    { key: 'korrektur', label: 'Korrektur', number: '1' },
    { key: 'bewertung', label: 'Bewertung', number: '2' },
    { key: 'gutachten', label: 'Gutachten', number: '3' },
  ]

  const currentIdx = steps.findIndex(s => s.key === current)

  return (
    <div className="wizard-steps">
      {steps.map((step, idx) => {
        const isCompleted = idx < currentIdx
        const isActive = idx === currentIdx
        return (
          <div key={step.key} className={`wizard-step ${isCompleted ? 'completed' : ''} ${isActive ? 'active' : ''}`}>
            <span className="wizard-step-number">{isCompleted ? '\u2713' : step.number}</span>
            <span className="wizard-step-label">{step.label}</span>
          </div>
        )
      })}
    </div>
  )
}

interface KorrekturStepProps {
  korrekturNotes: string
  onNotesChange: (notes: string) => void
  onComplete: () => void
}

export function KorrekturStep({ korrekturNotes, onNotesChange, onComplete }: KorrekturStepProps) {
  return (
    <>
      <WizardStepIndicator current="korrektur" />

      <div className="panel-section">
        <div className="panel-section-title">{'\u270F\uFE0F'} Korrektur durchfuehren</div>
        <p style={{ color: 'var(--bp-text-muted)', fontSize: 13, marginBottom: 16 }}>
          Lesen Sie die Arbeit sorgfaeltig und machen Sie Anmerkungen direkt im Dokument.
          Notieren Sie hier Ihre wichtigsten Beobachtungen.
        </p>

        <div className="form-group">
          <label className="form-label">Korrektur-Notizen</label>
          <textarea
            className="textarea"
            placeholder="Ihre Notizen waehrend der Korrektur..."
            style={{ minHeight: 200 }}
            value={korrekturNotes}
            onChange={(e) => onNotesChange(e.target.value)}
          />
        </div>
      </div>

      <div className="panel-section">
        <button
          className="btn btn-primary"
          style={{ width: '100%' }}
          onClick={onComplete}
        >
          Weiter zur Bewertung {'\u2192'}
        </button>
      </div>
    </>
  )
}

interface BewertungStepProps {
  gradePoints: number
  totalPercentage: number
  localScores: Record<string, number>
  savingCriteria: boolean
  allCriteriaFilled: boolean
  onCriteriaChange: (criterion: string, value: number) => void
  onBack: () => void
  onComplete: () => void
}

export function BewertungStep({
  gradePoints,
  totalPercentage,
  localScores,
  savingCriteria,
  allCriteriaFilled,
  onCriteriaChange,
  onBack,
  onComplete,
}: BewertungStepProps) {
  return (
    <>
      <WizardStepIndicator current="bewertung" />

      <div className="panel-section">
        <div className="panel-section-title">{'\uD83D\uDCCA'} Gesamtnote</div>
        <div className="grade-display">
          <div className="grade-points">{gradePoints}</div>
          <div className="grade-label">
            {GRADE_LABELS[gradePoints]} ({totalPercentage}%)
          </div>
        </div>
      </div>

      <div className="panel-section">
        <div className="panel-section-title">
          {'\u270F\uFE0F'} Bewertungskriterien
          {savingCriteria && <span style={{ fontSize: 11, color: 'var(--bp-text-muted)' }}> (Speichert...)</span>}
        </div>

        {CRITERIA.map(c => (
          <div key={c.key} className="criterion-item">
            <div className="criterion-header">
              <span className="criterion-label">{c.label} ({Math.round(c.weight * 100)}%)</span>
              <span className="criterion-score">{localScores[c.key] || 0}%</span>
            </div>
            <input
              type="range"
              className="criterion-slider"
              min="0"
              max="100"
              value={localScores[c.key] || 0}
              onChange={(e) => onCriteriaChange(c.key, Number(e.target.value))}
            />
          </div>
        ))}
      </div>

      <div className="panel-section">
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            className="btn btn-secondary"
            style={{ flex: 1 }}
            onClick={onBack}
          >
            {'\u2190'} Zurueck
          </button>
          <button
            className="btn btn-primary"
            style={{ flex: 1 }}
            onClick={onComplete}
            disabled={!allCriteriaFilled}
          >
            Weiter {'\u2192'}
          </button>
        </div>
        {!allCriteriaFilled && (
          <p style={{ color: 'var(--bp-warning)', fontSize: 12, marginTop: 8, textAlign: 'center' }}>
            Bitte alle Kriterien bewerten
          </p>
        )}
      </div>
    </>
  )
}

interface GutachtenStepProps {
  gradePoints: number
  currentStudent: StudentKlausur
  localGutachten: { einleitung: string; hauptteil: string; fazit: string }
  generatingGutachten: boolean
  savingGutachten: boolean
  finalizingStudent: boolean
  onGutachtenChange: (field: 'einleitung' | 'hauptteil' | 'fazit', value: string) => void
  onGenerate: () => void
  onSave: () => void
  onFinalize: () => void
  onBack: () => void
}

export function GutachtenStep({
  gradePoints,
  currentStudent,
  localGutachten,
  generatingGutachten,
  savingGutachten,
  finalizingStudent,
  onGutachtenChange,
  onGenerate,
  onSave,
  onFinalize,
  onBack,
}: GutachtenStepProps) {
  return (
    <>
      <WizardStepIndicator current="gutachten" />

      <div className="panel-section">
        <div className="panel-section-title">
          {'\uD83D\uDCCA'} Endergebnis: {gradePoints} Punkte ({GRADE_LABELS[gradePoints]})
        </div>
      </div>

      <div className="panel-section">
        <div className="panel-section-title">
          {'\uD83D\uDCDD'} Gutachten
          {savingGutachten && <span style={{ fontSize: 11, color: 'var(--bp-text-muted)' }}> (Speichert...)</span>}
        </div>

        <button
          className="btn btn-secondary"
          style={{ width: '100%', marginBottom: 16 }}
          onClick={onGenerate}
          disabled={generatingGutachten}
        >
          {generatingGutachten ? '\u231B KI generiert...' : '\uD83E\uDD16 KI-Gutachten generieren'}
        </button>

        <div className="form-group">
          <label className="form-label">Einleitung</label>
          <textarea
            className="textarea"
            placeholder="Allgemeine Einordnung der Arbeit..."
            value={localGutachten.einleitung}
            onChange={(e) => onGutachtenChange('einleitung', e.target.value)}
          />
        </div>
        <div className="form-group">
          <label className="form-label">Hauptteil</label>
          <textarea
            className="textarea"
            placeholder="Detaillierte Bewertung..."
            style={{ minHeight: 120 }}
            value={localGutachten.hauptteil}
            onChange={(e) => onGutachtenChange('hauptteil', e.target.value)}
          />
        </div>
        <div className="form-group">
          <label className="form-label">Fazit</label>
          <textarea
            className="textarea"
            placeholder="Zusammenfassung und Empfehlungen..."
            value={localGutachten.fazit}
            onChange={(e) => onGutachtenChange('fazit', e.target.value)}
          />
        </div>

        <button
          className="btn btn-secondary"
          style={{ width: '100%', marginBottom: 8 }}
          onClick={onSave}
          disabled={savingGutachten}
        >
          {savingGutachten ? '\uD83D\uDCBE Speichert...' : '\uD83D\uDCBE Gutachten speichern'}
        </button>
      </div>

      <div className="panel-section">
        <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
          <button
            className="btn btn-secondary"
            style={{ flex: 1 }}
            onClick={onBack}
          >
            {'\u2190'} Zurueck
          </button>
        </div>
        <button
          className="btn btn-primary"
          style={{ width: '100%' }}
          onClick={onFinalize}
          disabled={finalizingStudent || currentStudent.status === 'completed'}
        >
          {currentStudent.status === 'completed'
            ? '\u2713 Abgeschlossen'
            : finalizingStudent
              ? 'Wird abgeschlossen...'
              : '\u2713 Bewertung abschliessen'}
        </button>
      </div>
    </>
  )
}
