import { useState, useEffect } from 'react'
import { Settings, Plus, Pencil, Trash2, Database } from 'lucide-react'
import { api } from '../utils/api'
import EmojiIconPicker from '../components/EmojiIconPicker'

export default function AdminGoalTypesPage() {
  const [goalTypes, setGoalTypes] = useState([])
  const [schemaInfo, setSchemaInfo] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [showForm, setShowForm] = useState(false)
  const [editingType, setEditingType] = useState(null)
  const [toast, setToast] = useState(null)

  const [formData, setFormData] = useState({
    type_key: '',
    label_de: '',
    unit: '',
    icon: '',
    category: 'custom',
    source_table: '',
    source_column: '',
    aggregation_method: 'latest',
    filter_conditions: '',
    description: ''
  })

  const CATEGORIES = ['body', 'mind', 'activity', 'nutrition', 'recovery', 'custom']
  const AGGREGATION_METHODS = [
    { value: 'latest', label: 'Letzter Wert' },
    { value: 'avg_7d', label: 'Durchschnitt 7 Tage' },
    { value: 'avg_30d', label: 'Durchschnitt 30 Tage' },
    { value: 'sum_30d', label: 'Summe 30 Tage' },
    { value: 'count_7d', label: 'Anzahl 7 Tage' },
    { value: 'count_30d', label: 'Anzahl 30 Tage' },
    { value: 'min_30d', label: 'Minimum 30 Tage' },
    { value: 'max_30d', label: 'Maximum 30 Tage' },
    { value: 'avg_per_week_30d', label: 'Durchschnitt pro Woche (30d)' }
  ]

  useEffect(() => {
    loadGoalTypes()
  }, [])

  const loadGoalTypes = async () => {
    setLoading(true)
    setError(null)
    try {
      const [typesData, schema] = await Promise.all([
        api.listGoalTypeDefinitions(),
        api.getSchemaInfo()
      ])
      console.log('[DEBUG] Loaded goal types:', typesData)
      console.log('[DEBUG] Loaded schema info:', schema)
      setGoalTypes(typesData || [])
      setSchemaInfo(schema || {})
    } catch (err) {
      console.error('[ERROR] Failed to load goal types:', err)
      setError(`Fehler beim Laden der Goal Types: ${err.message || err.toString()}`)
    } finally {
      setLoading(false)
    }
  }

  const showToast = (message) => {
    setToast(message)
    setTimeout(() => setToast(null), 2000)
  }

  const handleCreate = () => {
    setEditingType(null)
    setFormData({
      type_key: '',
      label_de: '',
      unit: '',
      icon: '',
      category: 'custom',
      source_table: '',
      source_column: '',
      aggregation_method: 'latest',
      filter_conditions: '',
      description: ''
    })
    setShowForm(true)
  }

  const handleEdit = (type) => {
    setEditingType(type.id)
    setFormData({
      type_key: type.type_key,
      label_de: type.label_de,
      unit: type.unit,
      icon: type.icon || '',
      category: type.category || 'custom',
      source_table: type.source_table || '',
      source_column: type.source_column || '',
      aggregation_method: type.aggregation_method || 'latest',
      filter_conditions: type.filter_conditions ? JSON.stringify(type.filter_conditions, null, 2) : '',
      description: type.description || ''
    })
    setShowForm(true)
  }

  const handleSave = async () => {
    if (!formData.label_de || !formData.unit) {
      setError('Bitte Label und Einheit ausfüllen')
      return
    }

    // Parse filter_conditions from string to JSON
    let payload = { ...formData }
    if (formData.filter_conditions && formData.filter_conditions.trim()) {
      try {
        payload.filter_conditions = JSON.parse(formData.filter_conditions)
      } catch (e) {
        setError('Ungültiges JSON in Filter-Bedingungen')
        return
      }
    } else {
      payload.filter_conditions = null
    }

    try {
      if (editingType) {
        await api.updateGoalType(editingType, payload)
        showToast('✓ Goal Type aktualisiert')
      } else {
        if (!formData.type_key) {
          setError('Bitte eindeutigen Key angeben (z.B. meditation_minutes)')
          return
        }
        await api.createGoalType(payload)
        showToast('✓ Goal Type erstellt')
      }

      await loadGoalTypes()
      setShowForm(false)
      setError(null)
    } catch (err) {
      setError(err.message || 'Fehler beim Speichern')
    }
  }

  const handleDelete = async (typeId, typeName, isSystem) => {
    if (isSystem) {
      if (!confirm(`System Goal Type "${typeName}" deaktivieren? (Nicht löschbar)`)) return
    } else {
      if (!confirm(`Goal Type "${typeName}" wirklich löschen?`)) return
    }

    try {
      await api.deleteGoalType(typeId)
      showToast('✓ Goal Type gelöscht/deaktiviert')
      await loadGoalTypes()
    } catch (err) {
      setError(err.message || 'Fehler beim Löschen')
    }
  }

  if (loading) {
    return (
      <div className="page">
        <div style={{ textAlign: 'center', padding: 40 }}>
          <div className="spinner"></div>
        </div>
      </div>
    )
  }

  return (
    <div className="page">
      <div className="page-header">
        <h1><Database size={24} /> Goal Type Verwaltung</h1>
      </div>

      {error && (
        <div className="card" style={{ background: '#FEF2F2', border: '1px solid #FCA5A5', marginBottom: 16 }}>
          <p style={{ color: '#DC2626', margin: 0 }}>{error}</p>
        </div>
      )}

      {toast && (
        <div style={{
          position: 'fixed',
          top: 16,
          right: 16,
          background: 'var(--accent)',
          color: 'white',
          padding: '12px 20px',
          borderRadius: 8,
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          zIndex: 1000
        }}>
          {toast}
        </div>
      )}

      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <h2 style={{ margin: 0, marginBottom: 4 }}>Verfügbare Goal Types</h2>
            <p style={{ fontSize: 13, color: 'var(--text2)', margin: 0 }}>
              {goalTypes.length} Types registriert ({goalTypes.filter(t => t.is_system).length} System, {goalTypes.filter(t => !t.is_system).length} Custom)
            </p>
          </div>
          <button className="btn-primary" onClick={handleCreate}>
            <Plus size={16} /> Neuer Type
          </button>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {goalTypes.map(type => (
            <div
              key={type.id}
              className="card"
              style={{
                background: 'var(--surface2)',
                padding: 12,
                border: type.is_system ? '2px solid var(--accent)' : '1px solid var(--border)'
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ fontSize: 20 }}>{type.icon || '📊'}</span>
                    <span style={{ fontWeight: 600 }}>{type.label_de}</span>
                    <span style={{
                      fontSize: 11,
                      padding: '2px 8px',
                      borderRadius: 4,
                      background: 'var(--surface)',
                      color: 'var(--text2)'
                    }}>
                      {type.unit}
                    </span>
                    {type.is_system && (
                      <span style={{
                        fontSize: 11,
                        padding: '2px 8px',
                        borderRadius: 4,
                        background: 'var(--accent)',
                        color: 'white'
                      }}>
                        SYSTEM
                      </span>
                    )}
                    {!type.is_active && (
                      <span style={{
                        fontSize: 11,
                        padding: '2px 8px',
                        borderRadius: 4,
                        background: '#F59E0B',
                        color: 'white'
                      }}>
                        INAKTIV
                      </span>
                    )}
                  </div>

                  <div style={{ fontSize: 12, color: 'var(--text2)' }}>
                    <strong>Key:</strong> {type.type_key}
                    {type.source_table && (
                      <>
                        {' | '}<strong>Quelle:</strong> {type.source_table}.{type.source_column}
                        {' | '}<strong>Methode:</strong> {type.aggregation_method}
                      </>
                    )}
                    {type.calculation_formula && (
                      <>
                        {' | '}<strong>Formel:</strong> Komplex (JSON)
                      </>
                    )}
                  </div>

                  {type.description && (
                    <div style={{ fontSize: 12, color: 'var(--text2)', marginTop: 4, fontStyle: 'italic' }}>
                      {type.description}
                    </div>
                  )}
                </div>

                <div style={{ display: 'flex', gap: 8 }}>
                  <button
                    className="btn-secondary"
                    onClick={() => handleEdit(type)}
                    style={{ padding: '6px 12px' }}
                  >
                    <Pencil size={14} />
                  </button>
                  <button
                    className="btn-secondary"
                    onClick={() => handleDelete(type.id, type.label_de, type.is_system)}
                    style={{ padding: '6px 12px', color: type.is_system ? '#F59E0B' : '#DC2626' }}
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Form Modal */}
      {showForm && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'center',
          zIndex: 1000,
          padding: 16,
          paddingTop: 40,
          overflowY: 'auto'
        }}>
          <div className="card" style={{ maxWidth: 600, width: '100%', marginBottom: 40 }}>
            <div className="card-title">
              {editingType ? 'Goal Type bearbeiten' : 'Neuer Goal Type'}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Type Key (nur bei Create) */}
              {!editingType && (
                <div>
                  <label className="form-label">
                    Eindeutiger Key * (z.B. meditation_minutes)
                  </label>
                  <input
                    type="text"
                    className="form-input"
                    style={{ width: '100%' }}
                    value={formData.type_key}
                    onChange={e => setFormData(f => ({ ...f, type_key: e.target.value }))}
                    placeholder="snake_case verwenden"
                  />
                </div>
              )}

              {/* Label */}
              <div>
                <label className="form-label">Label (Deutsch) *</label>
                <input
                  type="text"
                  className="form-input"
                  style={{ width: '100%' }}
                  value={formData.label_de}
                  onChange={e => setFormData(f => ({ ...f, label_de: e.target.value }))}
                  placeholder="z.B. Meditation"
                />
              </div>

              {/* Unit & Icon */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label className="form-label">Einheit *</label>
                  <input
                    type="text"
                    className="form-input"
                    style={{ width: '100%' }}
                    value={formData.unit}
                    onChange={e => setFormData(f => ({ ...f, unit: e.target.value }))}
                    placeholder="z.B. min/Tag"
                  />
                </div>
                <div>
                  <label className="form-label" htmlFor="admin-goal-type-icon">
                    Icon (Emoji)
                  </label>
                  <EmojiIconPicker
                    id="admin-goal-type-icon"
                    value={formData.icon}
                    onChange={(icon) => setFormData((f) => ({ ...f, icon }))}
                    placeholder="🧘"
                    maxLength={10}
                  />
                </div>
              </div>

              {/* Category */}
              <div>
                <label className="form-label">Kategorie</label>
                <select
                  className="form-input"
                  style={{ width: '100%' }}
                  value={formData.category}
                  onChange={e => setFormData(f => ({ ...f, category: e.target.value }))}
                >
                  {CATEGORIES.map(cat => (
                    <option key={cat} value={cat}>{cat}</option>
                  ))}
                </select>
              </div>

              {/* Data Source */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label className="form-label">Tabelle</label>
                  {schemaInfo ? (
                    <select
                      className="form-input"
                      style={{ width: '100%' }}
                      value={formData.source_table}
                      onChange={e => setFormData(f => ({ ...f, source_table: e.target.value, source_column: '' }))}
                    >
                      <option value="">-- Optional --</option>
                      {Object.entries(schemaInfo).map(([table, info]) => (
                        <option key={table} value={table} title={info.description}>
                          {table} - {info.description}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <input
                      type="text"
                      className="form-input"
                      style={{ width: '100%' }}
                      value={formData.source_table}
                      onChange={e => setFormData(f => ({ ...f, source_table: e.target.value }))}
                      placeholder="Lade Schema..."
                      disabled
                    />
                  )}
                </div>
                <div>
                  <label className="form-label">Spalte</label>
                  {schemaInfo && formData.source_table && schemaInfo[formData.source_table] ? (
                    <select
                      className="form-input"
                      style={{ width: '100%' }}
                      value={formData.source_column}
                      onChange={e => setFormData(f => ({ ...f, source_column: e.target.value }))}
                    >
                      <option value="">-- Wählen --</option>
                      {Object.entries(schemaInfo[formData.source_table].columns).map(([col, info]) => (
                        <option key={col} value={col} title={info.description}>
                          {col} - {info.description}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <input
                      type="text"
                      className="form-input"
                      style={{ width: '100%' }}
                      value={formData.source_column}
                      onChange={e => setFormData(f => ({ ...f, source_column: e.target.value }))}
                      placeholder={formData.source_table ? "Spalte wählen..." : "Erst Tabelle wählen"}
                      disabled={!formData.source_table}
                    />
                  )}
                </div>
              </div>

              {/* Aggregation Method */}
              <div>
                <label className="form-label">Aggregationsmethode</label>
                <select
                  className="form-input"
                  style={{ width: '100%' }}
                  value={formData.aggregation_method}
                  onChange={e => setFormData(f => ({ ...f, aggregation_method: e.target.value }))}
                >
                  {AGGREGATION_METHODS.map(method => (
                    <option key={method.value} value={method.value}>{method.label}</option>
                  ))}
                </select>
              </div>

              {/* Filter Conditions */}
              <div>
                <label className="form-label">Filter (optional, JSON)</label>
                <textarea
                  className="form-input"
                  style={{ width: '100%', minHeight: 80, fontFamily: 'monospace', fontSize: 13 }}
                  value={formData.filter_conditions}
                  onChange={e => setFormData(f => ({ ...f, filter_conditions: e.target.value }))}
                  placeholder={'Beispiel:\n{\n  "training_type": "strength"\n}\n\nOder mehrere Werte:\n{\n  "training_type": ["strength", "hiit"]\n}'}
                />
                <div style={{ fontSize: 12, color: 'var(--text2)', marginTop: 4 }}>
                  💡 Filtert Einträge nach Spalten. Beispiel: <code>{`{"training_type": "strength"}`}</code> zählt nur Krafttraining
                </div>
              </div>

              {/* Description */}
              <div>
                <label className="form-label">Beschreibung (optional)</label>
                <textarea
                  className="form-input"
                  style={{ width: '100%', minHeight: 60 }}
                  value={formData.description}
                  onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
                  placeholder="Kurze Erklärung..."
                />
              </div>

              {/* Buttons */}
              <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
                <button className="btn-primary" onClick={handleSave} style={{ flex: 1 }}>
                  Speichern
                </button>
                <button
                  className="btn-secondary"
                  onClick={() => {
                    setShowForm(false)
                    setError(null)
                  }}
                  style={{ flex: 1 }}
                >
                  Abbrechen
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
