import { useState, useEffect } from 'react'
import { Save, User, AlertCircle, X } from 'lucide-react'
import { api } from '../utils/api'

export default function AdminUserRestrictionsPage() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [users, setUsers] = useState([])
  const [features, setFeatures] = useState([])
  const [selectedUserId, setSelectedUserId] = useState('')
  const [selectedUser, setSelectedUser] = useState(null)
  const [restrictions, setRestrictions] = useState([])
  const [changes, setChanges] = useState({})
  const [saving, setSaving] = useState(false)

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

  useEffect(() => {
    if (selectedUserId) {
      loadUserData(selectedUserId)
    }
  }, [selectedUserId])

  async function loadInitialData() {
    try {
      setLoading(true)
      const [usersData, featuresData] = await Promise.all([
        api.adminListProfiles(),
        api.listFeatures()
      ])
      setUsers(usersData)
      setFeatures(featuresData.filter(f => f.active))
      setError('')
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  async function loadUserData(userId) {
    try {
      const [user, restrictionsData] = await Promise.all([
        api.adminListProfiles().then(users => users.find(u => u.id === userId)),
        api.listUserRestrictions(userId)
      ])
      setSelectedUser(user)
      setRestrictions(restrictionsData)
      setChanges({})
      setError('')
    } catch (e) {
      setError(e.message)
    }
  }

  function handleChange(featureId, value, enabled) {
    const key = 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] = { featureId, value: parsedValue, enabled }
    setChanges(newChanges)
  }

  function toggleEnabled(featureId) {
    const restriction = restrictions.find(r => r.feature_id === featureId)
    const currentEnabled = restriction ? restriction.enabled : true
    const currentValue = restriction ? restriction.limit_value : null

    handleChange(featureId, currentValue === null ? '' : currentValue, !currentEnabled)
  }

  async function handleSave() {
    if (!selectedUserId) return

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

      // Process changes
      for (const [featureId, change] of Object.entries(changes)) {
        const existingRestriction = restrictions.find(r => r.feature_id === featureId)

        if (existingRestriction) {
          // Update existing restriction
          await api.updateUserRestriction(existingRestriction.id, {
            limit_value: change.value,
            enabled: change.enabled
          })
        } else {
          // Create new restriction
          await api.createUserRestriction({
            profile_id: selectedUserId,
            feature_id: featureId,
            limit_value: change.value,
            enabled: change.enabled,
            reason: 'Admin override'
          })
        }
      }

      setSuccess(`${Object.keys(changes).length} Overrides gespeichert`)
      await loadUserData(selectedUserId)
    } catch (e) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }

  async function handleRemoveRestriction(featureId) {
    if (!confirm('Override wirklich entfernen? User erhält dann das Standard-Tier-Limit.')) return

    try {
      const restriction = restrictions.find(r => r.feature_id === featureId)
      if (restriction) {
        await api.deleteUserRestriction(restriction.id)
        setSuccess('Override entfernt')
        await loadUserData(selectedUserId)
        // Remove from changes if exists
        const newChanges = { ...changes }
        delete newChanges[featureId]
        setChanges(newChanges)
      }
    } catch (e) {
      setError(e.message)
    }
  }

  function getCurrentValue(featureId) {
    // Check if there's a pending change
    if (featureId in changes) {
      return changes[featureId].value
    }

    // Check existing restriction
    const restriction = restrictions.find(r => r.feature_id === featureId)
    return restriction ? restriction.limit_value : null
  }

  function isEnabled(featureId) {
    if (featureId in changes) {
      return changes[featureId].enabled
    }

    const restriction = restrictions.find(r => r.feature_id === featureId)
    return restriction ? restriction.enabled : true
  }

  function hasRestriction(featureId) {
    return restrictions.some(r => r.feature_id === featureId)
  }

  function formatValue(val) {
    if (val === null || val === undefined) return ''
    return val.toString()
  }

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

  const hasChanges = Object.keys(changes).length > 0
  const categoryGroups = {}
  features.forEach(f => {
    if (!categoryGroups[f.category]) categoryGroups[f.category] = []
    categoryGroups[f.category].push(f)
  })

  const categoryIcons = { data: '📊', ai: '🤖', export: '📤', integration: '🔗' }
  const categoryNames = { data: 'DATEN', ai: 'KI', export: 'EXPORT', integration: 'INTEGRATIONEN' }

  return (
    <div style={{ paddingBottom: 80 }}>
      {/* Header */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text1)' }}>
          User Feature-Overrides
        </div>
        <div style={{ fontSize: 13, color: 'var(--text3)', marginTop: 4 }}>
          Individuelle Feature-Limits für einzelne User setzen
        </div>
      </div>

      {/* Info Box */}
      <div style={{
        padding: 12, background: 'var(--accent-light)', borderRadius: 8,
        marginBottom: 16, fontSize: 12, color: 'var(--accent-dark)',
        display: 'flex', gap: 8, alignItems: 'flex-start'
      }}>
        <AlertCircle size={16} style={{ marginTop: 2, flexShrink: 0 }} />
        <div>
          <strong>Hinweis:</strong> User-Overrides haben höchste Priorität und überschreiben Tier-Limits.
          Nutze dies sparsam für Sonderfälle (z.B. Beta-Tester, Support-Anfragen).
        </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>
      )}

      {/* User Selection */}
      <div className="card" style={{ padding: 16, marginBottom: 16 }}>
        <label className="form-label" style={{ display: 'block', marginBottom: 8 }}>
          User auswählen
        </label>
        <select
          className="form-input"
          style={{ width: '100%' }}
          value={selectedUserId}
          onChange={(e) => setSelectedUserId(e.target.value)}
        >
          <option value="">-- User auswählen --</option>
          {users.map(u => (
            <option key={u.id} value={u.id}>
              {u.name} ({u.email || u.id}) - Tier: {u.tier || 'free'}
            </option>
          ))}
        </select>
      </div>

      {/* User Info + Features */}
      {selectedUser && (
        <>
          {/* User Info Card */}
          <div className="card" style={{ padding: 16, marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                background: selectedUser.avatar_color || 'var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontWeight: 700, fontSize: 18
              }}>
                {selectedUser.name?.charAt(0).toUpperCase()}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{selectedUser.name}</div>
                <div style={{ fontSize: 12, color: 'var(--text3)' }}>
                  {selectedUser.email || `ID: ${selectedUser.id}`}
                </div>
              </div>
              <div style={{
                padding: '4px 12px', borderRadius: 6,
                background: 'var(--accent-light)', color: 'var(--accent-dark)',
                fontSize: 12, fontWeight: 600
              }}>
                Tier: {selectedUser.tier || 'free'}
              </div>
            </div>
          </div>

          {/* Features List */}
          <div className="card" style={{ padding: 0, overflow: 'auto', marginBottom: 16 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: 'var(--surface2)' }}>
                  <th style={{ textAlign: 'left', padding: '12px 16px', fontWeight: 600 }}>Feature</th>
                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Tier-Limit</th>
                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Override</th>
                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Aktiv</th>
                  <th style={{ textAlign: 'right', padding: '12px 16px', fontWeight: 600 }}>Aktion</th>
                </tr>
              </thead>
              <tbody>
                {Object.entries(categoryGroups).map(([category, categoryFeatures]) => (
                  <>
                    {/* Category Header */}
                    <tr key={`cat-${category}`} style={{ background: 'var(--accent-light)' }}>
                      <td colSpan={5} 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 */}
                    {categoryFeatures.map(feature => {
                      const currentValue = getCurrentValue(feature.id)
                      const enabled = isEnabled(feature.id)
                      const hasOverride = hasRestriction(feature.id)
                      const isChanged = feature.id in changes

                      return (
                        <tr key={feature.id} style={{
                          borderBottom: '1px solid var(--border)',
                          background: isChanged ? 'var(--accent-light)' : hasOverride ? 'var(--surface)' : 'transparent'
                        }}>
                          <td style={{ padding: '8px 16px' }}>
                            <div style={{ fontWeight: 500 }}>{feature.name}</div>
                            <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 2 }}>
                              {feature.limit_type === 'boolean' ? '(ja/nein)' : `(${feature.reset_period})`}
                            </div>
                          </td>
                          <td style={{ padding: '8px 16px', textAlign: 'center', color: 'var(--text3)' }}>
                            {/* TODO: Show actual tier limit - for now just show "Standard" */}
                            Standard
                          </td>
                          <td style={{ padding: '8px 16px', textAlign: 'center' }}>
                            {feature.limit_type === 'boolean' ? (
                              <button
                                onClick={() => toggleEnabled(feature.id)}
                                style={{
                                  padding: '6px 16px',
                                  border: `2px solid ${enabled ? 'var(--accent)' : 'var(--border)'}`,
                                  borderRadius: 20,
                                  background: enabled ? 'var(--accent)' : 'var(--surface)',
                                  color: enabled ? 'white' : 'var(--text3)',
                                  fontSize: 12,
                                  fontWeight: 600,
                                  cursor: 'pointer',
                                  transition: 'all 0.2s',
                                  minWidth: 70
                                }}
                              >
                                {enabled ? '✓ AN' : '✗ AUS'}
                              </button>
                            ) : (
                              <input
                                type="text"
                                value={formatValue(currentValue)}
                                onChange={(e) => handleChange(feature.id, e.target.value, enabled)}
                                placeholder="∞"
                                style={{
                                  width: '80px',
                                  padding: '6px 8px',
                                  border: `1.5px solid ${isChanged ? 'var(--accent)' : hasOverride ? 'var(--border)' : 'var(--border)'}`,
                                  borderRadius: 6,
                                  textAlign: 'center',
                                  fontSize: 13,
                                  fontWeight: isChanged ? 600 : 400,
                                  background: hasOverride ? 'var(--surface2)' : 'var(--bg)',
                                  color: currentValue === 0 ? 'var(--danger)' :
                                         currentValue === null ? 'var(--accent)' : 'var(--text1)'
                                }}
                              />
                            )}
                          </td>
                          <td style={{ padding: '8px 16px', textAlign: 'center' }}>
                            {hasOverride ? (
                              <span style={{ color: 'var(--accent)', fontWeight: 600 }}>✓</span>
                            ) : (
                              <span style={{ color: 'var(--text3)' }}>-</span>
                            )}
                          </td>
                          <td style={{ padding: '8px 16px', textAlign: 'right' }}>
                            {hasOverride && (
                              <button
                                className="btn btn-secondary"
                                onClick={() => handleRemoveRestriction(feature.id)}
                                style={{ padding: '4px 8px', fontSize: 11, color: 'var(--danger)' }}
                              >
                                <X size={12} /> Entfernen
                              </button>
                            )}
                          </td>
                        </tr>
                      )
                    })}
                  </>
                ))}
              </tbody>
            </table>
          </div>

          {/* Save Button */}
          {hasChanges && (
            <div style={{
              position: 'fixed', bottom: 0, left: 0, right: 0,
              background: 'var(--bg)', borderTop: '1px solid var(--border)',
              padding: 16, display: 'flex', gap: 8, zIndex: 100,
              boxShadow: '0 -2px 10px rgba(0,0,0,0.1)'
            }}>
              <button
                className="btn btn-secondary"
                onClick={() => setChanges({})}
                disabled={saving}
                style={{ flex: 1 }}
              >
                Zurücksetzen
              </button>
              <button
                className="btn btn-primary"
                onClick={handleSave}
                disabled={saving}
                style={{ flex: 2 }}
              >
                {saving ? '...' : `${Object.keys(changes).length} Overrides speichern`}
              </button>
            </div>
          )}

          {/* Legend */}
          <div style={{
            marginTop: 16, padding: 12, background: 'var(--surface2)',
            borderRadius: 8, fontSize: 12, color: 'var(--text3)'
          }}>
            <strong>Eingabe:</strong>
            <div style={{ marginTop: 8, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
              <span><strong style={{ color: 'var(--accent)' }}>leer oder ∞</strong> = Unbegrenzt</span>
              <span><strong style={{ color: 'var(--danger)' }}>0</strong> = Deaktiviert</span>
              <span><strong>1-999999</strong> = Limit-Wert</span>
            </div>
            <div style={{ marginTop: 8 }}>
              <strong>✓ Aktiv</strong> = Override gesetzt, überschreibt Tier-Limit
            </div>
          </div>
        </>
      )}
    </div>
  )
}