import { useCallback, useMemo, useState } from 'react'
import {
  View,
  Text,
  ScrollView,
  TextInput,
  Pressable,
  StyleSheet,
  ActivityIndicator,
  Alert,
  RefreshControl,
  Linking,
  Switch,
} from 'react-native'
import { Picker } from '@react-native-picker/picker'
import { SafeAreaView } from 'react-native-safe-area-context'

import { useBind } from '@/context/BindContext'
import { useRecorder } from '@/hooks/useRecorder'
import { theme } from '@/constants/theme'
import {
  douyinRoomAndHref,
  parseYoutubeStreamKeySuffix,
  proChannelPm2Process,
} from '@/lib/youtubeConfigUtils'

function statusTintBackground(variant: string): string {
  switch (variant) {
    case 'online':
      return 'rgba(61, 214, 140, 0.1)'
    case 'stopped':
    case 'error':
      return 'rgba(245, 101, 101, 0.1)'
    case 'warn':
      return 'rgba(246, 173, 85, 0.12)'
    case 'offline':
      return 'rgba(139, 146, 158, 0.11)'
    case 'loading':
      return 'rgba(91, 157, 255, 0.12)'
    case 'unknown':
    case 'empty':
      return 'rgba(91, 157, 255, 0.09)'
    default:
      return 'rgba(139, 146, 158, 0.1)'
  }
}

function ctrlStyle(action: string): object {
  switch (action) {
    case 'start':
      return styles.ctrl_start
    case 'stop':
      return styles.ctrl_stop
    case 'restart':
      return styles.ctrl_restart
    case 'status':
      return styles.ctrl_status
    default:
      return {}
  }
}

const variantColor: Record<string, string> = {
  online: theme.success,
  stopped: theme.danger,
  error: theme.danger,
  warn: theme.warn,
  offline: theme.danger,
  loading: theme.muted,
  unknown: theme.accent,
  empty: theme.accent,
}

function ProLiveSwitchGrid({
  rows,
  committedChannelKeys,
  proChannelEditors,
  highlightedChannelId,
  loadingAction,
  onSelectChannel,
  onStart,
  onStop,
  onRestart,
}: {
  rows: { channelId: string; channelName: string; douyinUrl: string; live: boolean }[]
  committedChannelKeys: Record<string, string[]>
  proChannelEditors: Record<string, { keys: string[]; urlText: string }>
  highlightedChannelId: string
  loadingAction: string | null
  onSelectChannel: (channelId: string) => void
  onStart: (channelId: string) => void
  onStop: (channelId: string) => void
  onRestart: (channelId: string) => void
}) {
  const pmBusy = loadingAction !== null
  return (
    <View style={styles.proGrid}>
      {rows.map((row) => {
        const saved = committedChannelKeys[row.channelId]?.[0] ?? ''
        const ed = proChannelEditors[row.channelId]
        const activeKey = (saved || ed?.keys?.[0] || '').trim()
        const keySuffix = parseYoutubeStreamKeySuffix(`key = ${activeKey}`)
        const { room, href } = douyinRoomAndHref(row.douyinUrl, ed?.urlText ?? '')
        const stopDisabled = pmBusy || !row.live
        const rowSelected = row.channelId === highlightedChannelId
        return (
          <View
            key={row.channelId}
            style={[styles.proSwitchRow, rowSelected && styles.proSwitchRowOn]}
          >
            <Pressable onPress={() => onSelectChannel(row.channelId)}>
              <Text style={styles.proKeySuffix} numberOfLines={1}>
                {keySuffix || '—'}
              </Text>
              <View style={[styles.proTag, row.live ? styles.proTagOn : styles.proTagOff]}>
                <Text style={styles.proTagText}>{row.live ? '直播中' : '未开播'}</Text>
              </View>
              <Text style={styles.proMid} numberOfLines={2}>
                {room} · {row.channelName}
              </Text>
            </Pressable>
            {href ? (
              <Pressable onPress={() => void Linking.openURL(href)}>
                <Text style={styles.proLink}>在浏览器打开抖音页</Text>
              </Pressable>
            ) : null}
            <View style={styles.proActions}>
              <Pressable
                style={[styles.proBtn, styles.proBtnStart, (pmBusy || row.live) && styles.ctrlDisabled]}
                disabled={pmBusy || row.live}
                onPress={() => onStart(row.channelId)}
              >
                <Text style={styles.proBtnText}>开始</Text>
              </Pressable>
              <Pressable
                style={[styles.proBtn, styles.proBtnStop, stopDisabled && styles.ctrlDisabled]}
                disabled={stopDisabled}
                onPress={() => onStop(row.channelId)}
              >
                <Text style={styles.proBtnText}>停止</Text>
              </Pressable>
              <Pressable
                style={[styles.proBtn, styles.proBtnRestart, pmBusy && styles.ctrlDisabled]}
                disabled={pmBusy}
                onPress={() => onRestart(row.channelId)}
              >
                <Text style={styles.proBtnText}>重新开始</Text>
              </Pressable>
            </View>
          </View>
        )
      })}
    </View>
  )
}

