<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import {
  createMQTTForwarder,
  createMQTTForwardTopic,
  deleteMQTTForwarder,
  deleteMQTTForwardTopic,
  getMQTTForwarders,
  getMQTTForwardStatus,
  getMQTTForwardTopics,
  restartMQTTForwarder,
  updateMQTTForwarder,
  updateMQTTForwardTopic,
} from '../api'
import type {
  MQTTForwarder,
  MQTTForwarderPayload,
  MQTTForwardRuntimeStatus,
  MQTTForwardTopic,
  MQTTForwardTopicPayload,
} from '../types'

const pageSize = 25
const topicPageSize = 100

const forwarders = ref<MQTTForwarder[]>([])
const topics = ref<Record<number, MQTTForwardTopic[]>>({})
const statuses = ref<Record<number, MQTTForwardRuntimeStatus>>({})
const edits = ref<Record<number, ForwarderEdit>>({})
const topicEdits = ref<Record<number, MQTTForwardTopicPayload>>({})
const expanded = ref<Record<number, boolean>>({})
const newTopics = ref<Record<number, MQTTForwardTopicPayload>>({})
const loading = ref(false)
const error = ref('')
const message = ref('')
const page = ref(1)
const total = ref(0)
let statusTimer: number | undefined

type ForwarderEdit = {
  name: string
  enabled: boolean
  source_host: string
  source_port: string
  source_username: string
  source_password: string
  source_password_clear: boolean
  source_client_id: string
  source_tls: boolean
  target_host: string
  target_port: string
  target_username: string
  target_password: string
  target_password_clear: boolean
  target_client_id: string
  target_tls: boolean
}

const newForwarder = ref<ForwarderEdit>({
  name: '',
  enabled: false,
  source_host: 'mqtt.mess.host',
  source_port: '1883',
  source_username: '',
  source_password: '',
  source_password_clear: false,
  source_client_id: '',
  source_tls: false,
  target_host: '127.0.0.1',
  target_port: '1883',
  target_username: '',
  target_password: '',
  target_password_clear: false,
  target_client_id: '',
  target_tls: false,
})

const canPrev = computed(() => page.value > 1)
const canNext = computed(() => page.value * pageSize < total.value || forwarders.value.length === pageSize)

function formatTime(value: string | null): string {
  return value ? new Date(value).toLocaleString() : '-'
}

function defaultTopic(): MQTTForwardTopicPayload {
  return { topic: 'msh/#', enabled: true, direction: 'source_to_target', source_prefix: '', target_prefix: '', qos: 0, retain: false }
}

function resetEdits(items: MQTTForwarder[]) {
  edits.value = Object.fromEntries(items.map((item) => [item.id, forwarderToEdit(item)]))
  for (const item of items) {
    if (!newTopics.value[item.id]) {
      newTopics.value[item.id] = defaultTopic()
    }
  }
}

function forwarderToEdit(item: MQTTForwarder): ForwarderEdit {
  return {
    name: item.name,
    enabled: item.enabled,
    source_host: item.source_host,
    source_port: String(item.source_port),
    source_username: item.source_username,
    source_password: '',
    source_password_clear: false,
    source_client_id: item.source_client_id,
    source_tls: item.source_tls,
    target_host: item.target_host,
    target_port: String(item.target_port),
    target_username: item.target_username,
    target_password: '',
    target_password_clear: false,
    target_client_id: item.target_client_id,
    target_tls: item.target_tls,
  }
}

function resetTopicEdits(forwarderId: number, items: MQTTForwardTopic[]) {
  topics.value = { ...topics.value, [forwarderId]: items }
  topicEdits.value = {
    ...topicEdits.value,
    ...Object.fromEntries(
      items.map((item) => [
        item.id,
        {
          topic: item.topic,
          enabled: item.enabled,
          direction: item.direction,
          source_prefix: item.source_prefix,
          target_prefix: item.target_prefix,
          qos: item.qos,
          retain: item.retain,
        },
      ]),
    ),
  }
}

