/**
 * P-06: Einwilligungsdialog vor Medien-Uploads und Sichtbarkeits-Promotionen.
 * VORLÄUFIG – Texte noch nicht juristisch geprüft (p06-v1-conservative).
 */
import React, { useState } from 'react'

const INITIAL = {
  copyright_notice: '',
  rights_holder_confirmed: false,
  contains_identifiable_persons: null,
  person_consent_confirmed: false,
  person_consent_context: '',
  contains_minors: null,
  parental_consent_confirmed: false,
  parental_consent_context: '',
  contains_music: null,
  music_rights_confirmed: false,
  music_rights_context: '',
  contains_third_party_content: null,
  third_party_rights_confirmed: false,
  third_party_rights_context: '',
}

/**
 * @param {object} props
 * @param {boolean} props.open
 * @param {function} props.onCancel
 * @param {function(decl: object): void} props.onConfirm
 * @param {string} [props.targetVisibility]  - 'private'|'club'|'official'
 * @param {boolean} [props.isPromotion]      - true wenn Promotion (nicht Erstupload)
 * @param {string} [props.mode]              - 'upload'|'promotion'|'redeclaration'
 */
export default function RightsDeclarationDialog({
  open,
  onCancel,
  onConfirm,
  targetVisibility = 'private',
  isPromotion = false,
  mode = 'upload',
}) {
  const [decl, setDecl] = useState({ ...INITIAL })
  const [error, setError] = useState('')

  if (!open) return null

  const setField = (key, val) => setDecl((d) => ({ ...d, [key]: val }))

  const validate = () => {
    if (!decl.rights_holder_confirmed)
      return 'Bitte bestätigen, dass du die erforderlichen Rechte an diesem Medium besitzt.'
    if (decl.contains_identifiable_persons === null)
      return 'Bitte angeben, ob erkennbare Personen abgebildet sind.'
    if (decl.contains_identifiable_persons && !decl.person_consent_confirmed)
      return 'Bitte bestätigen, dass die Einwilligungen aller erkennbaren Personen vorliegen.'
    if (decl.contains_minors === null)
      return 'Bitte angeben, ob Minderjährige abgebildet sind.'
    if (decl.contains_minors && !decl.parental_consent_confirmed)
      return 'Bitte bestätigen, dass die Einwilligungen der Sorgeberechtigten vorliegen.'
    if (decl.contains_music === null)
      return 'Bitte angeben, ob das Medium Musik enthält.'
    if (decl.contains_music && !decl.music_rights_confirmed)
      return 'Bitte bestätigen, dass die erforderlichen Musikrechte vorliegen.'
    if (decl.contains_third_party_content === null)
      return 'Bitte angeben, ob fremde geschützte Inhalte enthalten sind.'
    if (decl.contains_third_party_content && !decl.third_party_rights_confirmed)
      return 'Bitte bestätigen, dass die Rechte an allen enthaltenen Fremdmaterialien vorliegen.'
    return ''
  }

  const handleConfirm = () => {
    const err = validate()
    if (err) { setError(err); return }
    setError('')
    onConfirm({ ...decl })
    setDecl({ ...INITIAL })
  }

  const handleCancel = () => {
    setDecl({ ...INITIAL })
    setError('')
    onCancel()
  }

  const visLabel = { private: 'privat', club: 'Verein', official: 'offiziell' }[targetVisibility] || targetVisibility

  const titleMap = {
    upload: 'Rechte-Erklärung – Upload',
    promotion: `Rechte-Erklärung – Freigabe für „${visLabel}"`,
    redeclaration: 'Rechte-Erklärung – Nachdeklaration',
  }

  return (
    <div className="admin-modal-backdrop" role="presentation" onClick={(e) => e.target === e.currentTarget && handleCancel()}>
      <div
        className="admin-modal-sheet"
        role="dialog"
        aria-modal="true"
        aria-labelledby="rights-decl-title"
        style={{ maxWidth: '520px', width: '100%', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="admin-modal-sheet__header">
          <h3 id="rights-decl-title" className="admin-modal-sheet__title">
            {titleMap[mode] || titleMap.upload}
          </h3>
          <button type="button" className="admin-modal-sheet__close" onClick={handleCancel} aria-label="Schließen">
            ×
          </button>
        </div>

        <div style={{ overflowY: 'auto', flex: 1, padding: '14px 16px' }}>
          <p style={{ fontSize: '0.82rem', color: 'var(--text3)', marginBottom: 14 }}>
            VORLÄUFIG – Texte noch nicht juristisch geprüft (p06-v1-conservative).
            {isPromotion && (
              <> Die bestehende Erklärung gilt nicht für die Sichtbarkeit „{visLabel}". Bitte erneut bestätigen.</>
            )}
          </p>

          {/* Copyright */}
          <div style={{ marginBottom: 14 }}>
            <label htmlFor="rdlg-cr" style={{ display: 'block', fontSize: '0.85rem', fontWeight: 600, marginBottom: 4 }}>
              Copyright-Angabe (optional)
            </label>
            <input
              id="rdlg-cr"
              type="text"
              className="form-input"
              placeholder="z.B. © 2026 Lars Stommer, CC BY-NC"
              value={decl.copyright_notice}
              onChange={(e) => setField('copyright_notice', e.target.value)}
              style={{ fontSize: '0.9rem' }}
            />
          </div>

          {/* T1: Rechteinhaber */}
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 14 }}>
            <input
              type="checkbox"
              id="rdlg-rhc"
              checked={decl.rights_holder_confirmed}
              onChange={(e) => setField('rights_holder_confirmed', e.target.checked)}
              style={{ marginTop: 3, flexShrink: 0 }}
            />
            <label htmlFor="rdlg-rhc" style={{ fontSize: '0.9rem' }}>
              Ich bestätige, dass ich die erforderlichen Urheber- und Nutzungsrechte an diesem Medium besitze
              oder rechtmäßig zur Veröffentlichung berechtigt bin. *
            </label>
          </div>

          {/* T2 / T3: Personen */}
          <fieldset style={{ border: 'none', padding: 0, marginBottom: 14 }}>
            <legend style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: 6 }}>Erkennbare Personen abgebildet? *</legend>
            <div style={{ display: 'flex', gap: 16, marginBottom: 6 }}>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cip" checked={decl.contains_identifiable_persons === true}
                  onChange={() => setField('contains_identifiable_persons', true)} /> Ja
              </label>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cip" checked={decl.contains_identifiable_persons === false}
                  onChange={() => setField('contains_identifiable_persons', false)} /> Nein
              </label>
            </div>
            {decl.contains_identifiable_persons === true && (
              <div style={{ paddingLeft: 4 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                  <input type="checkbox" id="rdlg-pcc" checked={decl.person_consent_confirmed}
                    onChange={(e) => setField('person_consent_confirmed', e.target.checked)}
                    style={{ marginTop: 3, flexShrink: 0 }} />
                  <label htmlFor="rdlg-pcc" style={{ fontSize: '0.9rem' }}>
                    Einwilligungen aller erkennbaren Personen liegen vor. *
                  </label>
                </div>
                <label style={{ display: 'block', fontSize: '0.82rem', color: 'var(--text2)', marginBottom: 3 }}>
                  Einwilligungskontext (optional)
                </label>
                <textarea
                  className="form-input"
                  rows={2}
                  placeholder="z.B. Schriftliche Einwilligung vom 2026-05-01, im Archiv abgelegt"
                  value={decl.person_consent_context}
                  onChange={(e) => setField('person_consent_context', e.target.value)}
                  style={{ fontSize: '0.85rem', resize: 'vertical' }}
                />
              </div>
            )}
          </fieldset>

          {/* T4 / T5: Minderjährige */}
          <fieldset style={{ border: 'none', padding: 0, marginBottom: 14 }}>
            <legend style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: 6 }}>Minderjährige abgebildet? *</legend>
            <div style={{ display: 'flex', gap: 16, marginBottom: 6 }}>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cm" checked={decl.contains_minors === true}
                  onChange={() => setField('contains_minors', true)} /> Ja
              </label>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cm" checked={decl.contains_minors === false}
                  onChange={() => setField('contains_minors', false)} /> Nein
              </label>
            </div>
            {decl.contains_minors === true && (
              <div style={{ paddingLeft: 4 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                  <input type="checkbox" id="rdlg-pcc2" checked={decl.parental_consent_confirmed}
                    onChange={(e) => setField('parental_consent_confirmed', e.target.checked)}
                    style={{ marginTop: 3, flexShrink: 0 }} />
                  <label htmlFor="rdlg-pcc2" style={{ fontSize: '0.9rem' }}>
                    Einwilligungen der Sorgeberechtigten liegen vor. *
                  </label>
                </div>
                <label style={{ display: 'block', fontSize: '0.82rem', color: 'var(--text2)', marginBottom: 3 }}>
                  Einwilligungskontext (optional)
                </label>
                <textarea
                  className="form-input"
                  rows={2}
                  placeholder="z.B. Elterliche Einwilligung per E-Mail vom 2026-04-15 erhalten"
                  value={decl.parental_consent_context}
                  onChange={(e) => setField('parental_consent_context', e.target.value)}
                  style={{ fontSize: '0.85rem', resize: 'vertical' }}
                />
              </div>
            )}
          </fieldset>

          {/* T6 / T7: Musik */}
          <fieldset style={{ border: 'none', padding: 0, marginBottom: 14 }}>
            <legend style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: 6 }}>Musik enthalten? *</legend>
            <div style={{ display: 'flex', gap: 16, marginBottom: 6 }}>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cmu" checked={decl.contains_music === true}
                  onChange={() => setField('contains_music', true)} /> Ja
              </label>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-cmu" checked={decl.contains_music === false}
                  onChange={() => setField('contains_music', false)} /> Nein
              </label>
            </div>
            {decl.contains_music === true && (
              <div style={{ paddingLeft: 4 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                  <input type="checkbox" id="rdlg-mrc" checked={decl.music_rights_confirmed}
                    onChange={(e) => setField('music_rights_confirmed', e.target.checked)}
                    style={{ marginTop: 3, flexShrink: 0 }} />
                  <label htmlFor="rdlg-mrc" style={{ fontSize: '0.9rem' }}>
                    Musikrechte (GEMA / Lizenz) liegen vor. *
                  </label>
                </div>
                <label style={{ display: 'block', fontSize: '0.82rem', color: 'var(--text2)', marginBottom: 3 }}>
                  Lizenz / GEMA-Kontext (optional)
                </label>
                <textarea
                  className="form-input"
                  rows={2}
                  placeholder="z.B. Creative Commons BY 4.0, Lizenz-Nr. oder GEMA-Freimeldung"
                  value={decl.music_rights_context}
                  onChange={(e) => setField('music_rights_context', e.target.value)}
                  style={{ fontSize: '0.85rem', resize: 'vertical' }}
                />
              </div>
            )}
          </fieldset>

          {/* T8 / T9: Fremdinhalte */}
          <fieldset style={{ border: 'none', padding: 0, marginBottom: 4 }}>
            <legend style={{ fontSize: '0.9rem', fontWeight: 600, marginBottom: 6 }}>Fremde geschützte Inhalte (Logos, Grafiken, Fotos Dritter)? *</legend>
            <div style={{ display: 'flex', gap: 16, marginBottom: 6 }}>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-ctpc" checked={decl.contains_third_party_content === true}
                  onChange={() => setField('contains_third_party_content', true)} /> Ja
              </label>
              <label style={{ fontSize: '0.9rem' }}>
                <input type="radio" name="rdlg-ctpc" checked={decl.contains_third_party_content === false}
                  onChange={() => setField('contains_third_party_content', false)} /> Nein
              </label>
            </div>
            {decl.contains_third_party_content === true && (
              <div style={{ paddingLeft: 4 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                  <input type="checkbox" id="rdlg-tprc" checked={decl.third_party_rights_confirmed}
                    onChange={(e) => setField('third_party_rights_confirmed', e.target.checked)}
                    style={{ marginTop: 3, flexShrink: 0 }} />
                  <label htmlFor="rdlg-tprc" style={{ fontSize: '0.9rem' }}>
                    Rechte an allen enthaltenen Fremdmaterialien liegen vor. *
                  </label>
                </div>
                <label style={{ display: 'block', fontSize: '0.82rem', color: 'var(--text2)', marginBottom: 3 }}>
                  Rechtsgrundlage (optional)
                </label>
                <textarea
                  className="form-input"
                  rows={2}
                  placeholder="z.B. Verbandslogo mit Genehmigung vom 2026-03-10, Lizenz-Nr. …"
                  value={decl.third_party_rights_context}
                  onChange={(e) => setField('third_party_rights_context', e.target.value)}
                  style={{ fontSize: '0.85rem', resize: 'vertical' }}
                />
              </div>
            )}
          </fieldset>

          {error && (
            <p style={{ color: 'var(--danger)', fontSize: '0.85rem', marginTop: 12 }}>{error}</p>
          )}
        </div>

        <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border)', flexShrink: 0, display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" type="button" onClick={handleCancel}>
            Abbrechen
          </button>
          <button className="btn btn-primary" type="button" onClick={handleConfirm}>
            Bestätigen &amp; hochladen
          </button>
        </div>
      </div>
    </div>
  )
}
