<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useBetterChatStore } from '@/stores/betterchat'

import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Icon from '@/components/ds/core/Icon.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Tabs from '@/components/ds/navigation/Tabs.vue'
import Input from '@/components/ds/forms/Input.vue'
import Select from '@/components/ds/forms/Select.vue'
import Switch from '@/components/ds/forms/Switch.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

const store = useBetterChatStore()

const activeTab = ref<string>('groups')
const showCreateModal = ref(false)
const showImportModal = ref(false)
const showGroupModal = ref(false)
const newConfigName = ref('')
const newConfigDesc = ref('')
const importConfigName = ref('')
const editingGroupIndex = ref<number | null>(null)

const tabItems = [
  { value: 'groups', label: 'Chat groups', icon: 'message-square' },
  { value: 'settings', label: 'Settings', icon: 'settings' },
]

// Default group template matching BetterChat actual format
const defaultGroup = {
  GroupName: 'newgroup',
  Priority: 0,
  Title: {
    Text: '[Player]',
    Color: '#55aaff',
    Size: 15,
    Hidden: false,
    HiddenIfNotPrimary: false,
  },
  Username: {
    Color: '#55aaff',
    Size: 15,
  },
  Message: {
    Color: '#ffffff',
    Size: 15,
  },
  Format: {
    Chat: '{Title} {Username}: {Message}',
    Console: '{Title} {Username}: {Message}',
  },
}

// Editing group state
const editGroup = ref<Record<string, any>>({ ...JSON.parse(JSON.stringify(defaultGroup)) })

onMounted(async () => {
  await store.fetchConfigs()
  if (store.configs.length > 0 && store.configs[0]) {
    await store.loadConfig(store.configs[0].id)
  }
})

// --- Config data helpers ---

function getConfigValue(path: string, defaultValue: any = false): any {
  if (!store.currentConfig?.config_data) return defaultValue
  const parts = path.split('.')
  let current: any = store.currentConfig.config_data
  for (const part of parts) {
    if (current == null || typeof current !== 'object') return defaultValue
    current = current[part]
  }
  return current ?? defaultValue
}

function setConfigValue(path: string, value: any) {
  if (!store.currentConfig) return
  if (!store.currentConfig.config_data) store.currentConfig.config_data = {}
  const parts = path.split('.')
  let current: any = store.currentConfig.config_data
  for (let i = 0; i < parts.length - 1; i++) {
    const part = parts[i]!
    if (current[part] == null || typeof current[part] !== 'object') {
      current[part] = {}
    }
    current = current[part]
  }
  current[parts[parts.length - 1]!] = value
  store.markDirty()
}

// --- Chat Groups helpers ---

const chatGroups = computed<Record<string, any>[]>(() => {
  if (!store.currentConfig?.config_data) return []
  // BetterChat stores groups in oxide/data, but config has a ChatGroup array
  // The actual config format uses a top-level array for groups in the data file
  // We support both: config_data as array or config_data.ChatGroups as array
  if (Array.isArray(store.currentConfig.config_data)) {
    return store.currentConfig.config_data
  }
  return getConfigValue('ChatGroups', []) as Record<string, any>[]
})

function addGroup() {
  editingGroupIndex.value = null
  editGroup.value = JSON.parse(JSON.stringify(defaultGroup))
  showGroupModal.value = true
}

function editGroupAt(index: number) {
  editingGroupIndex.value = index
  editGroup.value = JSON.parse(JSON.stringify(chatGroups.value[index]))
  showGroupModal.value = true
}

function saveGroup() {
  if (!store.currentConfig) return
  if (!store.currentConfig.config_data) store.currentConfig.config_data = {}

  const groups = [...chatGroups.value]
  if (editingGroupIndex.value !== null) {
    groups[editingGroupIndex.value] = JSON.parse(JSON.stringify(editGroup.value))
  } else {
    groups.push(JSON.parse(JSON.stringify(editGroup.value)))
  }

  if (Array.isArray(store.currentConfig.config_data)) {
    store.currentConfig.config_data = groups as any
  } else {
    store.currentConfig.config_data.ChatGroups = groups
  }
  store.markDirty()
  showGroupModal.value = false
}

