import { useEffect, useRef, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { api, ApiError, type Integration, type AuthSession, type LoginEvent, type ManagedUser, type MeshStatus } from '../lib/api'
import { useAuth } from '../lib/AuthContext'
import {
  User,
  Palette,
  Plug,
  Bell,
  Database,
  Info,
  Eye,
  EyeOff,
  Check,
  Download,
  Upload,
  Trash2,
  Camera,
  ChevronDown,
  ChevronRight,
  Shield,
  Monitor,
  LogOut,
  Users,
  UserPlus,
  Network,
} from 'lucide-react'

const navSections = [
  { id: 'profile', label: 'Profile', icon: User },
  { id: 'appearance', label: 'Appearance', icon: Palette },
  { id: 'security', label: 'Security', icon: Shield },
  { id: 'users', label: 'Users', icon: Users, adminOnly: true },
  { id: 'mesh', label: 'Mesh', icon: Network, adminOnly: true },
  { id: 'integrations', label: 'Integrations', icon: Plug },
  { id: 'notifications', label: 'Notifications', icon: Bell },
  { id: 'data', label: 'Data & Backup', icon: Database },
  { id: 'about', label: 'About', icon: Info },
]

const accentColors = [
  { name: 'Gold', color: '#C8A434' },
  { name: 'Teal', color: '#2DD4BF' },
  { name: 'Purple', color: '#A855F7' },
  { name: 'Blue', color: '#3B82F6' },
  { name: 'Green', color: '#2ECC71' },
  { name: 'Red', color: '#E74C3C' },
]

type FieldDef = { key: string; label: string; secret?: boolean; hint?: string; placeholder?: string; file?: boolean }

const integrationTypeDefs: { type: string; name: string; multiInstance?: boolean; fields: FieldDef[] }[] = [
  { type: 'proxmox', name: 'Proxmox', multiInstance: true, fields: [
    { key: 'baseUrl', label: 'Host URL', hint: 'e.g. https://192.168.1.10:8006', placeholder: 'https://192.168.1.10:8006' },
    {
      key: 'apiKey',
      label: 'API Token',
      secret: true,
      hint: 'Must be the FULL token string from Datacenter → Permissions → API Tokens, in the form USER@REALM!TOKENID=SECRET — not just the secret.',
      placeholder: 'root@pam!archnest=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    },
  ] },
  { type: 'docker', name: 'Docker', multiInstance: true, fields: [
    { key: 'baseUrl', label: 'Socket / Remote URL', hint: 'Unix socket path or remote daemon URL, e.g. unix:///var/run/docker.sock or tcp://host:2375', placeholder: 'unix:///var/run/docker.sock' },
  ] },
  { type: 'netbird', name: 'NetBird', fields: [
    { key: 'apiKey', label: 'API Key', secret: true, hint: 'Personal access token from NetBird dashboard → Settings → Access Tokens.' },
  ] },
  { type: 'cloudflare', name: 'Cloudflare', fields: [
    { key: 'apiKey', label: 'API Token', secret: true, hint: 'A scoped API token (not your Global API Key) from My Profile → API Tokens.' },
    { key: 'zoneId', label: 'Zone ID', hint: 'Found on the domain overview page in the Cloudflare dashboard.' },
  ] },
  { type: 'aws', name: 'AWS', multiInstance: true, fields: [
    { key: 'accessKey', label: 'Access Key ID', hint: 'IAM user access key, e.g. AKIAIOSFODNN7EXAMPLE' },
    { key: 'secretKey', label: 'Secret Access Key', secret: true, hint: 'IAM user secret key — paired with the Access Key ID above.' },
    { key: 'region', label: 'Region', hint: 'e.g. us-east-1', placeholder: 'us-east-1' },
  ] },
  { type: 'uptime_kuma', name: 'Uptime Kuma', fields: [
    { key: 'baseUrl', label: 'URL', placeholder: 'https://uptime.example.com' },
    { key: 'username', label: 'Username', secret: true },
    { key: 'password', label: 'Password', secret: true },
  ] },
  { type: 'weather', name: 'Weather API', fields: [{ key: 'location', label: 'Location' }, { key: 'units', label: 'Units' }] },
  { type: 'remote_desktop', name: 'Remote Desktop', multiInstance: true, fields: [
    { key: 'protocol', label: 'Protocol (rdp / vnc / telnet)' },
    { key: 'hostname', label: 'Hostname' },
    { key: 'port', label: 'Port' },
    { key: 'username', label: 'Username' },
    { key: 'domain', label: 'Domain (RDP only)' },
    { key: 'password', label: 'Password', secret: true },
    { key: 'security', label: 'Security Mode (RDP only — any / nla / tls / rdp)', placeholder: 'any', hint: '"Server refused connection (wrong security type?)" usually means the target enforces NLA — try setting this to "nla".' },
  ] },
]

const sshFields: FieldDef[] = [
  { key: 'host', label: 'Host / IP' },
  { key: 'port', label: 'Port (default 22)' },
  { key: 'username', label: 'Username' },
  { key: 'password', label: 'Password', secret: true },
  { key: 'privateKey', label: 'Private Key (PEM)', secret: true, file: true },
  { key: 'passphrase', label: 'Key Passphrase', secret: true },
  { key: 'certificate', label: 'OPKSSH Certificate (id_key-cert.pub)', secret: true, file: true },
]

const cardBase: React.CSSProperties = {
  backgroundColor: 'rgba(10, 10, 12, 0.92)',
  border: '1px solid rgba(200, 164, 52, 0.08)',
  borderRadius: '12px',
  padding: '22px',
  position: 'relative',
}

const sectionTitle: React.CSSProperties = {
  fontSize: '11px',
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  color: '#7A7D85',
  fontWeight: 500,
  marginBottom: '16px',
}

const labelStyle: React.CSSProperties = {
  fontSize: '11px',
  color: '#7A7D85',
  marginBottom: '6px',
  display: 'block',
}

const inputStyle: React.CSSProperties = {
  width: '100%',
  height: '34px',
  borderRadius: '8px',
  border: '1px solid rgba(200,164,52,0.12)',
  backgroundColor: 'rgba(255,255,255,0.03)',
  color: '#E8E6E0',
  fontSize: '12px',
  padding: '0 12px',
  outline: 'none',
}

function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="cursor-pointer border-none"
      style={{
        width: '38px',
        height: '20px',
        borderRadius: '10px',
        backgroundColor: on ? '#C8A434' : 'rgba(255,255,255,0.08)',
        position: 'relative',
        transition: 'background-color 0.2s ease',
        flexShrink: 0,
      }}
    >
      <span
        style={{
          position: 'absolute',
          top: '2px',
          left: on ? '20px' : '2px',
          width: '16px',
          height: '16px',
          borderRadius: '50%',
          backgroundColor: '#0A0B0D',
          transition: 'left 0.2s ease',
        }}
      />
    </button>
  )
}

function GoldButton({ children, danger, onClick, disabled }: { children: React.ReactNode; danger?: boolean; onClick?: () => void; disabled?: boolean }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
      style={{
        fontSize: '12px',
        fontWeight: 600,
        color: danger ? '#E74C3C' : '#0A0B0D',
        backgroundColor: danger ? 'transparent' : '#C8A434',
        border: danger ? '1px solid rgba(231,76,60,0.4)' : 'none',
        borderRadius: '8px',
        padding: '9px 16px',
        boxShadow: danger ? 'none' : '0 0 14px rgba(200,164,52,0.2)',
        opacity: disabled ? 0.6 : 1,
      }}
    >
      {children}
    </button>
  )
}

function ProfileSection() {
  const { user, setUser } = useAuth()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [displayName, setDisplayName] = useState(user?.display_name ?? '')
  const [email, setEmail] = useState(user?.email ?? '')
  const [avatar, setAvatar] = useState<string | null>(user?.avatar_data_url ?? null)
  const [saving, setSaving] = useState(false)
  const [savedMsg, setSavedMsg] = useState('')

  useEffect(() => {
    setDisplayName(user?.display_name ?? '')
    setEmail(user?.email ?? '')
    setAvatar(user?.avatar_data_url ?? null)
  }, [user])

  const initials = (displayName || user?.username || '?').slice(0, 2).toUpperCase()

  function handleAvatarChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = () => setAvatar(reader.result as string)
    reader.readAsDataURL(file)
  }

  async function handleSave() {
    setSaving(true)
    setSavedMsg('')
    try {
      const { user: updated } = await api.updateMe({ displayName, email, avatarDataUrl: avatar })
      setUser(updated)
      setSavedMsg('Saved')
    } catch (err) {
      setSavedMsg(err instanceof ApiError ? err.message : 'Failed to save')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div style={cardBase}>
      <h3 style={sectionTitle}>Profile</h3>
      <div className="flex items-center gap-4" style={{ marginBottom: '24px' }}>
        <div
          onClick={() => fileInputRef.current?.click()}
          className="relative rounded-full border-2 flex items-center justify-center font-bold cursor-pointer group"
          style={{
            width: '64px',
            height: '64px',
            borderColor: '#C8A434',
            color: '#C8A434',
            fontSize: '20px',
            backgroundColor: 'rgba(200,164,52,0.08)',
            backgroundImage: avatar ? `url(${avatar})` : undefined,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            overflow: 'hidden',
          }}
          title="Upload photo"
        >
          {!avatar && initials}
          <div
            className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}
          >
            <Camera size={18} color="#E8E6E0" />
          </div>
        </div>
        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleAvatarChange} className="hidden" />
        <div>
          <span style={{ fontSize: '15px', color: '#E8E6E0', fontWeight: 600 }}>{displayName || user?.username}</span>
          <br />
          <span style={{ fontSize: '12px', color: '#7A7D85' }}>{email || 'No email set'}</span>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4" style={{ marginBottom: '20px' }}>
        <div>
          <label style={labelStyle}>Display Name</label>
          <input style={inputStyle} value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
        </div>
        <div>
          <label style={labelStyle}>Email</label>
          <input style={inputStyle} value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
      </div>
      <div className="flex items-center gap-3">
        <GoldButton onClick={handleSave} disabled={saving}>
          <Check size={14} />
          {saving ? 'Saving…' : 'Save Changes'}
        </GoldButton>
        {savedMsg && <span style={{ fontSize: '12px', color: '#7A7D85' }}>{savedMsg}</span>}
      </div>
    </div>
  )
}

