'use client'

import { useState } from 'react'
import { X, Check, Copy, Eye, EyeOff, RotateCcw } from 'lucide-react'
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret, updateSpaceVisibility, createArea, updateArea, deleteArea, createTier, updateTier, deleteTier, createInvite, updateInvite, deleteInvite, createOnboardingStep, updateOnboardingStep, deleteOnboardingStep } from '@/lib/actions'
import { toast } from 'sonner'
import { financialVisibilities, directoryVisibilities } from '@/lib/validations'

type Area = {
  id: string
  code: string
  name: string
  icon: string | null
  sort_order: number
  is_archived: boolean
}
import type { Tables } from '@/types/database'

type Space = Tables<'spaces'>
type Integration = Tables<'integrations'>

interface Props {
  space: Space
  isAdmin: boolean
  integrations: Integration[]
  currentRole: string
  areas: Area[]
  tiers: Tier[]
  invites: Invite[]
  onboardingSteps: OnboardingStep[]
}

export interface OnboardingStep {
  id: string
  step_key: string
  step_type: 'welcome' | 'code_of_conduct' | 'profile' | 'payment' | 'content'
  title: string
  body: string | null
  config: Record<string, unknown>
  is_enabled: boolean
  is_required: boolean
  is_system: boolean
  sort_order: number
}

export interface Tier {
  id: string
  slug: string
  name: string
  description: string | null
  monthly_price_cents: number
  billing_cadence: string
  is_system: boolean
  is_archived: boolean
  sort_order: number
}

export interface Invite {
  id: string
  code: string
  label: string | null
  expires_at: string | null
  max_uses: number | null
  uses_count: number
  is_enabled: boolean
  created_at: string
}

const ROLES_INFO = [
  { name: 'Admin', color: 'text-primary', description: 'Full access. Secrets, roles, integrations, all data.', permissions: ['ALL ACCESS'] },
  { name: 'Board', color: 'text-primary', description: 'Members, payments, projects, board secrets.', permissions: ['MEMBERS', 'PAYMENTS', 'PROJECTS'] },
  { name: 'Treasurer', color: 'text-primary', description: 'Payments, financial secrets, member payment status.', permissions: [] },
  { name: 'Member', color: 'text-foreground', description: 'Tasks, chores, projects, public KB, comms.', permissions: [] },
  { name: 'Associate', color: 'text-foreground', description: 'Read-only most areas. Can claim chores.', permissions: [] },
]

const INTEGRATIONS_CONFIG = [
  {
    platform: 'paypal',
    name: 'PayPal',
    description: 'Sync transactions for member dues',
    icon: (
      <svg className="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
        <path d="M7.5 2h9.3c2.7 0 4.5 1.9 4 4.5l-1.3 8.4c-.4 2.6-2.5 4.1-5.2 4.1H10l-.6 3H5.8L7.5 2zm2 2.2L7.6 17h3.8c1.6 0 2.8-.9 3-2.5l1.3-8.4c.2-1.2-.5-1.9-1.7-1.9H9.5z"/>
      </svg>
    ),
    fields: [
      { key: 'client_id', label: 'Client ID', type: 'text', placeholder: 'Sandbox or Live Client ID' },
      { key: 'client_secret', label: 'Client Secret', type: 'password', placeholder: 'Client Secret from PayPal Developer' },
      { key: 'mode', label: 'Mode', type: 'select', options: ['sandbox', 'live'] },
    ],
    docs: 'https://developer.paypal.com/api/rest/',
  },
  {
    platform: 'zeffy',
    name: 'Zeffy',
    description: 'Nonprofit payment and donation sync',
    icon: (
      <svg className="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.512M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477" />
      </svg>
    ),
    fields: [
      { key: 'api_key', label: 'API Key', type: 'password', placeholder: 'Zeffy API Key' },
      { key: 'organization_id', label: 'Organization ID', type: 'text', placeholder: 'Your Zeffy Org ID' },
    ],
    docs: 'https://docs.zeffy.com/',
  },
  {
    platform: 'venmo',
    name: 'Venmo',
    description: 'Pull Venmo business transactions',
    icon: (
      <svg className="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19.5 3c.7 1.3 1 2.6 1 4.1 0 4.3-3.7 9.8-6.7 13.9H7.1L4.5 3h5.3l1.4 11.4C12.5 12 14.1 8.7 14.1 6.3c0-1.3-.2-2.2-.6-2.9L19.5 3z"/>
      </svg>
    ),
    fields: [
      { key: 'access_token', label: 'Access Token', type: 'password', placeholder: 'Venmo API Access Token' },
    ],
    docs: 'https://developer.venmo.com/',
  },
  {
    platform: 'stripe',
    name: 'Stripe',
    description: 'Accept card payments and subscriptions',
    icon: (
      <svg className="w-6 h-6 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
        <path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z"/>
      </svg>
    ),
    fields: [
      { key: 'publishable_key', label: 'Publishable Key', type: 'text', placeholder: 'pk_test_...' },
      { key: 'secret_key', label: 'Secret Key', type: 'password', placeholder: 'sk_test_...' },
      { key: 'webhook_secret', label: 'Webhook Secret', type: 'password', placeholder: 'whsec_...' },
    ],
    docs: 'https://stripe.com/docs/api',
  },
]