function parsePort(value: string, label: string): number {
  const parsed = Number.parseInt(value.trim(), 10)
  if (!Number.isInteger(parsed) || parsed <= 0 || parsed > 65535) {
    throw new Error(`${label}必须是 1-65535`)
  }
  return parsed
}

function forwarderPayload(edit: ForwarderEdit, includePasswords: boolean): MQTTForwarderPayload {
  if (!edit.name.trim()) {
    throw new Error('名称不能为空')
  }
  if (!edit.source_host.trim()) {
    throw new Error('源 Host 不能为空')
  }
  if (!edit.target_host.trim()) {
    throw new Error('目标 Host 不能为空')
  }
  const payload: MQTTForwarderPayload = {
    name: edit.name.trim(),
    enabled: edit.enabled,
    source_host: edit.source_host.trim(),
    source_port: parsePort(edit.source_port, '源端口'),
    source_username: edit.source_username.trim(),
    source_client_id: edit.source_client_id.trim(),
    source_tls: edit.source_tls,
    target_host: edit.target_host.trim(),
    target_port: parsePort(edit.target_port, '目标端口'),
    target_username: edit.target_username.trim(),
    target_client_id: edit.target_client_id.trim(),
    target_tls: edit.target_tls,
  }
  if (includePasswords || edit.source_password.trim()) {
    payload.source_password = edit.source_password
  }
  if (edit.source_password_clear) {
    payload.source_password_clear = true
  }
  if (includePasswords || edit.target_password.trim()) {
    payload.target_password = edit.target_password
  }
  if (edit.target_password_clear) {
    payload.target_password_clear = true
  }
  return payload
}

function topicPayload(edit: MQTTForwardTopicPayload): MQTTForwardTopicPayload {
  if (!edit.topic.trim()) {
    throw new Error('TOPIC 不能为空')
  }
  return {
    topic: edit.topic.trim(),
    enabled: edit.enabled,
    direction: edit.direction,
    source_prefix: edit.source_prefix.trim(),
    target_prefix: edit.target_prefix.trim(),
    qos: Number(edit.qos),
    retain: edit.retain,
  }
}

async function refreshForwarders(targetPage = page.value) {
  loading.value = true
  error.value = ''
  try {
    const safePage = Math.max(1, targetPage)
    const response = await getMQTTForwarders(pageSize, (safePage - 1) * pageSize)
    forwarders.value = response.items
    total.value = response.total ?? response.offset + response.items.length
    page.value = safePage
    resetEdits(response.items)
    await refreshStatus()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  } finally {
    loading.value = false
  }
}

async function refreshStatus() {
  try {
    const response = await getMQTTForwardStatus()
    statuses.value = Object.fromEntries(response.items.map((item) => [item.forwarder_id, item]))
  } catch {
    // Keep the page usable if status polling fails; CRUD calls will surface errors.
  }
}

async function createForwarder() {
  error.value = ''
  message.value = ''
  let payload: MQTTForwarderPayload
  try {
    payload = forwarderPayload(newForwarder.value, true)
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
    return
  }
  loading.value = true
  try {
    await createMQTTForwarder(payload)
    newForwarder.value.name = ''
    newForwarder.value.source_password = ''
    newForwarder.value.target_password = ''
    message.value = 'MQTT 转发线程已新增'
    await refreshForwarders(1)
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  } finally {
    loading.value = false
  }
}

async function saveForwarder(item: MQTTForwarder) {
  error.value = ''
  message.value = ''
  const edit = edits.value[item.id]
  if (!edit) return
  let payload: MQTTForwarderPayload
  try {
    payload = forwarderPayload(edit, false)
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
    return
  }
  loading.value = true
  try {
    await updateMQTTForwarder(item.id, payload)
    message.value = 'MQTT 转发线程已保存'
    await refreshForwarders()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  } finally {
    loading.value = false
  }
}

async function removeForwarder(item: MQTTForwarder) {
  if (!window.confirm(`确定删除 MQTT 转发线程「${item.name}」吗？`)) return
  error.value = ''
  message.value = ''
  loading.value = true
  try {
    await deleteMQTTForwarder(item.id)
    message.value = 'MQTT 转发线程已删除'
    await refreshForwarders(forwarders.value.length === 1 ? page.value - 1 : page.value)
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  } finally {
    loading.value = false
  }
}