function deleteGroup(index: number) {
  if (!store.currentConfig) return
  if (!confirm('Remove this chat group?')) return

  const groups = [...chatGroups.value]
  groups.splice(index, 1)

  if (Array.isArray(store.currentConfig.config_data)) {
    store.currentConfig.config_data = groups as any
  } else {
    store.currentConfig.config_data.ChatGroups = groups
  }
  store.markDirty()
}

// --- Action handlers ---

async function handleConfigChange(id: string) {
  if (store.isDirty) {
    if (!confirm('Unsaved changes will be lost. Continue?')) return
  }
  await store.loadConfig(id)
}

async function handleCreateConfig() {
  if (!newConfigName.value.trim()) return
  const config = await store.createConfig(
    newConfigName.value.trim(),
    newConfigDesc.value.trim() || undefined,
  )
  if (config) {
    showCreateModal.value = false
    newConfigName.value = ''
    newConfigDesc.value = ''
  }
}

async function handleDeleteConfig() {
  if (!store.currentConfig) return
  if (!confirm(`Delete "${store.currentConfig.config_name}"? This cannot be undone.`)) return
  await store.deleteConfig(store.currentConfig.id)
}

async function handleApply() {
  if (!store.currentConfig) return
  if (!confirm('Apply this BetterChat config to the server? This will overwrite the current config.')) return
  if (store.isDirty) {
    await store.saveCurrentConfig()
  }
  await store.applyToServer(store.currentConfig.id)
}

async function handleImport() {
  if (!importConfigName.value.trim()) return
  const config = await store.importFromServer(importConfigName.value.trim())
  if (config) {
    showImportModal.value = false
    importConfigName.value = ''
  }
}

// DS Select model — current config id
const selectedConfigId = computed<string>({
  get: () => store.currentConfig?.id ?? '',
  set: (v: string | undefined) => { handleConfigChange(v ?? '') },
})

const configSelectOptions = computed(() =>
  store.configs.map(c => ({
    value: c.id,
    label: c.config_name + (c.is_active ? ' (active)' : ''),
  }))
)

// Switch computed wrappers (setConfigValue is not reactive-friendly with direct v-model)
const wordFilterEnabled = computed<boolean>({
  get: () => getConfigValue('Word Filter.Enabled', false) as boolean,
  set: (v: boolean) => setConfigValue('Word Filter.Enabled', v),
})
const antiFloodEnabled = computed<boolean>({
  get: () => getConfigValue('Anti Flood.Enabled', true) as boolean,
  set: (v: boolean) => setConfigValue('Anti Flood.Enabled', v),
})
const reverseTitleOrder = computed<boolean>({
  get: () => getConfigValue('General.Reverse Title Order', false) as boolean,
  set: (v: boolean) => setConfigValue('General.Reverse Title Order', v),
})
const useCustomReplacement = computed<boolean>({
  get: () => getConfigValue('Word Filter.Use Custom Replacement', false) as boolean,
  set: (v: boolean) => setConfigValue('Word Filter.Use Custom Replacement', v),
})
const enablePlayerTagging = computed<boolean>({
  get: () => getConfigValue('General.Enable Player Tagging', false) as boolean,
  set: (v: boolean) => setConfigValue('General.Enable Player Tagging', v),
})

// Modal input bindings
const newConfigNameModel = computed<string>({
  get: () => newConfigName.value,
  set: (v: string | undefined) => { newConfigName.value = v ?? '' },
})
const importConfigNameModel = computed<string>({
  get: () => importConfigName.value,
  set: (v: string | undefined) => { importConfigName.value = v ?? '' },
})

// Group modal field bindings
const editGroupName = computed<string>({
  get: () => editGroup.value.GroupName ?? '',
  set: (v: string | undefined) => { editGroup.value.GroupName = v ?? '' },
})
const editGroupTitleText = computed<string>({
  get: () => editGroup.value.Title?.Text ?? '',
  set: (v: string | undefined) => { editGroup.value.Title.Text = v ?? '' },
})
const editGroupTitleColor = computed<string>({
  get: () => editGroup.value.Title?.Color ?? '#55aaff',
  set: (v: string | undefined) => { editGroup.value.Title.Color = v ?? '#55aaff' },
})
const editGroupUsernameColor = computed<string>({
  get: () => editGroup.value.Username?.Color ?? '#55aaff',
  set: (v: string | undefined) => { editGroup.value.Username.Color = v ?? '#55aaff' },
})
const editGroupMessageColor = computed<string>({
  get: () => editGroup.value.Message?.Color ?? '#ffffff',
  set: (v: string | undefined) => { editGroup.value.Message.Color = v ?? '#ffffff' },
})
const editGroupFormatChat = computed<string>({
  get: () => editGroup.value.Format?.Chat ?? '',
  set: (v: string | undefined) => { editGroup.value.Format.Chat = v ?? '' },
})
const editGroupFormatConsole = computed<string>({
  get: () => editGroup.value.Format?.Console ?? '',
  set: (v: string | undefined) => { editGroup.value.Format.Console = v ?? '' },
})
</script>

