import { useCallback, useEffect, useMemo, useState } from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'
import AdminPageNav from '../components/AdminPageNav'

const TABS = [
  { id: 'portal', label: 'Portal-Rollen' },
  { id: 'club_roles', label: 'Vereinsrollen' },
  { id: 'bypass', label: 'Kontingent-Bypass' },
  { id: 'quotas', label: 'Vereins-Kontingente' },
]

const PORTAL_ROLE_LABEL = {
  user: 'Nutzer',
  trainer: 'Portal-Trainer',
  admin: 'Portal-Admin',
  superadmin: 'Superadmin',
}

const CLUB_ROLE_LABEL = {
  club_admin: 'Vereinsadmin',
  trainer: 'Trainer',
  division_lead: 'Spartenleitung',
  content_editor: 'Inhalte',
}

function limitInputValue(v) {
  if (v === null || v === undefined) return ''
  return String(v)
}

function parseLimitInput(raw, limitType) {
  const s = String(raw ?? '').trim()
  if (s === '' || s === '∞') return null
  const n = parseInt(s, 10)
  if (Number.isNaN(n)) return limitType === 'boolean' ? 0 : null
  return n
}

function formatLimitHint(feature) {
  if (feature.limit_type === 'boolean') return '0 = aus, 1 = an'
  if (feature.reset_period === 'monthly') return 'pro Monat'
  if (feature.reset_period === 'never') return 'Bestand'
  return ''
}

/**
 * Superadmin: Rollen → Fähigkeiten (Capabilities) und Vereins-Kontingente konfigurieren.
 */