function AppearanceSection() {
  const [theme, setTheme] = useState<'dark' | 'light'>('dark')
  const [accent, setAccent] = useState('Gold')
  const [fontSize, setFontSize] = useState(13)
  const [radius, setRadius] = useState(12)
  const [sidebarExpanded, setSidebarExpanded] = useState(true)
  const [animations, setAnimations] = useState(true)

  return (
    <div style={cardBase}>
      <h3 style={sectionTitle}>Appearance</h3>

      <div className="flex items-center justify-between" style={{ marginBottom: '20px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Theme</span>
        <div className="flex items-center gap-1" style={{ backgroundColor: 'rgba(255,255,255,0.03)', borderRadius: '8px', padding: '3px' }}>
          {(['dark', 'light'] as const).map((t) => (
            <button
              key={t}
              onClick={() => setTheme(t)}
              className="cursor-pointer border-none capitalize"
              style={{
                fontSize: '11px',
                padding: '6px 14px',
                borderRadius: '6px',
                color: theme === t ? '#0A0B0D' : '#7A7D85',
                backgroundColor: theme === t ? '#C8A434' : 'transparent',
                fontWeight: 600,
              }}
            >
              {t}
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0', marginBottom: '10px', display: 'block' }}>Accent Color</span>
        <div className="flex items-center gap-3">
          {accentColors.map((a) => (
            <button
              key={a.name}
              onClick={() => setAccent(a.name)}
              title={a.name}
              className="cursor-pointer border-none rounded-full flex items-center justify-center"
              style={{
                width: '28px',
                height: '28px',
                backgroundColor: a.color,
                outline: accent === a.name ? `2px solid ${a.color}` : 'none',
                outlineOffset: '3px',
              }}
            >
              {accent === a.name && <Check size={14} color="#0A0B0D" />}
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <div className="flex items-center justify-between" style={{ marginBottom: '8px' }}>
          <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Font Size</span>
          <span style={{ fontSize: '11px', color: '#C8A434' }}>{fontSize}px</span>
        </div>
        <input
          type="range"
          min={12}
          max={16}
          value={fontSize}
          onChange={(e) => setFontSize(Number(e.target.value))}
          className="w-full"
          style={{ accentColor: '#C8A434' }}
        />
      </div>

      <div style={{ marginBottom: '20px' }}>
        <div className="flex items-center justify-between" style={{ marginBottom: '8px' }}>
          <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Card Border Radius</span>
          <span style={{ fontSize: '11px', color: '#C8A434' }}>{radius}px</span>
        </div>
        <input
          type="range"
          min={4}
          max={16}
          value={radius}
          onChange={(e) => setRadius(Number(e.target.value))}
          className="w-full"
          style={{ accentColor: '#C8A434' }}
        />
      </div>

      <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Sidebar Expanded by Default</span>
        <Toggle on={sidebarExpanded} onClick={() => setSidebarExpanded((v) => !v)} />
      </div>

      <div className="flex items-center justify-between">
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Animations</span>
        <Toggle on={animations} onClick={() => setAnimations((v) => !v)} />
      </div>
    </div>
  )
}

function SshHostsSection() {
  const [hosts, setHosts] = useState<Integration[] | null>(null)
  const [revealed, setRevealed] = useState<Set<string>>(new Set())
  const [drafts, setDrafts] = useState<Record<number, Record<string, string>>>({})
  const [statusMsg, setStatusMsg] = useState<Record<number, string>>({})
  const [busy, setBusy] = useState<Set<number>>(new Set())
  const [collapsed, setCollapsed] = useState<Set<number>>(new Set())
  const [newDrafts, setNewDrafts] = useState<{ key: number; values: Record<string, string> }[]>([])
  const nextNewKey = useRef(-1)
  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({})
  const collapseInitialized = useRef(false)

  function toggleCollapsed(id: number) {
    setCollapsed((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

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

  function refresh() {
    api.listIntegrations().then(({ integrations }) => {
      const sshHosts = integrations.filter((i) => i.type === 'ssh')
      setHosts(sshHosts)
      if (!collapseInitialized.current) {
        collapseInitialized.current = true
        setCollapsed(new Set(sshHosts.filter((h) => h.secretKeys.length > 0).map((h) => h.id)))
      }
    })
  }

  function toggleReveal(key: string) {
    setRevealed((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  function setBusyFlag(id: number, value: boolean) {
    setBusy((prev) => {
      const next = new Set(prev)
      if (value) next.add(id)
      else next.delete(id)
      return next
    })
  }

  function addNewHost() {
    const key = nextNewKey.current--
    setNewDrafts((prev) => [...prev, { key, values: {} }])
  }

  function setNewDraftField(key: number, fieldKey: string, value: string) {
    setNewDrafts((prev) => prev.map((d) => (d.key === key ? { ...d, values: { ...d.values, [fieldKey]: value } } : d)))
  }

  function removeNewDraft(key: number) {
    setNewDrafts((prev) => prev.filter((d) => d.key !== key))
  }

  function setDraftField(id: number, fieldKey: string, value: string) {
    setDrafts((prev) => ({ ...prev, [id]: { ...prev[id], [fieldKey]: value } }))
  }

  const fieldsWithJumpHost = (): FieldDef[] => [
    ...sshFields,
    { key: 'jumpHostIntegrationId', label: 'Jump Host (optional)' },
    { key: 'sessionLogging', label: 'Record session to disk' },
  ]

  function buildPayload(fields: FieldDef[], values: Record<string, string>, existing?: Integration) {
    const config: Record<string, string> = { ...(existing?.config ?? {}) }
    const secrets: Record<string, string> = {}
    for (const f of fields) {
      const value = values[f.key]
      if (value === undefined) continue
      if (f.secret) secrets[f.key] = value
      else config[f.key] = value
    }
    return { config, secrets }
  }

  async function handleSaveExisting(host: Integration) {
    setBusyFlag(host.id, true)
    setStatusMsg((prev) => ({ ...prev, [host.id]: '' }))
    try {
      const draft = drafts[host.id] ?? {}
      const { config, secrets } = buildPayload(fieldsWithJumpHost(), draft, host)
      const name = draft.__name?.trim()
      const { integration } = await api.updateIntegration(host.id, { ...(name ? { name } : {}), config, secrets })
      setHosts((prev) => (prev ?? []).map((h) => (h.id === integration.id ? integration : h)))
      setStatusMsg((prev) => ({ ...prev, [host.id]: 'Saved' }))
      setCollapsed((prev) => new Set(prev).add(host.id))
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [host.id]: err instanceof ApiError ? err.message : 'Save failed' }))
    } finally {
      setBusyFlag(host.id, false)
    }
  }

  async function handleSaveNew(key: number, values: Record<string, string>) {
    setBusyFlag(key, true)
    try {
      const { config, secrets } = buildPayload(fieldsWithJumpHost(), values)
      const name = values.__name?.trim() || (values.host ? `SSH: ${values.host}` : 'SSH Host')
      await api.createIntegration({ type: 'ssh', name, config, secrets })
      removeNewDraft(key)
      refresh()
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [key]: err instanceof ApiError ? err.message : 'Save failed' }))
    } finally {
      setBusyFlag(key, false)
    }
  }

  async function handleTest(host: Integration) {
    setBusyFlag(host.id, true)
    try {
      const result = await api.testIntegration(host.id)
      setStatusMsg((prev) => ({ ...prev, [host.id]: result.message }))
      refresh()
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [host.id]: err instanceof ApiError ? err.message : 'Test failed' }))
    } finally {
      setBusyFlag(host.id, false)
    }
  }

  async function handleDelete(host: Integration) {
    setBusyFlag(host.id, true)
    try {
      await api.deleteIntegration(host.id)
      refresh()
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [host.id]: err instanceof ApiError ? err.message : 'Delete failed' }))
      setBusyFlag(host.id, false)
    }
  }

  function renderFields(
    fields: FieldDef[],
    values: Record<string, string>,
    onChange: (fieldKey: string, value: string) => void,
    idForReveal: number,
    existing: Integration | undefined,
    excludeHostId?: number,
  ) {
    return fields.map((f) => {
      const key = `${idForReveal}-${f.key}`
      if (f.key === 'jumpHostIntegrationId') {
        const options = (hosts ?? []).filter((h) => h.id !== excludeHostId)
        const savedValue = existing?.config[f.key] ?? ''
        const value = values[f.key] ?? savedValue
        return (
          <div key={key}>
            <label style={labelStyle}>{f.label}</label>
            <select style={inputStyle} value={value} onChange={(e) => onChange(f.key, e.target.value)}>
              <option value="">None</option>
              {options.map((h) => (
                <option key={h.id} value={String(h.id)}>
                  {h.name}
                </option>
              ))}
            </select>
          </div>
        )
      }
      if (f.key === 'sessionLogging') {
        const savedValue = existing?.config[f.key] === 'true'
        const value = values[f.key] !== undefined ? values[f.key] === 'true' : savedValue
        return (
          <div key={key} className="flex items-end pb-1.5">
            <label className="flex items-center gap-2 text-xs" style={{ color: '#E8E6E0' }}>
              <input type="checkbox" checked={value} onChange={(e) => onChange(f.key, e.target.checked ? 'true' : 'false')} />
              {f.label}
            </label>
          </div>
        )
      }
      const isRevealed = revealed.has(key)
      const savedValue = f.secret ? '' : existing?.config[f.key] ?? ''
      const value = values[f.key] ?? savedValue

      if (f.file) {
        const isSaved = existing?.secretKeys?.includes(f.key)
        return (
          <div key={key} className="col-span-3">
            <label style={labelStyle}>
              {f.label}
              {isSaved && <span style={{ color: '#2ECC71', fontWeight: 400 }}> · saved</span>}
            </label>
            <div className="relative">
              <textarea
                style={{ ...inputStyle, height: '90px', paddingRight: '32px', fontFamily: 'monospace', resize: 'vertical', whiteSpace: 'pre' }}
                value={value}
                onChange={(e) => onChange(f.key, e.target.value)}
                placeholder={isSaved ? '•••••••••••• (saved — paste to replace)' : 'Paste key contents here, or upload a file'}
              />
              <input
                type="file"
                ref={(el) => { fileInputRefs.current[key] = el }}
                style={{ display: 'none' }}
                onChange={(e) => {
                  const file = e.target.files?.[0]
                  if (!file) return
                  const reader = new FileReader()
                  reader.onload = () => onChange(f.key, String(reader.result ?? '').trim())
                  reader.readAsText(file)
                  e.target.value = ''
                }}
              />
              <button
                onClick={() => fileInputRefs.current[key]?.click()}
                title="Upload from file"
                className="absolute cursor-pointer border-none bg-transparent"
                style={{ right: '8px', top: '8px', color: '#7A7D85' }}
              >
                <Upload size={13} />
              </button>
            </div>
          </div>
        )
      }

      const isSavedSecret = f.secret && existing?.secretKeys?.includes(f.key)
      return (
        <div key={key}>
          <label style={labelStyle}>
            {f.label}
            {isSavedSecret && <span style={{ color: '#2ECC71', fontWeight: 400 }}> · saved</span>}
          </label>
          <div className="relative">
            <input
              style={{ ...inputStyle, paddingRight: f.secret ? '32px' : undefined }}
              type={f.secret && !isRevealed ? 'password' : 'text'}
              value={value}
              onChange={(e) => onChange(f.key, e.target.value)}
              placeholder={isSavedSecret ? '•••••••••••• (saved — type to replace)' : 'Not configured'}
            />
            {f.secret && (
              <button
                onClick={() => toggleReveal(key)}
                className="absolute cursor-pointer border-none bg-transparent"
                style={{ right: '8px', top: '50%', transform: 'translateY(-50%)', color: '#7A7D85' }}
              >
                {isRevealed ? <EyeOff size={13} /> : <Eye size={13} />}
              </button>
            )}
          </div>
        </div>
      )
    })
  }

  if (!hosts) {
    return (
      <div style={cardBase}>
        <p style={{ fontSize: '12px', color: '#7A7D85' }}>Loading SSH hosts…</p>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      {hosts.map((host) => {
        const online = host.status === 'connected'
        const draft = drafts[host.id] ?? {}
        const isCollapsed = collapsed.has(host.id)
        return (
          <div key={host.id} style={cardBase}>
            <div className="flex items-center justify-between" style={{ marginBottom: isCollapsed ? 0 : '16px' }}>
              <button
                onClick={() => toggleCollapsed(host.id)}
                className="flex items-center gap-2.5 cursor-pointer border-none bg-transparent"
                style={{ padding: 0 }}
                title={isCollapsed ? 'Expand' : 'Collapse'}
              >
                {isCollapsed ? <ChevronRight size={14} color="#7A7D85" /> : <ChevronDown size={14} color="#7A7D85" />}
                <span
                  style={{
                    width: '8px',
                    height: '8px',
                    borderRadius: '50%',
                    backgroundColor: online ? '#2ECC71' : '#4A4D55',
                    boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
                  }}
                />
                <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{draft.__name ?? host.name}</span>
              </button>
              <div className="flex items-center gap-2">
                {statusMsg[host.id] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[host.id]}</span>}
                {!isCollapsed && (
                  <button
                    onClick={() => handleSaveExisting(host)}
                    disabled={busy.has(host.id)}
                    className="cursor-pointer border-none"
                    style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(host.id) ? 0.6 : 1 }}
                  >
                    Save
                  </button>
                )}
                <button
                  onClick={() => handleTest(host)}
                  disabled={busy.has(host.id)}
                  className="cursor-pointer border-none"
                  style={{ fontSize: '11px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(host.id) ? 0.6 : 1 }}
                >
                  Test Connection
                </button>
                <button
                  onClick={() => handleDelete(host)}
                  disabled={busy.has(host.id)}
                  className="cursor-pointer border-none"
                  style={{ fontSize: '11px', fontWeight: 600, color: '#E74C3C', backgroundColor: 'transparent', border: '1px solid rgba(231,76,60,0.3)', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(host.id) ? 0.6 : 1 }}
                >
                  <Trash2 size={12} />
                </button>
              </div>
            </div>
            {!isCollapsed && (
              <div className="grid grid-cols-3 gap-4" style={{ marginTop: '16px' }}>
                <div>
                  <label style={labelStyle}>Host Name</label>
                  <input
                    style={inputStyle}
                    value={draft.__name ?? host.name}
                    onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
                    placeholder="Not configured"
                  />
                </div>
                {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
              </div>
            )}
          </div>
        )
      })}

      {newDrafts.map((d) => (
        <div key={d.key} style={cardBase}>
          <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
            <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>New SSH Host</span>
            <div className="flex items-center gap-2">
              {statusMsg[d.key] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[d.key]}</span>}
              <button
                onClick={() => handleSaveNew(d.key, d.values)}
                disabled={busy.has(d.key)}
                className="cursor-pointer border-none"
                style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(d.key) ? 0.6 : 1 }}
              >
                Save
              </button>
              <button
                onClick={() => removeNewDraft(d.key)}
                className="cursor-pointer border-none"
                style={{ fontSize: '11px', fontWeight: 600, color: '#7A7D85', backgroundColor: 'transparent', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '6px', padding: '6px 12px' }}
              >
                Cancel
              </button>
            </div>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div>
              <label style={labelStyle}>Host Name</label>
              <input
                style={inputStyle}
                value={d.values.__name ?? ''}
                onChange={(e) => setNewDraftField(d.key, '__name', e.target.value)}
                placeholder="SSH Host"
              />
            </div>
            {renderFields(fieldsWithJumpHost(), d.values, (k, v) => setNewDraftField(d.key, k, v), d.key, undefined)}
          </div>
        </div>
      ))}

      <button
        onClick={addNewHost}
        className="cursor-pointer border-none self-start"
        style={{ fontSize: '12px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '8px', padding: '9px 16px' }}
      >
        + Add SSH Host
      </button>
    </div>
  )
}

type NewIntegrationDraft = { id: number; type: string; values: Record<string, string> }

function dockerHostInfo(baseUrl: string): { host: string; port: string } | null {
  if (!baseUrl || baseUrl.startsWith('unix://')) return null
  try {
    const u = new URL(baseUrl.replace(/^tcp:\/\//, 'http://'))
    if (u.protocol !== 'http:' && u.protocol !== 'https:') return null
    if (!u.hostname) return null
    return { host: u.hostname, port: u.port || '2375' }
  } catch {
    return null
  }
}

function DockerSetupHint({ baseUrl }: { baseUrl: string }) {
  const [copied, setCopied] = useState(false)
  const info = dockerHostInfo(baseUrl)
  if (!info) return null

  const script = `sudo mkdir -p /etc/systemd/system/docker.service.d
sudo tee /etc/systemd/system/docker.service.d/override.conf > /dev/null <<EOF
[Service]
ExecStart=
ExecStart=/usr/bin/dockerd -H fd:// -H tcp://${info.host}:${info.port}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
curl http://${info.host}:${info.port}/version`

  return (
    <div
      style={{
        marginTop: '12px',
        padding: '12px 14px',
        borderRadius: '8px',
        border: '1px solid rgba(200,164,52,0.12)',
        backgroundColor: 'rgba(255,255,255,0.02)',
      }}
    >
      <div className="flex items-center justify-between" style={{ marginBottom: '8px' }}>
        <span style={{ fontSize: '11px', color: '#7A7D85' }}>
          Run this on <strong style={{ color: '#E8E6E0' }}>{info.host}</strong> to expose its Docker API on port {info.port}:
        </span>
        <button
          onClick={() => {
            navigator.clipboard.writeText(script)
            setCopied(true)
            setTimeout(() => setCopied(false), 1500)
          }}
          className="flex items-center gap-1 cursor-pointer border-none bg-transparent"
          style={{ fontSize: '10.5px', fontWeight: 600, color: copied ? '#2ECC71' : '#C8A434', flexShrink: 0 }}
        >
          {copied ? <Check size={11} /> : null}
          {copied ? 'Copied' : 'Copy script'}
        </button>
      </div>
      <pre
        style={{
          fontSize: '10.5px',
          color: '#9DA0A8',
          fontFamily: 'monospace',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-all',
          margin: 0,
          lineHeight: 1.5,
        }}
      >
        {script}
      </pre>
    </div>
  )
}

// Universal per-integration icon override — applies to every integration type, not
// just one. Stored as config.iconUrl and takes priority over the built-in CDN icon
// chain in Infrastructure.tsx's Node Status tile. Accepts a pasted URL or an
// uploaded image file (embedded as a base64 data URI — no separate file storage
// needed since config_json already holds arbitrary string values).
function IconField({ value, onChange }: { value: string; onChange: (value: string) => void }) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  return (
    <div style={{ marginTop: '12px' }}>
      <label style={labelStyle}>Icon (Node Status tile)</label>
      <div className="flex items-center gap-2">
        {value && (
          <img src={value} width={20} height={20} style={{ borderRadius: '4px', flexShrink: 0 }} alt="" />
        )}
        <input
          style={{ ...inputStyle, flex: 1 }}
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Paste an image URL, or upload a file"
        />
        <input
          type="file"
          ref={fileInputRef}
          accept="image/*"
          style={{ display: 'none' }}
          onChange={(e) => {
            const file = e.target.files?.[0]
            if (!file) return
            const reader = new FileReader()
            reader.onload = () => onChange(String(reader.result ?? ''))
            reader.readAsDataURL(file)
            e.target.value = ''
          }}
        />
        <button
          onClick={() => fileInputRef.current?.click()}
          title="Upload an icon file"
          className="cursor-pointer border-none flex-shrink-0"
          style={{ fontSize: '11px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '6px', padding: '8px 10px' }}
        >
          <Upload size={13} />
        </button>
      </div>
    </div>
  )
}

function IntegrationsSection() {
  const { user } = useAuth()
  const isAdmin = user?.role === 'admin'
  const [integrations, setIntegrations] = useState<Integration[] | null>(null)
  const [revealed, setRevealed] = useState<Set<string>>(new Set())
  const [editDrafts, setEditDrafts] = useState<Record<number, Record<string, string>>>({})
  const [newDrafts, setNewDrafts] = useState<NewIntegrationDraft[]>([])
  const [statusMsg, setStatusMsg] = useState<Record<string, string>>({})
  const [busy, setBusy] = useState<Set<string>>(new Set())
  const nextDraftId = useRef(-1)

  useEffect(() => {
    api.listIntegrations().then(({ integrations }) => setIntegrations(integrations))
  }, [])

  function toggleReveal(key: string) {
    setRevealed((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  function setBusyFlag(rowKey: string, value: boolean) {
    setBusy((prev) => {
      const next = new Set(prev)
      if (value) next.add(rowKey)
      else next.delete(rowKey)
      return next
    })
  }

  function setEditField(integrationId: number, fieldKey: string, value: string) {
    setEditDrafts((prev) => ({ ...prev, [integrationId]: { ...prev[integrationId], [fieldKey]: value } }))
  }

  function setNewDraftField(draftId: number, fieldKey: string, value: string) {
    setNewDrafts((prev) => prev.map((d) => (d.id === draftId ? { ...d, values: { ...d.values, [fieldKey]: value } } : d)))
  }

  function addNewDraft(type: string) {
    const id = nextDraftId.current--
    setNewDrafts((prev) => [...prev, { id, type, values: {} }])
  }

  function removeNewDraft(id: number) {
    setNewDrafts((prev) => prev.filter((d) => d.id !== id))
  }

  function buildPayload(def: (typeof integrationTypeDefs)[number], values: Record<string, string>, existing?: Integration) {
    const config: Record<string, string> = { ...(existing?.config ?? {}) }
    const secrets: Record<string, string> = {}
    for (const f of def.fields) {
      const value = values[f.key]
      if (value === undefined) continue
      if (f.secret) secrets[f.key] = value
      else config[f.key] = value
    }
    // iconUrl is universal across every integration type (not a per-type field),
    // overriding the built-in Node Status icon for this integration.
    if (values.iconUrl !== undefined) config.iconUrl = values.iconUrl
    return { config, secrets }
  }

  async function handleSaveExisting(def: (typeof integrationTypeDefs)[number], existing: Integration) {
    const rowKey = `e-${existing.id}`
    setBusyFlag(rowKey, true)
    setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
    try {
      const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {}, existing)
      const name = editDrafts[existing.id]?.__name?.trim()
      const { integration } = await api.updateIntegration(existing.id, { ...(name ? { name } : {}), config, secrets })
      setIntegrations((prev) => (prev ?? []).map((i) => (i.id === integration.id ? integration : i)))
      setStatusMsg((prev) => ({ ...prev, [rowKey]: 'Saved' }))
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [rowKey]: err instanceof ApiError ? err.message : 'Save failed' }))
    } finally {
      setBusyFlag(rowKey, false)
    }
  }

  async function handleSaveNew(def: (typeof integrationTypeDefs)[number], draft: NewIntegrationDraft) {
    const rowKey = `n-${draft.id}`
    setBusyFlag(rowKey, true)
    setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
    try {
      const { config, secrets } = buildPayload(def, draft.values)
      const name = draft.values.__name?.trim() || def.name
      const { integration } = await api.createIntegration({ type: def.type, name, config, secrets })
      setIntegrations((prev) => [...(prev ?? []), integration])
      removeNewDraft(draft.id)
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [rowKey]: err instanceof ApiError ? err.message : 'Save failed' }))
    } finally {
      setBusyFlag(rowKey, false)
    }
  }

  async function handleTest(existing: Integration) {
    const rowKey = `e-${existing.id}`
    setBusyFlag(rowKey, true)
    try {
      const result = await api.testIntegration(existing.id)
      setStatusMsg((prev) => ({ ...prev, [rowKey]: result.message }))
      const { integrations } = await api.listIntegrations()
      setIntegrations(integrations)
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [rowKey]: err instanceof ApiError ? err.message : 'Test failed' }))
    } finally {
      setBusyFlag(rowKey, false)
    }
  }

  async function handleDelete(existing: Integration) {
    if (!window.confirm(`Remove this ${existing.name} integration?`)) return
    const rowKey = `e-${existing.id}`
    setBusyFlag(rowKey, true)
    try {
      await api.deleteIntegration(existing.id)
      setIntegrations((prev) => (prev ?? []).filter((i) => i.id !== existing.id))
    } catch (err) {
      setStatusMsg((prev) => ({ ...prev, [rowKey]: err instanceof ApiError ? err.message : 'Delete failed' }))
      setBusyFlag(rowKey, false)
    }
  }

  if (!integrations) {
    return (
      <div style={cardBase}>
        <p style={{ fontSize: '12px', color: '#7A7D85' }}>Loading integrations…</p>
      </div>
    )
  }

  function renderFields(def: (typeof integrationTypeDefs)[number], rowKey: string, getValue: (f: FieldDef) => string, onChange: (f: FieldDef, value: string) => void, placeholderForSecret: string, existing?: Integration) {
    return (
      <div className="grid grid-cols-3 gap-4">
        {def.fields.map((f) => {
          const key = `${rowKey}-${f.key}`
          const isRevealed = revealed.has(key)
          const isSavedSecret = f.secret && existing?.secretKeys?.includes(f.key)
          return (
            <div key={key}>
              <label style={labelStyle}>
                {f.label}
                {isSavedSecret && <span style={{ color: '#2ECC71', fontWeight: 400 }}> · saved</span>}
              </label>
              <div className="relative">
                <input
                  style={inputStyle}
                  type={f.secret && !isRevealed ? 'password' : 'text'}
                  value={getValue(f)}
                  onChange={(e) => onChange(f, e.target.value)}
                  placeholder={f.secret ? (isSavedSecret ? `${placeholderForSecret} (saved — type to replace)` : placeholderForSecret) : f.placeholder ?? 'Not configured'}
                />
                {f.secret && (
                  <button
                    onClick={() => toggleReveal(key)}
                    className="absolute cursor-pointer border-none bg-transparent"
                    style={{ right: '8px', top: '50%', transform: 'translateY(-50%)', color: '#7A7D85' }}
                  >
                    {isRevealed ? <EyeOff size={13} /> : <Eye size={13} />}
                  </button>
                )}
              </div>
              {f.hint && (
                <p style={{ fontSize: '10.5px', color: '#7A7D85', marginTop: '4px', lineHeight: 1.4, maxWidth: '260px' }}>{f.hint}</p>
              )}
            </div>
          )
        })}
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-4">
      {!isAdmin && (
        <div
          style={{
            padding: '12px 14px',
            borderRadius: '10px',
            border: '1px solid rgba(200,164,52,0.2)',
            backgroundColor: 'rgba(200,164,52,0.06)',
            fontSize: '12px',
            color: '#C8A434',
          }}
        >
          You have member access — integrations are read-only. Ask an administrator to add or change connections.
        </div>
      )}
      <div>
        <h3 style={sectionTitle}>SSH Hosts</h3>
        <SshHostsSection />
      </div>
      <div>
        <h3 style={sectionTitle}>Other Integrations</h3>
      </div>
      {integrationTypeDefs.map((def) => {
        const existingRows = integrations.filter((i) => i.type === def.type)
        const draftRows = newDrafts.filter((d) => d.type === def.type)
        const canAddAnother = def.multiInstance || existingRows.length + draftRows.length === 0

        return (
          <div key={def.type} className="flex flex-col gap-3">
            {existingRows.map((existing) => {
              const rowKey = `e-${existing.id}`
              const online = existing.status === 'connected'
              const draft = editDrafts[existing.id] ?? {}
              return (
                <div key={existing.id} style={cardBase}>
                  <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
                    <div className="flex items-center gap-2.5">
                      <span
                        style={{
                          width: '8px',
                          height: '8px',
                          borderRadius: '50%',
                          backgroundColor: online ? '#2ECC71' : '#4A4D55',
                          boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
                        }}
                      />
                      <input
                        value={draft.__name ?? existing.name ?? def.name}
                        onChange={(e) => setEditField(existing.id, '__name', e.target.value)}
                        style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600, backgroundColor: 'transparent', border: 'none', outline: 'none', padding: 0, width: '160px' }}
                      />
                      {existing.config.baseUrl || existing.config.hostname ? (
                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{existing.config.baseUrl || existing.config.hostname}</span>
                      ) : null}
                    </div>
                    <div className="flex items-center gap-2">
                      {statusMsg[rowKey] && (
                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[rowKey]}</span>
                      )}
                      <button
                        onClick={() => handleSaveExisting(def, existing)}
                        disabled={busy.has(rowKey)}
                        className="cursor-pointer border-none"
                        style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(rowKey) ? 0.6 : 1 }}
                      >
                        Save
                      </button>
                      <button
                        onClick={() => handleTest(existing)}
                        disabled={busy.has(rowKey)}
                        className="cursor-pointer border-none"
                        style={{ fontSize: '11px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(rowKey) ? 0.6 : 1 }}
                      >
                        Test Connection
                      </button>
                      <button
                        onClick={() => handleDelete(existing)}
                        disabled={busy.has(rowKey)}
                        className="cursor-pointer border-none"
                        style={{ fontSize: '11px', fontWeight: 600, color: '#E74C3C', backgroundColor: 'rgba(231,76,60,0.08)', border: '1px solid rgba(231,76,60,0.2)', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(rowKey) ? 0.6 : 1 }}
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                  {renderFields(
                    def,
                    rowKey,
                    (f) => draft[f.key] ?? (f.secret ? '' : existing.config[f.key] ?? ''),
                    (f, value) => setEditField(existing.id, f.key, value),
                    '••••••••••••',
                    existing,
                  )}
                  <IconField
                    value={draft.iconUrl ?? existing.config.iconUrl ?? ''}
                    onChange={(value) => setEditField(existing.id, 'iconUrl', value)}
                  />
                  {def.type === 'docker' && (
                    <DockerSetupHint baseUrl={draft.baseUrl ?? existing.config.baseUrl ?? ''} />
                  )}
                </div>
              )
            })}

            {draftRows.map((draft) => {
              const rowKey = `n-${draft.id}`
              return (
                <div key={draft.id} style={cardBase}>
                  <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
                    <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>New {def.name}</span>
                    <div className="flex items-center gap-2">
                      {statusMsg[rowKey] && (
                        <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[rowKey]}</span>
                      )}
                      <button
                        onClick={() => handleSaveNew(def, draft)}
                        disabled={busy.has(rowKey)}
                        className="cursor-pointer border-none"
                        style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(rowKey) ? 0.6 : 1 }}
                      >
                        Save
                      </button>
                      <button
                        onClick={() => removeNewDraft(draft.id)}
                        className="cursor-pointer border-none"
                        style={{ fontSize: '11px', fontWeight: 600, color: '#7A7D85', backgroundColor: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px', padding: '6px 12px' }}
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4" style={{ marginBottom: '16px' }}>
                    <div>
                      <label style={labelStyle}>Name</label>
                      <input
                        style={inputStyle}
                        value={draft.values.__name ?? ''}
                        onChange={(e) => setNewDraftField(draft.id, '__name', e.target.value)}
                        placeholder={def.name}
                      />
                    </div>
                  </div>
                  {renderFields(
                    def,
                    rowKey,
                    (f) => draft.values[f.key] ?? '',
                    (f, value) => setNewDraftField(draft.id, f.key, value),
                    '',
                  )}
                  <IconField
                    value={draft.values.iconUrl ?? ''}
                    onChange={(value) => setNewDraftField(draft.id, 'iconUrl', value)}
                  />
                  {def.type === 'docker' && <DockerSetupHint baseUrl={draft.values.baseUrl ?? ''} />}
                </div>
              )
            })}

            {existingRows.length === 0 && draftRows.length === 0 && (
              <button
                onClick={() => addNewDraft(def.type)}
                className="cursor-pointer self-start"
                style={{ fontSize: '12px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '8px', padding: '9px 16px' }}
              >
                + Add {def.name}
              </button>
            )}
            {canAddAnother && (existingRows.length > 0 || draftRows.length > 0) && (
              <button
                onClick={() => addNewDraft(def.type)}
                className="cursor-pointer self-start"
                style={{ fontSize: '12px', fontWeight: 600, color: '#C8A434', backgroundColor: 'rgba(200,164,52,0.08)', border: '1px solid rgba(200,164,52,0.2)', borderRadius: '8px', padding: '9px 16px' }}
              >
                + Add Another {def.name}
              </button>
            )}
          </div>
        )
      })}
    </div>
  )
}