<template>
  <div class="bch">
    <!-- Page head -->
    <div class="bch__head">
      <div class="bch__head-id">
        <div class="bch__head-chip">
          <Icon name="message-square" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Plugin configuration</div>
          <h1 class="bch__title">Better Chat</h1>
        </div>
      </div>
      <div class="bch__head-actions">
        <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
      </div>
    </div>

    <!-- Toolbar panel -->
    <Panel>
      <div class="bch__toolbar">
        <!-- Config selector -->
        <Select
          v-if="store.configs.length > 0"
          v-model="selectedConfigId"
          :options="configSelectOptions"
          size="sm"
          style="min-width: 200px"
        />
        <span v-else class="bch__no-configs">No configs yet</span>

        <div class="bch__toolbar-actions">
          <!-- Save -->
          <Button
            size="sm"
            icon="save"
            :loading="store.isSaving"
            :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
            @click="store.saveCurrentConfig()"
          >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>

          <!-- Apply to server -->
          <Button
            size="sm"
            variant="outline"
            icon="play"
            :loading="store.isApplying"
            :disabled="!store.currentConfig || store.isApplying"
            @click="handleApply"
          >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>

          <!-- Import from server -->
          <Button
            size="sm"
            variant="secondary"
            icon="download"
            @click="showImportModal = true"
          >Import from server</Button>

          <!-- Delete -->
          <Button
            size="sm"
            variant="danger-soft"
            icon="trash-2"
            :disabled="!store.currentConfig"
            @click="handleDeleteConfig"
          >Delete</Button>
        </div>
      </div>
    </Panel>

    <!-- Loading -->
    <div v-if="store.isLoading" class="bch__loading">
      <span class="bch__spinner" />
    </div>

    <!-- Empty — no config -->
    <Panel v-else-if="!store.currentConfig">
      <EmptyState
        icon="message-square"
        title="No BetterChat config selected"
        description="Create a new config, import from server, or select one from the dropdown above."
      >
        <template #action>
          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
        </template>
      </EmptyState>
    </Panel>

    <!-- Config editor -->
    <template v-else>
      <!-- Tab bar -->
      <Tabs v-model="activeTab" :items="tabItems" variant="line" />

      <!-- Chat groups tab -->
      <Panel v-if="activeTab === 'groups'" title="Chat groups">
        <template #actions>
          <Button size="sm" variant="secondary" icon="plus" @click="addGroup">Add group</Button>
        </template>

        <!-- Empty groups -->
        <EmptyState
          v-if="chatGroups.length === 0"
          icon="message-square"
          title="No chat groups configured"
          description="Add a group to get started."
        />

        <!-- Groups list -->
        <div v-else class="bch__groups">
          <div
            v-for="(group, index) in chatGroups"
            :key="index"
            class="bch__group"
          >
            <div class="bch__group-main">
              <div class="bch__group-header">
                <span class="bch__group-name">{{ group.GroupName || group.groupName || 'Unnamed' }}</span>
                <Badge tone="neutral" :mono="true">Priority: {{ group.Priority ?? 0 }}</Badge>
              </div>

              <div class="bch__group-meta">
                <!-- Title -->
                <div class="bch__meta-item">
                  <span class="bch__meta-label">Title</span>
                  <div class="bch__meta-val">
                    <span
                      class="bch__color-dot"
                      :style="{ backgroundColor: group.Title?.Color || group.TitleColor || '#55aaff' }"
                    />
                    <span>{{ group.Title?.Text || group.Title || '[Player]' }}</span>
                  </div>
                </div>

                <!-- Name color -->
                <div class="bch__meta-item">
                  <span class="bch__meta-label">Name color</span>
                  <div class="bch__meta-val">
                    <span
                      class="bch__color-dot"
                      :style="{ backgroundColor: group.Username?.Color || group.NameColor || '#55aaff' }"
                    />
                    <span class="bch__mono">{{ group.Username?.Color || group.NameColor || '#55aaff' }}</span>
                  </div>
                </div>

                <!-- Message color -->
                <div class="bch__meta-item">
                  <span class="bch__meta-label">Message color</span>
                  <div class="bch__meta-val">
                    <span
                      class="bch__color-dot"
                      :style="{ backgroundColor: group.Message?.Color || group.MessageColor || '#ffffff' }"
                    />
                    <span class="bch__mono">{{ group.Message?.Color || group.MessageColor || '#ffffff' }}</span>
                  </div>
                </div>

                <!-- Format -->
                <div class="bch__meta-item">
                  <span class="bch__meta-label">Format</span>
                  <div class="bch__meta-val bch__mono bch__truncate">{{ group.Format?.Chat || group.Format || '{Title} {Username}: {Message}' }}</div>
                </div>
              </div>
            </div>

            <div class="bch__group-actions">
              <Button variant="ghost" size="sm" icon="pencil" @click="editGroupAt(index)" />
              <Button variant="danger-soft" size="sm" icon="trash-2" @click="deleteGroup(index)" />
            </div>
          </div>
        </div>
      </Panel>

      <!-- Settings tab -->
      <Panel v-else-if="activeTab === 'settings'" title="General settings">
        <div class="bch__settings">
          <!-- Toggle rows -->
          <div class="bch__toggles">
            <div class="bch__toggle-row">
              <div class="bch__toggle-body">
                <div class="bch__toggle-label">Word filter</div>
                <div class="bch__toggle-sub">Enable profanity / word filtering in chat</div>
              </div>
              <Switch v-model="wordFilterEnabled" />
            </div>
            <div class="bch__toggle-row">
              <div class="bch__toggle-body">
                <div class="bch__toggle-label">Anti flood</div>
                <div class="bch__toggle-sub">Prevent message spamming</div>
              </div>
              <Switch v-model="antiFloodEnabled" />
            </div>
            <div class="bch__toggle-row">
              <div class="bch__toggle-body">
                <div class="bch__toggle-label">Reverse title order</div>
                <div class="bch__toggle-sub">Reverse the display order of chat titles</div>
              </div>
              <Switch v-model="reverseTitleOrder" />
            </div>
            <div class="bch__toggle-row">
              <div class="bch__toggle-body">
                <div class="bch__toggle-label">Use custom replacement</div>
                <div class="bch__toggle-sub">Use a custom word instead of * for filtered words</div>
              </div>
              <Switch v-model="useCustomReplacement" />
            </div>
            <div class="bch__toggle-row">
              <div class="bch__toggle-body">
                <div class="bch__toggle-label">Enable player tagging</div>
                <div class="bch__toggle-sub">Allow @mentions to highlight players in chat</div>
              </div>
              <Switch v-model="enablePlayerTagging" />
            </div>
          </div>

          <!-- Number / text inputs -->
          <div class="bch__inputs">
            <div class="bch__input-field">
              <Input
                label="Anti flood seconds"
                hint="Minimum seconds between messages"
                type="number"
                :mono="true"
                :model-value="String(getConfigValue('Anti Flood.Seconds', 1.5))"
                @update:model-value="v => setConfigValue('Anti Flood.Seconds', Number(v ?? 1.5))"
              />
            </div>
            <div class="bch__input-field">
              <Input
                label="Minimal tag characters"
                hint="Minimum characters for player tag matching"
                type="number"
                :mono="true"
                :model-value="String(getConfigValue('General.Minimal Characters', 2))"
                @update:model-value="v => setConfigValue('General.Minimal Characters', Number(v ?? 2))"
              />
            </div>
            <div class="bch__input-field">
              <Input
                label="Filter replacement"
                hint="Character used to replace filtered words"
                :mono="true"
                :model-value="String(getConfigValue('Word Filter.Replacement', '*'))"
                @update:model-value="v => setConfigValue('Word Filter.Replacement', v ?? '*')"
              />
            </div>
            <div class="bch__input-field">
              <Input
                label="Custom replacement word"
                hint="Custom word to replace filtered content"
                :model-value="String(getConfigValue('Word Filter.Custom Replacement', 'Unicorn'))"
                @update:model-value="v => setConfigValue('Word Filter.Custom Replacement', v ?? 'Unicorn')"
              />
            </div>
          </div>
        </div>
      </Panel>
    </template>

    <!-- Create config modal -->
    <div v-if="showCreateModal" class="bch__modal-backdrop" @click.self="showCreateModal = false">
      <div class="bch__modal">
        <div class="bch__modal-head">
          <h2 class="bch__modal-title">New BetterChat config</h2>
        </div>
        <div class="bch__modal-body">
          <Input
            v-model="newConfigNameModel"
            label="Config name"
            placeholder="e.g. Default Chat Settings"
            @keydown.enter="handleCreateConfig"
          />
          <div class="bch__field">
            <span class="bch__field-label">Description (optional)</span>
            <textarea
              v-model="newConfigDesc"
              rows="2"
              placeholder="What is this config for?"
              class="cc-textarea"
            />
          </div>
        </div>
        <div class="bch__modal-foot">
          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
        </div>
      </div>
    </div>

    <!-- Import from server modal -->
    <div v-if="showImportModal" class="bch__modal-backdrop" @click.self="showImportModal = false">
      <div class="bch__modal">
        <div class="bch__modal-head">
          <h2 class="bch__modal-title">Import from server</h2>
        </div>
        <div class="bch__modal-body">
          <p class="bch__modal-desc">Import the current BetterChat config from your live server. This will create a new config profile.</p>
          <Input
            v-model="importConfigNameModel"
            label="Config name"
            placeholder="e.g. Imported server config"
            @keydown.enter="handleImport"
          />
        </div>
        <div class="bch__modal-foot">
          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
        </div>
      </div>
    </div>

    <!-- Group edit modal -->
    <div v-if="showGroupModal" class="bch__modal-backdrop" @click.self="showGroupModal = false">
      <div class="bch__modal bch__modal--lg">
        <div class="bch__modal-head">
          <h2 class="bch__modal-title">{{ editingGroupIndex !== null ? 'Edit group' : 'Add group' }}</h2>
          <Button variant="ghost" size="sm" icon="x" @click="showGroupModal = false" />
        </div>
        <div class="bch__modal-body bch__modal-body--scroll">
          <Input
            v-model="editGroupName"
            label="Group name"
            placeholder="e.g. default, admin, vip"
            :mono="true"
          />

          <Input
            label="Priority"
            hint="Higher priority groups display first (0 = highest)"
            type="number"
            :mono="true"
            :model-value="String(editGroup.Priority ?? 0)"
            @update:model-value="v => { editGroup.Priority = Number(v ?? 0) }"
          />

          <Input
            v-model="editGroupTitleText"
            label="Title text"
            placeholder="e.g. [Admin]"
          />

          <!-- Colors -->
          <div class="bch__colors">
            <div class="bch__color-field">
              <span class="bch__field-label">Title color</span>
              <div class="bch__color-row">
                <input type="color" v-model="editGroup.Title.Color" class="bch__color-picker" />
                <Input v-model="editGroupTitleColor" :mono="true" size="sm" />
              </div>
            </div>
            <div class="bch__color-field">
              <span class="bch__field-label">Name color</span>
              <div class="bch__color-row">
                <input type="color" v-model="editGroup.Username.Color" class="bch__color-picker" />
                <Input v-model="editGroupUsernameColor" :mono="true" size="sm" />
              </div>
            </div>
            <div class="bch__color-field">
              <span class="bch__field-label">Message color</span>
              <div class="bch__color-row">
                <input type="color" v-model="editGroup.Message.Color" class="bch__color-picker" />
                <Input v-model="editGroupMessageColor" :mono="true" size="sm" />
              </div>
            </div>
          </div>

          <!-- Font sizes -->
          <div class="bch__sizes">
            <Input
              label="Title size"
              type="number"
              :mono="true"
              :model-value="String(editGroup.Title?.Size ?? 15)"
              @update:model-value="v => { editGroup.Title.Size = Number(v ?? 15) }"
            />
            <Input
              label="Name size"
              type="number"
              :mono="true"
              :model-value="String(editGroup.Username?.Size ?? 15)"
              @update:model-value="v => { editGroup.Username.Size = Number(v ?? 15) }"
            />
            <Input
              label="Message size"
              type="number"
              :mono="true"
              :model-value="String(editGroup.Message?.Size ?? 15)"
              @update:model-value="v => { editGroup.Message.Size = Number(v ?? 15) }"
            />
          </div>

          <Input
            v-model="editGroupFormatChat"
            label="Chat format"
            hint="Variables: {Title} {Username} {Message}"
            :mono="true"
          />
          <Input
            v-model="editGroupFormatConsole"
            label="Console format"
            :mono="true"
          />

          <!-- Hidden toggles -->
          <div class="bch__hidden-toggles">
            <label class="bch__check-label">
              <input type="checkbox" v-model="editGroup.Title.Hidden" class="bch__check" />
              Hidden
            </label>
            <label class="bch__check-label">
              <input type="checkbox" v-model="editGroup.Title.HiddenIfNotPrimary" class="bch__check" />
              Hidden if not primary
            </label>
          </div>
        </div>
        <div class="bch__modal-foot">
          <Button variant="ghost" @click="showGroupModal = false">Cancel</Button>
          <Button icon="check" @click="saveGroup">{{ editingGroupIndex !== null ? 'Update' : 'Add' }}</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* ---- Page shell ---- */
