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

export default function AdminTierLimitsPage() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [matrix, setMatrix] = useState({ tiers: [], features: [], limits: {} })
  const [changes, setChanges] = useState({})
  const [saving, setSaving] = useState(false)

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

  async function loadMatrix() {
    try {
      setLoading(true)
      const data = await api.getTierLimitsMatrix()
      setMatrix(data)
      setChanges({})
      setError('')
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  function handleChange(tierId, featureId, value) {
    const key = `${tierId}:${featureId}`
    const newChanges = { ...changes }

    // Parse value
    let parsedValue = null
    if (value === '' || value === 'unlimited' || value === '∞') {
      parsedValue = null // unlimited
    } else if (value === '0' || value === 'disabled') {
      parsedValue = 0 // disabled
    } else {
      const num = parseInt(value)
      if (!isNaN(num) && num >= 0) {
        parsedValue = num
      } else {
        return // invalid input
      }
    }

    newChanges[key] = { tierId, featureId, value: parsedValue }
    setChanges(newChanges)
  }

  async function saveChanges() {
    if (Object.keys(changes).length === 0) {
      setSuccess('Keine Änderungen')
      return
    }

    try {
      setSaving(true)
      setError('')
      setSuccess('')

      const updates = Object.values(changes).map(c => ({
        tier_id: c.tierId,
        feature_id: c.featureId,
        limit_value: c.value
      }))

      await api.updateTierLimitsBatch(updates)
      setSuccess(`${updates.length} Limits gespeichert`)
      await loadMatrix()
    } catch (e) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }

  function getCurrentValue(tierId, featureId) {
    const key = `${tierId}:${featureId}`
    if (key in changes) {
      return changes[key].value
    }
    return matrix.limits[key] ?? null
  }

  function formatValue(val) {
    if (val === null) return '∞'
    if (val === 0) return '❌'
    return val.toString()
  }

  function groupFeaturesByCategory() {
    const groups = {}
    matrix.features.forEach(f => {
      if (!groups[f.category]) groups[f.category] = []
      groups[f.category].push(f)
    })
    return groups
  }

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

  const hasChanges = Object.keys(changes).length > 0
  const categoryGroups = groupFeaturesByCategory()
  const categoryIcons = { data: '📊', ai: '🤖', export: '📤', integration: '🔗' }
  const categoryNames = { data: 'DATEN', ai: 'KI', export: 'EXPORT', integration: 'INTEGRATIONEN' }

  return (
    <div style={{ paddingBottom: 80 }}>
      {/* Header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 20
      }}>
        <div>
          <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text1)' }}>
            Tier Limits Matrix
          </div>
          <div style={{ fontSize: 13, color: 'var(--text3)', marginTop: 4 }}>
            Konfiguriere Feature-Limits pro Tier (∞ = unbegrenzt, ❌ = deaktiviert)
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {hasChanges && (
            <button
              className="btn btn-secondary"
              onClick={() => { setChanges({}); setSuccess(''); setError('') }}
              disabled={saving}
            >
              Zurücksetzen
            </button>
          )}
          <button
            className="btn btn-primary"
            onClick={saveChanges}
            disabled={saving || !hasChanges}
          >
            {saving ? 'Speichern...' : hasChanges ? `${Object.keys(changes).length} Änderungen speichern` : 'Speichern'}
          </button>
        </div>
      </div>

      {/* Messages */}
      {error && (
        <div style={{
          padding: 12, background: 'var(--danger)', color: 'white',
          borderRadius: 8, marginBottom: 16, fontSize: 14
        }}>
          {error}
        </div>
      )}
      {success && (
        <div style={{
          padding: 12, background: 'var(--accent)', color: 'white',
          borderRadius: 8, marginBottom: 16, fontSize: 14
        }}>
          {success}
        </div>
      )}

      {/* Matrix Table */}
      <div className="card" style={{ padding: 0, overflow: 'auto' }}>
        <table style={{
          width: '100%', borderCollapse: 'collapse', fontSize: 13,
          minWidth: 800
        }}>
          <thead>
            <tr style={{ background: 'var(--surface2)' }}>
              <th style={{
                textAlign: 'left', padding: '12px 16px', fontWeight: 600,
                position: 'sticky', left: 0, background: 'var(--surface2)', zIndex: 10,
                borderRight: '1px solid var(--border)'
              }}>
                Feature
              </th>
              {matrix.tiers.map(tier => (
                <th key={tier.id} style={{
                  textAlign: 'center', padding: '12px 16px', fontWeight: 600,
                  minWidth: 100
                }}>
                  {tier.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Object.entries(categoryGroups).map(([category, features]) => (
              <>
                {/* Category Header */}
                <tr key={`cat-${category}`} style={{ background: 'var(--accent-light)' }}>
                  <td colSpan={matrix.tiers.length + 1} style={{
                    padding: '8px 16px', fontWeight: 600, fontSize: 11,
                    textTransform: 'uppercase', letterSpacing: '0.5px',
                    color: 'var(--accent-dark)'
                  }}>
                    {categoryIcons[category]} {categoryNames[category] || category}
                  </td>
                </tr>

                {/* Feature Rows */}
                {features.map((feature, idx) => (
                  <tr key={feature.id} style={{
                    borderBottom: idx === features.length - 1 ? '2px solid var(--border)' : '1px solid var(--border)'
                  }}>
                    <td style={{
                      padding: '8px 16px', fontWeight: 500,
                      position: 'sticky', left: 0, background: 'var(--bg)', zIndex: 5,
                      borderRight: '1px solid var(--border)'
                    }}>
                      <div>{feature.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 2 }}>
                        {feature.limit_type === 'boolean' ? '(boolean)' : `(count, reset: ${feature.reset_period})`}
                      </div>
                    </td>
                    {matrix.tiers.map(tier => {
                      const currentValue = getCurrentValue(tier.id, feature.id)
                      const isChanged = `${tier.id}:${feature.id}` in changes

                      return (
                        <td key={`${tier.id}-${feature.id}`} style={{
                          textAlign: 'center', padding: 8,
                          background: isChanged ? 'var(--accent-light)' : 'transparent'
                        }}>
                          <input
                            type="text"
                            value={formatValue(currentValue)}
                            onChange={(e) => handleChange(tier.id, feature.id, e.target.value)}
                            style={{
                              width: '80px',
                              padding: '4px 8px',
                              border: `1px solid ${isChanged ? 'var(--accent)' : 'var(--border)'}`,
                              borderRadius: 4,
                              textAlign: 'center',
                              fontSize: 13,
                              fontWeight: isChanged ? 600 : 400,
                              background: 'var(--bg)',
                              color: currentValue === 0 ? 'var(--danger)' :
                                     currentValue === null ? 'var(--accent)' : 'var(--text1)'
                            }}
                            placeholder={feature.limit_type === 'boolean' ? '0/1' : '0-999'}
                          />
                        </td>
                      )
                    })}
                  </tr>
                ))}
              </>
            ))}
          </tbody>
        </table>
      </div>

      {/* Legend */}
      <div style={{
        marginTop: 16, padding: 12, background: 'var(--surface2)',
        borderRadius: 8, fontSize: 12, color: 'var(--text3)'
      }}>
        <strong>Legende:</strong>
        <div style={{ marginTop: 8, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <span><strong style={{ color: 'var(--accent)' }}>∞</strong> = Unbegrenzt (NULL)</span>
          <span><strong style={{ color: 'var(--danger)' }}>❌</strong> = Deaktiviert (0)</span>
          <span><strong>1-999</strong> = Limit-Wert</span>
          <span>Boolean: 0 = deaktiviert, 1 = aktiviert</span>
        </div>
      </div>
    </div>
  )
}