import React, { useEffect, useState } from 'react';
import {
  Button, Card, Form, Input, InputNumber, message, Modal, Select, Space, Switch, Tabs, Typography, Upload, Table, Tag, Popconfirm,
} from 'antd';
import {
  SettingOutlined, SaveOutlined, UploadOutlined, FilePdfOutlined, EyeOutlined, DatabaseOutlined, VideoCameraOutlined, RobotOutlined, BankOutlined, PlusOutlined, EditOutlined, DeleteOutlined,
} from '@ant-design/icons';
import {
  createSystemConfig,
  getGlobalResourceCapacity,
  getSystemConfigs,
  saveGlobalResourceCapacity,
  updateSystemConfig,
  uploadLogo,
  uploadPdf,
  uploadLoginVideo,
  listBankAccounts,
  createBankAccount,
  updateBankAccount,
  deleteBankAccount,
} from '../api';
import type { ResourceCapacityUnit, SystemConfig, BankAccount } from '../types';

const capacityUnitOptions: { value: ResourceCapacityUnit; label: string }[] = [
  { value: 'MB', label: 'MB（1024 × 1024 字节）' },
  { value: 'GB', label: 'GB（1024 × 1024 × 1024 字节）' },
  { value: 'TB', label: 'TB（1024 × 1024 × 1024 × 1024 字节）' },
];