.bch { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---- Page head ---- */
.bch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bch__head-id { display: flex; align-items: center; gap: 12px; }
.bch__head-chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.bch__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}
.bch__head-actions { display: flex; align-items: center; gap: 8px; }

/* ---- Toolbar ---- */
.bch__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bch__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bch__no-configs { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Loading ---- */
.bch__loading { display: flex; justify-content: center; padding: 48px 0; }
.bch__spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent;
  animation: bch-spin 0.6s linear infinite;
}
@keyframes bch-spin { to { transform: rotate(360deg); } }

/* ---- Groups list ---- */
.bch__groups { display: flex; flex-direction: column; gap: 10px; }
.bch__group {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px; border-radius: var(--radius-md);
  background: var(--surface-raised-2); box-shadow: var(--ring-default);
}
.bch__group-main { flex: 1; min-width: 0; }
.bch__group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bch__group-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.bch__group-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 768px) { .bch__group-meta { grid-template-columns: repeat(2, 1fr); } }
.bch__meta-item { min-width: 0; }
.bch__meta-label { font-size: var(--text-2xs); color: var(--text-muted); display: block; margin-bottom: 3px; }
.bch__meta-val { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
.bch__group-actions { display: flex; align-items: center; gap: 6px; flex: none; }

/* ---- Misc helpers ---- */
.bch__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bch__truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bch__color-dot {
  width: 12px; height: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); flex: none;
}

