import { useEffect, useState } from 'react'
import api from '../api/client'
import { useAuthStore } from '../stores/auth'
import { copyToClipboard } from '../utils/clipboard'
import { Plus, Trash2, KeyRound, ShieldAlert, Copy, Check, Key, Save, Settings, QrCode, ShieldCheck, ShieldOff } from 'lucide-react'
import { useSettingsStore } from '../stores/settings'

export default function SettingsPage() {
  const [users, setUsers] = useState([])
  const [showAdd, setShowAdd] = useState(false)
  const [form, setForm] = useState({ username: '', password: '', display_name: '' })
  const [pwChange, setPwChange] = useState(null)
  const [pwForm, setPwForm] = useState({ password: '', confirm: '' })
  const [pwMsg, setPwMsg] = useState('')
  const { user: currentUser } = useAuthStore()

  const reload = () => api.getUsers().then((u) => setUsers(u || []))
  useEffect(() => { reload() }, [])

  const handleAdd = async () => {
    if (!form.username || !form.password) return
    await api.createUser(form)
    setForm({ username: '', password: '', display_name: '' })
    setShowAdd(false)
    reload()
  }

  const handleDelete = async (id) => {
    if (!confirm('Benutzer wirklich loeschen?')) return
    await api.deleteUser(id)
    reload()
  }

  const handlePasswordChange = async () => {
    setPwMsg('')
    if (!pwForm.password || pwForm.password.length < 6) {
      setPwMsg('Mindestens 6 Zeichen')
      return
    }
    if (pwForm.password !== pwForm.confirm) {
      setPwMsg('Passwoerter stimmen nicht ueberein')
      return
    }
    try {
      await api.changePassword(pwChange, pwForm.password)
      setPwMsg('Passwort geaendert')
      setTimeout(() => { setPwChange(null); setPwMsg(''); setPwForm({ password: '', confirm: '' }) }, 1500)
    } catch (e) {
      setPwMsg('Fehler: ' + e.message)
    }
  }

  return (
    <div className="space-y-6">
      <h1 className="text-xl font-bold text-white">Einstellungen</h1>

      {/* Users */}
      <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
        <div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
          <span className="text-sm font-medium text-gray-300">Benutzer</span>
          <button
            onClick={() => setShowAdd(true)}
            className="flex items-center gap-1 text-sm text-orange-400 hover:text-orange-300"
          >
            <Plus className="w-4 h-4" />
            Hinzufuegen
          </button>
        </div>

        {showAdd && (
          <div className="px-4 py-3 border-b border-gray-800 flex gap-2 items-end flex-wrap">
            <div>
              <label className="text-xs text-gray-500">Benutzer</label>
              <input
                type="text"
                value={form.username}
                onChange={(e) => setForm({ ...form, username: e.target.value })}
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
              />
            </div>
            <div>
              <label className="text-xs text-gray-500">Passwort</label>
              <input
                type="password"
                value={form.password}
                onChange={(e) => setForm({ ...form, password: e.target.value })}
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
              />
            </div>
            <div>
              <label className="text-xs text-gray-500">Anzeigename</label>
              <input
                type="text"
                value={form.display_name}
                onChange={(e) => setForm({ ...form, display_name: e.target.value })}
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
              />
            </div>
            <button onClick={handleAdd} className="px-3 py-1 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white">
              Anlegen
            </button>
            <button onClick={() => setShowAdd(false)} className="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400">
              Abbrechen
            </button>
          </div>
        )}

        <div className="divide-y divide-gray-800">
          {users.map((u) => (
            <div key={u.id}>
              <div className="px-4 py-2.5 flex items-center justify-between">
                <div>
                  <span className="text-sm text-white">{u.username}</span>
                  {u.display_name && (
                    <span className="text-sm text-gray-500 ml-2">({u.display_name})</span>
                  )}
                  <span className="ml-2 text-xs text-gray-600">{u.role}</span>
                  {currentUser?.username === u.username && (
                    <span className="ml-2 text-xs text-orange-400">(Du)</span>
                  )}
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs text-gray-600">
                    {u.last_login ? `Login: ${new Date(u.last_login).toLocaleString('de-DE')}` : 'Nie eingeloggt'}
                  </span>
                  <button
                    onClick={() => { setPwChange(pwChange === u.id ? null : u.id); setPwMsg(''); setPwForm({ password: '', confirm: '' }) }}
                    className="text-gray-500 hover:text-orange-400 p-1 rounded hover:bg-gray-800 transition-colors"
                    title="Passwort aendern"
                  >
                    <KeyRound className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDelete(u.id)}
                    className="text-gray-500 hover:text-red-400 p-1 rounded hover:bg-gray-800 transition-colors"
                    title="Benutzer loeschen"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Password Change */}
              {pwChange === u.id && (
                <div className="px-4 py-3 bg-gray-800/50 border-t border-gray-800 flex items-end gap-2 flex-wrap">
                  <div>
                    <label className="text-xs text-gray-500">Neues Passwort</label>
                    <input
                      type="password"
                      value={pwForm.password}
                      onChange={(e) => setPwForm({ ...pwForm, password: e.target.value })}
                      className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                      autoFocus
                    />
                  </div>
                  <div>
                    <label className="text-xs text-gray-500">Bestaetigen</label>
                    <input
                      type="password"
                      value={pwForm.confirm}
                      onChange={(e) => setPwForm({ ...pwForm, confirm: e.target.value })}
                      onKeyDown={(e) => e.key === 'Enter' && handlePasswordChange()}
                      className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                    />
                  </div>
                  <button
                    onClick={handlePasswordChange}
                    className="px-3 py-1 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white"
                  >
                    Aendern
                  </button>
                  <button
                    onClick={() => { setPwChange(null); setPwMsg('') }}
                    className="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400"
                  >
                    Abbrechen
                  </button>
                  {pwMsg && (
                    <span className={`text-sm ${pwMsg.startsWith('Fehler') || pwMsg.startsWith('Mindestens') || pwMsg.startsWith('Passwort') && !pwMsg.includes('geaendert') ? 'text-red-400' : pwMsg.includes('geaendert') ? 'text-green-400' : 'text-red-400'}`}>
                      {pwMsg}
                    </span>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* API Keys */}
      <APIKeysSection />

      {/* 2FA */}
      <TwoFactorSection />

      {/* System Settings */}
      <SystemSettingsSection />
    </div>
  )
}

const PERM_LABELS = {
  agent: { label: 'Agent', color: 'text-blue-400 bg-blue-900/30 border-blue-700/50', desc: 'Nur WS-Connect + Heartbeat' },
  read:  { label: 'Read-only', color: 'text-green-400 bg-green-900/30 border-green-700/50', desc: 'GET-Endpoints, kein Schreiben' },
  write: { label: 'Write', color: 'text-yellow-400 bg-yellow-900/30 border-yellow-700/50', desc: 'Lesen + Schreiben, kein Terminal' },
  admin: { label: 'Admin', color: 'text-orange-400 bg-orange-900/30 border-orange-700/50', desc: 'Voll (kein Terminal)' },
}

function APIKeysSection() {
  const [keys, setKeys] = useState([])
  const [customers, setCustomers] = useState([])
  const [showAdd, setShowAdd] = useState(false)
  const [newName, setNewName] = useState('')
  const [newPerms, setNewPerms] = useState('read')
  const [newCustomer, setNewCustomer] = useState('')
  const [newKey, setNewKey] = useState(null)
  const [copied, setCopied] = useState(null)
  const [loading, setLoading] = useState(true)

  const reload = () => {
    setLoading(true)
    Promise.all([api.getAPIKeys(), api.getCustomers()])
      .then(([k, c]) => { setKeys(k || []); setCustomers(c || []) })
      .finally(() => setLoading(false))
  }
  useEffect(() => { reload() }, [])

  const handleCreate = async () => {
    if (!newName.trim()) return
    try {
      const result = await api.createAPIKey(newName.trim(), newPerms, newCustomer ? parseInt(newCustomer) : null)
      setNewKey(result)
      setNewName('')
      setNewPerms('read')
      setNewCustomer('')
      reload()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleDelete = async (id, name) => {
    if (!confirm(`API-Key "${name}" wirklich loeschen? Alle Agents mit diesem Key verlieren den Zugang.`)) return
    await api.deleteAPIKey(id)
    reload()
  }

  const copyText = (text, id) => {
    copyToClipboard(text)
    setCopied(id)
    setTimeout(() => setCopied(null), 2000)
  }

  return (
    <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
      <div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Key className="w-4 h-4 text-gray-500" />
          <span className="text-sm font-medium text-gray-300">API-Keys</span>
          <span className="text-xs text-gray-600">({keys.length})</span>
        </div>
        <button
          onClick={() => { setShowAdd(true); setNewKey(null); setNewName('') }}
          className="flex items-center gap-1 text-sm text-orange-400 hover:text-orange-300"
        >
          <Plus className="w-4 h-4" />
          Neuer Key
        </button>
      </div>

      {/* Neuer Key Dialog */}
      {showAdd && !newKey && (
        <div className="px-4 py-3 border-b border-gray-800 space-y-2">
          <div className="flex gap-2 items-end">
            <div className="flex-1">
              <label className="text-xs text-gray-500">Bezeichnung</label>
              <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                placeholder="z.B. Agent-Key Kunde XY"
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
                autoFocus
                onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
              />
            </div>
            <div className="w-36">
              <label className="text-xs text-gray-500">Berechtigung</label>
              <select
                value={newPerms}
                onChange={(e) => setNewPerms(e.target.value)}
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
              >
                <option value="agent">Agent (nur WS)</option>
                <option value="read">Read-only</option>
                <option value="write">Write</option>
                <option value="admin">Admin</option>
              </select>
            </div>
            <div className="w-48">
              <label className="text-xs text-gray-500">Kunde (optional)</label>
              <select
                value={newCustomer}
                onChange={(e) => setNewCustomer(e.target.value)}
                className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
              >
                <option value="">Alle Kunden</option>
                {customers.map(c => (
                  <option key={c.id} value={c.id}>{c.number} — {c.name}</option>
                ))}
              </select>
            </div>
            <button onClick={handleCreate} className="px-3 py-1 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white self-end">
              Erstellen
            </button>
            <button onClick={() => setShowAdd(false)} className="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 self-end">
              Abbrechen
            </button>
          </div>
          {newPerms && PERM_LABELS[newPerms] && (
            <div className="text-xs text-gray-500 pl-1">{PERM_LABELS[newPerms].desc}</div>
          )}
        </div>
      )}

      {/* Neuer Key Anzeige */}
      {newKey && (
        <div className="px-4 py-3 border-b border-gray-800 bg-green-900/20">
          <div className="text-sm text-green-400 mb-2">API-Key erstellt — jetzt kopieren, er wird nur einmal angezeigt!</div>
          <div className="flex items-center gap-2">
            <code className="flex-1 bg-gray-950 rounded px-3 py-2 text-sm text-white font-mono select-all">
              {newKey.key}
            </code>
            <button
              onClick={() => copyText(newKey.key, 'new')}
              className="px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-gray-300 transition-colors"
            >
              {copied === 'new' ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
            </button>
          </div>
          <button
            onClick={() => { setNewKey(null); setShowAdd(false) }}
            className="mt-2 text-xs text-gray-500 hover:text-gray-400"
          >
            Fertig
          </button>
        </div>
      )}

      {/* Key Liste — gruppiert nach Kunde */}
      {loading ? (
        <div className="px-4 py-3 text-gray-500 text-xs">Laden...</div>
      ) : keys.length === 0 ? (
        <div className="px-4 py-4 text-center text-gray-500 text-xs">Keine API-Keys vorhanden</div>
      ) : (() => {
          // Gruppen bauen: null-Kunde zuerst, dann nach Kundennummer sortiert
          const groups = {}
          keys.forEach(k => {
            const gid = k.customer_id ?? '__global__'
            if (!groups[gid]) groups[gid] = []
            groups[gid].push(k)
          })
          const sorted = Object.entries(groups).sort(([a], [b]) => {
            if (a === '__global__') return -1
            if (b === '__global__') return 1
            const ca = customers.find(c => c.id === parseInt(a))
            const cb = customers.find(c => c.id === parseInt(b))
            return (ca?.number || '').localeCompare(cb?.number || '')
          })
          return (
            <div className="divide-y divide-gray-800">
              {sorted.map(([gid, gkeys]) => {
                const customer = gid !== '__global__' ? customers.find(c => c.id === parseInt(gid)) : null
                return (
                  <div key={gid}>
                    {/* Gruppen-Header */}
                    <div className="px-4 py-1.5 bg-gray-800/40 flex items-center gap-2">
                      <span className="text-[10px] font-semibold text-gray-500 uppercase tracking-wide">
                        {customer ? `${customer.number} — ${customer.name}` : 'Global'}
                      </span>
                      <span className="text-[10px] text-gray-700">({gkeys.length})</span>
                    </div>
                    {/* Keys der Gruppe */}
                    {gkeys.map(k => {
                      const perm = PERM_LABELS[k.permissions] || PERM_LABELS.read
                      const lastUsedAgo = k.last_used
                        ? (() => {
                            const s = (Date.now() - new Date(k.last_used)) / 1000
                            if (s < 120) return 'gerade eben'
                            if (s < 3600) return `${Math.floor(s/60)}m`
                            if (s < 86400) return `${Math.floor(s/3600)}h`
                            return `${Math.floor(s/86400)}d`
                          })()
                        : null
                      return (
                        <div key={k.id} className="px-4 py-1.5 flex items-center gap-2.5 hover:bg-gray-800/30 group">
                          <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border leading-none w-16 text-center flex-shrink-0 ${perm.color}`}>
                            {perm.label}
                          </span>
                          <span className="text-xs text-gray-300 flex-1 min-w-0 truncate">{k.name}</span>
                          <code className="text-xs text-gray-600 font-mono flex-shrink-0">
                            {k.key.substring(0, 8)}…{k.key.substring(k.key.length - 4)}
                          </code>
                          {lastUsedAgo && (
                            <span className="text-[10px] text-gray-700 flex-shrink-0 hidden md:block"
                              title={`Zuletzt: ${new Date(k.last_used).toLocaleString('de-DE')}`}>
                              {lastUsedAgo}
                            </span>
                          )}
                          <button onClick={() => copyText(k.key, k.id)}
                            className="text-gray-600 hover:text-orange-400 transition-colors flex-shrink-0 opacity-0 group-hover:opacity-100"
                            title="Key kopieren">
                            {copied === k.id ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
                          </button>
                          <button onClick={() => handleDelete(k.id, k.name)}
                            className="text-gray-700 hover:text-red-400 transition-colors flex-shrink-0 opacity-0 group-hover:opacity-100"
                            title="Key loeschen">
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      )
                    })}
                  </div>
                )
              })}
            </div>
          )
        })()
      }
    </div>
  )
}

function TwoFactorSection() {
  const { user } = useAuthStore()
  const [step, setStep] = useState('idle') // idle | setup | confirm | disable
  const [setupData, setSetupData] = useState(null)
  const [code, setCode] = useState('')
  const [password, setPassword] = useState('')
  const [msg, setMsg] = useState('')
  const [error, setError] = useState('')

  const totpEnabled = user?.totp_enabled

  const handleSetup = async () => {
    setError(''); setMsg('')
    try {
      const data = await api.setupTOTP()
      setSetupData(data)
      setStep('setup')
    } catch (e) {
      setError(e.message)
    }
  }

  const handleConfirm = async () => {
    setError('')
    try {
      await api.confirmTOTP(code)
      setMsg('2FA aktiviert')
      setStep('idle')
      setCode('')
      setSetupData(null)
      // user neu laden
      await useAuthStore.getState().checkAuth()
    } catch (e) {
      setError(e.message)
    }
  }

  const handleDisable = async () => {
    setError('')
    try {
      await api.disableTOTP(password, code)
      setMsg('2FA deaktiviert')
      setStep('idle')
      setCode(''); setPassword('')
      await useAuthStore.getState().checkAuth()
    } catch (e) {
      setError(e.message)
    }
  }

  return (
    <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
      <div className="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
        <span className="text-sm font-medium text-gray-300">Zwei-Faktor-Authentifizierung (2FA)</span>
        {totpEnabled
          ? <span className="flex items-center gap-1 text-xs text-green-400"><ShieldCheck className="w-3.5 h-3.5" />Aktiv</span>
          : <span className="flex items-center gap-1 text-xs text-gray-500"><ShieldOff className="w-3.5 h-3.5" />Inaktiv</span>
        }
      </div>

      <div className="px-4 py-4 space-y-4">
        {error && <div className="bg-red-900/30 border border-red-800 text-red-400 px-3 py-2 rounded text-sm">{error}</div>}
        {msg   && <div className="bg-green-900/30 border border-green-800 text-green-400 px-3 py-2 rounded text-sm">{msg}</div>}

        {step === 'idle' && (
          <div className="flex items-center justify-between">
            <div className="text-sm text-gray-400">
              {totpEnabled
                ? 'TOTP-Authentifizierung ist aktiv. Jeder Login erfordert einen 6-stelligen Code.'
                : 'Schütze deinen Account mit einer Authenticator-App (z.B. Google Authenticator, Aegis).'}
            </div>
            {totpEnabled
              ? <button onClick={() => { setStep('disable'); setMsg('') }}
                  className="ml-4 shrink-0 text-sm text-red-400 hover:text-red-300">Deaktivieren</button>
              : <button onClick={handleSetup}
                  className="ml-4 shrink-0 flex items-center gap-1 text-sm text-orange-400 hover:text-orange-300">
                  <QrCode className="w-4 h-4" />Einrichten
                </button>
            }
          </div>
        )}

        {step === 'setup' && setupData && (
          <div className="space-y-4">
            <div className="text-sm text-gray-300">
              1. Scanne den QR-Code mit deiner Authenticator-App oder gib den Secret manuell ein.
            </div>
            <div className="bg-gray-800 rounded p-3">
              <div className="text-xs text-gray-500 mb-1">Secret (manuell)</div>
              <code className="text-orange-400 text-sm tracking-widest break-all">{setupData.secret}</code>
            </div>
            <div className="bg-gray-800 rounded p-3">
              <div className="text-xs text-gray-500 mb-1">OTP URI (für QR-Code-Scanner)</div>
              <code className="text-gray-400 text-xs break-all">{setupData.uri}</code>
            </div>
            <div className="text-sm text-gray-300">
              2. Gib den ersten Code ein um die Einrichtung zu bestätigen:
            </div>
            <input
              type="text"
              inputMode="numeric"
              maxLength={6}
              value={code}
              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
              placeholder="000000"
              className="w-40 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-center text-lg tracking-widest focus:outline-none focus:border-orange-500"
            />
            <div className="flex gap-2">
              <button onClick={handleConfirm} disabled={code.length !== 6}
                className="px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white">
                Aktivieren
              </button>
              <button onClick={() => { setStep('idle'); setCode(''); setSetupData(null); setError('') }}
                className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300">
                Abbrechen
              </button>
            </div>
          </div>
        )}

        {step === 'disable' && (
          <div className="space-y-3">
            <div className="text-sm text-gray-300">Zur Deaktivierung: Passwort + aktuellen 2FA-Code eingeben.</div>
            <div>
              <label className="text-xs text-gray-500">Passwort</label>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
                className="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-orange-500" />
            </div>
            <div>
              <label className="text-xs text-gray-500">2FA-Code</label>
              <input type="text" inputMode="numeric" maxLength={6} value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
                placeholder="000000"
                className="w-full mt-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm text-center tracking-widest focus:outline-none focus:border-orange-500" />
            </div>
            <div className="flex gap-2">
              <button onClick={handleDisable} disabled={!password || code.length !== 6}
                className="px-4 py-2 bg-red-700 hover:bg-red-600 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white">
                2FA deaktivieren
              </button>
              <button onClick={() => { setStep('idle'); setCode(''); setPassword(''); setError('') }}
                className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm text-gray-300">
                Abbrechen
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

function SystemSettingsSection() {
  const { settings, fetchSettings } = useSettingsStore()
  const [form, setForm] = useState({})
  const [saving, setSaving] = useState(false)
  const [msg, setMsg] = useState('')
  const [copied, setCopied] = useState(null)

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

  useEffect(() => {
    setForm({
      backend_url_internal: settings.backend_url_internal || '',
      backend_url_external: settings.backend_url_external || '',
      api_key: settings.api_key || '',
    })
  }, [settings])

  const handleSave = async () => {
    setSaving(true)
    setMsg('')
    try {
      await api.updateSettings(form)
      await fetchSettings()
      setMsg('Gespeichert')
      setTimeout(() => setMsg(''), 3000)
    } catch (e) {
      setMsg('Fehler: ' + e.message)
    } finally {
      setSaving(false)
    }
  }

  const copyText = (text, id) => {
    copyToClipboard(text)
    setCopied(id)
    setTimeout(() => setCopied(null), 2000)
  }

  return (
    <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
      <div className="px-4 py-3 border-b border-gray-800 flex items-center gap-2">
        <Settings className="w-4 h-4 text-gray-500" />
        <span className="text-sm font-medium text-gray-300">System-Einstellungen</span>
      </div>
      <div className="px-4 py-4 space-y-3">
        <div>
          <label className="text-xs text-gray-500">Backend URL (intern)</label>
          <input
            type="text"
            value={form.backend_url_internal || ''}
            onChange={(e) => setForm({ ...form, backend_url_internal: e.target.value })}
            placeholder="https://192.168.85.13:8443"
            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-orange-500 mt-1"
          />
          <div className="text-[10px] text-gray-600 mt-0.5">Fuer Tunnel-Zugriff und lokale Verbindungen</div>
        </div>
        <div>
          <label className="text-xs text-gray-500">Backend URL (extern)</label>
          <input
            type="text"
            value={form.backend_url_external || ''}
            onChange={(e) => setForm({ ...form, backend_url_external: e.target.value })}
            placeholder="https://example.dyndns.org:8443"
            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-orange-500 mt-1"
          />
          <div className="text-[10px] text-gray-600 mt-0.5">Fuer Remote-Firewalls in der Installationsanleitung</div>
        </div>
        <div>
          <label className="text-xs text-gray-500">API-Key</label>
          <div className="flex gap-2 mt-1">
            <input
              type="text"
              value={form.api_key || ''}
              onChange={(e) => setForm({ ...form, api_key: e.target.value })}
              className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-orange-500"
            />
            <button
              onClick={() => copyText(form.api_key, 'sys-apikey')}
              className="px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-gray-400 transition-colors"
              title="Kopieren"
            >
              {copied === 'sys-apikey' ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
            </button>
          </div>
          <div className="text-[10px] text-gray-600 mt-0.5">Wird in Installationsanleitungen angezeigt</div>
        </div>
        <div className="flex items-center gap-3 pt-2">
          <button
            onClick={handleSave}
            disabled={saving}
            className="flex items-center gap-2 px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 disabled:text-gray-500 rounded text-sm text-white transition-colors"
          >
            <Save className="w-4 h-4" />
            {saving ? 'Speichere...' : 'Speichern'}
          </button>
          {msg && (
            <span className={`text-sm ${msg.startsWith('Fehler') ? 'text-red-400' : 'text-green-400'}`}>
              {msg}
            </span>
          )}
        </div>
      </div>
    </div>
  )
}
