'use client'

/**
 * Einigung (Consensus) Modal.
 * Shown when first and second examiner grade difference requires manual resolution.
 */

import type { ExaminerWorkflow } from './workspace-types'
import { GRADE_LABELS } from './workspace-types'

interface EinigungModalProps {
  workflow: ExaminerWorkflow
  einigungGrade: number
  einigungNotes: string
  submittingWorkflow: boolean
  onGradeChange: (grade: number) => void
  onNotesChange: (notes: string) => void
  onSubmit: (type: 'agreed' | 'split' | 'escalated') => void
  onClose: () => void
}

export default function EinigungModal({
  workflow, einigungGrade, einigungNotes, submittingWorkflow,
  onGradeChange, onNotesChange, onSubmit, onClose,
}: EinigungModalProps) {
  return (
    <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) => onGradeChange(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) => onNotesChange(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={() => onSubmit('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={() => onSubmit('escalated')}
            disabled={submittingWorkflow}
            className="py-2 px-4 bg-red-100 text-red-700 rounded-lg hover:bg-red-200"
          >
            Eskalieren
          </button>
          <button
            onClick={onClose}
            className="py-2 px-4 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  )
}