/**
 * KorrekturModals — upload modal and EH prompt modal.
 *
 * Extracted from KorrekturPage.tsx.
 */

import { useRef, useState } from 'react'

// ---------------------------------------------------------------------------
// Upload Modal
// ---------------------------------------------------------------------------

interface UploadModalProps {
  open: boolean
  onClose: () => void
  studentName: string
  onStudentNameChange: (name: string) => void
  classStudents: Array<{ id: string; name: string }>
  onUpload: () => void
  uploading: boolean
  selectedFile: File | null
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export function UploadModal({
  open,
  onClose,
  studentName,
  onStudentNameChange,
  classStudents,
  onUpload,
  uploading,
  selectedFile,
  onFileSelect,
}: UploadModalProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [useStudentDropdown, setUseStudentDropdown] = useState(true)

  if (!open) return null

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div className="modal-title">Schuelerarbeit hochladen</div>
          <button className="modal-close" onClick={onClose}>{'\u00D7'}</button>
        </div>
        <div className="modal-body">
          <div className="form-group">
            <label className="form-label">Schueler zuweisen</label>

            {classStudents.length > 0 && (
              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13 }}>
                  <input
                    type="checkbox"
                    checked={useStudentDropdown}
                    onChange={(e) => setUseStudentDropdown(e.target.checked)}
                  />
                  Aus Klassenliste waehlen
                </label>
              </div>
            )}

            {useStudentDropdown && classStudents.length > 0 ? (
              <select
                className="input"
                value={studentName}
                onChange={e => onStudentNameChange(e.target.value)}
                style={{ width: '100%' }}
              >
                <option value="">-- Schueler waehlen --</option>
                {classStudents.map(s => (
                  <option key={s.id} value={s.name}>{s.name}</option>
                ))}
              </select>
            ) : (
              <input
                type="text"
                className="input"
                placeholder="z.B. Max Mustermann"
                value={studentName}
                onChange={e => onStudentNameChange(e.target.value)}
              />
            )}

            {classStudents.length === 0 && (
              <p style={{ fontSize: 12, color: 'var(--bp-text-muted)', marginTop: 8 }}>
                Keine Klassenliste verfuegbar. Bitte Namen manuell eingeben.
              </p>
            )}
          </div>

          <div className="form-group">
            <label className="form-label">Datei (PDF oder Bild)</label>
            <div
              className={`upload-area ${selectedFile ? 'selected' : ''}`}
              onClick={() => fileInputRef.current?.click()}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept=".pdf,.png,.jpg,.jpeg"
                style={{ display: 'none' }}
                onChange={onFileSelect}
              />
              {selectedFile ? (
                <>
                  <div className="upload-icon">{'\uD83D\uDCC4'}</div>
                  <div className="upload-text">{selectedFile.name}</div>
                </>
              ) : (
                <>
                  <div className="upload-icon">{'\uD83D\uDCC1'}</div>
                  <div className="upload-text">
                    Klicken Sie hier oder ziehen Sie eine Datei hinein
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-secondary" onClick={onClose}>
            Abbrechen
          </button>
          <button
            className="btn btn-primary"
            disabled={!studentName || !selectedFile || uploading}
            onClick={onUpload}
          >
            {uploading ? 'Wird hochgeladen...' : 'Hochladen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ---------------------------------------------------------------------------
// EH Prompt Modal
// ---------------------------------------------------------------------------

interface EHPromptModalProps {
  open: boolean
  onUpload: () => void
  onDismiss: () => void
}

export function EHPromptModal({ open, onUpload, onDismiss }: EHPromptModalProps) {
  if (!open) return null

  return (
    <div className="modal-overlay" onClick={onDismiss}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 500 }}>
        <div className="modal-header">
          <div className="modal-title">{'\uD83D\uDCCB'} Erwartungshorizont hochladen?</div>
          <button className="modal-close" onClick={onDismiss}>{'\u00D7'}</button>
        </div>
        <div className="modal-body">
          <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
            Sie haben die erste Schuelerarbeit hochgeladen. Moechten Sie jetzt einen
            <strong> Erwartungshorizont</strong> hinzufuegen?
          </p>

          <div style={{
            background: 'var(--bp-bg-light)',
            border: '1px solid var(--bp-border)',
            borderRadius: 8,
            padding: 16,
            marginBottom: 16
          }}>
            <div style={{ fontWeight: 500, marginBottom: 8 }}>{'\u2713'} Vorteile:</div>
            <ul style={{ margin: 0, paddingLeft: 20, color: 'var(--bp-text-muted)', fontSize: 14, lineHeight: 1.8 }}>
              <li>KI-gestuetzte Korrekturvorschlaege basierend auf Ihrem EH</li>
              <li>Bessere und konsistentere Bewertungen</li>
              <li>Automatisch fuer alle Korrektoren verfuegbar</li>
              <li>Ende-zu-Ende verschluesselt - nur Sie haben den Schluessel</li>
            </ul>
          </div>

          <p style={{ fontSize: 13, color: 'var(--bp-text-muted)' }}>
            Sie koennen den Erwartungshorizont auch spaeter hochladen.
          </p>
        </div>
        <div className="modal-footer">
          <button className="btn btn-secondary" onClick={onDismiss}>
            Spaeter
          </button>
          <button className="btn btn-primary" onClick={onUpload}>
            Jetzt hochladen
          </button>
        </div>
      </div>
    </div>
  )
}