async function restartForwarder(item: MQTTForwarder) {
  error.value = ''
  message.value = ''
  try {
    await restartMQTTForwarder(item.id)
    message.value = 'MQTT 转发线程已重启'
    await refreshStatus()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  }
}

async function toggleTopics(item: MQTTForwarder) {
  expanded.value = { ...expanded.value, [item.id]: !expanded.value[item.id] }
  if (expanded.value[item.id] && !topics.value[item.id]) {
    await refreshTopics(item.id)
  }
}

async function refreshTopics(forwarderId: number) {
  const response = await getMQTTForwardTopics(forwarderId, topicPageSize, 0)
  resetTopicEdits(forwarderId, response.items)
}

async function createTopic(forwarderId: number) {
  error.value = ''
  message.value = ''
  let payload: MQTTForwardTopicPayload
  try {
    payload = topicPayload(newTopics.value[forwarderId] ?? defaultTopic())
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
    return
  }
  try {
    await createMQTTForwardTopic(forwarderId, payload)
    newTopics.value = { ...newTopics.value, [forwarderId]: defaultTopic() }
    message.value = 'TOPIC 已新增'
    await refreshTopics(forwarderId)
    await refreshStatus()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  }
}

async function saveTopic(topic: MQTTForwardTopic) {
  error.value = ''
  message.value = ''
  const edit = topicEdits.value[topic.id]
  if (!edit) return
  try {
    await updateMQTTForwardTopic(topic.id, topicPayload(edit))
    message.value = 'TOPIC 已保存'
    await refreshTopics(topic.forwarder_id)
    await refreshStatus()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  }
}

async function removeTopic(topic: MQTTForwardTopic) {
  if (!window.confirm(`确定删除 TOPIC「${topic.topic}」吗？`)) return
  error.value = ''
  message.value = ''
  try {
    await deleteMQTTForwardTopic(topic.id)
    message.value = 'TOPIC 已删除'
    await refreshTopics(topic.forwarder_id)
    await refreshStatus()
  } catch (err) {
    error.value = err instanceof Error ? err.message : String(err)
  }
}

function statusText(item: MQTTForwarder): string {
  const status = statuses.value[item.id]
  if (!item.enabled) return '已禁用'
  if (!status) return '未运行'
  return status.source_connected && status.target_connected ? '已连接' : '连接中/异常'
}

onMounted(() => {
  refreshForwarders()
  statusTimer = window.setInterval(refreshStatus, 5000)
})

onBeforeUnmount(() => {
  if (statusTimer !== undefined) {
    window.clearInterval(statusTimer)
  }
})
</script>