/* ---- Settings ---- */
.bch__settings { display: flex; flex-direction: column; gap: 24px; }
.bch__toggles { display: flex; flex-direction: column; }
.bch__toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bch__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bch__toggle-row:first-child { padding-top: 0; }
.bch__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.bch__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.bch__inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .bch__inputs { grid-template-columns: 1fr; } }
.bch__input-field { display: flex; flex-direction: column; }

/* ---- Modal ---- */
.bch__modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bch__modal {
  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
  width: 100%; max-width: 440px; display: flex; flex-direction: column;
}
.bch__modal--lg { max-width: 560px; }
.bch__modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.bch__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.bch__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bch__modal-body--scroll { max-height: 70vh; overflow-y: auto; }
.bch__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
.bch__modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--border-subtle);
}

/* ---- Color pickers ---- */
.bch__colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 480px) { .bch__colors { grid-template-columns: 1fr; } }
.bch__color-field { display: flex; flex-direction: column; gap: 6px; }
.bch__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.bch__color-row { display: flex; align-items: center; gap: 8px; }
.bch__color-picker {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
  border: 1px solid var(--border-default); background: transparent; cursor: pointer; padding: 2px;
}

/* ---- Font sizes ---- */
.bch__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ---- Hidden checkboxes ---- */
.bch__hidden-toggles { display: flex; gap: 24px; }
.bch__check-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; user-select: none; }
.bch__check { accent-color: var(--accent); cursor: pointer; }

/* ---- Generic field label ---- */
.bch__field { display: flex; flex-direction: column; gap: 6px; }

/* ---- Textarea ---- */
.cc-textarea {
  background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
  border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
  transition: var(--transition-colors);
}
.cc-textarea::placeholder { color: var(--text-muted); }
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
</style>