export default function AdminRightsPage() {
  const { user } = useAuth()
  const isSuperadmin = user?.role === 'superadmin'

  const [tab, setTab] = useState('portal')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [busy, setBusy] = useState(false)

  const [plansData, setPlansData] = useState({ plans: [], features: [], limits: {} })
  const [limitDraft, setLimitDraft] = useState({})
  const [clubSubs, setClubSubs] = useState([])
  const [capMatrix, setCapMatrix] = useState(null)
  const [bypassData, setBypassData] = useState(null)

  const [newClubGrant, setNewClubGrant] = useState({ role_code: 'trainer', capability_id: '' })
  const [newBypassPortal, setNewBypassPortal] = useState({ portal_role: 'helpdesk', feature_id: '' })
  const [newBypassProfile, setNewBypassProfile] = useState({
    profile_id: '',
    feature_id: '',
    reason: '',
  })

  const loadPlans = useCallback(async () => {
    const data = await api.getAdminRightsClubPlansMatrix()
    setPlansData(data)
    const draft = {}
    for (const plan of data.plans || []) {
      draft[plan.id] = {}
      for (const f of data.features || []) {
        draft[plan.id][f.id] = limitInputValue(data.limits?.[plan.id]?.[f.id])
      }
    }
    setLimitDraft(draft)
  }, [])

  const loadClubs = useCallback(async () => {
    const rows = await api.listAdminRightsClubSubscriptions()
    setClubSubs(Array.isArray(rows) ? rows : [])
  }, [])

  const loadCapMatrix = useCallback(async () => {
    setCapMatrix(await api.getAdminRightsCapabilityMatrix())
  }, [])

  const loadBypass = useCallback(async () => {
    setBypassData(await api.listAdminRightsQuotaBypass())
  }, [])

  const reloadTab = useCallback(async () => {
    setError('')
    if (tab === 'portal' || tab === 'club_roles') await loadCapMatrix()
    else if (tab === 'bypass') await loadBypass()
    else if (tab === 'quotas') await Promise.all([loadPlans(), loadClubs()])
  }, [tab, loadPlans, loadClubs, loadCapMatrix, loadBypass])

  useEffect(() => {
    if (!isSuperadmin) return
    let cancelled = false
    ;(async () => {
      setLoading(true)
      try {
        await reloadTab()
      } catch (e) {
        if (!cancelled) setError(e.message || String(e))
      } finally {
        if (!cancelled) setLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [isSuperadmin, reloadTab])

  const portalCapabilities = useMemo(() => {
    if (!capMatrix?.capabilities) return []
    return capMatrix.capabilities.filter(
      (c) => c.domain === 'platform' || String(c.id).startsWith('platform.'),
    )
  }, [capMatrix])

  const clubScopedCapabilities = useMemo(() => {
    if (!capMatrix?.capabilities) return []
    return capMatrix.capabilities.filter(
      (c) =>
        c.domain !== 'platform' &&
        c.domain !== 'quota_bypass' &&
        c.domain !== 'account' &&
        c.domain !== 'club',
    )
  }, [capMatrix])

  const portalGrantSet = useMemo(() => {
    const s = new Set()
    for (const g of capMatrix?.portal_grants || []) {
      s.add(`${g.portal_role}::${g.capability_id}`)
    }
    return s
  }, [capMatrix])

  const clubGrantSet = useMemo(() => {
    const s = new Set()
    for (const g of capMatrix?.club_role_grants || []) {
      s.add(`${g.role_code}::${g.capability_id}`)
    }
    return s
  }, [capMatrix])

  if (!isSuperadmin) return <Navigate to="/" replace />

  const savePlanLimits = async (planId) => {
    setBusy(true)
    setError('')
    try {
      const limits = (plansData.features || []).map((f) => ({
        feature_id: f.id,
        limit_value: parseLimitInput(limitDraft[planId]?.[f.id], f.limit_type),
      }))
      await api.updateAdminRightsClubPlanLimits(planId, limits)
      await loadPlans()
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setBusy(false)
    }
  }

  const saveClubPlan = async (clubId, planId, status) => {
    setBusy(true)
    setError('')
    try {
      await api.updateAdminRightsClubSubscription(clubId, { plan_id: planId, status })
      await loadClubs()
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setBusy(false)
    }
  }

  const togglePortalGrant = async (portalRole, capabilityId, hasGrant) => {
    setBusy(true)
    setError('')
    try {
      if (hasGrant) {
        await api.deleteAdminRightsPortalGrant(portalRole, capabilityId)
      } else {
        await api.addAdminRightsPortalGrant(portalRole, capabilityId)
      }
      await loadCapMatrix()
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setBusy(false)
    }
  }

  const toggleClubGrant = async (roleCode, capabilityId, hasGrant) => {
    setBusy(true)
    setError('')
    try {
      if (hasGrant) {
        await api.deleteAdminRightsClubRoleGrant(roleCode, capabilityId)
      } else {
        await api.addAdminRightsClubRoleGrant(roleCode, capabilityId)
      }
      await loadCapMatrix()
    } catch (e) {
      setError(e.message || String(e))
    } finally {
      setBusy(false)
    }
  }

  const submitBypassPortal = async (e) => {
    e.preventDefault()
    setBusy(true)
    setError('')
    try {
      await api.addAdminRightsQuotaBypassPortal(
        newBypassPortal.portal_role.trim(),
        newBypassPortal.feature_id.trim() || null,
      )
      setNewBypassPortal({ portal_role: 'helpdesk', feature_id: '' })
      await loadBypass()
    } catch (err) {
      setError(err.message || String(err))
    } finally {
      setBusy(false)
    }
  }

  const submitBypassProfile = async (e) => {
    e.preventDefault()
    const pid = parseInt(newBypassProfile.profile_id, 10)
    if (!pid) {
      setError('Profil-ID erforderlich')
      return
    }
    setBusy(true)
    setError('')
    try {
      await api.addAdminRightsQuotaBypassProfile(
        pid,
        newBypassProfile.feature_id.trim() || null,
        newBypassProfile.reason.trim() || null,
      )
      setNewBypassProfile({ profile_id: '', feature_id: '', reason: '' })
      await loadBypass()
    } catch (err) {
      setError(err.message || String(err))
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="page-padding app-page">
      <AdminPageNav />
      <h1 style={{ marginTop: '1rem', fontSize: '1.35rem' }}>Rollen &amp; Rechte</h1>
      <p style={{ color: 'var(--text2)', maxWidth: '48rem', lineHeight: 1.55 }}>
        <strong>Rollen → Fähigkeiten (Capabilities):</strong> Wer darf welche Funktion nutzen?
        <br />
        <strong>Kontingente:</strong> Wie viel darf ein Verein verbrauchen (an Fähigkeiten gekoppelt
        über <code>linked_feature_id</code>)?
        <br />
        Vereinspläne bündeln nur Kontingent-Werte — sie ersetzen keine Berechtigungen.
      </p>

      <div
        style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem', marginTop: '1rem' }}
        role="tablist"
      >
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            role="tab"
            aria-selected={tab === t.id}
            className={`btn ${tab === t.id ? 'btn-primary' : 'btn-secondary'}`}
            onClick={() => setTab(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {error ? (
        <p role="alert" style={{ color: 'var(--danger)', marginTop: '0.75rem' }}>
          {error}
        </p>
      ) : null}

      {loading ? (
        <p className="spinner" style={{ marginTop: '1rem' }}>
          Laden…
        </p>
      ) : null}

      {!loading && tab === 'portal' && capMatrix ? (
        <div className="card" style={{ marginTop: '1rem', overflowX: 'auto' }}>
          <p style={{ fontSize: '0.875rem', color: 'var(--text2)', margin: '0 0 12px' }}>
            Plattform-Funktionen (<code>domain=platform</code>). Jede Funktion im Produkt soll sich
            hier anmelden und bei Anzeige und Ausführung prüfen.
          </p>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', padding: '6px', minWidth: '200px' }}>Fähigkeit</th>
                {(capMatrix.portal_roles || []).map((r) => (
                  <th key={r} style={{ textAlign: 'center', padding: '6px' }}>
                    {PORTAL_ROLE_LABEL[r] || r}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {portalCapabilities.map((cap) => (
                <tr key={cap.id} style={{ borderTop: '1px solid var(--border)' }}>
                  <td style={{ padding: '6px' }}>
                    <code style={{ fontSize: '0.75rem' }}>{cap.id}</code>
                    <div style={{ color: 'var(--text3)' }}>{cap.name}</div>
                    {cap.linked_feature_id ? (
                      <div style={{ color: 'var(--text3)', fontSize: '0.7rem' }}>
                        Kontingent: {cap.linked_feature_id}
                      </div>
                    ) : null}
                  </td>
                  {(capMatrix.portal_roles || []).map((role) => {
                    const on = portalGrantSet.has(`${role}::${cap.id}`)
                    return (
                      <td key={role} style={{ textAlign: 'center', padding: '6px' }}>
                        <input
                          type="checkbox"
                          checked={on}
                          disabled={busy}
                          aria-label={`${cap.id} für ${role}`}
                          onChange={() => togglePortalGrant(role, cap.id, on)}
                        />
                      </td>
                    )
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}

      {!loading && tab === 'club_roles' && capMatrix ? (
        <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <div className="card" style={{ overflowX: 'auto' }}>
            <p style={{ fontSize: '0.875rem', color: 'var(--text2)', margin: '0 0 12px' }}>
              Vereinsrollen → Fähigkeiten. Ohne Grant-Eintrag gilt die Fähigkeit für alle aktiven
              Vereinsmitglieder; gesetzte Grants schränken auf die angehakten Rollen ein.
            </p>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem' }}>
              <thead>
                <tr>
                  <th style={{ textAlign: 'left', padding: '6px', minWidth: '180px' }}>Fähigkeit</th>
                  {(capMatrix.club_roles || []).map((r) => (
                    <th key={r} style={{ textAlign: 'center', padding: '6px' }}>
                      {CLUB_ROLE_LABEL[r] || r}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {clubScopedCapabilities
                  .filter((cap) =>
                    (capMatrix.club_role_grants || []).some((g) => g.capability_id === cap.id),
                  )
                  .map((cap) => (
                    <tr key={cap.id} style={{ borderTop: '1px solid var(--border)' }}>
                      <td style={{ padding: '6px' }}>
                        <code>{cap.id}</code>
                        <div style={{ color: 'var(--text3)' }}>{cap.name}</div>
                        {cap.linked_feature_id ? (
                          <div style={{ color: 'var(--text3)', fontSize: '0.7rem' }}>
                            Kontingent: {cap.linked_feature_id}
                          </div>
                        ) : null}
                      </td>
                      {(capMatrix.club_roles || []).map((role) => {
                        const on = clubGrantSet.has(`${role}::${cap.id}`)
                        return (
                          <td key={role} style={{ textAlign: 'center', padding: '6px' }}>
                            <input
                              type="checkbox"
                              checked={on}
                              disabled={busy}
                              onChange={() => toggleClubGrant(role, cap.id, on)}
                            />
                          </td>
                        )
                      })}
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>

          <form
            className="card"
            onSubmit={async (e) => {
              e.preventDefault()
              if (!newClubGrant.capability_id) return
              setBusy(true)
              setError('')
              try {
                await api.addAdminRightsClubRoleGrant(
                  newClubGrant.role_code,
                  newClubGrant.capability_id,
                )
                setNewClubGrant((p) => ({ ...p, capability_id: '' }))
                await loadCapMatrix()
              } catch (err) {
                setError(err.message || String(err))
              } finally {
                setBusy(false)
              }
            }}
          >
            <h2 style={{ fontSize: '1rem', margin: '0 0 0.75rem' }}>Vereinsrollen-Grant hinzufügen</h2>
            <div className="form-row" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
              <label style={{ flex: '1 1 140px' }}>
                <span className="form-label">Rolle</span>
                <select
                  className="form-input"
                  value={newClubGrant.role_code}
                  onChange={(e) =>
                    setNewClubGrant((p) => ({ ...p, role_code: e.target.value }))
                  }
                >
                  {(capMatrix.club_roles || []).map((r) => (
                    <option key={r} value={r}>
                      {CLUB_ROLE_LABEL[r] || r}
                    </option>
                  ))}
                </select>
              </label>
              <label style={{ flex: '2 1 240px' }}>
                <span className="form-label">Fähigkeit</span>
                <select
                  className="form-input"
                  value={newClubGrant.capability_id}
                  onChange={(e) =>
                    setNewClubGrant((p) => ({ ...p, capability_id: e.target.value }))
                  }
                >
                  <option value="">— wählen —</option>
                  {clubScopedCapabilities.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.id} — {c.name}
                    </option>
                  ))}
                </select>
              </label>
              <div style={{ alignSelf: 'flex-end' }}>
                <button type="submit" className="btn btn-primary" disabled={busy}>
                  Hinzufügen
                </button>
              </div>
            </div>
          </form>
        </div>
      ) : null}

      {!loading && tab === 'bypass' && bypassData ? (
        <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <p style={{ fontSize: '0.875rem', color: 'var(--text2)', margin: 0 }}>
            Capability <code>platform.club_quota.bypass</code> — umgeht Vereins-Kontingente (z. B.
            Superadmin, Helpdesk). Kein separates Rechtemodell.
          </p>
          <div className="card">
            <h2 style={{ fontSize: '1rem', margin: '0 0 0.75rem' }}>Portal-Rollen</h2>
            <ul style={{ margin: 0, paddingLeft: '1.25rem', fontSize: '0.875rem' }}>
              {(bypassData.portal_role_grants || []).map((g) => (
                <li key={`${g.portal_role}-${g.capability_id}`} style={{ marginBottom: '6px' }}>
                  <strong>{g.portal_role}</strong> → {g.capability_id}
                  {g.linked_feature_id ? ` (${g.linked_feature_id})` : ' (alle Features)'}
                  <button
                    type="button"
                    className="btn btn-secondary"
                    style={{ marginLeft: '8px', fontSize: '0.75rem', padding: '2px 8px' }}
                    disabled={busy}
                    onClick={async () => {
                      setBusy(true)
                      try {
                        await api.deleteAdminRightsQuotaBypassPortal(
                          g.portal_role,
                          g.linked_feature_id || null,
                        )
                        await loadBypass()
                      } catch (err) {
                        setError(err.message || String(err))
                      } finally {
                        setBusy(false)
                      }
                    }}
                  >
                    Entfernen
                  </button>
                </li>
              ))}
            </ul>
            <form onSubmit={submitBypassPortal} style={{ marginTop: '12px' }}>
              <div className="form-row" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
                <label style={{ flex: '1 1 120px' }}>
                  <span className="form-label">Portal-Rolle</span>
                  <input
                    className="form-input"
                    value={newBypassPortal.portal_role}
                    onChange={(e) =>
                      setNewBypassPortal((p) => ({ ...p, portal_role: e.target.value }))
                    }
                    placeholder="helpdesk"
                  />
                </label>
                <label style={{ flex: '1 1 160px' }}>
                  <span className="form-label">Feature (leer = alle)</span>
                  <input
                    className="form-input"
                    value={newBypassPortal.feature_id}
                    onChange={(e) =>
                      setNewBypassPortal((p) => ({ ...p, feature_id: e.target.value }))
                    }
                    placeholder="ai_calls"
                  />
                </label>
                <div style={{ alignSelf: 'flex-end' }}>
                  <button type="submit" className="btn btn-primary" disabled={busy}>
                    Grant anlegen
                  </button>
                </div>
              </div>
            </form>
          </div>

          <div className="card">
            <h2 style={{ fontSize: '1rem', margin: '0 0 0.75rem' }}>Einzelprofile</h2>
            <ul style={{ margin: 0, paddingLeft: '1.25rem', fontSize: '0.875rem' }}>
              {(bypassData.profile_grants || []).map((g) => (
                <li key={`${g.profile_id}-${g.capability_id}`} style={{ marginBottom: '6px' }}>
                  Profil #{g.profile_id} {g.profile_name ? `(${g.profile_name})` : ''} →{' '}
                  {g.capability_id}
                  {g.reason ? ` — ${g.reason}` : ''}
                  <button
                    type="button"
                    className="btn btn-secondary"
                    style={{ marginLeft: '8px', fontSize: '0.75rem', padding: '2px 8px' }}
                    disabled={busy}
                    onClick={async () => {
                      setBusy(true)
                      try {
                        await api.deleteAdminRightsQuotaBypassProfile(
                          g.profile_id,
                          g.linked_feature_id || null,
                        )
                        await loadBypass()
                      } catch (err) {
                        setError(err.message || String(err))
                      } finally {
                        setBusy(false)
                      }
                    }}
                  >
                    Entfernen
                  </button>
                </li>
              ))}
            </ul>
            <form onSubmit={submitBypassProfile} style={{ marginTop: '12px' }}>
              <div className="form-row" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
                <label style={{ flex: '0 1 100px' }}>
                  <span className="form-label">Profil-ID</span>
                  <input
                    className="form-input"
                    value={newBypassProfile.profile_id}
                    onChange={(e) =>
                      setNewBypassProfile((p) => ({ ...p, profile_id: e.target.value }))
                    }
                  />
                </label>
                <label style={{ flex: '1 1 120px' }}>
                  <span className="form-label">Feature (leer = alle)</span>
                  <input
                    className="form-input"
                    value={newBypassProfile.feature_id}
                    onChange={(e) =>
                      setNewBypassProfile((p) => ({ ...p, feature_id: e.target.value }))
                    }
                  />
                </label>
                <label style={{ flex: '2 1 200px' }}>
                  <span className="form-label">Grund (optional)</span>
                  <input
                    className="form-input"
                    value={newBypassProfile.reason}
                    onChange={(e) =>
                      setNewBypassProfile((p) => ({ ...p, reason: e.target.value }))
                    }
                  />
                </label>
                <div style={{ alignSelf: 'flex-end' }}>
                  <button type="submit" className="btn btn-primary" disabled={busy}>
                    Grant anlegen
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      ) : null}

      {!loading && tab === 'quotas' ? (
        <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <div className="card" style={{ overflowX: 'auto' }}>
            <h2 style={{ fontSize: '1rem', margin: '0 0 0.75rem' }}>Plan-Limits</h2>
            <p style={{ fontSize: '0.875rem', color: 'var(--text2)', margin: '0 0 12px' }}>
              Kontingent-Bündel pro Plan. Leeres Feld = unbegrenzt. Ersetzt keine Rollen-Grants.
            </p>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
              <thead>
                <tr>
                  <th style={{ textAlign: 'left', padding: '8px', minWidth: '140px' }}>Feature</th>
                  {(plansData.plans || []).map((p) => (
                    <th key={p.id} style={{ textAlign: 'center', padding: '8px', minWidth: '100px' }}>
                      <div>{p.name}</div>
                      <div style={{ fontWeight: 400, color: 'var(--text3)', fontSize: '0.75rem' }}>
                        {p.id}
                      </div>
                      <button
                        type="button"
                        className="btn btn-secondary"
                        style={{ marginTop: '4px', fontSize: '0.75rem', padding: '4px 8px' }}
                        disabled={busy}
                        onClick={() => savePlanLimits(p.id)}
                      >
                        Speichern
                      </button>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {(plansData.features || []).map((f) => (
                  <tr key={f.id} style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ padding: '8px' }}>
                      <strong>{f.name}</strong>
                      <div style={{ color: 'var(--text3)', fontSize: '0.75rem' }}>
                        {f.id} · {formatLimitHint(f)}
                      </div>
                    </td>
                    {(plansData.plans || []).map((p) => (
                      <td key={p.id} style={{ padding: '8px', textAlign: 'center' }}>
                        <input
                          className="form-input"
                          style={{ width: '72px', textAlign: 'center' }}
                          placeholder="∞"
                          value={limitDraft[p.id]?.[f.id] ?? ''}
                          disabled={busy}
                          onChange={(e) =>
                            setLimitDraft((prev) => ({
                              ...prev,
                              [p.id]: { ...prev[p.id], [f.id]: e.target.value },
                            }))
                          }
                        />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="card" style={{ overflowX: 'auto' }}>
            <h2 style={{ fontSize: '1rem', margin: '0 0 0.75rem' }}>Verein → Plan</h2>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
              <thead>
                <tr>
                  <th style={{ textAlign: 'left', padding: '8px' }}>Verein</th>
                  <th style={{ textAlign: 'left', padding: '8px' }}>Plan</th>
                  <th style={{ textAlign: 'left', padding: '8px' }}>Status</th>
                </tr>
              </thead>
              <tbody>
                {clubSubs.map((row) => (
                  <tr key={row.club_id} style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ padding: '8px' }}>
                      {row.club_name || `Verein #${row.club_id}`}
                    </td>
                    <td style={{ padding: '8px' }}>
                      <select
                        className="form-input"
                        value={row.plan_id || 'free'}
                        disabled={busy}
                        onChange={(e) =>
                          saveClubPlan(row.club_id, e.target.value, row.status || 'active')
                        }
                      >
                        {(plansData.plans || []).map((p) => (
                          <option key={p.id} value={p.id}>
                            {p.name} ({p.id})
                          </option>
                        ))}
                      </select>
                    </td>
                    <td style={{ padding: '8px' }}>
                      <select
                        className="form-input"
                        value={row.status || 'active'}
                        disabled={busy}
                        onChange={(e) =>
                          saveClubPlan(row.club_id, row.plan_id || 'free', e.target.value)
                        }
                      >
                        <option value="active">aktiv</option>
                        <option value="trial">Test</option>
                        <option value="past_due">überfällig</option>
                        <option value="cancelled">gekündigt</option>
                      </select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {clubSubs.length === 0 ? (
              <p style={{ padding: '12px', color: 'var(--text2)', margin: 0 }}>Keine Vereine.</p>
            ) : null}
          </div>
        </div>
      ) : null}
    </div>
  )
}