import React, { useEffect, useMemo, useState } from 'react'
import api from '../../utils/api'

function downloadJson(obj, filename) {
  const blob = new Blob([JSON.stringify(obj, null, 2)], {
    type: 'application/json;charset=utf-8'
  })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

function groupModelSkills(model) {
  if (!model?.model_skills?.length) return []
  const groups = new Map()
  for (const ms of model.model_skills) {
    const main = ms.skill_main_category_name || '—'
    const sub = ms.skill_subcategory_name || '—'
    const k = `${main}\t${sub}`
    if (!groups.has(k)) groups.set(k, { main, sub, skills: [] })
    groups.get(k).skills.push(ms)
  }
  return Array.from(groups.values())
}

function cellMapForSkill(model, skillId) {
  const m = {}
  for (const sl of model.skill_levels || []) {
    if (Number(sl.skill_id) === Number(skillId)) {
      m[sl.level_number] = sl
    }
  }
  return m
}

export default function MaturityMatrixToolsAdmin() {
  const [focusAreas, setFocusAreas] = useState([])
  const [styles, setStyles] = useState([])
  const [trainingTypes, setTrainingTypes] = useState([])
  const [models, setModels] = useState([])
  const [focusId, setFocusId] = useState('')
  const [styleId, setStyleId] = useState('')
  const [typeId, setTypeId] = useState('')
  const [matrix, setMatrix] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [message, setMessage] = useState('')
  const [importMode, setImportMode] = useState('create')
  const [replaceModelId, setReplaceModelId] = useState('')
  const [exportModelId, setExportModelId] = useState('')
  const [importBindings, setImportBindings] = useState(true)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const [fa, sd, tt, m] = await Promise.all([
          api.listFocusAreas({}),
          api.listStyleDirections({}),
          api.listTrainingTypes({}),
          api.listMaturityModels({})
        ])
        if (!cancelled) {
          setFocusAreas(fa)
          setStyles(sd)
          setTrainingTypes(tt)
          setModels(m)
        }
      } catch (e) {
        if (!cancelled) setError(e.message || String(e))
      }
    })()
    return () => {
      cancelled = true
    }
  }, [])

  const groups = useMemo(() => (matrix ? groupModelSkills(matrix) : []), [matrix])
  const levels = matrix?.levels || []

  async function handleResolve() {
    if (!focusId) {
      setError('Fokusbereich wählen.')
      return
    }
    setLoading(true)
    setError('')
    setMessage('')
    setMatrix(null)
    try {
      const params = { focus_area_id: focusId }
      if (styleId) params.style_direction_id = styleId
      if (typeId) params.training_type_id = typeId
      const m = await api.resolveMaturityModel(params)
      setMatrix(m)
      if (!m) setError('Keine Matrix für diesen Kontext.')
      else setMessage('Matrix geladen.')
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setLoading(false)
    }
  }

  async function handleExportResolved() {
    if (!focusId) {
      setError('Fokusbereich wählen.')
      return
    }
    setError('')
    setMessage('')
    try {
      const params = { focus_area_id: focusId }
      if (styleId) params.style_direction_id = styleId
      if (typeId) params.training_type_id = typeId
      const bundle = await api.exportResolvedMaturityBundle(params)
      downloadJson(bundle, 'faehigkeitsmatrix-aufgeloest.json')
      setMessage('Export gestartet (Download).')
    } catch (e) {
      setError(e.message || String(e))
    }
  }

  async function handleExportStored() {
    if (!exportModelId) {
      setError('Modell für Export auswählen.')
      return
    }
    setError('')
    setMessage('')
    try {
      const bundle = await api.exportMaturityModelBundle(parseInt(exportModelId, 10))
      downloadJson(bundle, `reifegradmodell-${exportModelId}.json`)
      setMessage('Export gestartet (Download).')
    } catch (e) {
      setError(e.message || String(e))
    }
  }

  async function handleImportFile(e) {
    const file = e.target.files?.[0]
    if (!file) return
    setError('')
    setMessage('')
    try {
      const data = JSON.parse(await file.text())
      const payload = { ...data, mode: importMode, import_bindings: importBindings }
      if (importMode === 'replace') {
        if (!replaceModelId) {
          setError('Bei „Ersetzen“ die Ziel-Modell-ID angeben.')
          e.target.value = ''
          return
        }
        payload.replace_model_id = parseInt(replaceModelId, 10)
      }
      const res = await api.importMaturityModelBundle(payload)
      setMessage(`Import erfolgreich. Modell-ID: ${res.id}`)
      setModels(await api.listMaturityModels({}))
    } catch (err) {
      setError(err.message || String(err))
    } finally {
      e.target.value = ''
    }
  }

  return (
    <div className="admin-matrix-tools">
      <p className="admin-matrix-tools__intro muted">
        Matrix nach Kontext auflösen, hierarchisch nach Hauptkategorie und Kategorie darstellen, sowie JSON
        exportieren oder importieren (gespeichertes Modell inkl. optional Kontext-Bindings, oder aufgelöste Matrix).
      </p>

      {error ? (
        <div className="skills-catalog-admin__error" role="alert">
          {error}
        </div>
      ) : null}
      {message ? <p className="muted admin-matrix-tools__msg">{message}</p> : null}

      <section className="card admin-matrix-tools__section">
        <h2 className="admin-matrix-tools__h2">Kontext und Anzeige</h2>
        <div className="admin-matrix-tools__filters">
          <div>
            <label className="form-label">Fokusbereich</label>
            <select
              className="form-input"
              value={focusId}
              onChange={(e) => setFocusId(e.target.value)}
            >
              <option value="">— wählen —</option>
              {focusAreas.map((f) => (
                <option key={f.id} value={f.id}>
                  {f.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="form-label">Stilrichtung (optional)</label>
            <select
              className="form-input"
              value={styleId}
              onChange={(e) => setStyleId(e.target.value)}
            >
              <option value="">— alle / egal —</option>
              {styles.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="form-label">Trainingsstil (optional)</label>
            <select className="form-input" value={typeId} onChange={(e) => setTypeId(e.target.value)}>
              <option value="">— alle / egal —</option>
              {trainingTypes.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="admin-matrix-tools__actions">
          <button type="button" className="btn btn-primary" disabled={loading} onClick={handleResolve}>
            {loading ? 'Lade…' : 'Matrix auflösen & anzeigen'}
          </button>
          <button type="button" className="btn btn-secondary" onClick={handleExportResolved}>
            Aufgelöste Matrix exportieren (JSON)
          </button>
        </div>
        {matrix?.resolution ? (
          <p className="muted admin-matrix-tools__meta">
            Quelle:{' '}
            {matrix.resolution.merged
              ? `zusammengeführt aus Modell-IDs ${(matrix.resolution.source_model_ids || []).join(', ')}`
              : `Modell-ID ${matrix.id}`}
          </p>
        ) : null}
      </section>

      {matrix ? (
        <section className="card admin-matrix-tools__section admin-matrix-tools__visual">
          <h2 className="admin-matrix-tools__h2">
            {matrix.name}
            <span className="muted admin-matrix-tools__subtitle">
              {' '}
              · {matrix.level_count} Stufen · {matrix.model_skills?.length || 0} Fähigkeiten
            </span>
          </h2>
          {groups.map((g) => (
            <div key={`${g.main}-${g.sub}`} className="admin-matrix-visual-group">
              <h3 className="admin-matrix-visual-group__main">{g.main}</h3>
              <h4 className="admin-matrix-visual-group__sub">{g.sub}</h4>
              <div className="admin-matrix-visual-table-wrap">
                <table className="admin-matrix-visual-table">
                  <thead>
                    <tr>
                      <th className="admin-matrix-visual-table__skill">Fähigkeit</th>
                      {levels.map((lv) => (
                        <th key={lv.level_number} className="admin-matrix-visual-table__level">
                          <span className="admin-matrix-visual-table__ln">{lv.level_number}</span>
                          <span className="admin-matrix-visual-table__lname">{lv.name}</span>
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {g.skills.map((ms) => {
                      const cells = cellMapForSkill(matrix, ms.skill_id)
                      return (
                        <tr key={ms.skill_id}>
                          <td className="admin-matrix-visual-table__skill-cell">{ms.skill_name}</td>
                          {levels.map((lv) => {
                            const c = cells[lv.level_number]
                            return (
                              <td key={lv.level_number} className="admin-matrix-visual-table__cell">
                                {c ? (
                                  <>
                                    <div className="admin-matrix-visual-table__goal">
                                      {c.description || '—'}
                                    </div>
                                    {c.observable_criteria ? (
                                      <div className="admin-matrix-visual-table__obs muted">
                                        <strong>Beobachtung:</strong> {c.observable_criteria}
                                      </div>
                                    ) : null}
                                  </>
                                ) : (
                                  <span className="muted">—</span>
                                )}
                              </td>
                            )
                          })}
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          ))}
        </section>
      ) : null}

      <section className="card admin-matrix-tools__section">
        <h2 className="admin-matrix-tools__h2">Export / Import (JSON)</h2>
        <div className="admin-matrix-tools__io-grid">
          <div>
            <h3 className="admin-matrix-tools__h3">Gespeichertes Modell exportieren</h3>
            <p className="muted admin-matrix-tools__hint">
              Enthält Stufen, Fähigkeiten, Zelltexte und die dem Modell zugeordneten Kontext-Bindings.
            </p>
            <label className="form-label">Modell</label>
            <select
              className="form-input"
              value={exportModelId}
              onChange={(e) => setExportModelId(e.target.value)}
            >
              <option value="">— wählen —</option>
              {models.map((m) => (
                <option key={m.id} value={m.id}>
                  {m.name} ({m.status})
                </option>
              ))}
            </select>
            <button
              type="button"
              className="btn btn-secondary admin-matrix-tools__btn-mt"
              onClick={handleExportStored}
            >
              JSON herunterladen
            </button>
          </div>
          <div>
            <h3 className="admin-matrix-tools__h3">Import</h3>
            <p className="muted admin-matrix-tools__hint">
              Datei <code className="admin-bindings__code">shinkan.maturity_model.v1</code> oder{' '}
              <code className="admin-bindings__code">shinkan.maturity_matrix_resolved.v1</code>. Aufgelöste
              Matrizen legen ein neues Modell an bzw. ersetzen den Inhalt des Zielmodells (ohne Bindings).
            </p>
            <label className="form-label">Modus</label>
            <select
              className="form-input"
              value={importMode}
              onChange={(e) => setImportMode(e.target.value)}
            >
              <option value="create">Neues Modell anlegen</option>
              <option value="replace">Bestehendes Modell ersetzen (Matrix-Inhalt)</option>
            </select>
            {importMode === 'replace' ? (
              <>
                <label className="form-label">Ziel-Modell-ID</label>
                <input
                  className="form-input"
                  type="number"
                  inputMode="numeric"
                  value={replaceModelId}
                  onChange={(e) => setReplaceModelId(e.target.value)}
                  placeholder="z. B. 3"
                />
              </>
            ) : null}
            <label className="form-label admin-matrix-tools__check">
              <input
                type="checkbox"
                checked={importBindings}
                onChange={(e) => setImportBindings(e.target.checked)}
              />{' '}
              Kontext-Bindings mit importieren (nur bei <code className="admin-bindings__code">.maturity_model.v1</code>)
            </label>
            <label className="form-label">JSON-Datei</label>
            <input type="file" accept="application/json,.json" onChange={handleImportFile} />
          </div>
        </div>
      </section>
    </div>
  )
}