const AdminSettings: React.FC = () => {
  const [configs, setConfigs] = useState<SystemConfig[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [uploading, setUploading] = useState('');
  const [form] = Form.useForm();

  // 银行账户管理
  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
  const [loadingAccounts, setLoadingAccounts] = useState(false);
  const [accountModal, setAccountModal] = useState(false);
  const [accountEditing, setAccountEditing] = useState<BankAccount | null>(null);
  const [accountForm] = Form.useForm();
  const [accountSaving, setAccountSaving] = useState(false);

  useEffect(() => {
    load();
    loadBankAccounts();
  }, []);

  const loadBankAccounts = async () => {
    setLoadingAccounts(true);
    try {
      const res = await listBankAccounts();
      setBankAccounts(res.items || []);
    } catch (e: any) {
      message.error(e?.message || '加载银行账户失败');
    } finally {
      setLoadingAccounts(false);
    }
  };

  const openAccountModal = (account?: BankAccount) => {
    if (account) {
      setAccountEditing(account);
      accountForm.setFieldsValue({
        account_name: account.accountName,
        bank_name: account.bankName,
        account_no: account.accountNo,
        is_active: account.isActive,
        is_default: account.isDefault,
        description: account.description,
      });
    } else {
      setAccountEditing(null);
      accountForm.resetFields();
      accountForm.setFieldsValue({ is_active: true, is_default: false });
    }
    setAccountModal(true);
  };

  const handleAccountSave = async () => {
    try {
      const values = await accountForm.validateFields();
      setAccountSaving(true);
      if (accountEditing) {
        await updateBankAccount(accountEditing.id, values);
        message.success('更新成功');
      } else {
        await createBankAccount(values);
        message.success('创建成功');
      }
      setAccountModal(false);
      await loadBankAccounts();
    } catch (e: any) {
      message.error(e?.message || '保存失败');
    } finally {
      setAccountSaving(false);
    }
  };

  const handleAccountDelete = async (accountId: string) => {
    try {
      await deleteBankAccount(accountId);
      message.success('删除成功');
      await loadBankAccounts();
    } catch (e: any) {
      message.error(e?.message || '删除失败');
    }
  };

  const accountColumns = [
    { title: '账户名称', dataIndex: 'accountName', width: 150 },
    { title: '开户银行', dataIndex: 'bankName', width: 150 },
    {
      title: '银行账号',
      dataIndex: 'accountNo',
      width: 180,
      render: (v: string) => <code style={{ background: '#f1f5f9', padding: '2px 6px', borderRadius: 4 }}>{v}</code>,
    },
    {
      title: '状态',
      dataIndex: 'isActive',
      width: 80,
      render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '禁用'}</Tag>,
    },
    {
      title: '默认',
      dataIndex: 'isDefault',
      width: 80,
      render: (v: boolean) => v && <Tag color="blue">默认</Tag>,
    },
    { title: '备注', dataIndex: 'description', ellipsis: true, render: (v: string) => v || '-' },
    {
      title: '操作',
      width: 140,
      render: (_: any, record: BankAccount) => (
        <Space>
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openAccountModal(record)}>编辑</Button>
          <Popconfirm title="确定删除该账户？" onConfirm={() => handleAccountDelete(record.id)} okText="确定" cancelText="取消">
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const load = async () => {
    setLoading(true);
    try {
      const [data, capacity] = await Promise.all([
        getSystemConfigs(),
        getGlobalResourceCapacity(),
      ]);
      // 确保 llm_media_as_base64 配置存在
      if (!data.some(c => c.key === 'llm_media_as_base64')) {
        data.push({ id: 'cfg_llm_media_as_base64', key: 'llm_media_as_base64', value: 'true', description: '文字模型请求时图片/视频使用 base64 编码' });
      }
      // 确保 single_device_login_enabled 配置存在
      if (!data.some(c => c.key === 'single_device_login_enabled')) {
        data.push({ id: 'cfg_single_device_login_enabled', key: 'single_device_login_enabled', value: 'false', description: '启用单设备登录（同端互斥）：同一设备类型只允许一个登录会话' });
      }
      setConfigs(data);
      const formValues: Record<string, any> = {};
      data.forEach(c => { formValues[c.key] = c.value; });
      formValues.resource_capacity_enabled = capacity.enabled;
      formValues.resource_capacity_limit_value = capacity.limitValue || '1.000';
      formValues.resource_capacity_limit_unit = capacity.limitUnit || 'GB';
      form.setFieldsValue(formValues);
    } catch (e: any) {
      message.error(e?.message || '加载配置失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();

      setSaving(true);
      for (const config of configs) {
        const newVal = values[config.key];
        if (newVal !== undefined && String(newVal) !== config.value) {
          await updateSystemConfig(config.id, String(newVal ?? ''));
        }
      }
      await saveGlobalResourceCapacity({
        enabled: !!values.resource_capacity_enabled,
        limitValue: String(values.resource_capacity_limit_value ?? '1.000'),
        limitUnit: values.resource_capacity_limit_unit || 'GB',
      });
      message.success('系统配置已保存');
      await load();
    } catch (e: any) {
      message.error(e?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const handleUpload = async (file: File, configKey: string) => {
    setUploading(configKey);
    try {
      const res = await uploadPdf(file, configKey);
      setConfigs(prev => prev.map(c => c.key === configKey ? { ...c, value: res.url } : c));
      form.setFieldsValue({ [configKey]: res.url });
      
      // Find the config and update to database
      const config = configs.find(c => c.key === configKey);
      if (config) {
        await updateSystemConfig(config.id, res.url);
      }
      
      message.success('PDF上传成功并已保存');
    } catch {
      message.error('上传失败');
    } finally {
      setUploading('');
    }
    return false;
  };

  const handleLogoUpload = async (file: File) => {
    setUploading('site_logo');
    try {
      const res = await uploadLogo(file);
      setConfigs(prev => prev.map(c => c.key === 'site_logo' ? { ...c, value: res.url } : c));
      form.setFieldsValue({ site_logo: res.url });
      const config = configs.find(c => c.key === 'site_logo');
      if (config) {
        await updateSystemConfig(config.id, res.url);
      }
      message.success('Logo上传成功并已保存');
    } catch {
      message.error('上传失败');
    } finally {
      setUploading('');
    }
    return false;
  };

  const handleLoginVideoUpload = async (file: File) => {
    setUploading('login_bg_video');
    try {
      const res = await uploadLoginVideo(file);
      setConfigs(prev => prev.map(c => c.key === 'login_bg_video' ? { ...c, value: res.url } : c));
      form.setFieldsValue({ login_bg_video: res.url });
      const config = configs.find(c => c.key === 'login_bg_video');
      if (config) {
        await updateSystemConfig(config.id, res.url);
      }
      message.success('登录背景视频上传成功并已保存');
    } catch (e: any) {
      message.error(e?.message || '上传失败');
    } finally {
      setUploading('');
    }
    return false;
  };

  const handleRemoveLoginVideo = async () => {
    setConfigs(prev => prev.map(c => c.key === 'login_bg_video' ? { ...c, value: '' } : c));
    form.setFieldsValue({ login_bg_video: '' });
    const config = configs.find(c => c.key === 'login_bg_video');
    if (config) {
      await updateSystemConfig(config.id, '');
    }
    message.success('已移除登录背景视频');
  };

  const handleToggleSingleDevice = async (checked: boolean) => {
    try {
      let config = configs.find(c => c.key === 'single_device_login_enabled');
      if (config && config.id && !config.id.startsWith('cfg_')) {
        await updateSystemConfig(config.id, checked ? 'true' : 'false');
      } else {
        const res = await createSystemConfig('single_device_login_enabled', checked ? 'true' : 'false', '启用单设备登录（同端互斥）：同一设备类型只允许一个登录会话');
        config = res;
      }
      setConfigs(prev => {
        const exists = prev.some(c => c.key === 'single_device_login_enabled');
        if (exists) return prev.map(c => c.key === 'single_device_login_enabled' ? { ...c, value: checked ? 'true' : 'false', id: config!.id } : c);
        return [...prev, config!];
      });
      message.success(`已${checked ? '开启' : '关闭'}单设备登录限制`);
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    }
  };

  const handleToggleBase64 = async (checked: boolean) => {
    try {
      let config = configs.find(c => c.key === 'llm_media_as_base64');
      if (config && config.id && !config.id.startsWith('cfg_')) {
        await updateSystemConfig(config.id, checked ? 'true' : 'false');
      } else {
        const res = await createSystemConfig('llm_media_as_base64', checked ? 'true' : 'false', '文字模型请求时图片/视频使用 base64 编码');
        config = res;
      }
      setConfigs(prev => {
        const exists = prev.some(c => c.key === 'llm_media_as_base64');
        if (exists) return prev.map(c => c.key === 'llm_media_as_base64' ? { ...c, value: checked ? 'true' : 'false', id: config!.id } : c);
        return [...prev, config!];
      });
      message.success(`已${checked ? '开启' : '关闭'}文字模型媒体 base64 编码`);
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    }
  };

  const groupedConfigs: Record<string, SystemConfig[]> = {
    '站点信息': configs.filter(c => c.key.startsWith('site_') && c.key !== 'site_banner'),
    '协议配置': configs.filter(c => c.key === 'user_agreement_privacy_url'),
    'SEO 设置': configs.filter(c => c.key.startsWith('seo_')),
    '用户积分配置': configs.filter(c => c.key.startsWith('user_') && c.key.includes('credits')),
    '收款银行': [],
    '其他配置': configs.filter(c => c.key === 'operation_manual'),
  };

  const getFieldDescription = (config: SystemConfig): string => {
    const descMap: Record<string, string> = {
      site_name: '平台显示名称，将展示在页面标题和导航栏',
      site_logo: '平台Logo图片URL，建议尺寸 200x40px',
      site_copyright: '显示在前台登录页底部的版权信息，例如：© 2024 民众智创 版权所有',
      user_agreement_privacy_url: '用户登录时需同意的用户协议及隐私政策PDF文件',
      seo_title: '搜索引擎结果中显示的标题',
      seo_description: '搜索引擎结果中显示的描述文字，建议150字以内',
      seo_keywords: '用逗号分隔的关键词列表',
      user_register_credits: '用户注册时赠送的初始积分，默认100',
      user_login_credits: '用户每日登录赠送的积分数量',
      user_login_credits_enabled: '是否启用每日登录赠送积分功能',
      operation_manual: '操作手册链接，前台用户菜单将展示该入口，点击跳转此链接',
    };
    return descMap[config.key] || config.description || '';
  };

  const LogoUploadField: React.FC<{ config: SystemConfig }> = ({ config }) => {
    const hasLogo = config.value && config.value.startsWith('/uploads/');
    const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
    const logoUrl = hasLogo ? `${baseUrl}${config.value}` : '';

    const handleRemove = () => {
      setConfigs(prev => prev.map(c => c.key === 'site_logo' ? { ...c, value: '' } : c));
      form.setFieldsValue({ site_logo: '' });
      message.success('Logo已移除');
    };

    return (
      <div style={{
        padding: '16px', borderRadius: 10,
        border: '1px solid #f0f0f5', background: '#fafbfc',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <Space>
            <UploadOutlined style={{ color: '#6366f1', fontSize: 18 }} />
            <Typography.Text strong>网站Logo</Typography.Text>
          </Space>
          <Space>
            {hasLogo && (
              <Button size="small" danger onClick={handleRemove}>
                移除
              </Button>
            )}
            <Upload
              accept="image/*"
              showUploadList={false}
              beforeUpload={handleLogoUpload}
            >
              <Button size="small" type="primary" icon={<UploadOutlined />} loading={uploading === 'site_logo'}>
                {hasLogo ? '重新上传' : '上传Logo'}
              </Button>
            </Upload>
          </Space>
        </div>
        {hasLogo ? (
          <div style={{ textAlign: 'center' }}>
            <img
              src={logoUrl}
              alt="Logo预览"
              style={{
                maxWidth: 200,
                maxHeight: 80,
                objectFit: 'contain',
                border: '1px solid #e2e8f0',
                borderRadius: 8,
                padding: 8,
              }}
            />
            <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 8 }}>
              建议尺寸：200x40px，支持 PNG、JPG 格式
            </Typography.Text>
          </div>
        ) : (
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            尚未上传Logo，将使用系统默认Logo
          </Typography.Text>
        )}
      </div>
    );
  };

  const PdfUploadField: React.FC<{ config: SystemConfig }> = ({ config }) => {
    const label = config.key === 'user_agreement_privacy_url' ? '用户协议及隐私政策' : '协议文件';
    const hasFile = config.value && config.value.startsWith('/uploads/');
    const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
    return (
      <div style={{
        padding: '16px', borderRadius: 10,
        border: '1px solid #f0f0f5', background: '#fafbfc',
        marginBottom: 12,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <Space>
            <FilePdfOutlined style={{ color: '#ef4444', fontSize: 18 }} />
            <Typography.Text strong>{label}</Typography.Text>
          </Space>
          <Space>
            {hasFile && (
              <Button size="small" icon={<EyeOutlined />}
                onClick={() => window.open(`${baseUrl}${config.value}`, '_blank')}>
                预览
              </Button>
            )}
            <Upload
              accept=".pdf"
              showUploadList={false}
              beforeUpload={(file) => handleUpload(file, config.key)}
            >
              <Button size="small" type="primary" icon={<UploadOutlined />} loading={uploading === config.key}>
                {hasFile ? '重新上传' : '上传PDF'}
              </Button>
            </Upload>
          </Space>
        </div>
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {hasFile ? `已上传: ${config.value}` : '尚未上传，前台将不显示对应链接'}
        </Typography.Text>
      </div>
    );
  };

  const getFieldComponent = (config: SystemConfig) => {
    if (config.key === 'site_logo') {
      return <LogoUploadField config={config} />;
    }
    if (config.key === 'seo_description') {
      return <Input.TextArea rows={3} placeholder={config.description} size="large" />;
    }
    if (config.key === 'seo_keywords') {
      return <Input placeholder="关键词1, 关键词2, 关键词3" size="large" />;
    }
    if (config.key === 'user_login_credits_enabled') {
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Switch defaultChecked={config.value === 'true'} />
          <Typography.Text type="secondary" style={{ fontSize: 13 }}>
            {config.value === 'true' ? '已启用' : '已禁用'}
          </Typography.Text>
        </div>
      );
    }
    if (config.key === 'user_register_credits' || config.key === 'user_login_credits') {
      return <Input type="number" min={1} placeholder={config.description} size="large" />;
    }
    return <Input placeholder={config.description} size="large" />;
  };

  if (loading) {
    return <Card loading variant="outlined" style={{ borderRadius: 12 }} />;
  }

  const tabItems = [
    {
      key: 'basic',
      label: '网站基础设置',
      children: (
        <Form form={form} layout="vertical">
          {['站点信息', '协议配置', 'SEO 设置'].map(group => (
            <div key={group} style={{ marginBottom: 24 }}>
              <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
                {group}
              </Typography.Text>
              {group === '协议配置' ? (
                groupedConfigs[group]?.map(config => (
                  <PdfUploadField key={config.id} config={config} />
                ))
              ) : (
                groupedConfigs[group]?.map(config => (
                  <Form.Item
                    key={config.id}
                    name={config.key}
                    label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
                    extra={getFieldDescription(config)}
                  >
                    {getFieldComponent(config)}
                  </Form.Item>
                ))
              )}
            </div>
          ))}
        </Form>
      ),
    },
    {
      key: 'credits',
      label: '用户积分配置',
      children: (
        <Form form={form} layout="vertical">
          <div style={{ marginBottom: 24 }}>
            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              用户积分配置
            </Typography.Text>
            {groupedConfigs['用户积分配置']?.map(config => (
              <Form.Item
                key={config.id}
                name={config.key}
                label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
                extra={getFieldDescription(config)}
              >
                {getFieldComponent(config)}
              </Form.Item>
            ))}
          </div>
        </Form>
      ),
    },
    {
      key: 'integration',
      label: '收款银行',
      children: (
        <div>
          {/* 银行账户管理 */}
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              <Typography.Text strong style={{ fontSize: 14 }}>
                <BankOutlined style={{ marginRight: 8, color: '#6366f1' }} />
                收款银行管理
              </Typography.Text>
              <Button type="primary" icon={<PlusOutlined />} size="small" onClick={() => openAccountModal()}>
                新增账户
              </Button>
            </div>
            <Table
              rowKey="id"
              dataSource={bankAccounts}
              loading={loadingAccounts}
              pagination={false}
              size="middle"
              columns={accountColumns}
            />
          </div>
        </div>
      ),
    },
    {
      key: 'other',
      label: '其他配置',
      children: (
        <Form form={form} layout="vertical">
          <div style={{ marginBottom: 24 }}>
            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              其他配置
            </Typography.Text>
            {groupedConfigs['其他配置']?.map(config => (
              <Form.Item
                key={config.id}
                name={config.key}
                label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
                extra={getFieldDescription(config)}
              >
                {getFieldComponent(config)}
              </Form.Item>
            ))}
          </div>

          {/* 登录背景视频 */}
          <div style={{ marginBottom: 24 }}>
            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              登录背景视频
            </Typography.Text>
            <div style={{ padding: 16, borderRadius: 10, border: '1px solid #f0f0f5', background: '#fafbfc' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <Space>
                  <VideoCameraOutlined style={{ color: '#6366f1', fontSize: 18 }} />
                  <Typography.Text strong>背景视频</Typography.Text>
                </Space>
                <Space>
                  {form.getFieldValue('login_bg_video') && (
                    <Button size="small" danger onClick={handleRemoveLoginVideo}>
                      移除
                    </Button>
                  )}
                  <Upload
                    accept="video/*,image/gif,image/webp"
                    showUploadList={false}
                    beforeUpload={handleLoginVideoUpload}
                  >
                    <Button size="small" type="primary" icon={<UploadOutlined />} loading={uploading === 'login_bg_video'}>
                      上传视频
                    </Button>
                  </Upload>
                </Space>
              </div>
              {(() => {
                const url = form.getFieldValue('login_bg_video');
                if (!url) {
                  return (
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                      未设置，前台将默认使用 backimage.png
                    </Typography.Text>
                  );
                }
                const fullUrl = url.startsWith('http') ? url : `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${url}`;
                const isGif = url.toLowerCase().endsWith('.gif');
                return isGif ? (
                  <img src={fullUrl} alt="预览" style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#f0f0f5', objectFit: 'contain' }} />
                ) : (
                  <video
                    src={fullUrl}
                    controls
                    muted
                    loop
                    playsInline
                    style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#000' }}
                  />
                );
              })()}
              <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 6 }}>
                支持 MP4、WebM、MOV、GIF、WebP，最大 50MB
              </Typography.Text>
            </div>
          </div>

          {/* 文字模型媒体编码 */}
          <div style={{ marginBottom: 24 }}>
            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              文字模型媒体编码
            </Typography.Text>
            <div style={{ padding: 16, borderRadius: 10, border: '1px solid #f0f0f5', background: '#fafbfc' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Space>
                  <RobotOutlined style={{ color: '#6366f1', fontSize: 18 }} />
                  <div>
                    <Typography.Text strong>图片/视频 base64 编码</Typography.Text>
                    <div style={{ color: '#64748b', fontSize: 12, marginTop: 2 }}>
                      开启后文字模型请求时将媒体转 base64 发送，而非 URL 链接
                    </div>
                  </div>
                </Space>
                <Switch
                  checked={(configs.find(c => c.key === 'llm_media_as_base64') || {}).value === 'true'}
                  onChange={handleToggleBase64}
                  checkedChildren="base64"
                  unCheckedChildren="链接"
                />
              </div>
            </div>
          </div>

          {/* 单设备登录限制 */}
          <div style={{ marginBottom: 24 }}>
            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
              登录安全
            </Typography.Text>
            <div style={{ padding: 16, borderRadius: 10, border: '1px solid #f0f0f5', background: '#fafbfc' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Space>
                  <RobotOutlined style={{ color: '#6366f1', fontSize: 18 }} />
                  <div>
                    <Typography.Text strong>单设备登录限制</Typography.Text>
                    <div style={{ color: '#64748b', fontSize: 12, marginTop: 2 }}>
                      开启后同一账号仅允许在一台同类型设备登录（手机和电脑可同时登录）
                    </div>
                  </div>
                </Space>
                <Switch
                  checked={(configs.find(c => c.key === 'single_device_login_enabled') || {}).value === 'true'}
                  onChange={handleToggleSingleDevice}
                  checkedChildren="已启用"
                  unCheckedChildren="已禁用"
                />
              </div>
            </div>
          </div>
        </Form>
      ),
    },
  ];

  return (
    <div style={{ maxWidth: 1080 }}>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: 'rgba(99,102,241,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, color: '#6366f1',
          }}>
            <SettingOutlined />
          </div>
          <div>
            <Typography.Title level={4} style={{ margin: 0 }}>系统设置</Typography.Title>
            <Typography.Text type="secondary">管理站点基础信息、用户积分和系统配置</Typography.Text>
          </div>
        </div>

          <Tabs items={tabItems} defaultActiveKey="basic" />
      </Card>

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={saving}
          size="large" style={{ borderRadius: 8, minWidth: 140 }}>
          保存配置
        </Button>
      </div>

      {/* 银行账户新增/编辑弹窗 */}
      <Modal
        title={accountEditing ? '编辑银行账户' : '新增银行账户'}
        open={accountModal}
        onOk={handleAccountSave}
        onCancel={() => setAccountModal(false)}
        confirmLoading={accountSaving}
        okText="保存"
        cancelText="取消"
        destroyOnClose
      >
        <Form form={accountForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="account_name" label="账户名称" rules={[{ required: true, message: '请输入账户名称' }]}>
            <Input placeholder="例如：民众普康科技有限公司" />
          </Form.Item>
          <Form.Item name="bank_name" label="开户银行" rules={[{ required: true, message: '请输入开户银行' }]}>
            <Input placeholder="例如：中国工商银行北京分行" />
          </Form.Item>
          <Form.Item name="account_no" label="银行账号" rules={[{ required: true, message: '请输入银行账号' }]}>
            <Input placeholder="银行账号" />
          </Form.Item>
          <Form.Item name="description" label="备注">
            <Input.TextArea rows={2} placeholder="可选备注信息" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 24 }}>
            <Form.Item name="is_active" label="启用" valuePropName="checked">
              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
            </Form.Item>
            <Form.Item name="is_default" label="设为默认" valuePropName="checked">
              <Switch checkedChildren="是" unCheckedChildren="否" />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminSettings;