/**
 * EH Upload Wizard Steps - Individual step content renderers
 */


interface EHMetadata {
  title: string
  subject: string
  niveau: 'eA' | 'gA'
  year: number
  aufgaben_nummer?: string
}

const SUBJECTS = [
  'deutsch', 'englisch', 'mathematik', 'physik', 'chemie', 'biologie',
  'geschichte', 'politik', 'erdkunde', 'kunst', 'musik', 'sport',
  'informatik', 'latein', 'franzoesisch', 'spanisch'
]

const RIGHTS_TEXT = `Ich bestaetige hiermit, dass:

1. Ich das Urheberrecht oder die notwendigen Nutzungsrechte an diesem
   Erwartungshorizont besitze.

2. Breakpilot diesen Erwartungshorizont NICHT fuer KI-Training verwendet,
   sondern ausschliesslich fuer RAG-gestuetzte Korrekturvorschlaege
   in meinem persoenlichen Arbeitsbereich.

3. Der Inhalt verschluesselt gespeichert wird und Breakpilot-Mitarbeiter
   keinen Zugriff auf den Klartext haben.

4. Ich diesen Erwartungshorizont jederzeit loeschen kann.`

// Step 1: File Selection
export function FileStep({ selectedFile, fileError, encryptionSupported, onFileSelect }: {
  selectedFile: File | null; fileError: string | null; encryptionSupported: boolean;
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void
}) {
  return (
    <div className="eh-wizard-step">
      <h3>Erwartungshorizont hochladen</h3>
      <p className="eh-wizard-description">Waehlen Sie die PDF-Datei Ihres Erwartungshorizonts aus. Die Datei wird verschluesselt und kann nur von Ihnen entschluesselt werden.</p>
      <div className="eh-file-drop">
        <input type="file" accept=".pdf" onChange={onFileSelect} id="eh-file-input" />
        <label htmlFor="eh-file-input" className="eh-file-label">
          {selectedFile ? (<><span className="eh-file-icon">&#128196;</span><span className="eh-file-name">{selectedFile.name}</span><span className="eh-file-size">({(selectedFile.size / 1024 / 1024).toFixed(2)} MB)</span></>) : (<><span className="eh-file-icon">&#128194;</span><span>PDF-Datei hier ablegen oder klicken</span></>)}
        </label>
      </div>
      {fileError && <p className="eh-error">{fileError}</p>}
      {!encryptionSupported && <p className="eh-warning">Ihr Browser unterstuetzt keine Verschluesselung. Bitte verwenden Sie einen modernen Browser.</p>}
    </div>
  )
}

// Step 2: Metadata
export function MetadataStep({ metadata, onMetadataChange }: {
  metadata: EHMetadata; onMetadataChange: (metadata: EHMetadata) => void
}) {
  return (
    <div className="eh-wizard-step">
      <h3>Metadaten</h3>
      <p className="eh-wizard-description">Geben Sie Informationen zum Erwartungshorizont ein.</p>
      <div className="eh-form-group">
        <label htmlFor="eh-title">Titel *</label>
        <input id="eh-title" type="text" value={metadata.title} onChange={e => onMetadataChange({ ...metadata, title: e.target.value })} placeholder="z.B. Deutsch Abitur 2024 Aufgabe 1" />
      </div>
      <div className="eh-form-row">
        <div className="eh-form-group">
          <label htmlFor="eh-subject">Fach *</label>
          <select id="eh-subject" value={metadata.subject} onChange={e => onMetadataChange({ ...metadata, subject: e.target.value })}>
            {SUBJECTS.map(s => (<option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>))}
          </select>
        </div>
        <div className="eh-form-group">
          <label htmlFor="eh-niveau">Niveau *</label>
          <select id="eh-niveau" value={metadata.niveau} onChange={e => onMetadataChange({ ...metadata, niveau: e.target.value as 'eA' | 'gA' })}>
            <option value="eA">Erhoehtes Anforderungsniveau (eA)</option>
            <option value="gA">Grundlegendes Anforderungsniveau (gA)</option>
          </select>
        </div>
      </div>
      <div className="eh-form-row">
        <div className="eh-form-group">
          <label htmlFor="eh-year">Jahr *</label>
          <input id="eh-year" type="number" min={2000} max={2050} value={metadata.year} onChange={e => onMetadataChange({ ...metadata, year: parseInt(e.target.value) })} />
        </div>
        <div className="eh-form-group">
          <label htmlFor="eh-aufgabe">Aufgabennummer</label>
          <input id="eh-aufgabe" type="text" value={metadata.aufgaben_nummer || ''} onChange={e => onMetadataChange({ ...metadata, aufgaben_nummer: e.target.value })} placeholder="z.B. 1a, 2.1" />
        </div>
      </div>
    </div>
  )
}

// Step 3: Rights Confirmation
export function RightsStep({ rightsConfirmed, onRightsConfirmedChange }: {
  rightsConfirmed: boolean; onRightsConfirmedChange: (confirmed: boolean) => void
}) {
  return (
    <div className="eh-wizard-step">
      <h3>Rechte-Bestaetigung</h3>
      <p className="eh-wizard-description">Bitte lesen und bestaetigen Sie die folgenden Bedingungen.</p>
      <div className="eh-rights-box"><pre>{RIGHTS_TEXT}</pre></div>
      <div className="eh-checkbox-group">
        <input type="checkbox" id="eh-rights-confirm" checked={rightsConfirmed} onChange={e => onRightsConfirmedChange(e.target.checked)} />
        <label htmlFor="eh-rights-confirm">Ich habe die Bedingungen gelesen und stimme ihnen zu.</label>
      </div>
      <div className="eh-info-box"><strong>Wichtig:</strong> Ihr Erwartungshorizont wird niemals fuer KI-Training verwendet. Er dient ausschliesslich als Referenz fuer Ihre persoenlichen Korrekturvorschlaege.</div>
    </div>
  )
}

// Step 4: Encryption
export function EncryptionStep({ passphrase, passphraseConfirm, showPassphrase, passphraseStrength, onPassphraseChange, onPassphraseConfirmChange, onToggleShow }: {
  passphrase: string; passphraseConfirm: string; showPassphrase: boolean;
  passphraseStrength: 'weak' | 'medium' | 'strong';
  onPassphraseChange: (v: string) => void; onPassphraseConfirmChange: (v: string) => void; onToggleShow: () => void
}) {
  return (
    <div className="eh-wizard-step">
      <h3>Verschluesselung</h3>
      <p className="eh-wizard-description">Waehlen Sie ein sicheres Passwort fuer Ihren Erwartungshorizont. Dieses Passwort wird <strong>niemals</strong> an den Server gesendet.</p>
      <div className="eh-form-group">
        <label htmlFor="eh-passphrase">Passwort *</label>
        <div className="eh-password-input">
          <input id="eh-passphrase" type={showPassphrase ? 'text' : 'password'} value={passphrase} onChange={e => onPassphraseChange(e.target.value)} placeholder="Mindestens 8 Zeichen" />
          <button type="button" className="eh-toggle-password" onClick={onToggleShow}>{showPassphrase ? '&#128065;' : '&#128064;'}</button>
        </div>
        <div className={`eh-password-strength eh-strength-${passphraseStrength}`}>Staerke: {passphraseStrength === 'weak' ? 'Schwach' : passphraseStrength === 'medium' ? 'Mittel' : 'Stark'}</div>
      </div>
      <div className="eh-form-group">
        <label htmlFor="eh-passphrase-confirm">Passwort bestaetigen *</label>
        <input id="eh-passphrase-confirm" type={showPassphrase ? 'text' : 'password'} value={passphraseConfirm} onChange={e => onPassphraseConfirmChange(e.target.value)} placeholder="Passwort wiederholen" />
        {passphraseConfirm && passphrase !== passphraseConfirm && <p className="eh-error">Passwoerter stimmen nicht ueberein</p>}
      </div>
      <div className="eh-warning-box"><strong>Achtung:</strong> Merken Sie sich dieses Passwort gut! Ohne das Passwort kann der Erwartungshorizont nicht fuer Korrekturvorschlaege verwendet werden.</div>
    </div>
  )
}

// Step 5: Summary
export function SummaryStep({ selectedFile, metadata, uploading, uploadProgress, uploadError }: {
  selectedFile: File | null; metadata: EHMetadata; uploading: boolean;
  uploadProgress: number; uploadError: string | null
}) {
  return (
    <div className="eh-wizard-step">
      <h3>Zusammenfassung</h3>
      <p className="eh-wizard-description">Pruefen Sie Ihre Eingaben und starten Sie den Upload.</p>
      <div className="eh-summary-table">
        <div className="eh-summary-row"><span className="eh-summary-label">Datei:</span><span className="eh-summary-value">{selectedFile?.name}</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Titel:</span><span className="eh-summary-value">{metadata.title}</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Fach:</span><span className="eh-summary-value">{metadata.subject.charAt(0).toUpperCase() + metadata.subject.slice(1)}</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Niveau:</span><span className="eh-summary-value">{metadata.niveau}</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Jahr:</span><span className="eh-summary-value">{metadata.year}</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Verschluesselung:</span><span className="eh-summary-value">AES-256-GCM</span></div>
        <div className="eh-summary-row"><span className="eh-summary-label">Rechte bestaetigt:</span><span className="eh-summary-value">Ja</span></div>
      </div>
      {uploading && (<div className="eh-upload-progress"><div className="eh-progress-bar" style={{ width: `${uploadProgress}%` }} /><span>{uploadProgress}%</span></div>)}
      {uploadError && <p className="eh-error">{uploadError}</p>}
    </div>
  )
}

export { SUBJECTS, RIGHTS_TEXT }
export type { EHMetadata }
