'use client';

import { useState, useEffect, useCallback } from 'react';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import styles from './settings.module.scss';
import { systemConfigService, type DisplaySettings } from '@/services/systemConfigService';
import { appAssetService, type AppAsset, type AppAssetType } from '@/services/appAssetService';
import { customerServiceContactService, type CustomerServiceContact, type ContactType } from '@/services/customerServiceContactService';
import { treePricingService, type TreePricingConfig, type TreePriceChangeLogItem } from '@/services/treePricingService';

/**
 * 后台账号数据接口
 */
interface AdminAccount {
  id: string;
  name: string;
  role: string;
  status: 'active' | 'disabled';
  lastLogin: string;
}

/**
 * 操作日志数据接口
 */
interface OperationLog {
  id: string;
  time: string;
  account: string;
  type: string;
  description: string;
  result: 'pass' | 'reject' | 'pending';
}

/**
 * 考核目标数据接口
 */
interface AssessmentTarget {
  month: number;
  provinceMonthly: number;
  provinceCumulative: number;
  cityMonthly: number;
  cityCumulative: number;
}

// 模拟后台账号数据
const mockAccounts: AdminAccount[] = [
  { id: '1', name: 'admin', role: '超级管理员', status: 'active', lastLogin: '2023-10-26 10:30' },
  { id: '2', name: 'operator01', role: '运营人员', status: 'active', lastLogin: '2023-10-26 09:15' },
];

// 模拟操作日志数据
const mockLogs: OperationLog[] = [
  { id: '1', time: '10-26 10:35', account: 'admin', type: '修改配置', description: '修改结算参数', result: 'pass' },
];

// 模拟考核目标数据
const mockTargets: AssessmentTarget[] = [
  { month: 1, provinceMonthly: 100, provinceCumulative: 100, cityMonthly: 20, cityCumulative: 20 },
  { month: 2, provinceMonthly: 120, provinceCumulative: 220, cityMonthly: 25, cityCumulative: 45 },
];