function NotificationsSection() {
  const [enabled, setEnabled] = useState(true)
  const [email, setEmail] = useState(true)
  const [push, setPush] = useState(false)
  const [sound, setSound] = useState(true)

  return (
    <div style={cardBase}>
      <h3 style={sectionTitle}>Notifications</h3>

      <div className="flex items-center justify-between" style={{ marginBottom: '20px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Enable Notifications</span>
        <Toggle on={enabled} onClick={() => setEnabled((v) => !v)} />
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label style={labelStyle}>Alert Threshold</label>
        <select style={{ ...inputStyle, width: '220px' }} defaultValue="all">
          <option value="all">All</option>
          <option value="critical">Critical Only</option>
          <option value="warning">Warning & Above</option>
        </select>
      </div>

      <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Email Notifications</span>
        <Toggle on={email} onClick={() => setEmail((v) => !v)} />
      </div>

      <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Browser Push</span>
        <Toggle on={push} onClick={() => setPush((v) => !v)} />
      </div>

      <div className="flex items-center justify-between" style={{ marginBottom: '8px' }}>
        <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Sound</span>
        <Toggle on={sound} onClick={() => setSound((v) => !v)} />
      </div>
      {sound && (
        <input type="range" min={0} max={100} defaultValue={70} className="w-full" style={{ accentColor: '#C8A434' }} />
      )}
    </div>
  )
}

function DataBackupSection() {
  const { user } = useAuth()
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const importRef = useRef<HTMLInputElement | null>(null)

  if (user?.role !== 'admin') {
    return (
      <div style={cardBase}>
        <h3 style={sectionTitle}>Data &amp; Backup</h3>
        <p style={{ fontSize: '13px', color: '#7A7D85' }}>
          Backup export and import are restricted to administrators.
        </p>
      </div>
    )
  }

  async function handleExport() {
    setBusy(true)
    setError(null)
    setMessage(null)
    try {
      const data = await api.exportData()
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `archnest-backup-${new Date().toISOString().slice(0, 10)}.json`
      a.click()
      URL.revokeObjectURL(url)
      setMessage(`Exported ${data.integrations.length} integrations, ${data.bookmarks.length} bookmarks, ${data.tunnels.length} tunnels.`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Export failed')
    } finally {
      setBusy(false)
    }
  }

  async function handleImportFile(file: File) {
    setBusy(true)
    setError(null)
    setMessage(null)
    try {
      const text = await file.text()
      const parsed = JSON.parse(text)
      const result = await api.importData(parsed)
      const c = result.imported
      setMessage(`Imported ${c.integrations} integrations, ${c.bookmarkCategories} categories, ${c.bookmarks} bookmarks, ${c.tunnels} tunnels.`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Import failed — is this a valid ArchNest backup file?')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div style={cardBase}>
      <h3 style={sectionTitle}>Data & Backup</h3>
      <p style={{ fontSize: '12px', color: '#7A7D85', marginBottom: '16px', maxWidth: '460px' }}>
        Export a portable backup of all integrations (including their credentials), bookmarks, and tunnels as a single JSON file, or
        import one into this instance. Imports are additive — existing data is kept and the backup's items are added alongside it.
        The backup contains plaintext credentials, so store it securely.
      </p>
      <div className="flex flex-col gap-3" style={{ maxWidth: '460px' }}>
        <div className="flex items-center justify-between">
          <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Export all data (JSON)</span>
          <GoldButton onClick={handleExport} disabled={busy}>
            <Download size={13} /> Export
          </GoldButton>
        </div>
        <div className="flex items-center justify-between">
          <span style={{ fontSize: '13px', color: '#E8E6E0' }}>Import from backup (JSON)</span>
          <GoldButton onClick={() => importRef.current?.click()} disabled={busy}>
            <Upload size={13} /> Import
          </GoldButton>
          <input
            ref={importRef}
            type="file"
            accept="application/json,.json"
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0]
              if (file) handleImportFile(file)
              e.target.value = ''
            }}
          />
        </div>
        {message && <p style={{ fontSize: '12px', color: '#2ECC71' }}>{message}</p>}
        {error && <p style={{ fontSize: '12px', color: '#E74C3C' }}>{error}</p>}
      </div>
    </div>
  )
}

function AboutSection() {
  const rows: [string, string][] = [
    ['App', 'ArchNest Dashboard v1.0.0'],
    ['Author', 'Samuel James'],
    ['Repo', 'github.com/SamuelSJames/archnest'],
    ['Stack', 'React 19, Vite, TypeScript'],
    ['License', 'MIT'],
  ]
  return (
    <div style={cardBase}>
      <h3 style={sectionTitle}>About</h3>
      <div className="flex flex-col gap-3">
        {rows.map(([label, value]) => (
          <div key={label} className="flex items-center justify-between">
            <span style={{ fontSize: '12px', color: '#7A7D85' }}>{label}</span>
            <span style={{ fontSize: '12px', color: '#E8E6E0' }}>{value}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

function relativeTime(iso: string): string {
  // SQLite datetime('now') returns UTC without a timezone marker; treat it as UTC.
  const ts = Date.parse(iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z')
  if (Number.isNaN(ts)) return iso
  const diffMs = Date.now() - ts
  const sec = Math.round(diffMs / 1000)
  if (sec < 60) return 'just now'
  const min = Math.round(sec / 60)
  if (min < 60) return `${min}m ago`
  const hr = Math.round(min / 60)
  if (hr < 24) return `${hr}h ago`
  const day = Math.round(hr / 24)
  if (day < 30) return `${day}d ago`
  return new Date(ts).toLocaleDateString()
}

function describeUserAgent(ua: string | null): string {
  if (!ua) return 'Unknown device'
  let os = 'Unknown OS'
  if (/Windows/i.test(ua)) os = 'Windows'
  else if (/Macintosh|Mac OS/i.test(ua)) os = 'macOS'
  else if (/Android/i.test(ua)) os = 'Android'
  else if (/iPhone|iPad|iOS/i.test(ua)) os = 'iOS'
  else if (/Linux/i.test(ua)) os = 'Linux'
  let browser = ''
  if (/Edg\//i.test(ua)) browser = 'Edge'
  else if (/Chrome\//i.test(ua) && !/Chromium/i.test(ua)) browser = 'Chrome'
  else if (/Firefox\//i.test(ua)) browser = 'Firefox'
  else if (/Safari\//i.test(ua) && !/Chrome/i.test(ua)) browser = 'Safari'
  return browser ? `${browser} on ${os}` : os
}

function SecuritySection() {
  // Change-password form
  const [currentPassword, setCurrentPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [showCurrent, setShowCurrent] = useState(false)
  const [showNew, setShowNew] = useState(false)
  const [changing, setChanging] = useState(false)
  const [pwMsg, setPwMsg] = useState<{ text: string; ok: boolean } | null>(null)

  // Sessions + login events
  const [sessions, setSessions] = useState<AuthSession[]>([])
  const [events, setEvents] = useState<LoginEvent[]>([])
  const [loading, setLoading] = useState(true)

  async function loadActivity() {
    try {
      const [s, e] = await Promise.all([api.listSessions(), api.listLoginEvents(15)])
      setSessions(s.sessions)
      setEvents(e.events)
    } catch {
      // leave existing data on transient failure
    } finally {
      setLoading(false)
    }
  }

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

  async function handleChangePassword() {
    setPwMsg(null)
    if (newPassword.length < 8) {
      setPwMsg({ text: 'New password must be at least 8 characters', ok: false })
      return
    }
    if (newPassword !== confirmPassword) {
      setPwMsg({ text: 'New passwords do not match', ok: false })
      return
    }
    setChanging(true)
    try {
      await api.changePassword(currentPassword, newPassword)
      setPwMsg({ text: 'Password changed. Other sessions were signed out.', ok: true })
      setCurrentPassword('')
      setNewPassword('')
      setConfirmPassword('')
      loadActivity()
    } catch (err) {
      setPwMsg({ text: err instanceof ApiError ? err.message : 'Failed to change password', ok: false })
    } finally {
      setChanging(false)
    }
  }

  async function handleRevoke(id: string) {
    try {
      await api.revokeSession(id)
      setSessions((prev) => prev.filter((s) => s.id !== id))
    } catch {
      loadActivity()
    }
  }

  const pwInputWrap: React.CSSProperties = { position: 'relative' }
  const eyeBtn: React.CSSProperties = {
    position: 'absolute',
    right: '10px',
    top: '50%',
    transform: 'translateY(-50%)',
    background: 'none',
    border: 'none',
    cursor: 'pointer',
    color: '#7A7D85',
    display: 'flex',
  }

  return (
    <div className="flex flex-col gap-5">
      {/* Change password */}
      <div style={cardBase}>
        <h3 style={sectionTitle}>Change Password</h3>
        <div className="flex flex-col gap-4" style={{ maxWidth: '420px' }}>
          <div>
            <label style={labelStyle}>Current Password</label>
            <div style={pwInputWrap}>
              <input
                style={{ ...inputStyle, paddingRight: '38px' }}
                type={showCurrent ? 'text' : 'password'}
                autoComplete="current-password"
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
              />
              <button style={eyeBtn} onClick={() => setShowCurrent((v) => !v)} type="button" title={showCurrent ? 'Hide' : 'Show'}>
                {showCurrent ? <EyeOff size={15} /> : <Eye size={15} />}
              </button>
            </div>
          </div>
          <div>
            <label style={labelStyle}>New Password</label>
            <div style={pwInputWrap}>
              <input
                style={{ ...inputStyle, paddingRight: '38px' }}
                type={showNew ? 'text' : 'password'}
                autoComplete="new-password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
              <button style={eyeBtn} onClick={() => setShowNew((v) => !v)} type="button" title={showNew ? 'Hide' : 'Show'}>
                {showNew ? <EyeOff size={15} /> : <Eye size={15} />}
              </button>
            </div>
          </div>
          <div>
            <label style={labelStyle}>Confirm New Password</label>
            <input
              style={inputStyle}
              type={showNew ? 'text' : 'password'}
              autoComplete="new-password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>
          <div className="flex items-center gap-3">
            <GoldButton
              onClick={handleChangePassword}
              disabled={changing || !currentPassword || !newPassword || !confirmPassword}
            >
              {changing ? 'Saving…' : 'Update Password'}
            </GoldButton>
            {pwMsg && (
              <span style={{ fontSize: '12px', color: pwMsg.ok ? '#2ECC71' : '#E74C3C' }}>{pwMsg.text}</span>
            )}
          </div>
        </div>
      </div>

      {/* Active sessions */}
      <div style={cardBase}>
        <h3 style={sectionTitle}>Active Sessions</h3>
        {loading ? (
          <p style={{ fontSize: '13px', color: '#7A7D85' }}>Loading…</p>
        ) : sessions.length === 0 ? (
          <p style={{ fontSize: '13px', color: '#7A7D85' }}>No active sessions.</p>
        ) : (
          <div className="flex flex-col gap-2">
            {sessions.map((s) => (
              <div
                key={s.id}
                className="flex items-center gap-3"
                style={{
                  padding: '12px 14px',
                  borderRadius: '8px',
                  border: '1px solid rgba(200,164,52,0.08)',
                  backgroundColor: 'rgba(255,255,255,0.02)',
                }}
              >
                <Monitor size={18} color={s.current ? '#C8A434' : '#7A7D85'} style={{ flexShrink: 0 }} />
                <div className="flex-1 min-w-0">
                  <div style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 500 }}>
                    {describeUserAgent(s.userAgent)}
                    {s.current && (
                      <span style={{ fontSize: '10px', color: '#C8A434', marginLeft: '8px', fontWeight: 600 }}>THIS DEVICE</span>
                    )}
                  </div>
                  <div style={{ fontSize: '11px', color: '#7A7D85' }}>
                    {s.ip ?? 'unknown IP'} · last active {relativeTime(s.lastSeenAt)}
                  </div>
                </div>
                {!s.current && (
                  <button
                    onClick={() => handleRevoke(s.id)}
                    className="flex items-center gap-1.5 cursor-pointer transition-colors whitespace-nowrap"
                    style={{
                      fontSize: '11px',
                      fontWeight: 600,
                      color: '#E74C3C',
                      background: 'transparent',
                      border: '1px solid rgba(231,76,60,0.4)',
                      borderRadius: '7px',
                      padding: '6px 12px',
                    }}
                  >
                    <LogOut size={13} /> Sign out
                  </button>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Login activity */}
      <div style={cardBase}>
        <h3 style={sectionTitle}>Recent Login Activity</h3>
        {loading ? (
          <p style={{ fontSize: '13px', color: '#7A7D85' }}>Loading…</p>
        ) : events.length === 0 ? (
          <p style={{ fontSize: '13px', color: '#7A7D85' }}>No login activity recorded yet.</p>
        ) : (
          <div className="flex flex-col">
            {events.map((e, i) => (
              <div
                key={e.id}
                className="flex items-center gap-3"
                style={{
                  padding: '10px 0',
                  borderTop: i === 0 ? 'none' : '1px solid rgba(200,164,52,0.06)',
                }}
              >
                <span
                  style={{
                    width: '8px',
                    height: '8px',
                    borderRadius: '50%',
                    backgroundColor: e.success ? '#2ECC71' : '#E74C3C',
                    flexShrink: 0,
                  }}
                />
                <div className="flex-1 min-w-0">
                  <span style={{ fontSize: '13px', color: '#E8E6E0' }}>
                    {e.success ? 'Successful login' : 'Failed login'}
                  </span>
                  <span style={{ fontSize: '11px', color: '#7A7D85', marginLeft: '8px' }}>
                    {e.username ?? 'unknown'} · {e.ip ?? 'unknown IP'}
                  </span>
                </div>
                <span style={{ fontSize: '11px', color: '#7A7D85', flexShrink: 0 }}>{relativeTime(e.createdAt)}</span>
              </div>
            ))}
          </div>
        )}
        <p style={{ fontSize: '11px', color: '#7A7D85', marginTop: '14px' }}>
          SSO (Authentik) and multi-user accounts are planned — see the project roadmap.
        </p>
      </div>
    </div>
  )
}

const MAX_USERS = 10

function UsersSection() {
  const { user: currentUser } = useAuth()
  const [users, setUsers] = useState<ManagedUser[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  // Create-user form
  const [showCreate, setShowCreate] = useState(false)
  const [newUsername, setNewUsername] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [newRole, setNewRole] = useState<'admin' | 'member'>('member')
  const [creating, setCreating] = useState(false)
  const [createMsg, setCreateMsg] = useState<{ text: string; ok: boolean } | null>(null)

  async function load() {
    try {
      const { users } = await api.listUsers()
      setUsers(users)
      setError('')
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to load users')
    } finally {
      setLoading(false)
    }
  }

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

  async function handleCreate() {
    setCreateMsg(null)
    if (newUsername.length < 3) {
      setCreateMsg({ text: 'Username must be at least 3 characters', ok: false })
      return
    }
    if (newPassword.length < 8) {
      setCreateMsg({ text: 'Temporary password must be at least 8 characters', ok: false })
      return
    }
    setCreating(true)
    try {
      await api.createUser({ username: newUsername, password: newPassword, role: newRole })
      setCreateMsg({ text: `User "${newUsername}" created`, ok: true })
      setNewUsername('')
      setNewPassword('')
      setNewRole('member')
      setShowCreate(false)
      load()
    } catch (err) {
      setCreateMsg({ text: err instanceof ApiError ? err.message : 'Failed to create user', ok: false })
    } finally {
      setCreating(false)
    }
  }

  async function handleRoleToggle(u: ManagedUser) {
    const nextRole = u.role === 'admin' ? 'member' : 'admin'
    try {
      await api.updateUser(u.id, { role: nextRole })
      load()
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to update role')
    }
  }

  async function handleActiveToggle(u: ManagedUser) {
    try {
      await api.updateUser(u.id, { active: !u.active })
      load()
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to update user')
    }
  }

  async function handleDelete(u: ManagedUser) {
    if (!window.confirm(`Delete user "${u.username}"? This cannot be undone.`)) return
    try {
      await api.deleteUser(u.id)
      load()
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to delete user')
    }
  }

  const atCap = users.length >= MAX_USERS

  return (
    <div className="flex flex-col gap-5">
      <div style={cardBase}>
        <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
          <h3 style={{ ...sectionTitle, marginBottom: 0 }}>
            Users <span style={{ color: '#7A7D85', fontWeight: 400 }}>· {users.length}/{MAX_USERS}</span>
          </h3>
          <GoldButton onClick={() => setShowCreate((v) => !v)} disabled={atCap}>
            <UserPlus size={14} /> {showCreate ? 'Cancel' : 'Add User'}
          </GoldButton>
        </div>

        {atCap && !showCreate && (
          <p style={{ fontSize: '12px', color: '#E67E22', marginBottom: '14px' }}>
            User limit reached ({MAX_USERS}). Delete a user to add another.
          </p>
        )}

        {showCreate && (
          <div
            className="flex flex-col gap-3"
            style={{ marginBottom: '18px', padding: '16px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.12)', backgroundColor: 'rgba(255,255,255,0.02)' }}
          >
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label style={labelStyle}>Username</label>
                <input style={inputStyle} value={newUsername} onChange={(e) => setNewUsername(e.target.value)} autoComplete="off" />
              </div>
              <div>
                <label style={labelStyle}>Temporary Password</label>
                <input style={inputStyle} type="text" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} autoComplete="off" />
              </div>
            </div>
            <div>
              <label style={labelStyle}>Role</label>
              <div className="flex gap-2">
                {(['member', 'admin'] as const).map((r) => (
                  <button
                    key={r}
                    onClick={() => setNewRole(r)}
                    className="cursor-pointer transition-colors"
                    style={{
                      fontSize: '12px',
                      textTransform: 'capitalize',
                      padding: '7px 16px',
                      borderRadius: '8px',
                      border: newRole === r ? '1px solid #C8A434' : '1px solid rgba(200,164,52,0.12)',
                      backgroundColor: newRole === r ? 'rgba(200,164,52,0.12)' : 'transparent',
                      color: newRole === r ? '#C8A434' : '#7A7D85',
                    }}
                  >
                    {r}
                  </button>
                ))}
              </div>
            </div>
            <p style={{ fontSize: '11px', color: '#7A7D85' }}>
              The user signs in with this temporary password and can change it under Security.
            </p>
            <div className="flex items-center gap-3">
              <GoldButton onClick={handleCreate} disabled={creating || !newUsername || !newPassword}>
                {creating ? 'Creating…' : 'Create User'}
              </GoldButton>
              {createMsg && <span style={{ fontSize: '12px', color: createMsg.ok ? '#2ECC71' : '#E74C3C' }}>{createMsg.text}</span>}
            </div>
          </div>
        )}

        {error && <p style={{ fontSize: '12px', color: '#E74C3C', marginBottom: '12px' }}>{error}</p>}

        {loading ? (
          <p style={{ fontSize: '13px', color: '#7A7D85' }}>Loading…</p>
        ) : (
          <div className="flex flex-col gap-2">
            {users.map((u) => {
              const isSelf = currentUser?.id === u.id
              return (
                <div
                  key={u.id}
                  className="flex items-center gap-3"
                  style={{
                    padding: '12px 14px',
                    borderRadius: '8px',
                    border: '1px solid rgba(200,164,52,0.08)',
                    backgroundColor: 'rgba(255,255,255,0.02)',
                    opacity: u.active ? 1 : 0.55,
                  }}
                >
                  <div
                    className="rounded-full flex items-center justify-center font-bold shrink-0"
                    style={{ width: '34px', height: '34px', fontSize: '12px', color: '#C8A434', border: '1px solid rgba(200,164,52,0.4)', backgroundColor: 'rgba(200,164,52,0.08)' }}
                  >
                    {(u.displayName || u.username).slice(0, 2).toUpperCase()}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 500 }}>
                      {u.username}
                      {isSelf && <span style={{ fontSize: '10px', color: '#C8A434', marginLeft: '8px', fontWeight: 600 }}>YOU</span>}
                      {!u.active && <span style={{ fontSize: '10px', color: '#E67E22', marginLeft: '8px', fontWeight: 600 }}>DEACTIVATED</span>}
                    </div>
                    <div style={{ fontSize: '11px', color: '#7A7D85' }}>{u.email || 'No email'}</div>
                  </div>
                  <button
                    onClick={() => handleRoleToggle(u)}
                    disabled={isSelf}
                    className="cursor-pointer transition-colors shrink-0"
                    title={isSelf ? "You can't change your own role" : `Make ${u.role === 'admin' ? 'member' : 'admin'}`}
                    style={{
                      fontSize: '11px',
                      fontWeight: 600,
                      textTransform: 'uppercase',
                      letterSpacing: '0.5px',
                      padding: '5px 10px',
                      borderRadius: '6px',
                      border: 'none',
                      color: u.role === 'admin' ? '#C8A434' : '#7A7D85',
                      backgroundColor: u.role === 'admin' ? 'rgba(200,164,52,0.12)' : 'rgba(255,255,255,0.05)',
                      opacity: isSelf ? 0.5 : 1,
                      cursor: isSelf ? 'default' : 'pointer',
                    }}
                  >
                    {u.role}
                  </button>
                  {!isSelf && (
                    <>
                      <button
                        onClick={() => handleActiveToggle(u)}
                        className="cursor-pointer shrink-0"
                        style={{ fontSize: '11px', fontWeight: 600, padding: '6px 11px', borderRadius: '7px', border: '1px solid rgba(200,164,52,0.2)', background: 'transparent', color: '#7A7D85' }}
                      >
                        {u.active ? 'Deactivate' : 'Activate'}
                      </button>
                      <button
                        onClick={() => handleDelete(u)}
                        className="flex items-center cursor-pointer shrink-0"
                        title="Delete user"
                        style={{ padding: '6px', borderRadius: '7px', border: '1px solid rgba(231,76,60,0.4)', background: 'transparent', color: '#E74C3C' }}
                      >
                        <Trash2 size={14} />
                      </button>
                    </>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}

function MeshSection() {
  const [status, setStatus] = useState<MeshStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [toggling, setToggling] = useState(false)

  const [cidr, setCidr] = useState('')
  const [testIp, setTestIp] = useState('')
  const [verifying, setVerifying] = useState(false)
  const [verifyResult, setVerifyResult] = useState<{ ok: boolean; message: string; hostMeshIp: string | null } | null>(null)
  const [overriding, setOverriding] = useState(false)

  async function load() {
    try {
      const s = await api.getMeshStatus()
      setStatus(s)
      setCidr(s.cidr ?? '')
      setError('')
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to load mesh status')
    } finally {
      setLoading(false)
    }
  }

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

  async function handleToggle() {
    if (!status) return
    setToggling(true)
    try {
      const s = await api.setMeshRequired(!status.required)
      setStatus(s)
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to update mesh requirement')
    } finally {
      setToggling(false)
    }
  }

  async function handleVerify() {
    setError('')
    setVerifyResult(null)
    setVerifying(true)
    try {
      const result = await api.verifyMesh(cidr, testIp || undefined)
      setVerifyResult(result)
      load()
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to verify mesh')
    } finally {
      setVerifying(false)
    }
  }

  async function handleOverride() {
    setOverriding(true)
    try {
      const s = await api.overrideMesh()
      setStatus(s)
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Failed to skip mesh setup')
    } finally {
      setOverriding(false)
    }
  }

  if (loading) {
    return (
      <div className="flex flex-col gap-5">
        <div style={cardBase}>
          <p style={{ fontSize: '12px', color: '#7A7D85' }}>Loading…</p>
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-5">
      <div style={cardBase}>
        <div className="flex items-center justify-between" style={{ marginBottom: '14px' }}>
          <h3 style={{ ...sectionTitle, marginBottom: 0 }}>Mesh Network Gate</h3>
          <div className="flex items-center gap-2">
            <span style={{ fontSize: '12px', color: '#7A7D85' }}>{status?.required ? 'Required' : 'Not required'}</span>
            <Toggle on={!!status?.required} onClick={handleToggle} />
          </div>
        </div>
        <p style={{ fontSize: '12px', color: '#7A7D85', marginBottom: '14px' }}>
          When enabled, admins must verify this host is on a private mesh network (NetBird, WireGuard,
          ZeroTier, Tailscale, etc.) before accessing the rest of the app. Members are never blocked — they
          just see a notice banner until an admin finishes verification.
        </p>
        {toggling && <p style={{ fontSize: '11px', color: '#7A7D85' }}>Updating…</p>}

        {status && (
          <div
            className="flex flex-col gap-1"
            style={{ marginBottom: '4px', padding: '12px', borderRadius: '8px', backgroundColor: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)' }}
          >
            <p style={{ fontSize: '11px', color: '#7A7D85' }}>
              Verified: <span style={{ color: status.verified ? '#2ECC71' : '#E8E6E0' }}>{status.verified ? 'Yes' : 'No'}</span>
              {status.verifiedVia && ` (${status.verifiedVia})`}
            </p>
            {status.cidr && <p style={{ fontSize: '11px', color: '#7A7D85' }}>CIDR: {status.cidr}</p>}
            {status.hostMeshIp && <p style={{ fontSize: '11px', color: '#7A7D85' }}>Host mesh IP: {status.hostMeshIp}</p>}
            <p style={{ fontSize: '11px', color: '#7A7D85' }}>
              Override: <span style={{ color: status.overridden ? '#E67E22' : '#E8E6E0' }}>{status.overridden ? 'Active (gate skipped)' : 'None'}</span>
            </p>
          </div>
        )}
      </div>

      <div style={cardBase}>
        <h3 style={sectionTitle}>Configure & Verify</h3>
        <label style={labelStyle}>Mesh Network CIDR</label>
        <input
          style={inputStyle}
          value={cidr}
          onChange={(e) => setCidr(e.target.value)}
          placeholder="e.g. 100.64.0.0/10 (NetBird/Tailscale CGNAT range)"
        />
        <label style={{ ...labelStyle, marginTop: '12px' }}>Peer/Gateway IP on the mesh (optional)</label>
        <input
          style={inputStyle}
          value={testIp}
          onChange={(e) => setTestIp(e.target.value)}
          placeholder="e.g. 100.64.0.1 — only needed if this host's own IP isn't in the mesh range"
        />
        <p style={{ fontSize: '10px', color: '#5C5F66', marginTop: '6px' }}>
          If this host reaches the mesh through routing instead of holding a local mesh IP (e.g. a VPC
          peered into the mesh), give us an address on the mesh we can ping to confirm reachability.
        </p>

        {error && <p style={{ fontSize: '12px', color: '#E74C3C', marginTop: '12px' }}>{error}</p>}
        {verifyResult && (
          <p style={{ fontSize: '12px', color: verifyResult.ok ? '#2ECC71' : '#E74C3C', marginTop: '12px' }}>
            {verifyResult.message}
            {verifyResult.hostMeshIp && ` — host mesh IP: ${verifyResult.hostMeshIp}`}
          </p>
        )}

        <div className="flex items-center justify-between" style={{ marginTop: '16px' }}>
          <GoldButton onClick={handleVerify} disabled={verifying || !cidr}>
            {verifying ? 'Verifying…' : 'Verify Connection'}
          </GoldButton>
          <button
            onClick={handleOverride}
            disabled={overriding}
            className="cursor-pointer"
            style={{
              fontSize: '11px',
              color: '#7A7D85',
              background: 'transparent',
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: '6px',
              padding: '8px 14px',
              opacity: overriding ? 0.6 : 1,
            }}
          >
            {overriding ? 'Skipping…' : 'Skip for now'}
          </button>
        </div>
      </div>
    </div>
  )
}

const sectionComponents: Record<string, () => React.ReactElement> = {
  profile: ProfileSection,
  appearance: AppearanceSection,
  security: SecuritySection,
  users: UsersSection,
  mesh: MeshSection,
  integrations: IntegrationsSection,
  notifications: NotificationsSection,
  data: DataBackupSection,
  about: AboutSection,
}

export default function Settings() {
  const [searchParams, setSearchParams] = useSearchParams()
  const { user } = useAuth()
  const isAdmin = user?.role === 'admin'
  const visibleSections = navSections.filter((s) => !s.adminOnly || isAdmin)
  const requestedTab = searchParams.get('tab')
  const requestedAllowed =
    requestedTab && sectionComponents[requestedTab] && visibleSections.some((s) => s.id === requestedTab)
  const active = requestedAllowed ? requestedTab! : 'profile'
  const ActiveSection = sectionComponents[active]

  function setActive(id: string) {
    setSearchParams({ tab: id })
  }

  return (
    <div className="flex h-full w-full gap-5">
      {/* Settings nav */}
      <div className="flex flex-col gap-1 shrink-0" style={{ width: '200px' }}>
        {visibleSections.map((s) => {
          const Icon = s.icon
          const isActive = active === s.id
          return (
            <button
              key={s.id}
              onClick={() => setActive(s.id)}
              className="flex items-center gap-2.5 cursor-pointer border-none bg-transparent transition-colors"
              style={{
                fontSize: '13px',
                fontWeight: 500,
                padding: '10px 14px',
                borderRadius: '8px',
                color: isActive ? '#C8A434' : '#7A7D85',
                backgroundColor: isActive ? 'rgba(200,164,52,0.1)' : 'transparent',
              }}
            >
              <Icon size={15} />
              {s.label}
            </button>
          )
        })}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
        <ActiveSection />
      </div>
    </div>
  )
}