export default function SettingsClient({ space, isAdmin, integrations, currentRole, areas: initialAreas, tiers: initialTiers, invites: initialInvites, onboardingSteps: initialOnboarding }: Props) {
  const [activeTab, setActiveTab] = useState<'space' | 'roles' | 'tiers' | 'invites' | 'onboarding' | 'integrations' | 'webhooks'>('space')
  const [onboardingSteps, setOnboardingSteps] = useState<OnboardingStep[]>(initialOnboarding)
  const [areas, setAreas] = useState<Area[]>(initialAreas)
  const [tiers, setTiers] = useState<Tier[]>(initialTiers)
  const [invites, setInvites] = useState<Invite[]>(initialInvites)
  const [showNewTier, setShowNewTier] = useState(false)
  const [newTier, setNewTier] = useState({ slug: '', name: '', description: '', monthly_price_cents: 0, billing_cadence: 'monthly' as 'monthly' | 'quarterly' | 'annual' | 'one_time' | 'custom' })
  const [showNewInvite, setShowNewInvite] = useState(false)
  const [newInvite, setNewInvite] = useState({ code: '', label: '', expires_at: '', max_uses: '' })
  const [newArea, setNewArea] = useState({ code: '', name: '' })
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)

  // Space form (basic + mission statement)
  const spaceExt = space as Space & {
    mission_statement?: string | null
    financial_visibility?: string
    member_directory_visibility?: string
  }
  const [spaceForm, setSpaceForm] = useState({
    name: space.name || '',
    slug: space.slug || '',
    city: space.city || '',
    require_approval: space.require_approval ?? true,
    public_member_directory: space.public_member_directory ?? false,
    mission_statement: spaceExt.mission_statement || '',
  })

  // Visibility form (governance) — separate server action, separate save.
  const [visibilityForm, setVisibilityForm] = useState({
    financial_visibility: (spaceExt.financial_visibility as string | undefined) || 'board_visible',
    member_directory_visibility: (spaceExt.member_directory_visibility as string | undefined) || 'members_visible',
  })

  // Integration config modal
  const [editingIntegration, setEditingIntegration] = useState<typeof INTEGRATIONS_CONFIG[0] | null>(null)
  const [integrationForm, setIntegrationForm] = useState<Record<string, string>>({})
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({})

  // Webhook
  const [webhookSecret, setWebhookSecret] = useState(space.webhook_secret || '')
  const [copiedWebhook, setCopiedWebhook] = useState(false)
  const [copiedSecret, setCopiedSecret] = useState(false)
  const [showWebhookSecret, setShowWebhookSecret] = useState(false)

  async function handleSaveSpace(e: React.FormEvent) {
    e.preventDefault()
    if (!isAdmin) return
    setSaving(true)
    setMessage(null)
    const result = await updateSpaceSettings(spaceForm)
    if (result.error) {
      setMessage({ type: 'error', text: result.error })
    } else {
      setMessage({ type: 'success', text: 'Settings saved!' })
    }
    setSaving(false)
  }

  async function handleSaveVisibility(e: React.FormEvent) {
    e.preventDefault()
    if (!isAdmin) return
    setSaving(true)
    setMessage(null)
    const result = await updateSpaceVisibility(visibilityForm)
    if ('error' in result && result.error) {
      setMessage({ type: 'error', text: result.error })
    } else {
      setMessage({ type: 'success', text: 'Visibility updated.' })
    }
    setSaving(false)
  }

  async function handleSaveIntegration(e: React.FormEvent) {
    e.preventDefault()
    if (!editingIntegration || !isAdmin) return
    setSaving(true)
    setMessage(null)
    const result = await saveIntegration(editingIntegration.platform, integrationForm)
    if (result.error) {
      setMessage({ type: 'error', text: result.error })
    } else {
      setMessage({ type: 'success', text: `${editingIntegration.name} connected!` })
      setEditingIntegration(null)
    }
    setSaving(false)
  }

  async function handleDisconnect(platform: string) {
    if (!isAdmin) return
    setSaving(true)
    await disconnectIntegration(platform)
    setSaving(false)
  }

  async function handleRotateWebhook() {
    if (!isAdmin) return
    setSaving(true)
    const result = await rotateWebhookSecret()
    if (result.secret) {
      setWebhookSecret(result.secret)
      setShowWebhookSecret(true)
      setMessage({ type: 'success', text: 'New signing secret generated. Copy it now and store it securely.' })
    }
    setSaving(false)
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text)
    setCopiedWebhook(true)
    setTimeout(() => setCopiedWebhook(false), 2000)
  }

  function copySecretToClipboard(text: string) {
    if (!text) return
    navigator.clipboard.writeText(text)
    setCopiedSecret(true)
    setTimeout(() => setCopiedSecret(false), 2000)
  }

  function openIntegrationModal(config: typeof INTEGRATIONS_CONFIG[0]) {
    const existing = integrations.find(i => i.platform === config.platform)
    const initialForm: Record<string, string> = {}
    config.fields.forEach(f => {
      initialForm[f.key] = existing?.config?.[f.key] || ''
    })
    setIntegrationForm(initialForm)
    setEditingIntegration(config)
  }

  const getIntegrationStatus = (platform: string) => integrations.find(i => i.platform === platform)?.is_connected ?? false

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="bg-sidebar px-4 md:px-6 py-3 flex items-center">
        <h1 className="text-white font-sans text-lg font-semibold">Settings & Admin</h1>
      </div>

      <div className="flex">
        {/* Main content */}
        <div className="flex-1 p-4 md:p-6">
          {/* Tabs */}
          <div className="bg-card border-b border-border flex gap-4 md:gap-6 px-2 mb-6 rounded-t overflow-x-auto">
            {(['space', 'roles', 'tiers', 'invites', 'onboarding', 'integrations', 'webhooks'] as const).map(tab => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`font-sans text-sm py-3 border-b-2 transition capitalize whitespace-nowrap ${
                  activeTab === tab ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
                }`}
              >
                {tab === 'roles' ? 'Users & Roles' : tab.charAt(0).toUpperCase() + tab.slice(1)}
              </button>
            ))}
          </div>

          {message && (
            <div className={`mb-4 px-4 py-2 rounded text-sm font-sans ${
              message.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'
            }`}>
              {message.text}
            </div>
          )}

          {/* Space Settings Tab */}
          {activeTab === 'space' && (
            <div className="bg-card rounded border border-border p-6">
              <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Space Settings</p>

              <form onSubmit={handleSaveSpace} className="space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="font-sans text-sm text-foreground block mb-1.5">Space Name</label>
                    <input
                      type="text"
                      value={spaceForm.name}
                      onChange={e => setSpaceForm(f => ({ ...f, name: e.target.value }))}
                      disabled={!isAdmin}
                      className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                    />
                  </div>
                  <div>
                    <label className="font-sans text-sm text-foreground block mb-1.5">URL Slug</label>
                    <div className="flex items-center">
                      <span className="font-mono text-xs text-muted-foreground mr-2">hackerspace.sh/</span>
                      <input
                        type="text"
                        value={spaceForm.slug}
                        onChange={e => setSpaceForm(f => ({ ...f, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') }))}
                        disabled={!isAdmin}
                        className="flex-1 bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <label className="font-sans text-sm text-foreground block mb-1.5">City / Location (optional)</label>
                  <input
                    type="text"
                    value={spaceForm.city}
                    onChange={e => setSpaceForm(f => ({ ...f, city: e.target.value }))}
                    placeholder="Mesa, AZ"
                    disabled={!isAdmin}
                    className="w-full max-w-md bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                  />
                </div>

                <div className="space-y-4 pt-2">
                  <div className="flex items-center justify-between py-3 border-b border-border">
                    <div>
                      <p className="font-sans text-sm text-foreground">Require approval to join</p>
                      <p className="font-sans text-xs text-muted-foreground">New members must be approved by an admin</p>
                    </div>
                    <button
                      type="button"
                      onClick={() => isAdmin && setSpaceForm(f => ({ ...f, require_approval: !f.require_approval }))}
                      disabled={!isAdmin}
                      className={`w-11 h-6 rounded-full transition relative ${spaceForm.require_approval ? 'bg-primary' : 'bg-muted'}`}
                    >
                      <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.require_approval ? 'left-6' : 'left-1'}`} />
                    </button>
                  </div>

                  <div className="flex items-center justify-between py-3">
                    <div>
                      <p className="font-sans text-sm text-foreground">Public member directory</p>
                      <p className="font-sans text-xs text-muted-foreground">Anyone can see member list (names only)</p>
                    </div>
                    <button
                      type="button"
                      onClick={() => isAdmin && setSpaceForm(f => ({ ...f, public_member_directory: !f.public_member_directory }))}
                      disabled={!isAdmin}
                      className={`w-11 h-6 rounded-full transition relative ${spaceForm.public_member_directory ? 'bg-primary' : 'bg-muted'}`}
                    >
                      <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.public_member_directory ? 'left-6' : 'left-1'}`} />
                    </button>
                  </div>
                </div>

                <div className="pt-4 border-t border-border">
                  <label className="font-sans text-sm text-foreground block mb-1.5">Mission statement</label>
                  <textarea
                    value={spaceForm.mission_statement}
                    onChange={e => setSpaceForm(f => ({ ...f, mission_statement: e.target.value }))}
                    disabled={!isAdmin}
                    maxLength={5000}
                    rows={4}
                    placeholder="One or two sentences. Rendered at the foot of every page as a reminder to members and the platform itself."
                    className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                  />
                </div>

                <div className="pt-4 border-t border-border">
                  <p className="font-sans text-sm text-foreground mb-1.5">Invite code</p>
                  <div className="flex items-center gap-2">
                    <code className="bg-primary/5 border border-primary/20 text-primary font-mono text-sm px-3 py-2 rounded">
                      {space.invite_code || 'No code set'}
                    </code>
                    {space.invite_code && (
                      <button
                        type="button"
                        onClick={() => copyToClipboard(space.invite_code!)}
                        className="text-muted-foreground hover:text-primary transition p-2"
                      >
                        <Copy className="w-4 h-4" />
                      </button>
                    )}
                  </div>
                </div>

                {isAdmin && (
                  <div className="pt-4">
                    <button
                      type="submit"
                      disabled={saving}
                      className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
                    >
                      {saving ? 'Saving...' : 'Save Settings'}
                    </button>
                  </div>
                )}
              </form>
            </div>
          )}

          {/* Governance Visibility (still under Space tab) */}
          {activeTab === 'space' && (
            <div className="bg-card rounded border border-border p-6 mt-6">
              <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Visibility</p>
              <p className="font-mono text-[10px] text-muted-foreground mb-6">
                Who sees financial data and the member directory. These flags propagate to the
                /financials page and (in a future pass) to the members directory.
              </p>

              <form onSubmit={handleSaveVisibility} className="space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="font-sans text-sm text-foreground block mb-1.5">Financial data visibility</label>
                    <select
                      value={visibilityForm.financial_visibility}
                      onChange={e => setVisibilityForm(f => ({ ...f, financial_visibility: e.target.value }))}
                      disabled={!isAdmin}
                      className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                    >
                      {financialVisibilities.map(v => (
                        <option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
                      ))}
                    </select>
                    <p className="font-mono text-[10px] text-muted-foreground mt-1">
                      Treasurer-only is the default in cooperatives historically. Board-visible is
                      the recommended default. All-members-visible is full transparency.
                    </p>
                  </div>
                  <div>
                    <label className="font-sans text-sm text-foreground block mb-1.5">Member directory visibility</label>
                    <select
                      value={visibilityForm.member_directory_visibility}
                      onChange={e => setVisibilityForm(f => ({ ...f, member_directory_visibility: e.target.value }))}
                      disabled={!isAdmin}
                      className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                    >
                      {directoryVisibilities.map(v => (
                        <option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
                      ))}
                    </select>
                    <p className="font-mono text-[10px] text-muted-foreground mt-1">
                      Public-members-visible exposes the directory at a public URL. Count-only
                      surfaces the headcount but no individual names.
                    </p>
                  </div>
                </div>

                {isAdmin && (
                  <div>
                    <button
                      type="submit"
                      disabled={saving}
                      className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
                    >
                      {saving ? 'Saving...' : 'Save visibility'}
                    </button>
                  </div>
                )}
              </form>
            </div>
          )}

          {/* Areas (still under Space tab) */}
          {activeTab === 'space' && (
            <div className="bg-card rounded border border-border p-6 mt-6">
              <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Areas</p>
              <p className="font-mono text-[10px] text-muted-foreground mb-6">
                Areas appear in the Tasks, Projects, and KB dropdowns. Defaults are seeded when a space
                is created. Rename, reorder, or archive freely; existing tasks tagged with the old
                name will not auto-rename.
              </p>

              <ul className="divide-y divide-border mb-6">
                {areas.length === 0 ? (
                  <li className="py-3 font-sans text-sm text-muted-foreground">No areas yet.</li>
                ) : (
                  areas.map(area => (
                    <li key={area.id} className="py-2 flex items-center gap-3">
                      <input
                        type="number"
                        value={area.sort_order}
                        onChange={async e => {
                          const next = parseInt(e.target.value || '0', 10)
                          setAreas(prev => prev.map(a => (a.id === area.id ? { ...a, sort_order: next } : a)))
                        }}
                        onBlur={async e => {
                          if (!isAdmin) return
                          const next = parseInt(e.target.value || '0', 10)
                          await updateArea({ areaId: area.id, sort_order: next })
                        }}
                        disabled={!isAdmin}
                        className="w-14 bg-background border border-border rounded px-2 py-1 font-mono text-xs text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
                        aria-label="Sort order"
                      />
                      <input
                        type="text"
                        value={area.name}
                        onChange={e => {
                          const next = e.target.value
                          setAreas(prev => prev.map(a => (a.id === area.id ? { ...a, name: next } : a)))
                        }}
                        onBlur={async e => {
                          if (!isAdmin) return
                          const next = e.target.value.trim()
                          if (!next || next === area.name) return
                          const result = await updateArea({ areaId: area.id, name: next })
                          if ('error' in result && result.error) {
                            setMessage({ type: 'error', text: result.error })
                          }
                        }}
                        disabled={!isAdmin}
                        maxLength={80}
                        className={`flex-1 bg-background border border-border rounded px-3 py-1.5 font-sans text-sm rounded ${
                          area.is_archived ? 'text-muted-foreground line-through' : 'text-foreground'
                        } disabled:opacity-50 focus:outline-none focus:border-primary`}
                      />
                      <span className="font-mono text-[10px] text-muted-foreground/60 w-24 truncate" title={area.code}>
                        {area.code}
                      </span>
                      {isAdmin && (
                        <>
                          <button
                            type="button"
                            onClick={async () => {
                              const result = await updateArea({ areaId: area.id, is_archived: !area.is_archived })
                              if ('error' in result && result.error) {
                                setMessage({ type: 'error', text: result.error })
                              } else {
                                setAreas(prev =>
                                  prev.map(a =>
                                    a.id === area.id ? { ...a, is_archived: !a.is_archived } : a,
                                  ),
                                )
                              }
                            }}
                            className="font-mono text-[10px] tracking-widest uppercase border border-border text-muted-foreground hover:text-foreground rounded px-2 py-1"
                          >
                            {area.is_archived ? 'restore' : 'archive'}
                          </button>
                          <button
                            type="button"
                            onClick={async () => {
                              if (!confirm(`Delete area "${area.name}" entirely? Existing tagged items keep the name as plain text. Use Archive instead if it has been used.`)) return
                              const result = await deleteArea(area.id)
                              if ('error' in result && result.error) {
                                setMessage({ type: 'error', text: result.error })
                              } else {
                                setAreas(prev => prev.filter(a => a.id !== area.id))
                              }
                            }}
                            className="font-mono text-[10px] tracking-widest uppercase border border-border text-muted-foreground hover:text-red-500 hover:border-red-500 rounded px-2 py-1"
                          >
                            delete
                          </button>
                        </>
                      )}
                    </li>
                  ))
                )}
              </ul>

              {isAdmin && (
                <form
                  onSubmit={async e => {
                    e.preventDefault()
                    const code = newArea.code.trim().toLowerCase()
                    const name = newArea.name.trim()
                    if (!code || !name) return
                    setSaving(true)
                    const result = await createArea({ code, name })
                    if ('error' in result && result.error) {
                      setMessage({ type: 'error', text: result.error })
                    } else if ('data' in result && result.data) {
                      setAreas(prev =>
                        [...prev, result.data as Area].sort(
                          (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name),
                        ),
                      )
                      setNewArea({ code: '', name: '' })
                    }
                    setSaving(false)
                  }}
                  className="border-t border-border pt-4 grid grid-cols-1 sm:grid-cols-[1fr_2fr_auto] gap-3 items-end"
                >
                  <div>
                    <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
                      Code
                    </label>
                    <input
                      type="text"
                      value={newArea.code}
                      onChange={e =>
                        setNewArea(f => ({
                          ...f,
                          code: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''),
                        }))
                      }
                      maxLength={40}
                      placeholder="leather"
                      className="w-full bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground focus:outline-none focus:border-primary"
                    />
                  </div>
                  <div>
                    <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
                      Display name
                    </label>
                    <input
                      type="text"
                      value={newArea.name}
                      onChange={e => setNewArea(f => ({ ...f, name: e.target.value }))}
                      maxLength={80}
                      placeholder="Leatherwork"
                      className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary"
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={saving || !newArea.code.trim() || !newArea.name.trim()}
                    className="bg-primary text-white font-sans text-sm px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
                  >
                    Add area
                  </button>
                </form>
              )}
            </div>
          )}

          {/* Users & Roles Tab */}
          {activeTab === 'roles' && (
            <div className="bg-card rounded border border-border p-6">
              <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Roles & Permissions</p>

              <div className="space-y-4">
                {ROLES_INFO.map(role => (
                  <div key={role.name} className="flex items-start gap-4 py-3 border-b border-border last:border-0">
                    <div className="flex-1">
                      <p className={`font-sans text-sm font-medium ${role.color}`}>{role.name}</p>
                      <p className="font-sans text-xs text-muted-foreground mt-0.5">{role.description}</p>
                    </div>
                    {role.permissions.length > 0 && (
                      <div className="flex gap-1.5">
                        {role.permissions.map(p => (
                          <span key={p} className="font-mono text-[10px] px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20">
                            {p}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Integrations Tab */}
          {activeTab === 'integrations' && (
            <div className="bg-card rounded border border-border p-6">
              <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Integrations</p>

              <div className="space-y-3">
                {INTEGRATIONS_CONFIG.map(config => {
                  const connected = getIntegrationStatus(config.platform)
                  return (
                    <div key={config.platform} className="flex items-center gap-4 p-4 border border-border rounded hover:border-primary/30 transition">
                      <div className="w-8 h-8 flex items-center justify-center flex-shrink-0">{config.icon}</div>
                      <div className="flex-1">
                        <p className="font-sans text-sm font-medium text-foreground">{config.name}</p>
                        <p className="font-sans text-xs text-muted-foreground">{config.description}</p>
                      </div>
                      <div className="flex items-center gap-2">
                        {connected ? (
                          <>
                            <span className="flex items-center gap-1 font-mono text-[10px] text-primary">
                              <Check className="w-3 h-3" /> Connected
                            </span>
                            {isAdmin && (
                              <button
                                onClick={() => openIntegrationModal(config)}
                                className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
                              >
                                Manage
                              </button>
                            )}
                          </>
                        ) : isAdmin ? (
                          <button
                            onClick={() => openIntegrationModal(config)}
                            className="font-mono text-[10px] bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition"
                          >
                            Connect
                          </button>
                        ) : (
                          <span className="font-mono text-[10px] text-muted-foreground">Not connected</span>
                        )}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          )}

          {/* Tiers Tab */}
          {activeTab === 'tiers' && (
            <div className="bg-card rounded border border-border p-6">
              <div className="flex items-center justify-between mb-4 gap-3">
                <div>
                  <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Membership Tiers</p>
                  <p className="font-sans text-sm text-muted-foreground mt-1">
                    Customize tier names, prices, and billing cadence. Every space starts with the built-in plus, basic, and associate tiers.
                  </p>
                </div>
                {isAdmin && (
                  <button
                    onClick={() => setShowNewTier(v => !v)}
                    className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 whitespace-nowrap"
                  >
                    {showNewTier ? 'Cancel' : '+ New tier'}
                  </button>
                )}
              </div>

              {showNewTier && (
                <form
                  onSubmit={async e => {
                    e.preventDefault()
                    const cents = Math.round(parseFloat(String(newTier.monthly_price_cents) || '0') * 100)
                    const result = await createTier({
                      slug: newTier.slug.trim().toLowerCase(),
                      name: newTier.name.trim(),
                      description: newTier.description.trim() || undefined,
                      monthly_price_cents: isNaN(cents) ? 0 : cents,
                      billing_cadence: newTier.billing_cadence,
                    })
                    if ('error' in result && result.error) { toast.error(result.error); return }
                    toast.success('Tier created')
                    setShowNewTier(false)
                    setNewTier({ slug: '', name: '', description: '', monthly_price_cents: 0, billing_cadence: 'monthly' })
                    setTiers(prev => [...prev, {
                      id: (result as { id: string }).id,
                      slug: newTier.slug.trim().toLowerCase(),
                      name: newTier.name.trim(),
                      description: newTier.description.trim() || null,
                      monthly_price_cents: isNaN(cents) ? 0 : cents,
                      billing_cadence: newTier.billing_cadence,
                      is_system: false,
                      is_archived: false,
                      sort_order: 100,
                    }])
                  }}
                  className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
                >
                  <input
                    type="text"
                    value={newTier.slug}
                    onChange={e => setNewTier({ ...newTier, slug: e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-') })}
                    placeholder="slug (lowercase)"
                    maxLength={50}
                    required
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <input
                    type="text"
                    value={newTier.name}
                    onChange={e => setNewTier({ ...newTier, name: e.target.value })}
                    placeholder="Display name"
                    maxLength={100}
                    required
                    className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    value={newTier.monthly_price_cents as unknown as string}
                    onChange={e => setNewTier({ ...newTier, monthly_price_cents: parseFloat(e.target.value || '0') as unknown as number })}
                    placeholder="Price in dollars"
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <select
                    value={newTier.billing_cadence}
                    onChange={e => setNewTier({ ...newTier, billing_cadence: e.target.value as typeof newTier.billing_cadence })}
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  >
                    <option value="monthly">Monthly</option>
                    <option value="quarterly">Quarterly</option>
                    <option value="annual">Annual</option>
                    <option value="one_time">One time</option>
                    <option value="custom">Custom</option>
                  </select>
                  <input
                    type="text"
                    value={newTier.description}
                    onChange={e => setNewTier({ ...newTier, description: e.target.value })}
                    placeholder="Description (optional)"
                    maxLength={2000}
                    className="md:col-span-2 bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <button
                    type="submit"
                    className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
                  >
                    Create tier
                  </button>
                </form>
              )}

              <ul className="divide-y divide-border">
                {tiers.length === 0 && (
                  <li className="py-6 text-center font-sans text-sm text-muted-foreground">No tiers yet.</li>
                )}
                {tiers.map(t => (
                  <li key={t.id} className="py-3 flex items-center gap-3">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="font-sans text-sm font-medium text-foreground">{t.name}</span>
                        <span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">{t.slug}</span>
                        {t.is_system && <span className="font-mono text-[10px] text-amber-600">built-in</span>}
                        {t.is_archived && <span className="font-mono text-[10px] text-muted-foreground">archived</span>}
                      </div>
                      {t.description && <p className="font-sans text-xs text-muted-foreground mt-0.5">{t.description}</p>}
                      <p className="font-mono text-[10px] text-muted-foreground/70 mt-0.5">
                        ${(t.monthly_price_cents / 100).toFixed(2)} / {t.billing_cadence.replace('_', ' ')}
                      </p>
                    </div>
                    {isAdmin && (
                      <div className="flex items-center gap-1.5">
                        <input
                          type="number"
                          step="0.01"
                          min="0"
                          defaultValue={(t.monthly_price_cents / 100).toFixed(2)}
                          onBlur={async e => {
                            const cents = Math.round(parseFloat(e.target.value || '0') * 100)
                            if (cents === t.monthly_price_cents) return
                            const result = await updateTier(t.id, { monthly_price_cents: cents })
                            if (result.error) { toast.error(result.error); return }
                            setTiers(prev => prev.map(x => x.id === t.id ? { ...x, monthly_price_cents: cents } : x))
                            toast.success('Price updated')
                          }}
                          className="w-24 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary"
                        />
                        {!t.is_system && (
                          <button
                            onClick={async () => {
                              if (!confirm(`Delete tier "${t.name}"?`)) return
                              const result = await deleteTier(t.id)
                              if (result.error) { toast.error(result.error); return }
                              setTiers(prev => prev.filter(x => x.id !== t.id))
                              toast.success('Tier deleted')
                            }}
                            className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
                          >
                            Delete
                          </button>
                        )}
                        {t.is_system && (
                          <button
                            onClick={async () => {
                              const result = await updateTier(t.id, { is_archived: !t.is_archived })
                              if (result.error) { toast.error(result.error); return }
                              setTiers(prev => prev.map(x => x.id === t.id ? { ...x, is_archived: !x.is_archived } : x))
                            }}
                            className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
                          >
                            {t.is_archived ? 'Restore' : 'Archive'}
                          </button>
                        )}
                      </div>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Invites Tab */}
          {activeTab === 'invites' && (
            <div className="bg-card rounded border border-border p-6">
              <div className="flex items-center justify-between mb-4 gap-3">
                <div>
                  <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Invite Codes</p>
                  <p className="font-sans text-sm text-muted-foreground mt-1">
                    Generate codes for new members to join this space. Set an expiry, a max-use cap, or leave both blank for a permanent code. Toggle off to revoke.
                  </p>
                </div>
                {isAdmin && (
                  <button
                    onClick={() => setShowNewInvite(v => !v)}
                    className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 whitespace-nowrap"
                  >
                    {showNewInvite ? 'Cancel' : '+ New invite'}
                  </button>
                )}
              </div>

              {showNewInvite && (
                <form
                  onSubmit={async e => {
                    e.preventDefault()
                    const result = await createInvite({
                      code: newInvite.code.trim().toUpperCase() || undefined,
                      label: newInvite.label.trim() || undefined,
                      expires_at: newInvite.expires_at || undefined,
                      max_uses: newInvite.max_uses ? Number(newInvite.max_uses) : undefined,
                    })
                    if ('error' in result && result.error) { toast.error(result.error); return }
                    const created = result as { id: string; code: string }
                    toast.success(`Invite created: ${created.code}`)
                    setShowNewInvite(false)
                    setInvites(prev => [{
                      id: created.id,
                      code: created.code,
                      label: newInvite.label.trim() || null,
                      expires_at: newInvite.expires_at || null,
                      max_uses: newInvite.max_uses ? Number(newInvite.max_uses) : null,
                      uses_count: 0,
                      is_enabled: true,
                      created_at: new Date().toISOString(),
                    }, ...prev])
                    setNewInvite({ code: '', label: '', expires_at: '', max_uses: '' })
                  }}
                  className="mb-4 p-4 border border-border rounded bg-background grid grid-cols-1 md:grid-cols-2 gap-3"
                >
                  <input
                    type="text"
                    value={newInvite.code}
                    onChange={e => setNewInvite({ ...newInvite, code: e.target.value.toUpperCase().replace(/[^A-Z0-9-]/g, '') })}
                    placeholder="CODE (blank = auto-generate)"
                    maxLength={32}
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <input
                    type="text"
                    value={newInvite.label}
                    onChange={e => setNewInvite({ ...newInvite, label: e.target.value })}
                    placeholder="Label (e.g., open house 2026)"
                    maxLength={100}
                    className="bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <input
                    type="datetime-local"
                    value={newInvite.expires_at}
                    onChange={e => setNewInvite({ ...newInvite, expires_at: e.target.value })}
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <input
                    type="number"
                    min="1"
                    value={newInvite.max_uses}
                    onChange={e => setNewInvite({ ...newInvite, max_uses: e.target.value })}
                    placeholder="Max uses (blank = unlimited)"
                    className="bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1.5 focus:outline-none focus:border-primary"
                  />
                  <button
                    type="submit"
                    className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
                  >
                    Create invite
                  </button>
                </form>
              )}

              <ul className="divide-y divide-border">
                {invites.length === 0 && (
                  <li className="py-6 text-center font-sans text-sm text-muted-foreground">No invites yet.</li>
                )}
                {invites.map(inv => {
                  const expired = inv.expires_at ? new Date(inv.expires_at) < new Date() : false
                  const usedUp = inv.max_uses !== null && inv.uses_count >= inv.max_uses
                  return (
                    <li key={inv.id} className="py-3 flex items-center gap-3 flex-wrap">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <code className="font-mono text-sm font-semibold text-primary bg-primary/10 px-2 py-0.5 rounded">{inv.code}</code>
                          {inv.label && <span className="font-sans text-sm text-foreground">{inv.label}</span>}
                          {!inv.is_enabled && <span className="font-mono text-[10px] text-red-500">disabled</span>}
                          {expired && <span className="font-mono text-[10px] text-red-500">expired</span>}
                          {usedUp && <span className="font-mono text-[10px] text-red-500">at cap</span>}
                        </div>
                        <p className="font-mono text-[10px] text-muted-foreground/70 mt-0.5">
                          {inv.expires_at ? `expires ${new Date(inv.expires_at).toLocaleString()}` : 'permanent'}
                          {' · '}
                          uses {inv.uses_count}{inv.max_uses ? ` / ${inv.max_uses}` : ' (unlimited)'}
                        </p>
                      </div>
                      <div className="flex items-center gap-1.5">
                        <button
                          onClick={() => { navigator.clipboard.writeText(inv.code); toast.success('Copied') }}
                          className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
                        >
                          Copy
                        </button>
                        {isAdmin && (
                          <>
                            <button
                              onClick={async () => {
                                const result = await updateInvite(inv.id, { is_enabled: !inv.is_enabled })
                                if (result.error) { toast.error(result.error); return }
                                setInvites(prev => prev.map(x => x.id === inv.id ? { ...x, is_enabled: !x.is_enabled } : x))
                              }}
                              className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
                            >
                              {inv.is_enabled ? 'Disable' : 'Enable'}
                            </button>
                            <button
                              onClick={async () => {
                                if (!confirm(`Delete invite "${inv.code}"?`)) return
                                const result = await deleteInvite(inv.id)
                                if (result.error) { toast.error(result.error); return }
                                setInvites(prev => prev.filter(x => x.id !== inv.id))
                                toast.success('Invite deleted')
                              }}
                              className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
                            >
                              Delete
                            </button>
                          </>
                        )}
                      </div>
                    </li>
                  )
                })}
              </ul>
            </div>
          )}

          {/* Onboarding Tab */}
          {activeTab === 'onboarding' && (
            <div className="bg-card rounded border border-border p-6">
              <div className="flex items-center justify-between mb-4 gap-3">
                <div>
                  <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">New member onboarding</p>
                  <p className="font-sans text-sm text-muted-foreground mt-1">
                    These steps run, in order, the first time a new member opens the app. Reorder with the sort number. Disable a step to hide it. Built-in steps cannot be deleted, only disabled. Body text supports markdown and a safe subset of HTML.
                  </p>
                </div>
                {isAdmin && (
                  <button
                    onClick={async () => {
                      const result = await createOnboardingStep({
                        step_type: 'content',
                        title: 'New step',
                        body: 'Edit this content in Settings, Onboarding.',
                        sort_order: (onboardingSteps.reduce((m, s) => Math.max(m, s.sort_order), 0) + 1),
                      })
                      if ('error' in result && result.error) { toast.error(result.error); return }
                      toast.success('Step added. Edit it below.')
                      setOnboardingSteps(prev => [...prev, {
                        id: (result as { id: string }).id,
                        step_key: `custom-${(result as { id: string }).id.slice(0, 12)}`,
                        step_type: 'content',
                        title: 'New step',
                        body: 'Edit this content in Settings, Onboarding.',
                        config: {},
                        is_enabled: true,
                        is_required: false,
                        is_system: false,
                        sort_order: (onboardingSteps.reduce((m, s) => Math.max(m, s.sort_order), 0) + 1),
                      }])
                    }}
                    className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition whitespace-nowrap"
                  >
                    + Custom step
                  </button>
                )}
              </div>

              <ul className="space-y-3">
                {[...onboardingSteps].sort((a, b) => a.sort_order - b.sort_order).map(s => (
                  <li key={s.id} className="border border-border rounded p-4">
                    <div className="flex items-center gap-3 mb-3 flex-wrap">
                      <input
                        type="number"
                        defaultValue={s.sort_order}
                        disabled={!isAdmin}
                        onBlur={async e => {
                          const next = parseInt(e.target.value, 10)
                          if (isNaN(next) || next === s.sort_order) return
                          const result = await updateOnboardingStep(s.id, { sort_order: next })
                          if (result.error) { toast.error(result.error); return }
                          setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, sort_order: next } : x))
                        }}
                        className="w-14 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary"
                      />
                      <span className="font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground uppercase">{s.step_type.replace(/_/g, ' ')}</span>
                      <input
                        type="text"
                        defaultValue={s.title}
                        disabled={!isAdmin}
                        onBlur={async e => {
                          const next = e.target.value.trim()
                          if (!next || next === s.title) return
                          const result = await updateOnboardingStep(s.id, { title: next })
                          if (result.error) { toast.error(result.error); return }
                          setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, title: next } : x))
                        }}
                        className="flex-1 min-w-[160px] bg-background border border-border text-foreground font-sans text-sm rounded px-2 py-1 focus:outline-none focus:border-primary"
                      />
                      {s.is_system && <span className="font-mono text-[10px] text-amber-600">built-in</span>}
                    </div>

                    {(s.step_type === 'welcome' || s.step_type === 'code_of_conduct' || s.step_type === 'payment' || s.step_type === 'content') && (
                      <textarea
                        defaultValue={s.body ?? ''}
                        disabled={!isAdmin}
                        rows={4}
                        maxLength={50000}
                        onBlur={async e => {
                          const next = e.target.value
                          if (next === (s.body ?? '')) return
                          const result = await updateOnboardingStep(s.id, { body: next })
                          if (result.error) { toast.error(result.error); return }
                          setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, body: next } : x))
                        }}
                        placeholder="Markdown / safe HTML. For payment steps, describe how to pay."
                        className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-2 focus:outline-none focus:border-primary mb-3"
                      />
                    )}

                    {s.step_type === 'payment' && (
                      <input
                        type="url"
                        defaultValue={(s.config?.payment_url as string) ?? ''}
                        disabled={!isAdmin}
                        placeholder="Payment link (https://...)"
                        onBlur={async e => {
                          const next = e.target.value.trim()
                          if (next === ((s.config?.payment_url as string) ?? '')) return
                          const result = await updateOnboardingStep(s.id, { config: { ...s.config, payment_url: next } })
                          if (result.error) { toast.error(result.error); return }
                          setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, config: { ...x.config, payment_url: next } } : x))
                        }}
                        className="w-full bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-2 focus:outline-none focus:border-primary mb-3"
                      />
                    )}

                    {isAdmin && (
                      <div className="flex items-center gap-4 flex-wrap">
                        <label className="flex items-center gap-1.5 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={s.is_enabled}
                            onChange={async e => {
                              const result = await updateOnboardingStep(s.id, { is_enabled: e.target.checked })
                              if (result.error) { toast.error(result.error); return }
                              setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, is_enabled: e.target.checked } : x))
                            }}
                          />
                          <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-widest">Enabled</span>
                        </label>
                        <label className="flex items-center gap-1.5 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={s.is_required}
                            onChange={async e => {
                              const result = await updateOnboardingStep(s.id, { is_required: e.target.checked })
                              if (result.error) { toast.error(result.error); return }
                              setOnboardingSteps(prev => prev.map(x => x.id === s.id ? { ...x, is_required: e.target.checked } : x))
                            }}
                          />
                          <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-widest">Required</span>
                        </label>
                        {!s.is_system && (
                          <button
                            onClick={async () => {
                              if (!confirm(`Delete step "${s.title}"?`)) return
                              const result = await deleteOnboardingStep(s.id)
                              if (result.error) { toast.error(result.error); return }
                              setOnboardingSteps(prev => prev.filter(x => x.id !== s.id))
                              toast.success('Step deleted')
                            }}
                            className="ml-auto font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-red-500 hover:text-red-500 transition"
                          >
                            Delete
                          </button>
                        )}
                      </div>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Webhooks Tab */}
          {activeTab === 'webhooks' && (
            <div className="bg-card rounded border border-border p-6 space-y-6">
              <div>
                <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Webhook Endpoint</p>
                <p className="font-sans text-sm text-muted-foreground mb-4">
                  POST members to this endpoint for external integration or automation.
                </p>
                <div className="bg-muted/50 border border-border rounded p-4 mb-4">
                  <code className="font-mono text-xs text-primary break-all">
                    https://api.hackerspace.sh/{space.slug}/members
                  </code>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  <button
                    onClick={() => copyToClipboard(`https://api.hackerspace.sh/${space.slug}/members`)}
                    className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
                  >
                    <Copy className="w-3 h-3" />
                    {copiedWebhook ? 'Copied!' : 'Copy URL'}
                  </button>
                  <a
                    href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition"
                  >
                    View Docs
                  </a>
                </div>
              </div>

              <div className="border-t border-border pt-6">
                <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Signing Secret</p>
                <p className="font-sans text-sm text-muted-foreground mb-4">
                  Every delivery is signed with HMAC-SHA256 using this secret. See <a
                    href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md#signing-and-verification"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary hover:underline"
                  >the docs</a> for verification examples in Node and Python.
                </p>
                <div className="bg-muted/50 border border-border rounded p-4 mb-4 flex items-center gap-3">
                  <code className="font-mono text-xs text-foreground break-all flex-1">
                    {webhookSecret
                      ? (showWebhookSecret ? webhookSecret : '•'.repeat(Math.min(webhookSecret.length, 48)))
                      : <span className="text-muted-foreground italic">No secret set. Rotate to generate one.</span>}
                  </code>
                  {webhookSecret && (
                    <button
                      onClick={() => setShowWebhookSecret(v => !v)}
                      className="font-mono text-[10px] text-muted-foreground hover:text-foreground transition flex items-center gap-1 shrink-0"
                      title={showWebhookSecret ? 'Hide secret' : 'Show secret'}
                    >
                      {showWebhookSecret ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
                    </button>
                  )}
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  {webhookSecret && (
                    <button
                      onClick={() => copySecretToClipboard(webhookSecret)}
                      className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
                    >
                      <Copy className="w-3 h-3" />
                      {copiedSecret ? 'Copied!' : 'Copy secret'}
                    </button>
                  )}
                  {isAdmin && (
                    <button
                      onClick={handleRotateWebhook}
                      disabled={saving}
                      className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 disabled:opacity-50"
                    >
                      <RotateCcw className="w-3 h-3" />
                      {webhookSecret ? 'Rotate' : 'Generate'}
                    </button>
                  )}
                </div>
                {webhookSecret && (
                  <p className="font-sans text-[11px] text-muted-foreground mt-3">
                    Rotating immediately invalidates the previous secret. Update your receiver before rotating in production.
                  </p>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Right sidebar - Roles panel (visible on roles tab) */}
        {activeTab === 'roles' && (
          <div className="w-80 border-l border-border p-6 bg-card/50">
            <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-4">Role Assignment</p>
            <p className="font-sans text-sm text-muted-foreground">
              Member roles can be changed from the Members page. Only admins can change roles.
            </p>
          </div>
        )}
      </div>

      {/* Integration Config Modal */}
      {editingIntegration && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
          <div className="bg-card border border-border rounded-lg w-full max-w-md">
            <div className="flex items-center justify-between px-6 py-4 border-b border-border">
              <div className="flex items-center gap-2">
                <div className="w-6 h-6 flex items-center justify-center">{editingIntegration.icon}</div>
                <h2 className="font-sans text-base font-semibold text-foreground">{editingIntegration.name}</h2>
              </div>
              <button onClick={() => setEditingIntegration(null)} className="text-muted-foreground hover:text-foreground">
                <X className="w-4 h-4" />
              </button>
            </div>

            <form onSubmit={handleSaveIntegration} className="p-6 space-y-4">
              {editingIntegration.fields.map(field => (
                <div key={field.key}>
                  <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">{field.label}</label>
                  {field.type === 'select' ? (
                    <select
                      value={integrationForm[field.key] || ''}
                      onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
                      className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary"
                    >
                      <option value="">Select...</option>
                      {field.options?.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                    </select>
                  ) : (
                    <div className="relative">
                      <input
                        type={field.type === 'password' && !showSecrets[field.key] ? 'password' : 'text'}
                        value={integrationForm[field.key] || ''}
                        onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
                        placeholder={field.placeholder}
                        className="w-full bg-background border border-border rounded px-3 py-2 pr-10 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
                      />
                      {field.type === 'password' && (
                        <button
                          type="button"
                          onClick={() => setShowSecrets(s => ({ ...s, [field.key]: !s[field.key] }))}
                          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                        >
                          {showSecrets[field.key] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      )}
                    </div>
                  )}
                </div>
              ))}

              <div className="flex items-center justify-between pt-2">
                <a
                  href={editingIntegration.docs}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-mono text-[10px] text-primary hover:underline"
                >
                  View API Docs →
                </a>
              </div>

              <div className="flex gap-3 pt-2">
                {getIntegrationStatus(editingIntegration.platform) && (
                  <button
                    type="button"
                    onClick={() => {
                      handleDisconnect(editingIntegration.platform)
                      setEditingIntegration(null)
                    }}
                    className="flex-1 border border-red-200 text-red-600 font-sans text-sm py-2 rounded hover:bg-red-50 transition"
                  >
                    Disconnect
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => setEditingIntegration(null)}
                  className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={saving}
                  className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
                >
                  {saving ? 'Saving...' : 'Save'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}