function LiveSwitchGrid({
  loadingAction,
  onAction,
  disabledAll,
}: {
  loadingAction: string | null
  onAction: (a: 'start' | 'stop' | 'restart' | 'status') => void
  disabledAll?: boolean
}) {
  return (
    <View style={styles.grid}>
      {(
        [
          ['start', '开始直播'],
          ['stop', '停止直播'],
          ['restart', '重新开始'],
          ['status', '刷新状态'],
        ] as const
      ).map(([action, label]) => (
        <Pressable
          key={action}
          style={[
            styles.ctrl,
            ctrlStyle(action),
            loadingAction === action && styles.btnDisabled,
            disabledAll && styles.ctrlDisabled,
          ]}
          disabled={!disabledAll && loadingAction !== null && action !== 'status'}
          onPress={() => {
            if (disabledAll) {
              Alert.alert('未绑定', '请先在「远程」页完成配对后再操作。')
              return
            }
            if (loadingAction !== null && action !== 'status') return
            void onAction(action)
          }}
        >
          <Text style={[styles.ctrlText, action === 'status' && { color: theme.text }]}>{label}</Text>
        </Pressable>
      ))}
    </View>
  )
}

export default function RecordScreen() {
  const { bind } = useBind()
  const r = useRecorder()
  const unbound = !bind
  const [refreshing, setRefreshing] = useState(false)

  const statusColor = useMemo(() => variantColor[r.statusMeta.variant] ?? theme.muted, [r.statusMeta.variant])
  const statusBg = useMemo(() => statusTintBackground(r.statusMeta.variant), [r.statusMeta.variant])

  const onRefresh = useCallback(async () => {
    if (!bind) return
    setRefreshing(true)
    await r.refreshProcessList()
    setRefreshing(false)
  }, [bind, r.refreshProcessList])

  if (r.bootError && bind) {
    return (
      <SafeAreaView style={styles.safe} edges={['bottom']}>
        <View style={styles.fatalWrap}>
          <Text style={styles.err}>无法连接：{r.bootError}</Text>
          <Text style={styles.fatalHint}>
            常见于网络瞬时断连；若「远程」里测试 API 正常，多半是任务列表请求失败，请重试。
          </Text>
          <Pressable style={styles.retryBtn} onPress={() => void r.refreshProcessList()}>
            <Text style={styles.retryBtnText}>重试加载任务列表</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    )
  }

  return (
    <SafeAreaView style={styles.safe} edges={['bottom']}>
      <ScrollView
        contentContainerStyle={styles.scroll}
        refreshControl={
          bind ? (
            <RefreshControl refreshing={refreshing} onRefresh={() => void onRefresh()} tintColor={theme.accent} />
          ) : undefined
        }
      >
        {bind && r.transientLoadError ? (
          <View style={styles.warnBanner}>
            <Text style={styles.warnBannerText}>
              任务列表刷新失败：{r.transientLoadError}
              {'\n'}
              下拉刷新重试；直播状态仍会每 2 秒轮询。
            </Text>
          </View>
        ) : null}

        {bind && (
          <View style={styles.banner}>
            <Text style={styles.bannerText}>
              以下仅远程控制 PC 上的转播与 PM2 进程；推流与 FFmpeg 在电脑端执行，手机不跑拉流/转码。
            </Text>
          </View>
        )}

        <View style={styles.toolbarCard}>
          <View style={styles.toolbarRow}>
            <View style={styles.toolbarLeft}>
              <View
                style={[
                  styles.statusChip,
                  { borderLeftColor: statusColor, backgroundColor: statusBg },
                ]}
              >
                <View style={[styles.statusDotOuter, { borderColor: statusColor }]}>
                  <View style={[styles.statusDotInner, { backgroundColor: statusColor }]} />
                </View>
                <Text style={styles.statusLineText} numberOfLines={1}>
                  {r.statusMeta.line}
                </Text>
              </View>
            </View>
            <View style={[styles.proCluster, unbound && styles.proClusterDisabled]}>
              <View style={styles.proLabelRow}>
                <Text style={styles.proLabelZh}>多频道</Text>
                <View style={[styles.proBadge, r.multiChannelPro && styles.proBadgeOn]}>
                  <Text style={styles.proBadgeText}>PRO</Text>
                </View>
              </View>
              <View style={styles.proSwitchWrap}>
                <Switch
                  value={r.multiChannelPro}
                  disabled={unbound}
                  onValueChange={(v) => {
                    if (unbound) return
                    void r.togglePro(v)
                  }}
                  trackColor={{
                    false: 'rgba(255,255,255,0.12)',
                    true: 'rgba(91, 157, 255, 0.45)',
                  }}
                  thumbColor={r.multiChannelPro ? '#7eb6ff' : '#5c6370'}
                  ios_backgroundColor="rgba(255,255,255,0.1)"
                />
              </View>
            </View>
          </View>
        </View>

        {bind ? (
          <View style={[styles.pickerWrap, r.emptyHint && styles.pickerDisabled, styles.pickerRowBelow]}>
            <Picker
              enabled={!r.emptyHint}
              selectedValue={r.currentProcess}
              onValueChange={(v) => r.setCurrentProcess(String(v))}
              style={styles.picker}
              dropdownIconColor={theme.text}
            >
              {!r.entries.length ? (
                <Picker.Item label="（无任务）" value="" color={theme.muted} />
              ) : (
                r.entries.map((e) => (
                  <Picker.Item key={e.pm2} label={e.label} value={e.pm2} color={theme.text} />
                ))
              )}
            </Picker>
          </View>
        ) : null}

        {bind && r.emptyHint ? (
          <View style={styles.emptyCard}>
            <Text style={styles.emptyTitle}>还没有可用的直播任务</Text>
            <Text style={styles.hint}>{r.emptyHint}</Text>
          </View>
        ) : unbound ? (
          <>
            <View style={[styles.card, styles.cardAccent]}>
              <Text style={styles.cardTitle}>直播开关</Text>
              <LiveSwitchGrid
                loadingAction={r.loadingAction}
                disabledAll
                onAction={() => {}}
              />
            </View>

            <View style={styles.card}>
              <Text style={styles.cardTitle}>YouTube 相关设置</Text>
              <Text style={styles.hintSmall}>配对后从 PC 读取 youtube.ini，与桌面端一致。</Text>
              <TextInput
                style={[styles.area, styles.inputDisabled]}
                multiline
                editable={false}
                value=""
                placeholder="串流密钥、分辨率等"
                placeholderTextColor={theme.muted}
              />
            </View>

            <View style={styles.card}>
              <Text style={styles.cardTitle}>直播地址列表</Text>
              <Text style={styles.hintSmall}>要转播的直播间地址，一行一个。</Text>
              <TextInput
                style={[styles.area, styles.inputDisabled]}
                multiline
                editable={false}
                value=""
                placeholder="配对后显示"
                placeholderTextColor={theme.muted}
              />
            </View>

            <View style={styles.card}>
              <Text style={styles.cardTitle}>OBS 推流</Text>
              <Text style={styles.hintSmall}>OBS 选自定义推流，服务器：</Text>
              <Text style={styles.mono}>srt://live.local:10080/live/obs</Text>
            </View>

            <View style={styles.card}>
              <Text style={styles.cardTitle}>当前直播日志</Text>
              <Text style={styles.hintSmall}>每秒刷新 · 配对后显示进程输出与异常</Text>
              <ScrollView style={styles.logBox} nestedScrollEnabled>
                <Text style={styles.log}>{r.logText || '—'}</Text>
              </ScrollView>
            </View>
          </>
        ) : (
          <>
            <View style={[styles.card, styles.cardAccent]}>
              <Text style={styles.cardTitle}>直播开关</Text>
              {r.isYoutube && r.multiChannelPro && r.proLiveRows.length > 0 ? (
                <ProLiveSwitchGrid
                  rows={r.proLiveRows}
                  committedChannelKeys={r.committedChannelKeys}
                  proChannelEditors={r.proChannelEditors}
                  highlightedChannelId={r.proChannelId}
                  loadingAction={r.loadingAction}
                  onSelectChannel={(cid) => r.setProChannelId(cid)}
                  onStart={(cid) => void r.runProChannelStart(cid)}
                  onStop={(cid) => void r.runPm2Action('stop', proChannelPm2Process(cid))}
                  onRestart={(cid) => void r.runProChannelRestart(cid)}
                />
              ) : r.isYoutube && r.multiChannelPro && r.proLiveRows.length === 0 ? (
                <Text style={styles.hintSmall}>
                  {r.proChannelsList.length > 0
                    ? '暂无已保存的线路密钥。请在「当前频道」中保存串流密钥后，对应行将显示于此。'
                    : '暂无频道。'}
                </Text>
              ) : (
                <LiveSwitchGrid
                  loadingAction={r.loadingAction}
                  onAction={(a) => void r.runPm2Action(a)}
                />
              )}
            </View>

            {r.isYoutube && r.multiChannelPro && (
              <View style={styles.card}>
                <Text style={styles.cardTitle}>当前频道</Text>
                {r.proChannelsError ? (
                  <Text style={styles.err}>{r.proChannelsError}</Text>
                ) : (
                  <>
                    <View style={styles.pickerWrap}>
                      <Picker
                        selectedValue={r.proChannelId}
                        onValueChange={(v) => r.setProChannelId(String(v))}
                        style={styles.picker}
                        dropdownIconColor={theme.text}
                      >
                        {r.proChannelsList.map((c) => (
                          <Picker.Item
                            key={c.id}
                            label={`${c.name} (${c.keyPreview || '无密钥'})`}
                            value={c.id}
                            color={theme.text}
                          />
                        ))}
                      </Picker>
                    </View>
                    <View style={styles.row}>
                      <Pressable
                        style={[styles.btn, styles.btnSec]}
                        disabled={!!r.newChannelDraft || r.addChannelBusy}
                        onPress={() => r.setNewChannelDraft({ keyText: '' })}
                      >
                        <Text style={styles.btnSecText}>新增频道</Text>
                      </Pressable>
                      <Pressable
                        style={[styles.btn, styles.btnSec]}
                        disabled={r.proChannelsList.length <= 1 || r.deleteChannelBusyId !== null}
                        onPress={() => void r.deleteProChannel(r.proChannelId)}
                      >
                        <Text style={styles.btnSecText}>
                          {r.deleteChannelBusyId === r.proChannelId ? '…' : '删除当前频道'}
                        </Text>
                      </Pressable>
                    </View>
                    {r.newChannelDraft ? (
                      <View style={styles.newChBox}>
                        <Text style={styles.fieldLbl}>新频道串流密钥</Text>
                        <TextInput
                          style={styles.inputSingle}
                          value={r.newChannelDraft.keyText}
                          onChangeText={(v) => r.setNewChannelDraft({ keyText: v })}
                          placeholder="粘贴密钥"
                          placeholderTextColor={theme.muted}
                          autoCapitalize="none"
                        />
                        <View style={styles.row}>
                          <Pressable
                            style={[styles.btn, styles.btnSec]}
                            onPress={() => r.setNewChannelDraft(null)}
                          >
                            <Text style={styles.btnSecText}>取消</Text>
                          </Pressable>
                          <Pressable
                            style={[styles.btn, r.addChannelBusy && styles.btnDisabled]}
                            disabled={r.addChannelBusy}
                            onPress={() => void r.submitNewChannelDraft()}
                          >
                            <Text style={styles.btnText}>{r.addChannelBusy ? '…' : '提交'}</Text>
                          </Pressable>
                        </View>
                      </View>
                    ) : null}
                  </>
                )}
              </View>
            )}

            {r.isYoutube && r.multiChannelPro && !r.proChannelsError && r.proChannelsList.length > 0 && (
              <>
                <View style={styles.card}>
                  <Text style={styles.cardTitle}>YouTube 密钥（当前线路）</Text>
                  <TextInput
                    style={styles.area}
                    multiline
                    value={r.proChannelEditors[r.proChannelId]?.keys?.[0] ?? ''}
                    onChangeText={r.setProChannelKeyText}
                    placeholderTextColor={theme.muted}
                  />
                  <Pressable
                    style={[
                      styles.btn,
                      (r.saveProKeyLoading || r.saveProKeyLoadingId === r.proChannelId) && styles.btnDisabled,
                    ]}
                    disabled={r.saveProKeyLoading || r.saveProKeyLoadingId === r.proChannelId}
                    onPress={() => void r.saveProChannelKey()}
                  >
                    {r.saveProKeyLoading || r.saveProKeyLoadingId === r.proChannelId ? (
                      <ActivityIndicator color="#fff" />
                    ) : (
                      <Text style={styles.btnText}>保存密钥</Text>
                    )}
                  </Pressable>
                  <Text style={styles.hintSmall}>{r.youtubeStatus}</Text>
                </View>
                <View style={styles.card}>
                  <Text style={styles.cardTitle}>直播地址列表（当前线路）</Text>
                  <TextInput
                    style={styles.area}
                    multiline
                    value={r.proChannelEditors[r.proChannelId]?.urlText ?? ''}
                    onChangeText={r.setProChannelUrlText}
                    placeholderTextColor={theme.muted}
                  />
                  <View style={styles.row}>
                    <Pressable style={[styles.btn, styles.btnSec]} onPress={() => void r.reloadProUrlFromServer()}>
                      <Text style={styles.btnSecText}>重新读取</Text>
                    </Pressable>
                    <Pressable
                      style={[styles.btn, styles.btnSec]}
                      onPress={() => void r.saveProUrlConfig()}
                      disabled={r.saveUrlLoading}
                    >
                      <Text style={styles.btnSecText}>{r.saveUrlLoading ? '…' : '保存地址'}</Text>
                    </Pressable>
                  </View>
                  <Text style={styles.hintSmall}>{r.urlStatus}</Text>
                </View>
              </>
            )}

            {r.isYoutube && !r.multiChannelPro && (
              <View style={styles.card}>
                <Text style={styles.cardTitle}>YouTube 相关设置</Text>
                <Text style={styles.fieldLbl}>串流密钥</Text>
                <TextInput
                  style={styles.inputSingle}
                  value={r.ytIniModel.keys[0] ?? ''}
                  onChangeText={(v) =>
                    r.setYtIniModel((m) => ({ ...m, keys: [v], activeIndex: 0 }))
                  }
                  placeholder="粘贴或编辑串流密钥"
                  placeholderTextColor={theme.muted}
                  autoCapitalize="none"
                />
                <Text style={styles.fieldLbl}>输出分辨率</Text>
                <View style={styles.pickerWrap}>
                  <Picker
                    selectedValue={r.ytIniModel.options.output_resolution ?? '720p'}
                    onValueChange={(v) =>
                      r.setYtIniModel((m) => ({
                        ...m,
                        options: { ...m.options, output_resolution: String(v) },
                      }))
                    }
                    style={styles.picker}
                    dropdownIconColor={theme.text}
                  >
                    <Picker.Item label="720p" value="720p" color={theme.text} />
                    <Picker.Item label="1080p" value="1080p" color={theme.text} />
                  </Picker>
                </View>
                <Text style={styles.fieldLbl}>是否使用 GPU（NVENC）</Text>
                <View style={styles.pickerWrap}>
                  <Picker
                    selectedValue={r.ytIniModel.options.use_gpu ?? (r.gpuCaps?.nvenc_available ? '是' : '无')}
                    onValueChange={(v) =>
                      r.setYtIniModel((m) => ({
                        ...m,
                        options: { ...m.options, use_gpu: String(v) },
                      }))
                    }
                    style={styles.picker}
                    dropdownIconColor={theme.text}
                  >
                    {r.gpuCaps?.nvenc_available ? (
                      <>
                        <Picker.Item label="是" value="是" color={theme.text} />
                        <Picker.Item label="否" value="否" color={theme.text} />
                        <Picker.Item label="无" value="无" color={theme.text} />
                      </>
                    ) : (
                      <Picker.Item label="无（未检测到 NVENC）" value="无" color={theme.text} />
                    )}
                  </Picker>
                </View>
                <Text style={styles.fieldLbl}>音频降噪</Text>
                <View style={styles.pickerWrap}>
                  <Picker
                    selectedValue={r.ytIniModel.options.audio_denoise ?? '否'}
                    onValueChange={(v) =>
                      r.setYtIniModel((m) => ({
                        ...m,
                        options: { ...m.options, audio_denoise: String(v) },
                      }))
                    }
                    style={styles.picker}
                    dropdownIconColor={theme.text}
                  >
                    <Picker.Item label="否" value="否" color={theme.text} />
                    <Picker.Item label="是" value="是" color={theme.text} />
                  </Picker>
                </View>
                <View style={styles.row}>
                  <Pressable style={[styles.btn, styles.btnSec]} onPress={() => void r.loadYoutubeIniModel()}>
                    <Text style={styles.btnSecText}>重新读取</Text>
                  </Pressable>
                  <Pressable
                    style={[styles.btn, r.saveYoutubeLoading && styles.btnDisabled]}
                    disabled={r.saveYoutubeLoading}
                    onPress={() => void r.saveYoutubeIniModel()}
                  >
                    {r.saveYoutubeLoading ? (
                      <ActivityIndicator color="#fff" />
                    ) : (
                      <Text style={styles.btnText}>保存</Text>
                    )}
                  </Pressable>
                </View>
                <Text style={styles.hintSmall}>{r.youtubeStatus}</Text>
                {!r.UI_SHOW_YOUTUBE_GOOGLE_OAUTH && (
                  <Text style={styles.hintSmall}>Google 授权与拉取密钥请在 PC 端操作。</Text>
                )}
              </View>
            )}

            {((r.isYoutube && !r.multiChannelPro) || r.isTiktok) && (
              <View style={styles.card}>
                <Text style={styles.cardTitle}>直播地址列表</Text>
                <Text style={styles.hintSmall}>要转播的直播间地址写在这里，一行一个。</Text>
                <TextInput
                  style={styles.area}
                  multiline
                  value={r.urlText}
                  onChangeText={r.setUrlText}
                  placeholderTextColor={theme.muted}
                />
                <View style={styles.row}>
                  <Pressable
                    style={[styles.btn, styles.btnSec]}
                    onPress={() => void r.loadConfig('/get_url_config', r.setUrlText, r.setUrlStatus)}
                  >
                    <Text style={styles.btnSecText}>重新读取</Text>
                  </Pressable>
                  <Pressable
                    style={[styles.btn, r.saveUrlLoading && styles.btnDisabled]}
                    disabled={r.saveUrlLoading}
                    onPress={() => {
                      r.setSaveUrlLoading(true)
                      void r.saveConfig('/save_url_config', r.urlText, r.setUrlStatus, () =>
                        r.setSaveUrlLoading(false),
                      )
                    }}
                  >
                    <Text style={styles.btnText}>保存</Text>
                  </Pressable>
                </View>
                <Text style={styles.hintSmall}>{r.urlStatus}</Text>
              </View>
            )}

            {!r.UI_SHOW_YOUTUBE_GOOGLE_OAUTH && r.isObs && (
              <View style={styles.card}>
                <Text style={styles.cardTitle}>OBS 推流</Text>
                <Text style={styles.hintSmall}>在 OBS 里选「自定义」推流，服务器填下面这一行：</Text>
                <Text style={styles.mono}>srt://live.local:10080/live/obs</Text>
              </View>
            )}

            <View style={styles.card}>
              <Text style={styles.cardTitle}>当前直播日志</Text>
              <Text style={styles.hintSmall}>每 2 秒刷新 · 与上方状态同源</Text>
              <ScrollView style={styles.logBox} nestedScrollEnabled>
                <Text style={styles.log}>{r.logText || '—'}</Text>
              </ScrollView>
            </View>
          </>
        )}
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: theme.bg },
  fatalWrap: { flex: 1, padding: 20, justifyContent: 'center' },
  fatalHint: { fontSize: 13, color: theme.muted, lineHeight: 20, marginTop: 12, marginBottom: 20 },
  retryBtn: {
    alignSelf: 'flex-start',
    backgroundColor: '#3d7eff',
    paddingVertical: 12,
    paddingHorizontal: 18,
    borderRadius: 10,
  },
  retryBtnText: { color: '#fff', fontWeight: '700', fontSize: 15 },
  warnBanner: {
    padding: 12,
    borderRadius: 10,
    backgroundColor: 'rgba(246,173,85,0.12)',
    borderWidth: 1,
    borderColor: 'rgba(246,173,85,0.35)',
    marginBottom: 14,
  },
  warnBannerText: { fontSize: 13, color: theme.warn, lineHeight: 20 },
  scroll: { padding: 16, paddingBottom: 32 },
  banner: {
    padding: 12,
    borderRadius: 10,
    backgroundColor: 'rgba(91,157,255,0.1)',
    borderWidth: 1,
    borderColor: 'rgba(91,157,255,0.25)',
    marginBottom: 14,
  },
  bannerText: { fontSize: 13, color: theme.text, lineHeight: 20 },
  toolbarCard: {
    marginBottom: 12,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.07)',
    backgroundColor: theme.bgElevated,
    paddingVertical: 12,
    paddingHorizontal: 12,
  },
  toolbarRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 10,
  },
  toolbarLeft: { flex: 1, minWidth: 0, marginRight: 6 },
  statusChip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
    paddingLeft: 11,
    borderRadius: 12,
    borderLeftWidth: 3,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: 'rgba(255,255,255,0.06)',
    borderRightColor: 'rgba(255,255,255,0.06)',
    borderBottomColor: 'rgba(255,255,255,0.06)',
  },
  statusDotOuter: {
    width: 14,
    height: 14,
    borderRadius: 7,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  statusDotInner: { width: 6, height: 6, borderRadius: 3 },
  statusLineText: {
    flex: 1,
    fontSize: 15,
    fontWeight: '600',
    color: theme.text,
    letterSpacing: 0.2,
  },
  proCluster: {
    flexDirection: 'row',
    alignItems: 'center',
    flexShrink: 0,
    gap: 10,
    paddingLeft: 10,
    paddingVertical: 4,
    paddingRight: 4,
    borderRadius: 12,
    backgroundColor: 'rgba(91, 157, 255, 0.06)',
    borderWidth: 1,
    borderColor: 'rgba(91, 157, 255, 0.18)',
  },
  proClusterDisabled: { opacity: 0.45 },
  proLabelRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  proLabelZh: { fontSize: 13, fontWeight: '600', color: theme.text },
  proBadge: {
    paddingHorizontal: 7,
    paddingVertical: 3,
    borderRadius: 6,
    backgroundColor: 'rgba(255,255,255,0.08)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)',
  },
  proBadgeOn: {
    backgroundColor: 'rgba(91, 157, 255, 0.22)',
    borderColor: 'rgba(91, 157, 255, 0.45)',
  },
  proBadgeText: {
    fontSize: 10,
    fontWeight: '800',
    color: theme.accent,
    letterSpacing: 0.6,
  },
  proSwitchWrap: { transform: [{ scale: 0.92 }] },
  unpairedText: { fontSize: 15, fontWeight: '600', color: theme.muted },
  proGrid: { gap: 10 },
  proSwitchRow: {
    padding: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: theme.border,
    backgroundColor: theme.bgCard,
    gap: 8,
  },
  proSwitchRowOn: { borderColor: 'rgba(91,157,255,0.55)', backgroundColor: 'rgba(91,157,255,0.08)' },
  proKeySuffix: { fontFamily: 'monospace', fontSize: 13, color: theme.accent, fontWeight: '600' },
  proTag: { alignSelf: 'flex-start', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 999 },
  proTagOn: { backgroundColor: 'rgba(46,160,67,0.2)' },
  proTagOff: { backgroundColor: 'rgba(110,118,129,0.2)' },
  proTagText: { fontSize: 12, fontWeight: '600', color: theme.text },
  proMid: { fontSize: 13, color: theme.text, lineHeight: 20 },
  proLink: { fontSize: 12, color: theme.accent, marginTop: 6, fontWeight: '600' },
  proActions: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 4 },
  proBtn: { paddingVertical: 10, paddingHorizontal: 12, borderRadius: 8, minWidth: 72, alignItems: 'center' },
  proBtnStart: { backgroundColor: '#0e7a0d' },
  proBtnStop: { backgroundColor: '#d1342c' },
  proBtnRestart: { backgroundColor: '#e68600' },
  proBtnText: { color: '#fff', fontWeight: '700', fontSize: 12 },
  newChBox: { marginTop: 12, paddingTop: 12, borderTopWidth: 1, borderTopColor: theme.border },
  pickerWrap: {
    borderWidth: 1,
    borderColor: theme.border,
    borderRadius: 10,
    overflow: 'hidden',
    backgroundColor: theme.bgCard,
  },
  pickerDisabled: { opacity: 0.65 },
  picker: { color: theme.text },
  pickerRowBelow: { marginTop: 0 },
  dot: { width: 8, height: 8, borderRadius: 4 },
  emptyCard: {
    padding: 20,
    borderRadius: 12,
    backgroundColor: theme.bgCard,
    borderWidth: 1,
    borderColor: theme.border,
    alignItems: 'center',
  },
  emptyTitle: { fontSize: 15, fontWeight: '600', color: theme.muted, marginBottom: 10 },
  card: {
    padding: 14,
    borderRadius: 12,
    backgroundColor: theme.bgCard,
    borderWidth: 1,
    borderColor: theme.border,
    marginBottom: 12,
  },
  cardAccent: {
    borderColor: 'rgba(91,157,255,0.35)',
    backgroundColor: 'rgba(91,157,255,0.06)',
  },
  cardTitle: { fontSize: 15, fontWeight: '600', color: theme.text, marginBottom: 10 },
  fieldLbl: { fontSize: 12, fontWeight: '600', color: theme.muted, marginBottom: 6, marginTop: 4 },
  inputSingle: {
    borderWidth: 1,
    borderColor: theme.border,
    borderRadius: 10,
    padding: 10,
    color: theme.text,
    fontSize: 14,
    marginBottom: 10,
    backgroundColor: theme.bg,
  },
  area: {
    minHeight: 100,
    borderWidth: 1,
    borderColor: theme.border,
    borderRadius: 10,
    padding: 10,
    color: theme.text,
    fontFamily: 'monospace',
    fontSize: 12,
    marginBottom: 10,
    backgroundColor: theme.bg,
  },
  inputDisabled: { opacity: 0.85 },
  row: { flexDirection: 'row', gap: 10, flexWrap: 'wrap' },
  btn: {
    backgroundColor: '#3d7eff',
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 10,
    minWidth: 100,
    alignItems: 'center',
  },
  btnDisabled: { opacity: 0.55 },
  btnText: { color: '#fff', fontWeight: '700' },
  btnSec: { backgroundColor: theme.bgElevated, borderWidth: 1, borderColor: theme.border },
  btnSecText: { color: theme.text, fontWeight: '600' },
  hint: { color: theme.muted, fontSize: 14, lineHeight: 22, textAlign: 'center' },
  hintSmall: { color: theme.muted, fontSize: 12, marginTop: 8, marginBottom: 8 },
  err: { color: theme.danger, fontSize: 14 },
  mono: { fontFamily: 'monospace', color: theme.accent, fontSize: 13, marginTop: 6 },
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  ctrl: { flexGrow: 1, minWidth: '42%', paddingVertical: 14, borderRadius: 10, alignItems: 'center' },
  ctrlDisabled: { opacity: 0.5 },
  ctrl_start: { backgroundColor: '#0e7a0d' },
  ctrl_stop: { backgroundColor: '#d1342c' },
  ctrl_restart: { backgroundColor: '#e68600' },
  ctrl_status: { backgroundColor: theme.bgElevated, borderWidth: 1, borderColor: theme.border },
  ctrlText: { color: '#fff', fontWeight: '700', fontSize: 14 },
  logBox: { maxHeight: 280, backgroundColor: '#1e2128', borderRadius: 10, padding: 10 },
  log: { fontFamily: 'monospace', fontSize: 11, color: '#d0d4dc', lineHeight: 18 },
})