export default function SettingsPage() {
  // 结算参数设置
  const [settlementCurrencies, setSettlementCurrencies] = useState<string[]>(['BNB', '积分']);
  const [defaultCurrency, setDefaultCurrency] = useState('');

  // 龙虎榜设置
  const [enableVirtualAccount, setEnableVirtualAccount] = useState(false);
  const [virtualAccountCount, setVirtualAccountCount] = useState('');
  const [dailyRankEnabled, setDailyRankEnabled] = useState(true);
  const [weeklyRankEnabled, setWeeklyRankEnabled] = useState(true);
  const [monthlyRankEnabled, setMonthlyRankEnabled] = useState(true);
  const [displayCount, setDisplayCount] = useState('');

  // 认种限额设置
  const [singleAccountLimitEnabled, setSingleAccountLimitEnabled] = useState(false);
  const [singleAccountDays, setSingleAccountDays] = useState('');
  const [singleAccountTrees, setSingleAccountTrees] = useState('');
  const [networkLimitEnabled, setNetworkLimitEnabled] = useState(false);
  const [networkDays, setNetworkDays] = useState('');
  const [networkTrees, setNetworkTrees] = useState('');

  // 考核规则设置
  const [localUserThreshold, setLocalUserThreshold] = useState('5');
  const [exemptionEnabled, setExemptionEnabled] = useState(false);

  // 前端展示设置
  const [allowNonAdopterView, setAllowNonAdopterView] = useState(false);
  const [heatDisplayMode, setHeatDisplayMode] = useState<'count' | 'level'>('count');
  const [displaySettingsLoading, setDisplaySettingsLoading] = useState(false);
  const [displaySettingsSaving, setDisplaySettingsSaving] = useState(false);
  const [displaySettingsError, setDisplaySettingsError] = useState<string | null>(null);

  // 应用图片管理
  const [splashAssets, setSplashAssets] = useState<AppAsset[]>([]);
  const [guideAssets, setGuideAssets] = useState<AppAsset[]>([]);
  const [assetsLoading, setAssetsLoading] = useState(false);
  const [uploadingSlot, setUploadingSlot] = useState<string | null>(null);

  // 客服联系方式管理
  const [contacts, setContacts] = useState<CustomerServiceContact[]>([]);
  const [contactsLoading, setContactsLoading] = useState(false);
  const [editingContact, setEditingContact] = useState<Partial<CustomerServiceContact> | null>(null);
  const [contactSaving, setContactSaving] = useState(false);

  // 认种定价设置（总部运营成本压力涨价）
  const [pricingConfig, setPricingConfig] = useState<TreePricingConfig | null>(null);
  const [pricingLoading, setPricingLoading] = useState(false);
  const [pricingSaving, setPricingSaving] = useState(false);
  const [newSupplement, setNewSupplement] = useState('');
  const [supplementReason, setSupplementReason] = useState('');
  const [autoIncreaseEnabled, setAutoIncreaseEnabled] = useState(false);
  const [autoIncreaseAmount, setAutoIncreaseAmount] = useState('');
  const [autoIncreaseIntervalDays, setAutoIncreaseIntervalDays] = useState('');
  const [changeLog, setChangeLog] = useState<TreePriceChangeLogItem[]>([]);
  const [changeLogTotal, setChangeLogTotal] = useState(0);
  const [changeLogPage, setChangeLogPage] = useState(1);

  // 后台账号与安全
  const [approvalCount, setApprovalCount] = useState('3');
  const [sensitiveOperations, setSensitiveOperations] = useState(['修改结算参数', '删除用户']);
  const [logDate, setLogDate] = useState('');
  const [logSearch, setLogSearch] = useState('');

  // 加载前端展示设置
  const loadDisplaySettings = useCallback(async () => {
    setDisplaySettingsLoading(true);
    setDisplaySettingsError(null);
    try {
      const settings = await systemConfigService.getDisplaySettings();
      setAllowNonAdopterView(settings.allowNonAdopterViewHeat);
      setHeatDisplayMode(settings.heatDisplayMode);
    } catch (error) {
      console.error('Failed to load display settings:', error);
      setDisplaySettingsError('加载展示设置失败');
    } finally {
      setDisplaySettingsLoading(false);
    }
  }, []);

  // 保存前端展示设置
  const saveDisplaySettings = useCallback(async () => {
    setDisplaySettingsSaving(true);
    setDisplaySettingsError(null);
    try {
      await systemConfigService.updateDisplaySettings({
        allowNonAdopterViewHeat: allowNonAdopterView,
        heatDisplayMode: heatDisplayMode,
      });
      alert('展示设置保存成功');
    } catch (error) {
      console.error('Failed to save display settings:', error);
      setDisplaySettingsError('保存展示设置失败');
    } finally {
      setDisplaySettingsSaving(false);
    }
  }, [allowNonAdopterView, heatDisplayMode]);

  // 加载应用图片资源
  const loadAppAssets = useCallback(async () => {
    setAssetsLoading(true);
    try {
      const assets = await appAssetService.list();
      setSplashAssets(assets.filter(a => a.type === 'SPLASH').sort((a, b) => a.sortOrder - b.sortOrder));
      setGuideAssets(assets.filter(a => a.type === 'GUIDE').sort((a, b) => a.sortOrder - b.sortOrder));
    } catch (error) {
      console.error('Failed to load app assets:', error);
    } finally {
      setAssetsLoading(false);
    }
  }, []);

  // 上传图片
  const handleImageUpload = useCallback(async (
    type: AppAssetType,
    sortOrder: number,
    file: File,
    title?: string,
    subtitle?: string,
  ) => {
    const slotKey = `${type}-${sortOrder}`;
    setUploadingSlot(slotKey);
    try {
      await appAssetService.upload(file, type, sortOrder, title, subtitle);
      await loadAppAssets();
      alert(`${type === 'SPLASH' ? '开屏图' : '引导图'} ${sortOrder} 上传成功`);
    } catch (error) {
      console.error('Upload failed:', error);
      alert('上传失败，请重试');
    } finally {
      setUploadingSlot(null);
    }
  }, [loadAppAssets]);

  // 切换启停
  const handleAssetToggle = useCallback(async (id: string, isEnabled: boolean) => {
    try {
      await appAssetService.update(id, { isEnabled });
      await loadAppAssets();
    } catch (error) {
      console.error('Toggle failed:', error);
    }
  }, [loadAppAssets]);

  // 删除资源
  const handleAssetDelete = useCallback(async (id: string) => {
    if (!confirm('确定要删除此图片吗？')) return;
    try {
      await appAssetService.delete(id);
      await loadAppAssets();
    } catch (error) {
      console.error('Delete failed:', error);
    }
  }, [loadAppAssets]);

  // 更新引导图文案
  const handleGuideTextUpdate = useCallback(async (id: string, title: string, subtitle: string) => {
    try {
      await appAssetService.update(id, { title, subtitle });
      await loadAppAssets();
      alert('文案更新成功');
    } catch (error) {
      console.error('Update failed:', error);
      alert('更新失败，请重试');
    }
  }, [loadAppAssets]);

  // 加载客服联系方式
  const loadContacts = useCallback(async () => {
    setContactsLoading(true);
    try {
      const list = await customerServiceContactService.list();
      setContacts(Array.isArray(list) ? list.sort((a: CustomerServiceContact, b: CustomerServiceContact) => a.sortOrder - b.sortOrder) : []);
    } catch (error) {
      console.error('Failed to load contacts:', error);
    } finally {
      setContactsLoading(false);
    }
  }, []);

  // 保存客服联系方式 (新增或编辑)
  const handleContactSave = useCallback(async () => {
    if (!editingContact) return;
    if (!editingContact.type || !editingContact.label || !editingContact.value) {
      alert('请填写完整信息');
      return;
    }
    setContactSaving(true);
    try {
      if (editingContact.id) {
        await customerServiceContactService.update(editingContact.id, {
          type: editingContact.type as ContactType,
          label: editingContact.label,
          value: editingContact.value,
          sortOrder: editingContact.sortOrder ?? 0,
          isEnabled: editingContact.isEnabled,
        });
      } else {
        await customerServiceContactService.create({
          type: editingContact.type as ContactType,
          label: editingContact.label,
          value: editingContact.value,
          sortOrder: editingContact.sortOrder ?? contacts.length,
          isEnabled: editingContact.isEnabled ?? true,
        });
      }
      setEditingContact(null);
      await loadContacts();
    } catch (error) {
      console.error('Save contact failed:', error);
      alert('保存失败，请重试');
    } finally {
      setContactSaving(false);
    }
  }, [editingContact, contacts.length, loadContacts]);

  // 删除客服联系方式
  const handleContactDelete = useCallback(async (id: string) => {
    if (!confirm('确定要删除此联系方式吗？')) return;
    try {
      await customerServiceContactService.delete(id);
      await loadContacts();
    } catch (error) {
      console.error('Delete contact failed:', error);
    }
  }, [loadContacts]);

  // 切换客服联系方式启停
  const handleContactToggle = useCallback(async (id: string, isEnabled: boolean) => {
    try {
      await customerServiceContactService.update(id, { isEnabled });
      await loadContacts();
    } catch (error) {
      console.error('Toggle contact failed:', error);
    }
  }, [loadContacts]);

  // 加载认种定价配置
  const loadPricingConfig = useCallback(async () => {
    setPricingLoading(true);
    try {
      const config = await treePricingService.getConfig();
      setPricingConfig(config);
      setNewSupplement(String(config.currentSupplement));
      setAutoIncreaseEnabled(config.autoIncreaseEnabled);
      setAutoIncreaseAmount(String(config.autoIncreaseAmount));
      setAutoIncreaseIntervalDays(String(config.autoIncreaseIntervalDays));
      // 加载变更日志
      const log = await treePricingService.getChangeLog(1, 10);
      setChangeLog(log.items);
      setChangeLogTotal(log.total);
      setChangeLogPage(1);
    } catch (error) {
      console.error('Failed to load pricing config:', error);
    } finally {
      setPricingLoading(false);
    }
  }, []);

  // 手动修改加价金额
  const handleSupplementUpdate = useCallback(async () => {
    const amount = parseInt(newSupplement, 10);
    if (isNaN(amount)) {
      alert('请输入有效的调价金额（整数）');
      return;
    }
    if (15831 + amount < 0) {
      alert(`调价金额不能低于 -15831，否则总价为负`);
      return;
    }
    if (!supplementReason.trim()) {
      alert('请填写变更原因');
      return;
    }
    const totalPrice = 15831 + amount;
    if (!confirm(`确认将调价金额修改为 ${amount} USDT？\n正式认种总价将变为 ${totalPrice.toLocaleString()} USDT/棵\n预种总价将变为 ${Math.floor(totalPrice / 5).toLocaleString()} USDT/份`)) return;
    setPricingSaving(true);
    try {
      await treePricingService.updateSupplement(amount, supplementReason.trim());
      setSupplementReason('');
      await loadPricingConfig();
      alert('调价金额修改成功');
    } catch (error) {
      console.error('Failed to update supplement:', error);
      alert('修改失败，请重试');
    } finally {
      setPricingSaving(false);
    }
  }, [newSupplement, supplementReason, loadPricingConfig]);

  // 更新自动涨价设置
  const handleAutoIncreaseUpdate = useCallback(async () => {
    const amount = parseInt(autoIncreaseAmount, 10);
    const days = parseInt(autoIncreaseIntervalDays, 10);
    if (autoIncreaseEnabled && (isNaN(amount) || amount <= 0)) {
      alert('请输入有效的自动涨价金额');
      return;
    }
    if (autoIncreaseEnabled && (isNaN(days) || days < 1)) {
      alert('请输入有效的涨价间隔天数（至少1天）');
      return;
    }
    setPricingSaving(true);
    try {
      await treePricingService.updateAutoIncrease({
        enabled: autoIncreaseEnabled,
        amount: autoIncreaseEnabled ? amount : undefined,
        intervalDays: autoIncreaseEnabled ? days : undefined,
      });
      await loadPricingConfig();
      alert('自动涨价设置保存成功');
    } catch (error) {
      console.error('Failed to update auto-increase:', error);
      alert('保存失败，请重试');
    } finally {
      setPricingSaving(false);
    }
  }, [autoIncreaseEnabled, autoIncreaseAmount, autoIncreaseIntervalDays, loadPricingConfig]);

  // 变更日志翻页
  const handleChangeLogPageChange = useCallback(async (page: number) => {
    try {
      const log = await treePricingService.getChangeLog(page, 10);
      setChangeLog(log.items);
      setChangeLogTotal(log.total);
      setChangeLogPage(page);
    } catch (error) {
      console.error('Failed to load change log:', error);
    }
  }, []);

  // 组件挂载时加载展示设置
  useEffect(() => {
    loadDisplaySettings();
    loadAppAssets();
    loadContacts();
    loadPricingConfig();
  }, [loadDisplaySettings, loadAppAssets, loadContacts, loadPricingConfig]);

  // 切换货币选择
  const toggleCurrency = (currency: string) => {
    if (settlementCurrencies.includes(currency)) {
      setSettlementCurrencies(settlementCurrencies.filter(c => c !== currency));
    } else {
      setSettlementCurrencies([...settlementCurrencies, currency]);
    }
  };

  // Toggle 组件
  const Toggle = ({ checked, onChange, size = 'normal' }: { checked: boolean; onChange: (v: boolean) => void; size?: 'normal' | 'small' }) => {
    if (size === 'small') {
      return (
        <div
          className={cn(styles.settings__toggleSmall, checked ? styles['settings__toggleSmall--on'] : styles['settings__toggleSmall--off'])}
          onClick={() => onChange(!checked)}
        >
          <div className={cn(styles.settings__toggleSmallHandle, checked ? styles['settings__toggleSmallHandle--on'] : styles['settings__toggleSmallHandle--off'])} />
        </div>
      );
    }
    return (
      <div
        className={cn(styles.settings__toggle, checked ? styles['settings__toggle--on'] : styles['settings__toggle--off'])}
        onClick={() => onChange(!checked)}
      >
        <div className={cn(styles.settings__toggleHandle, checked ? styles['settings__toggleHandle--on'] : styles['settings__toggleHandle--off'])} />
      </div>
    );
  };

  return (
    <PageContainer title="系统设置">
      <div className={styles.settings}>
        {/* 页面头部 */}
        <header className={styles.settings__header}>
          <h1 className={styles.settings__title}>系统设置</h1>
        <p className={styles.settings__desc}>配置结算参数、龙虎榜规则、认种限额、考核规则及后台安全策略</p>
        <div className={styles.settings__notice}>
          所有设置修改后请点击下方"保存设置"按钮生效
        </div>
      </header>

      {/* 结算参数设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>结算参数设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>可用结算币种</label>
            <div className={styles.settings__checkboxGroup}>
              {['BNB', 'OG', '积分', 'DST'].map(currency => (
                <label key={currency} className={styles.settings__checkboxItem}>
                  <input
                    type="checkbox"
                    className={styles.settings__checkbox}
                    checked={settlementCurrencies.includes(currency)}
                    onChange={() => toggleCurrency(currency)}
                  />
                  <span className={styles.settings__checkboxLabel}>{currency}</span>
                </label>
              ))}
            </div>
          </div>
          <div className={styles.settings__selectWrapper}>
            <label className={styles.settings__label}>默认结算币种</label>
            <select
              className={styles.settings__select}
              value={defaultCurrency}
              onChange={(e) => setDefaultCurrency(e.target.value)}
            >
              <option value="">请选择默认结算币种</option>
              {settlementCurrencies.map(currency => (
                <option key={currency} value={currency}>{currency}</option>
              ))}
            </select>
            <span className={styles.settings__hint}>提示：默认结算币种将用于用户点击"一键结算"时的自动兑换。</span>
          </div>
        </div>
      </section>

      {/* 龙虎榜设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>龙虎榜设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          <div className={styles.settings__toggleRow}>
            <span className={styles.settings__toggleLabel}>启用虚拟账户参与排名</span>
            <Toggle checked={enableVirtualAccount} onChange={setEnableVirtualAccount} />
          </div>
          <div className={styles.settings__inputRow}>
            <span className={styles.settings__toggleLabel}>虚拟账户数量</span>
            <input
              type="text"
              className={cn(styles.settings__input, styles['settings__input--medium'])}
              placeholder="请输入数量"
              value={virtualAccountCount}
              onChange={(e) => setVirtualAccountCount(e.target.value)}
            />
            <span className={styles.settings__inputUnit}>个</span>
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>榜单开关</label>
            <div className={styles.settings__switchGroup}>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>日榜开关</span>
                <Toggle checked={dailyRankEnabled} onChange={setDailyRankEnabled} size="small" />
              </div>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>周榜开关</span>
                <Toggle checked={weeklyRankEnabled} onChange={setWeeklyRankEnabled} size="small" />
              </div>
              <div className={styles.settings__switchItem}>
                <span className={styles.settings__switchLabel}>月榜开关</span>
                <Toggle checked={monthlyRankEnabled} onChange={setMonthlyRankEnabled} size="small" />
              </div>
            </div>
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>前端显示名次数量</label>
            <input
              type="text"
              className={cn(styles.settings__input, styles['settings__input--medium'])}
              placeholder="例如：10、20、31"
              value={displayCount}
              onChange={(e) => setDisplayCount(e.target.value)}
            />
            <span className={styles.settings__hint}>仅显示前 N 名的排行榜数据</span>
          </div>
          <div className={styles.settings__hint}>
            提示：虚拟账户仅用于展示效果，不影响真实收益结算。
          </div>
        </div>
      </section>

      {/* 认种限额设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>认种限额设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          {/* 单账户认种限额 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>单账户认种限额</span>
              <Toggle checked={singleAccountLimitEnabled} onChange={setSingleAccountLimitEnabled} />
            </div>
            <div className={styles.settings__quotaInputRow}>
              <span className={styles.settings__quotaText}>在</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="天数"
                value={singleAccountDays}
                onChange={(e) => setSingleAccountDays(e.target.value)}
              />
              <span className={styles.settings__quotaText}>天内，每个账户最多认种</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="棵数"
                value={singleAccountTrees}
                onChange={(e) => setSingleAccountTrees(e.target.value)}
              />
              <span className={styles.settings__quotaText}>棵</span>
            </div>
            <span className={styles.settings__hint}>示例：5 天内最多认种 1 棵</span>
          </div>

          {/* 全网总量限额 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>全网总量限额</span>
              <Toggle checked={networkLimitEnabled} onChange={setNetworkLimitEnabled} />
            </div>
            <div className={styles.settings__quotaInputRow}>
              <span className={styles.settings__quotaText}>在</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="天数"
                value={networkDays}
                onChange={(e) => setNetworkDays(e.target.value)}
              />
              <span className={styles.settings__quotaText}>天内，全网总认种上限</span>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                placeholder="棵数"
                value={networkTrees}
                onChange={(e) => setNetworkTrees(e.target.value)}
              />
              <span className={styles.settings__quotaText}>棵</span>
            </div>
            <span className={styles.settings__hint}>示例：2 天内总量 100 棵</span>
          </div>
        </div>
      </section>

      {/* 考核规则设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>考核规则设置</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__content}>
          {/* 本地用户占比阈值 */}
          <div className={styles.settings__assessmentRow}>
            <label className={styles.settings__assessmentLabel}>省/市本地用户占比阈值</label>
            <div className={styles.settings__assessmentInputRow}>
              <input
                type="text"
                className={cn(styles.settings__input, styles['settings__input--small'])}
                value={localUserThreshold}
                onChange={(e) => setLocalUserThreshold(e.target.value)}
              />
              <span className={styles.settings__assessmentUnit}>%</span>
            </div>
            <span className={styles.settings__hint}>当团队中本省/市用户占比低于此值时，将触发相应考核机制。</span>
          </div>

          {/* 豁免设置 */}
          <div className={styles.settings__exemptionRow}>
            <div className={styles.settings__exemptionInfo}>
              <span className={styles.settings__exemptionLabel}>允许为单个账号设置"不考核自有团队本省/市占比"豁免</span>
              <span className={styles.settings__exemptionHint}>开启后，可在用户管理页面为特定账号设置豁免权。</span>
            </div>
            <Toggle checked={exemptionEnabled} onChange={setExemptionEnabled} />
          </div>

          {/* 阶梯性考核目标表 */}
          <div className={styles.settings__tableSection}>
            <div className={styles.settings__tableHeader}>
              <h3 className={styles.settings__tableTitle}>省代 / 市代阶梯性考核目标表</h3>
              <div className={styles.settings__tableBtns}>
                <button className={styles.settings__tableBtn}>新增行</button>
                <button className={styles.settings__tableBtn}>导出表格</button>
              </div>
            </div>
            <div className={styles.settings__table}>
              <div className={styles.settings__tableHead}>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--month'])}>考核月</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>省代当月目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>省代累计目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>市代当月目标</div>
                <div className={cn(styles.settings__tableHeadCell, styles['settings__tableHeadCell--target'])}>市代累计目标</div>
              </div>
              <div className={styles.settings__tableBody}>
                {mockTargets.map((target) => (
                  <div key={target.month} className={styles.settings__tableRow}>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--month'])}>第{target.month}个月</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.provinceMonthly}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.provinceCumulative}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.cityMonthly}</div>
                    <div className={cn(styles.settings__tableCell, styles['settings__tableCell--target'])}>{target.cityCumulative}</div>
                  </div>
                ))}
              </div>
            </div>
            <span className={styles.settings__hint}>此表格用于设定不同代理级别的月度和累计业绩目标。</span>
          </div>
        </div>
      </section>

      {/* 前端展示设置 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>前端展示设置</h2>
          <div className={styles.settings__sectionActions}>
            <button
              className={styles.settings__resetBtn}
              onClick={loadDisplaySettings}
              disabled={displaySettingsLoading}
            >
              {displaySettingsLoading ? '加载中...' : '刷新'}
            </button>
            <button
              className={styles.settings__saveBtn}
              onClick={saveDisplaySettings}
              disabled={displaySettingsSaving || displaySettingsLoading}
            >
              {displaySettingsSaving ? '保存中...' : '保存展示设置'}
            </button>
          </div>
        </div>
        {displaySettingsError && (
          <div className={styles.settings__error}>{displaySettingsError}</div>
        )}
        <div className={styles.settings__content}>
          <div className={styles.settings__toggleRow}>
            <span className={styles.settings__toggleLabel}>允许未认种用户查看各省认种热度</span>
            <Toggle checked={allowNonAdopterView} onChange={setAllowNonAdopterView} />
          </div>
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>热度展示方式</label>
            <div className={styles.settings__radioGroup}>
              <label className={styles.settings__radioItem}>
                <input
                  type="radio"
                  className={styles.settings__radio}
                  name="heatDisplayMode"
                  checked={heatDisplayMode === 'count'}
                  onChange={() => setHeatDisplayMode('count')}
                />
                <span className={styles.settings__radioLabel}>显示具体认种数量</span>
              </label>
              <label className={styles.settings__radioItem}>
                <input
                  type="radio"
                  className={styles.settings__radio}
                  name="heatDisplayMode"
                  checked={heatDisplayMode === 'level'}
                  onChange={() => setHeatDisplayMode('level')}
                />
                <span className={styles.settings__radioLabel}>仅显示热度等级（高 / 中 / 低）</span>
              </label>
            </div>
          </div>
          <span className={styles.settings__hint}>提示：仅影响前端展示，不影响任何收益计算及排名。</span>
        </div>
      </section>

      {/* 应用图片管理 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>应用图片管理</h2>
          <button
            className={styles.settings__resetBtn}
            onClick={loadAppAssets}
            disabled={assetsLoading}
          >
            {assetsLoading ? '加载中...' : '刷新'}
          </button>
        </div>
        <div className={styles.settings__content}>
          {/* 开屏图 */}
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>开屏图片（共2张，启动时随机展示一张）</label>
            <div className={styles.settings__imageGrid}>
              {[1, 2].map((sortOrder) => {
                const asset = splashAssets.find(a => a.sortOrder === sortOrder);
                const slotKey = `SPLASH-${sortOrder}`;
                const isUploading = uploadingSlot === slotKey;
                return (
                  <div key={slotKey} className={styles.settings__imageSlot}>
                    <div className={styles.settings__imageSlotLabel}>开屏图 {sortOrder}</div>
                    <div className={styles.settings__imagePreview}>
                      {asset ? (
                        <img src={asset.imageUrl} alt={`开屏图 ${sortOrder}`} />
                      ) : (
                        <span style={{ color: '#9ca3af', fontSize: 13 }}>未上传</span>
                      )}
                    </div>
                    <div className={styles.settings__imageSlotActions}>
                      <label className={styles.settings__uploadLabel}>
                        <input
                          type="file"
                          accept="image/jpeg,image/png,image/webp"
                          style={{ display: 'none' }}
                          disabled={isUploading}
                          onChange={(e) => {
                            const file = e.target.files?.[0];
                            if (file) handleImageUpload('SPLASH', sortOrder, file);
                            e.target.value = '';
                          }}
                        />
                        {isUploading ? '上传中...' : (asset ? '替换' : '上传')}
                      </label>
                      {asset && (
                        <>
                          <Toggle
                            checked={asset.isEnabled}
                            onChange={(v) => handleAssetToggle(asset.id, v)}
                            size="small"
                          />
                          <button
                            className={cn(styles.settings__actionLink, styles['settings__actionLink--danger'])}
                            onClick={() => handleAssetDelete(asset.id)}
                          >
                            删除
                          </button>
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 引导图 */}
          <div className={styles.settings__fieldGroup}>
            <label className={styles.settings__label}>引导图片（共5张，按顺序展示，支持配置标题和副标题）</label>
            <div className={styles.settings__imageGrid}>
              {[1, 2, 3, 4, 5].map((sortOrder) => {
                const asset = guideAssets.find(a => a.sortOrder === sortOrder);
                const slotKey = `GUIDE-${sortOrder}`;
                const isUploading = uploadingSlot === slotKey;
                return (
                  <div key={slotKey} className={styles.settings__imageSlot}>
                    <div className={styles.settings__imageSlotLabel}>引导页 {sortOrder}</div>
                    <div className={styles.settings__imagePreview}>
                      {asset ? (
                        <img src={asset.imageUrl} alt={`引导页 ${sortOrder}`} />
                      ) : (
                        <span style={{ color: '#9ca3af', fontSize: 13 }}>未上传</span>
                      )}
                    </div>
                    {asset && (
                      <div className={styles.settings__guideTextFields}>
                        <input
                          type="text"
                          className={styles.settings__input}
                          placeholder="标题"
                          defaultValue={asset.title || ''}
                          onBlur={(e) => {
                            if (e.target.value !== (asset.title || '')) {
                              handleGuideTextUpdate(asset.id, e.target.value, asset.subtitle || '');
                            }
                          }}
                        />
                        <input
                          type="text"
                          className={styles.settings__input}
                          placeholder="副标题"
                          defaultValue={asset.subtitle || ''}
                          onBlur={(e) => {
                            if (e.target.value !== (asset.subtitle || '')) {
                              handleGuideTextUpdate(asset.id, asset.title || '', e.target.value);
                            }
                          }}
                        />
                      </div>
                    )}
                    <div className={styles.settings__imageSlotActions}>
                      <label className={styles.settings__uploadLabel}>
                        <input
                          type="file"
                          accept="image/jpeg,image/png,image/webp"
                          style={{ display: 'none' }}
                          disabled={isUploading}
                          onChange={(e) => {
                            const file = e.target.files?.[0];
                            if (file) handleImageUpload('GUIDE', sortOrder, file);
                            e.target.value = '';
                          }}
                        />
                        {isUploading ? '上传中...' : (asset ? '替换' : '上传')}
                      </label>
                      {asset && (
                        <>
                          <Toggle
                            checked={asset.isEnabled}
                            onChange={(v) => handleAssetToggle(asset.id, v)}
                            size="small"
                          />
                          <button
                            className={cn(styles.settings__actionLink, styles['settings__actionLink--danger'])}
                            onClick={() => handleAssetDelete(asset.id)}
                          >
                            删除
                          </button>
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <span className={styles.settings__hint}>
            提示：上传新图片会替换同位置的旧图片。图片修改后用户下次启动应用时生效。未上传的位置将使用应用内置的默认图片。
          </span>
        </div>
      </section>

      {/* 客服联系方式管理 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>客服联系方式管理</h2>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              className={styles.settings__resetBtn}
              onClick={loadContacts}
              disabled={contactsLoading}
            >
              {contactsLoading ? '加载中...' : '刷新'}
            </button>
            <button
              className={styles.settings__addBtn}
              onClick={() => setEditingContact({ type: 'WECHAT', label: '', value: '', sortOrder: contacts.length, isEnabled: true })}
            >
              新增联系方式
            </button>
          </div>
        </div>
        <div className={styles.settings__content}>
          {contacts.length === 0 && !contactsLoading && (
            <p style={{ color: '#9ca3af', fontSize: 14 }}>暂无客服联系方式，请点击"新增联系方式"添加</p>
          )}
          {contacts.length > 0 && (
            <table className={styles.settings__contactTable}>
              <thead>
                <tr>
                  <th>排序</th>
                  <th>类型</th>
                  <th>标签</th>
                  <th>联系方式</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {contacts.map((contact) => (
                  <tr key={contact.id}>
                    <td>{contact.sortOrder}</td>
                    <td>{contact.type === 'WECHAT' ? '微信' : 'QQ'}</td>
                    <td>{contact.label}</td>
                    <td>{contact.value}</td>
                    <td>
                      <Toggle
                        checked={contact.isEnabled}
                        onChange={(v: boolean) => handleContactToggle(contact.id, v)}
                        size="small"
                      />
                    </td>
                    <td>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <button
                          className={styles.settings__actionLink}
                          onClick={() => setEditingContact({ ...contact })}
                        >
                          编辑
                        </button>
                        <button
                          className={cn(styles.settings__actionLink, styles['settings__actionLink--danger'])}
                          onClick={() => handleContactDelete(contact.id)}
                        >
                          删除
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

          {editingContact && (
            <div className={styles.settings__contactForm}>
              <h3>{editingContact.id ? '编辑联系方式' : '新增联系方式'}</h3>
              <div className={styles.settings__contactFormFields}>
                <select
                  className={styles.settings__input}
                  value={editingContact.type || 'WECHAT'}
                  onChange={(e) => setEditingContact({ ...editingContact, type: e.target.value as ContactType })}
                >
                  <option value="WECHAT">微信</option>
                  <option value="QQ">QQ</option>
                </select>
                <input
                  type="text"
                  className={styles.settings__input}
                  placeholder="标签 (如：客服微信1)"
                  value={editingContact.label || ''}
                  onChange={(e) => setEditingContact({ ...editingContact, label: e.target.value })}
                />
                <input
                  type="text"
                  className={styles.settings__input}
                  placeholder="联系方式 (如：liulianhuanghou1)"
                  value={editingContact.value || ''}
                  onChange={(e) => setEditingContact({ ...editingContact, value: e.target.value })}
                />
                <input
                  type="number"
                  className={styles.settings__input}
                  placeholder="排序"
                  value={editingContact.sortOrder ?? 0}
                  onChange={(e) => setEditingContact({ ...editingContact, sortOrder: parseInt(e.target.value) || 0 })}
                />
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                <button
                  className={styles.settings__saveBtn}
                  onClick={handleContactSave}
                  disabled={contactSaving}
                >
                  {contactSaving ? '保存中...' : '保存'}
                </button>
                <button
                  className={styles.settings__resetBtn}
                  onClick={() => setEditingContact(null)}
                >
                  取消
                </button>
              </div>
            </div>
          )}

          <span className={styles.settings__hint}>
            提示：移动端"联系客服"弹窗将按排序顺序显示所有已启用的联系方式。修改后用户下次打开弹窗时生效。
          </span>
        </div>
      </section>

      {/* 后台账号与安全 */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>后台账号与安全</h2>
          <button className={styles.settings__resetBtn}>恢复默认</button>
        </div>
        <div className={styles.settings__securityContent}>
          {/* 左侧：账号管理 */}
          <div className={styles.settings__securityLeft}>
            <div className={styles.settings__accountHeader}>
              <h3 className={styles.settings__accountTitle}>后台账号与角色</h3>
              <button className={styles.settings__addBtn}>新增后台账号</button>
            </div>
            <div className={styles.settings__accountTable}>
              <div className={styles.settings__accountTableInner}>
                <div className={styles.settings__accountHead}>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--name'])}>账号名</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--role'])}>角色</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--status'])}>状态</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--login'])}>最近登录</div>
                  <div className={cn(styles.settings__accountHeadCell, styles['settings__accountHeadCell--actions'])}>操作</div>
                </div>
                <div className={styles.settings__accountBody}>
                  {mockAccounts.map((account) => (
                    <div key={account.id} className={styles.settings__accountRow}>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--name'])}>{account.name}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--role'])}>{account.role}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--status'])}>
                        <span className={cn(styles.settings__statusBadge, account.status === 'disabled' && styles['settings__statusBadge--disabled'])}>
                          {account.status === 'active' ? '正常' : '禁用'}
                        </span>
                      </div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--login'])}>{account.lastLogin}</div>
                      <div className={cn(styles.settings__accountCell, styles['settings__accountCell--actions'])}>
                        <button className={styles.settings__actionLink}>编辑</button>
                        <button className={cn(styles.settings__actionLink, styles['settings__actionLink--danger'])}>禁用</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <span className={styles.settings__hint}>管理后台操作员账号及其权限角色。</span>
          </div>

          {/* 右侧：敏感操作和日志 */}
          <div className={styles.settings__securityRight}>
            {/* 敏感操作审批 */}
            <div className={styles.settings__sensitiveCard}>
              <div className={styles.settings__sensitiveRow}>
                <span className={styles.settings__sensitiveLabel}>敏感操作审批人数</span>
                <input
                  type="text"
                  className={cn(styles.settings__input, styles['settings__input--small'])}
                  value={approvalCount}
                  onChange={(e) => setApprovalCount(e.target.value)}
                />
                <span className={styles.settings__inputUnit}>人</span>
              </div>
              <div className={styles.settings__sensitiveFieldGroup}>
                <label className={styles.settings__label}>需要审批的敏感操作</label>
                <input
                  type="text"
                  className={styles.settings__tagInput}
                  placeholder="选择或输入操作名称"
                />
                <div className={styles.settings__tagList}>
                  {sensitiveOperations.map((op, index) => (
                    <span key={index} className={styles.settings__tag}>
                      {op}
                      <button
                        className={styles.settings__tagRemove}
                        onClick={() => setSensitiveOperations(sensitiveOperations.filter((_, i) => i !== index))}
                      >
                        ×
                      </button>
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* 操作日志 */}
            <div className={styles.settings__logSection}>
              <h3 className={styles.settings__logTitle}>操作日志</h3>
              <div className={styles.settings__logFilters}>
                <input
                  type="date"
                  className={styles.settings__dateInput}
                  value={logDate}
                  onChange={(e) => setLogDate(e.target.value)}
                />
                <input
                  type="text"
                  className={styles.settings__searchInput}
                  placeholder="操作账号/关键字搜索"
                  value={logSearch}
                  onChange={(e) => setLogSearch(e.target.value)}
                />
                <button className={styles.settings__exportBtn}>导出日志</button>
              </div>
              <div className={styles.settings__logTable}>
                <div className={styles.settings__logTableInner}>
                  <div className={styles.settings__logHead}>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--time'])}>时间</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--account'])}>操作账号</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--type'])}>类型</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--desc'])}>描述</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--result'])}>审批结果</div>
                  </div>
                  <div className={styles.settings__logBody}>
                    {mockLogs.map((log) => (
                      <div key={log.id} className={styles.settings__logRow}>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--time'])}>{log.time}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--account'])}>{log.account}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--type'])}>{log.type}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--desc'])}>{log.description}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--result'])}>
                          <span className={cn(
                            styles.settings__logResult,
                            log.result === 'pass' && styles['settings__logResult--pass'],
                            log.result === 'reject' && styles['settings__logResult--reject'],
                            log.result === 'pending' && styles['settings__logResult--pending']
                          )}>
                            {log.result === 'pass' ? '通过' : log.result === 'reject' ? '拒绝' : '待审'}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* [2026-02-26] 认种定价设置（总部运营成本压力涨价） */}
      <section className={styles.settings__section}>
        <div className={styles.settings__sectionHeader}>
          <h2 className={styles.settings__sectionTitle}>认种定价设置</h2>
          {pricingLoading && <span className={styles.settings__hint}>加载中...</span>}
        </div>
        <div className={styles.settings__content}>
          {/* 当前价格展示 */}
          {pricingConfig && (
            <div className={styles.settings__quotaCard}>
              <div className={styles.settings__quotaHeader}>
                <span className={styles.settings__quotaTitle}>当前定价</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '8px 0' }}>
                <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
                  <span>基础价: <strong>{pricingConfig.basePrice.toLocaleString()}</strong> USDT/棵</span>
                  <span>加价: <strong>{pricingConfig.currentSupplement.toLocaleString()}</strong> USDT</span>
                  <span>正式认种总价: <strong style={{ color: '#e74c3c' }}>{pricingConfig.totalPrice.toLocaleString()}</strong> USDT/棵</span>
                </div>
                <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
                  <span>预种基础价: <strong>{pricingConfig.basePortionPrice.toLocaleString()}</strong> USDT/份</span>
                  <span>预种总价: <strong style={{ color: '#e74c3c' }}>{pricingConfig.totalPortionPrice.toLocaleString()}</strong> USDT/份</span>
                </div>
                {pricingConfig.autoIncreaseEnabled && pricingConfig.nextAutoIncreaseAt && (
                  <div style={{ marginTop: '4px', color: '#8e44ad' }}>
                    下次自动涨价: {new Date(pricingConfig.nextAutoIncreaseAt).toLocaleString('zh-CN')}
                    （+{pricingConfig.autoIncreaseAmount} USDT → 届时总价 {(pricingConfig.totalPrice + pricingConfig.autoIncreaseAmount).toLocaleString()} USDT/棵）
                  </div>
                )}
                <span className={styles.settings__hint}>
                  最后更新: {new Date(pricingConfig.updatedAt).toLocaleString('zh-CN')}
                </span>
              </div>
            </div>
          )}

          {/* 手动调价 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>手动调价（总部运营成本压力调价）</span>
            </div>
            <div className={styles.settings__quotaInputRow}>
              <span className={styles.settings__quotaText}>调价金额</span>
              <input
                type="number"
                className={cn(styles.settings__input, styles['settings__input--medium'])}
                placeholder="正数涨价，负数降价"
                value={newSupplement}
                onChange={(e) => setNewSupplement(e.target.value)}
              />
              <span className={styles.settings__inputUnit}>USDT</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
              <span className={styles.settings__quotaText}>变更原因</span>
              <input
                type="text"
                className={styles.settings__input}
                placeholder="请输入变更原因（必填）"
                value={supplementReason}
                onChange={(e) => setSupplementReason(e.target.value)}
                style={{ flex: 1 }}
              />
              <button
                className={styles.settings__saveBtn}
                onClick={handleSupplementUpdate}
                disabled={pricingSaving}
                style={{ minWidth: '100px' }}
              >
                {pricingSaving ? '保存中...' : '确认修改'}
              </button>
            </div>
            <span className={styles.settings__hint}>
              调价部分全额归总部 (S0000000001)，不影响现有 10 类分配金额。正数涨价，负数降价对冲。
              {newSupplement && !isNaN(parseInt(newSupplement, 10)) && (15831 + parseInt(newSupplement, 10)) >= 0 && (
                <> 修改后: 正式认种 {(15831 + parseInt(newSupplement, 10)).toLocaleString()} USDT/棵，预种 {Math.floor((15831 + parseInt(newSupplement, 10)) / 5).toLocaleString()} USDT/份</>
              )}
            </span>
          </div>

          {/* 自动涨价设置 */}
          <div className={styles.settings__quotaCard}>
            <div className={styles.settings__quotaHeader}>
              <span className={styles.settings__quotaTitle}>自动涨价</span>
              <Toggle checked={autoIncreaseEnabled} onChange={setAutoIncreaseEnabled} />
            </div>
            {autoIncreaseEnabled && (
              <div className={styles.settings__quotaInputRow}>
                <span className={styles.settings__quotaText}>每</span>
                <input
                  type="number"
                  min="1"
                  className={cn(styles.settings__input, styles['settings__input--small'])}
                  placeholder="天数"
                  value={autoIncreaseIntervalDays}
                  onChange={(e) => setAutoIncreaseIntervalDays(e.target.value)}
                />
                <span className={styles.settings__quotaText}>天，自动加价</span>
                <input
                  type="number"
                  min="1"
                  className={cn(styles.settings__input, styles['settings__input--small'])}
                  placeholder="金额"
                  value={autoIncreaseAmount}
                  onChange={(e) => setAutoIncreaseAmount(e.target.value)}
                />
                <span className={styles.settings__quotaText}>USDT</span>
              </div>
            )}
            <div style={{ marginTop: '8px' }}>
              <button
                className={styles.settings__saveBtn}
                onClick={handleAutoIncreaseUpdate}
                disabled={pricingSaving}
                style={{ minWidth: '140px' }}
              >
                {pricingSaving ? '保存中...' : '保存自动涨价设置'}
              </button>
            </div>
            <span className={styles.settings__hint}>
              启用后系统将每隔指定天数自动执行一次涨价，涨价部分全额归总部。
            </span>
          </div>

          {/* 变更历史 */}
          {changeLog.length > 0 && (
            <div style={{ marginTop: '16px' }}>
              <h3 className={styles.settings__logTitle}>定价变更历史</h3>
              <div className={styles.settings__logTable}>
                <div className={styles.settings__logTableInner}>
                  <div className={styles.settings__logHead}>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--time'])}>时间</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--type'])}>类型</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--desc'])}>变更前</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--desc'])}>变更后</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--type'])}>变更量</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--desc'])}>原因</div>
                    <div className={cn(styles.settings__logHeadCell, styles['settings__logHeadCell--account'])}>操作人</div>
                  </div>
                  <div className={styles.settings__logBody}>
                    {changeLog.map((item) => (
                      <div key={item.id} className={styles.settings__logRow}>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--time'])}>{new Date(item.createdAt).toLocaleString('zh-CN')}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--type'])}>
                          <span className={cn(
                            styles.settings__logResult,
                            item.changeType === 'AUTO' ? styles['settings__logResult--pending'] : styles['settings__logResult--pass']
                          )}>
                            {item.changeType === 'AUTO' ? '自动' : '手动'}
                          </span>
                        </div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--desc'])}>{item.previousSupplement}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--desc'])}>{item.newSupplement}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--type'])}>{item.changeAmount > 0 ? '+' : ''}{item.changeAmount}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--desc'])}>{item.reason || '-'}</div>
                        <div className={cn(styles.settings__logCell, styles['settings__logCell--account'])}>{item.operatorId || 'SYSTEM'}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              {changeLogTotal > 10 && (
                <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '8px' }}>
                  <button
                    className={styles.settings__resetBtn}
                    disabled={changeLogPage <= 1}
                    onClick={() => handleChangeLogPageChange(changeLogPage - 1)}
                  >
                    上一页
                  </button>
                  <span className={styles.settings__hint}>
                    第 {changeLogPage} 页 / 共 {Math.ceil(changeLogTotal / 10)} 页
                  </span>
                  <button
                    className={styles.settings__resetBtn}
                    disabled={changeLogPage >= Math.ceil(changeLogTotal / 10)}
                    onClick={() => handleChangeLogPageChange(changeLogPage + 1)}
                  >
                    下一页
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </section>

        {/* 页面底部操作按钮 */}
        <footer className={styles.settings__footer}>
          <button className={styles.settings__cancelBtn}>取消修改</button>
          <button className={styles.settings__saveBtn}>保存设置</button>
        </footer>
      </div>
    </PageContainer>
  );
}