<template>
  <section class="mqtt-forward-page">
    <div class="mqtt-hero panel">
      <div>
        <p class="eyebrow">MQTT Forward</p>
        <h2>MQTT 转发管理</h2>
        <p class="muted">统一管理源 Broker、目标 Broker 和每个 TOPIC 的转发方向。保存配置后后端会自动重启对应线程。</p>
      </div>
      <div class="hero-stats">
        <div>
          <strong>{{ total }}</strong>
          <span>线程配置</span>
        </div>
        <div>
          <strong>{{ Object.keys(statuses).length }}</strong>
          <span>运行中</span>
        </div>
      </div>
    </div>

    <div class="panel form-panel">
      <div class="panel-heading compact">
        <div>
          <p class="eyebrow">Create</p>
          <h2>新增转发线程</h2>
        </div>
        <label class="switch-card">
          <input v-model="newForwarder.enabled" type="checkbox" />
          <span>创建后启用</span>
        </label>
      </div>
      <form class="forward-form" @submit.prevent="createForwarder">
        <label class="field span-2">名称<input v-model="newForwarder.name" placeholder="例如：Meshtastic CN" /></label>
        <fieldset class="broker-card source-card">
          <legend>源 Broker</legend>
          <label class="field span-2">Host<input v-model="newForwarder.source_host" /></label>
          <label class="field small">Port<input v-model="newForwarder.source_port" /></label>
          <label class="field">用户名<input v-model="newForwarder.source_username" /></label>
          <label class="field">密码<input v-model="newForwarder.source_password" type="password" /></label>
          <label class="field span-2">Client ID<input v-model="newForwarder.source_client_id" placeholder="留空自动生成" /></label>
          <label class="switch-card"><input v-model="newForwarder.source_tls" type="checkbox" /> <span>TLS</span></label>
        </fieldset>
        <fieldset class="broker-card target-card">
          <legend>目标 Broker</legend>
          <label class="field span-2">Host<input v-model="newForwarder.target_host" /></label>
          <label class="field small">Port<input v-model="newForwarder.target_port" /></label>
          <label class="field">用户名<input v-model="newForwarder.target_username" /></label>
          <label class="field">密码<input v-model="newForwarder.target_password" type="password" /></label>
          <label class="field span-2">Client ID<input v-model="newForwarder.target_client_id" placeholder="留空自动生成" /></label>
          <label class="switch-card"><input v-model="newForwarder.target_tls" type="checkbox" /> <span>TLS</span></label>
        </fieldset>
        <div class="form-actions">
          <button class="admin-button" type="submit" :disabled="loading">新增转发线程</button>
        </div>
      </form>
      <p v-if="error" class="error">{{ error }}</p>
      <p v-if="message" class="success">{{ message }}</p>
    </div>

    <div class="panel list-panel">
      <div class="panel-heading">
        <div>
          <p class="eyebrow">Forwarders</p>
          <h2>转发线程</h2>
        </div>
        <button class="admin-button ghost" @click="refreshForwarders()" :disabled="loading">刷新</button>
      </div>

      <div v-if="!forwarders.length" class="empty-state">暂无 MQTT 转发线程，先在上方创建一个配置。</div>

      <article v-for="item in forwarders" :key="item.id" class="forwarder-card">
        <header class="forwarder-title">
          <div>
            <h3>{{ item.name }}</h3>
            <p class="endpoint-line">{{ item.source_host }}:{{ item.source_port }} → {{ item.target_host }}:{{ item.target_port }}</p>
          </div>
          <span
            class="status-pill"
            :class="{
              ok: item.enabled && statuses[item.id]?.source_connected && statuses[item.id]?.target_connected,
              disabled: !item.enabled,
              warn: item.enabled && (!statuses[item.id]?.source_connected || !statuses[item.id]?.target_connected),
            }"
          >
            {{ statusText(item) }}
          </span>
        </header>

        <div class="runtime-grid">
          <div><span>源连接</span><strong>{{ statuses[item.id]?.source_connected ? '已连接' : '未连接' }}</strong></div>
          <div><span>目标连接</span><strong>{{ statuses[item.id]?.target_connected ? '已连接' : '未连接' }}</strong></div>
          <div><span>已转发</span><strong>{{ statuses[item.id]?.messages_forwarded ?? 0 }}</strong></div>
          <div><span>已丢弃</span><strong>{{ statuses[item.id]?.messages_dropped ?? 0 }}</strong></div>
          <div class="span-2"><span>启动时间</span><strong>{{ formatTime(statuses[item.id]?.started_at ?? null) }}</strong></div>
        </div>
        <p v-if="statuses[item.id]?.last_error" class="inline-error">{{ statuses[item.id]?.last_error }}</p>

        <div v-if="edits[item.id]" class="edit-shell">
          <div class="edit-section main-section">
            <label class="field">名称<input v-model="edits[item.id].name" /></label>
            <label class="switch-card"><input v-model="edits[item.id].enabled" type="checkbox" /> <span>启用线程</span></label>
          </div>
          <div class="edit-section source-card">
            <h4>源 Broker</h4>
            <label class="field span-2">Host<input v-model="edits[item.id].source_host" /></label>
            <label class="field small">Port<input v-model="edits[item.id].source_port" /></label>
            <label class="field">用户名<input v-model="edits[item.id].source_username" /></label>
            <label class="field">密码<input v-model="edits[item.id].source_password" type="password" :placeholder="item.source_password_set ? '留空保持原密码' : ''" /></label>
            <label class="field span-2">Client ID<input v-model="edits[item.id].source_client_id" /></label>
            <label class="switch-card"><input v-model="edits[item.id].source_password_clear" type="checkbox" /> <span>清空源密码</span></label>
            <label class="switch-card"><input v-model="edits[item.id].source_tls" type="checkbox" /> <span>源 TLS</span></label>
          </div>
          <div class="edit-section target-card">
            <h4>目标 Broker</h4>
            <label class="field span-2">Host<input v-model="edits[item.id].target_host" /></label>
            <label class="field small">Port<input v-model="edits[item.id].target_port" /></label>
            <label class="field">用户名<input v-model="edits[item.id].target_username" /></label>
            <label class="field">密码<input v-model="edits[item.id].target_password" type="password" :placeholder="item.target_password_set ? '留空保持原密码' : ''" /></label>
            <label class="field span-2">Client ID<input v-model="edits[item.id].target_client_id" /></label>
            <label class="switch-card"><input v-model="edits[item.id].target_password_clear" type="checkbox" /> <span>清空目标密码</span></label>
            <label class="switch-card"><input v-model="edits[item.id].target_tls" type="checkbox" /> <span>目标 TLS</span></label>
          </div>
        </div>

        <div class="actions">
          <button class="admin-button" @click="saveForwarder(item)" :disabled="loading">保存并重启</button>
          <button class="admin-button ghost" @click="restartForwarder(item)">仅重启</button>
          <button class="admin-button danger" @click="removeForwarder(item)" :disabled="loading">删除</button>
          <button class="admin-button secondary" @click="toggleTopics(item)">{{ expanded[item.id] ? '收起 TOPICS' : '管理 TOPICS' }}</button>
        </div>

        <div v-if="expanded[item.id]" class="topics-box">
          <div class="topics-heading">
            <div>
              <p class="eyebrow">Topics</p>
              <h4>订阅规则</h4>
            </div>
            <span class="badge">{{ topics[item.id]?.length ?? 0 }} 条</span>
          </div>
          <form v-if="newTopics[item.id]" class="topic-row new-topic" @submit.prevent="createTopic(item.id)">
            <input v-model="newTopics[item.id].topic" placeholder="msh/#" />
            <label class="mini-check"><input v-model="newTopics[item.id].enabled" type="checkbox" /> 启用</label>
            <select v-model="newTopics[item.id].direction">
              <option value="source_to_target">单向：源 → 目标</option>
              <option value="bidirectional">双向</option>
            </select>
            <input v-model="newTopics[item.id].source_prefix" placeholder="源前缀" />
            <input v-model="newTopics[item.id].target_prefix" placeholder="目标前缀" />
            <select v-model.number="newTopics[item.id].qos">
              <option :value="0">QoS 0</option>
              <option :value="1">QoS 1</option>
              <option :value="2">QoS 2</option>
            </select>
            <label class="mini-check"><input v-model="newTopics[item.id].retain" type="checkbox" /> Retain</label>
            <button class="admin-button" type="submit">新增</button>
          </form>
          <div v-for="topic in topics[item.id] ?? []" :key="topic.id" class="topic-row">
            <input v-model="topicEdits[topic.id].topic" />
            <label class="mini-check"><input v-model="topicEdits[topic.id].enabled" type="checkbox" /> 启用</label>
            <select v-model="topicEdits[topic.id].direction">
              <option value="source_to_target">单向：源 → 目标</option>
              <option value="bidirectional">双向</option>
            </select>
            <input v-model="topicEdits[topic.id].source_prefix" placeholder="源前缀" />
            <input v-model="topicEdits[topic.id].target_prefix" placeholder="目标前缀" />
            <select v-model.number="topicEdits[topic.id].qos">
              <option :value="0">QoS 0</option>
              <option :value="1">QoS 1</option>
              <option :value="2">QoS 2</option>
            </select>
            <label class="mini-check"><input v-model="topicEdits[topic.id].retain" type="checkbox" /> Retain</label>
            <button class="admin-button ghost" @click="saveTopic(topic)">保存</button>
            <button class="admin-button danger" @click="removeTopic(topic)">删除</button>
          </div>
        </div>
      </article>

      <div class="pagination">
        <button class="admin-button ghost" :disabled="!canPrev || loading" @click="refreshForwarders(page - 1)">上一页</button>
        <span>第 {{ page }} 页 · 共 {{ total }} 条</span>
        <button class="admin-button ghost" :disabled="!canNext || loading" @click="refreshForwarders(page + 1)">下一页</button>
      </div>
    </div>
  </section>
