import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Pencil, Trash2, Plus, Save, X, ArrowLeft, TrendingUp } from 'lucide-react'
import { api } from '../utils/api'

/**
 * AdminActivityMappingsPage - Manage activity_type → training_type mappings
 * v9d Phase 1b - Learnable system (replaces hardcoded mappings)
 */
export default function AdminActivityMappingsPage() {
  const nav = useNavigate()
  const [mappings, setMappings] = useState([])
  const [trainingTypes, setTrainingTypes] = useState([])
  const [coverage, setCoverage] = useState(null)
  const [loading, setLoading] = useState(true)
  const [editingId, setEditingId] = useState(null)
  const [formData, setFormData] = useState(null)
  const [error, setError] = useState(null)
  const [saving, setSaving] = useState(false)
  const [filter, setFilter] = useState('all') // 'all', 'global', 'user'

  useEffect(() => {
    load()
  }, [filter])

  const load = () => {
    setLoading(true)
    Promise.all([
      api.adminListActivityMappings(null, filter === 'global'),
      api.listTrainingTypesFlat(),
      api.adminGetMappingCoverage()
    ]).then(([mappingsData, typesData, coverageData]) => {
      setMappings(mappingsData)
      setTrainingTypes(typesData)
      setCoverage(coverageData)
      setLoading(false)
    }).catch(err => {
      console.error('Failed to load mappings:', err)
      setError(err.message)
      setLoading(false)
    })
  }

  const startCreate = () => {
    setFormData({
      activity_type: '',
      training_type_id: trainingTypes[0]?.id || null,
      profile_id: '',
      source: 'admin'
    })
    setEditingId('new')
  }

  const startEdit = (mapping) => {
    setFormData({
      activity_type: mapping.activity_type,
      training_type_id: mapping.training_type_id,
      profile_id: mapping.profile_id || '',
      source: mapping.source
    })
    setEditingId(mapping.id)
  }

  const cancelEdit = () => {
    setEditingId(null)
    setFormData(null)
    setError(null)
  }

  const handleSave = async () => {
    if (!formData.activity_type || !formData.training_type_id) {
      setError('Activity Type und Training Type sind Pflichtfelder')
      return
    }

    setSaving(true)
    setError(null)

    try {
      const payload = {
        ...formData,
        profile_id: formData.profile_id || null
      }

      if (editingId === 'new') {
        await api.adminCreateActivityMapping(payload)
      } else {
        await api.adminUpdateActivityMapping(editingId, {
          training_type_id: payload.training_type_id,
          profile_id: payload.profile_id,
          source: payload.source
        })
      }
      await load()
      cancelEdit()
    } catch (err) {
      console.error('Save failed:', err)
      setError(err.message)
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async (id, activityType) => {
    if (!confirm(`Mapping für "${activityType}" wirklich löschen?\n\nZukünftige Imports werden diesen Typ nicht mehr automatisch zuordnen.`)) {
      return
    }

    try {
      await api.adminDeleteActivityMapping(id)
      await load()
    } catch (err) {
      alert('Löschen fehlgeschlagen: ' + err.message)
    }
  }

  if (loading) {
    return (
      <div style={{ padding: 20, textAlign: 'center' }}>
        <div className="spinner" style={{ width: 32, height: 32, margin: '0 auto' }} />
      </div>
    )
  }

  const coveragePercent = coverage ? Math.round((coverage.mapped_activities / coverage.total_activities) * 100) : 0

  return (
    <div style={{ padding: '16px 16px 80px' }}>
      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', gap: 12 }}>
        <button
          onClick={() => nav('/settings')}
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: 6,
            display: 'flex',
            color: 'var(--text2)'
          }}
        >
          <ArrowLeft size={20} />
        </button>
        <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>Activity-Mappings</h1>
      </div>

      {error && (
        <div className="card" style={{ padding: 12, marginBottom: 16, background: '#FCEBEB', color: '#D85A30' }}>
          {error}
        </div>
      )}

      {/* Coverage Stats */}
      {coverage && (
        <div className="card" style={{ padding: 16, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <TrendingUp size={16} color="var(--accent)" />
            <div style={{ fontWeight: 600, fontSize: 14 }}>Mapping-Abdeckung</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, fontSize: 12 }}>
            <div style={{ textAlign: 'center', padding: 8, background: 'var(--surface)', borderRadius: 6 }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>{coveragePercent}%</div>
              <div style={{ color: 'var(--text3)' }}>Zugeordnet</div>
            </div>
            <div style={{ textAlign: 'center', padding: 8, background: 'var(--surface)', borderRadius: 6 }}>
              <div style={{ fontSize: 18, fontWeight: 700 }}>{coverage.mapped_activities}</div>
              <div style={{ color: 'var(--text3)' }}>Mit Typ</div>
            </div>
            <div style={{ textAlign: 'center', padding: 8, background: 'var(--surface)', borderRadius: 6 }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: '#D85A30' }}>{coverage.unmapped_activities}</div>
              <div style={{ color: 'var(--text3)' }}>Ohne Typ</div>
            </div>
          </div>
          <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text3)' }}>
            {coverage.unmapped_types} verschiedene Activity-Types noch nicht gemappt
          </div>
        </div>
      )}

      {/* Filter */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        <button
          onClick={() => setFilter('all')}
          className={filter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'}
          style={{ flex: 1, fontSize: 12 }}
        >
          Alle ({mappings.length})
        </button>
        <button
          onClick={() => setFilter('global')}
          className={filter === 'global' ? 'btn btn-primary' : 'btn btn-secondary'}
          style={{ flex: 1, fontSize: 12 }}
        >
          Global
        </button>
      </div>

      {/* Create new button */}
      {!editingId && (
        <button
          onClick={startCreate}
          className="btn btn-primary btn-full"
          style={{ marginBottom: 16 }}
        >
          <Plus size={16} /> Neues Mapping anlegen
        </button>
      )}

      {/* Edit form */}
      {editingId && formData && (
        <div className="card" style={{ padding: 16, marginBottom: 16 }}>
          <div style={{ fontWeight: 600, marginBottom: 12 }}>
            {editingId === 'new' ? '➕ Neues Mapping' : '✏️ Mapping bearbeiten'}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <div className="form-label">Activity Type * (exakt wie in CSV)</div>
              <input
                className="form-input"
                value={formData.activity_type}
                onChange={e => setFormData({ ...formData, activity_type: e.target.value })}
                placeholder="z.B. Traditionelles Krafttraining"
                disabled={editingId !== 'new'}
                style={{ width: '100%' }}
              />
              <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
                Groß-/Kleinschreibung beachten! Muss exakt mit CSV übereinstimmen.
              </div>
            </div>

            <div>
              <div className="form-label">Training Type *</div>
              <select
                className="form-input"
                value={formData.training_type_id}
                onChange={e => setFormData({ ...formData, training_type_id: parseInt(e.target.value) })}
                style={{ width: '100%' }}
              >
                {trainingTypes.map(type => (
                  <option key={type.id} value={type.id}>
                    {type.icon} {type.name_de} ({type.category})
                  </option>
                ))}
              </select>
            </div>

            <div>
              <div className="form-label">Profil-ID (leer = global)</div>
              <input
                className="form-input"
                value={formData.profile_id}
                onChange={e => setFormData({ ...formData, profile_id: e.target.value })}
                placeholder="Leer lassen für globales Mapping"
                style={{ width: '100%' }}
              />
              <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
                Global = für alle User, sonst user-spezifisch
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
              <button
                onClick={handleSave}
                disabled={saving}
                className="btn btn-primary"
                style={{ flex: 1 }}
              >
                {saving ? (
                  <>
                    <div className="spinner" style={{ width: 14, height: 14 }} />
                    Speichere...
                  </>
                ) : (
                  <>
                    <Save size={16} /> Speichern
                  </>
                )}
              </button>
              <button
                onClick={cancelEdit}
                disabled={saving}
                className="btn btn-secondary"
                style={{ flex: 1 }}
              >
                <X size={16} /> Abbrechen
              </button>
            </div>
          </div>
        </div>
      )}

      {/* List */}
      {mappings.length === 0 ? (
        <div className="card" style={{ padding: 40, textAlign: 'center', color: 'var(--text3)' }}>
          Keine Mappings gefunden
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {mappings.map(mapping => (
            <div
              key={mapping.id}
              className="card"
              style={{ padding: 12 }}
            >
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8
              }}>
                <div style={{ fontSize: 18 }}>{mapping.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>
                    {mapping.activity_type}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--text3)' }}>
                    → {mapping.training_type_name_de}
                    {mapping.profile_id && <> · User-spezifisch</>}
                    {!mapping.profile_id && <> · Global</>}
                    {mapping.source && <> · {mapping.source}</>}
                  </div>
                </div>
                <button
                  onClick={() => startEdit(mapping)}
                  style={{
                    background: 'none',
                    border: 'none',
                    cursor: 'pointer',
                    padding: 6,
                    color: 'var(--accent)'
                  }}
                  title="Bearbeiten"
                >
                  <Pencil size={16} />
                </button>
                <button
                  onClick={() => handleDelete(mapping.id, mapping.activity_type)}
                  style={{
                    background: 'none',
                    border: 'none',
                    cursor: 'pointer',
                    padding: 6,
                    color: '#D85A30'
                  }}
                  title="Löschen"
                >
                  <Trash2 size={16} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      <div style={{
        marginTop: 20,
        padding: 12,
        background: 'var(--surface2)',
        borderRadius: 8,
        fontSize: 12,
        color: 'var(--text3)'
      }}>
        <strong>💡 Tipp:</strong> Das System lernt automatisch! Wenn du im Tab "Kategorisieren" Aktivitäten zuordnest, wird das Mapping gespeichert und beim nächsten Import automatisch angewendet.
      </div>
    </div>
  )
}