</template>

<style scoped>
.mqtt-forward-page {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mqtt-forward-page :deep(input),
.mqtt-forward-page :deep(select) {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 11px;
  color: #0f172a;
  font: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mqtt-forward-page :deep(input:focus),
.mqtt-forward-page :deep(select:focus) {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mqtt-hero,
.form-panel,
.list-panel {
  padding: 18px;
}

.mqtt-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.mqtt-hero h2 {
  font-size: 24px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 0.75rem;
}

.hero-stats div {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
}

.hero-stats strong {
  display: block;
  color: #1d4ed8;
  font-size: 24px;
}

.hero-stats span,
.endpoint-line,
.runtime-grid span {
  color: #64748b;
  font-size: 13px;
}

.panel-heading,
.forwarder-title,
.actions,
.pagination,
.topics-heading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.panel-heading,
.forwarder-title,
.topics-heading {
  justify-content: space-between;
}

.panel-heading.compact {
  margin-bottom: 1rem;
}

.forward-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.span-2 {
  grid-column: span 2;
}

.broker-card,
.edit-section,
.forwarder-card,
.topics-box {
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: #fff;
}

.broker-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
}

.broker-card legend {
  padding: 0 8px;
  color: #334155;
  font-weight: 800;
}

.source-card {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.target-card {
  background: linear-gradient(180deg, #f8fffb 0%, #fff 100%);
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.switch-card,
.mini-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 9px 11px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  background: #f8fafc;
}

.switch-card input,
.mini-check input {
  width: auto;
}

.forwarder-card {
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: inset 4px 0 0 #dbeafe;
}

.forwarder-title h3 {
  color: #0f172a;
  font-size: 18px;
}

.status-pill {
  border-radius: 999px;
  padding: 7px 12px;
  color: #92400e;
  background: #fffbeb;
}

.status-pill.ok {
  color: #166534;
  background: #dcfce7;
}

.status-pill.warn {
  color: #92400e;
  background: #fef3c7;
}

.status-pill.disabled {
  color: #475569;
  background: #e2e8f0;
}

.runtime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.runtime-grid div {
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8fafc;
}

.runtime-grid strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
}

.inline-error {
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 10px 12px;
  color: #b91c1c;
  background: #fef2f2;
  word-break: break-word;
}

.edit-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.edit-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.edit-section h4 {
  grid-column: 1 / -1;
  margin: 0;
}

.main-section {
  grid-column: 1 / -1;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
}

.actions {
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.admin-button.ghost {
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.admin-button.secondary {
  background: #475569;
}

.admin-button.danger {
  background: #dc2626;
}

.topics-box {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8fafc;
}

.topic-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(90px, 0.7fr) minmax(150px, 1fr) repeat(2, minmax(120px, 1fr)) minmax(90px, 0.7fr) minmax(90px, 0.7fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.topic-row.new-topic {
  border: 1px dashed #93c5fd;
  border-radius: 14px;
  padding: 0.75rem;
  background: #eff6ff;
}

.empty-state {
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 24px;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
}

.pagination {
  justify-content: center;
  margin-top: 1rem;
}

@media (max-width: 1100px) {
  .forward-form,
  .edit-shell {
    grid-template-columns: 1fr;
  }

  .broker-card,
  .edit-section,
  .topic-row {
    grid-template-columns: 1fr 1fr;
  }

  .span-2,
  .main-section {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .mqtt-hero,
  .panel-heading,
  .forwarder-title {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-stats,
  .broker-card,
  .edit-section,
  .topic-row,
  .main-section {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }
}
</style>
