import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Switch,
  Select,
  Button,
  Card,
  Space,
  message,
  Modal,
  Tag,
  Divider,
  Descriptions,
  Alert,
  Row,
  Col,
  Typography,
  Badge,
  Tooltip,
  Avatar,
  ColorPicker,
} from 'antd';
import {
  SettingOutlined,
  GlobalOutlined,
  BgColorsOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  LockOutlined,
  DatabaseOutlined,
  DesktopOutlined,
  ClockCircleOutlined,
  MailOutlined,
  PhoneOutlined,
  EnvironmentOutlined,
  FileTextOutlined,
  SafetyCertificateOutlined,
  ReloadOutlined,
  SaveOutlined,
  BellOutlined,
  CloudServerOutlined,
  UserOutlined,
  SecurityScanOutlined,
  ApiOutlined,
  ThunderboltOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import { useConfig } from '../context/ConfigContext';

const { Option } = Select;
const { Title, Text, Paragraph } = Typography;

const SystemSettings = () => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [settings, setSettings] = useState({});
  const [activeMenu, setActiveMenu] = useState('general');
  const [systemInfo, setSystemInfo] = useState(null);
  const [form] = Form.useForm();
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const { reloadConfig } = useConfig();

  useEffect(() => {
    fetchSettings();
    fetchSystemInfo();
    
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const fetchSettings = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/system-settings');
      setSettings(response.data);

      const formValues = {};
      Object.entries(response.data).forEach(([key, data]) => {
        formValues[key] = data.value;
      });
      form.setFieldsValue(formValues);
    } catch (error) {
      message.error('获取设置失败');
    } finally {
      setLoading(false);
    }
  };

  const fetchSystemInfo = async () => {
    try {
      const response = await axios.get('/api/system-settings/system/info');
      setSystemInfo(response.data);
    } catch (error) {
      console.error('获取系统信息失败');
    }
  };

  const handleSaveSettings = async values => {
    setSaving(true);
    try {
      const updates = {};
      Object.entries(values).forEach(([key, value]) => {
        if (settings[key] && settings[key].isEditable) {
          updates[key] = value;
        }
      });

      await axios.put('/api/system-settings', { settings: updates });

      if ('frontend_port' in updates) {
        try {
          await axios.post('/api/system-settings/frontend/port/sync');
          const statusRes = await axios.get('/api/system-settings/frontend/status');
          const isProduction = statusRes.data.isProduction;

          if (isProduction) {
            Modal.info({
              title: '前端端口已修改（生产环境）',
              content: (
                <div>
                  <p>
                    前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为{' '}
                    <strong>{updates.frontend_port}</strong>
                  </p>
                  <Alert
                    message="请手动更新服务器配置"
                    description={
                      <div>
                        <p>生产环境由 Nginx 或其他服务器托管，请手动更新服务器配置文件</p>
                      </div>
                    }
                    type="info"
                    showIcon
                    style={{ marginTop: 16 }}
                  />
                </div>
              ),
              okText: '知道了',
            });
          } else {
            Modal.confirm({
              title: '前端端口已修改',
              icon: <ExclamationCircleOutlined />,
              content: (
                <div>
                  <p>
                    前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为{' '}
                    <strong>{updates.frontend_port}</strong>
                  </p>
                  <p>是否立即重启前端服务以应用新端口？</p>
                </div>
              ),
              okText: '立即重启',
              cancelText: '稍后手动重启',
              onOk: async () => {
                const newPort = updates.frontend_port;
                const newUrl = `http://localhost:${newPort}`;
                Modal.success({
                  title: '正在重启前端服务',
                  content: (
                    <div>
                      <p>前端服务正在重启，新端口：<strong>{newPort}</strong></p>
                      <p>页面将在3秒后自动跳转到新地址...</p>
                    </div>
                  ),
                  okText: '立即跳转',
                  closable: false,
                  maskClosable: false,
                  onOk: () => {
                    window.location.href = newUrl;
                  },
                });
                setTimeout(async () => {
                  try {
                    await axios.post('/api/system-settings/frontend/restart', {}, { timeout: 5000 });
                  } catch (error) {
                    console.log('重启请求已发送，服务正在重启...');
                  }
                }, 1000);
                setTimeout(() => {
                  window.location.href = newUrl;
                }, 3000);
              },
            });
          }
        } catch (syncError) {
          console.warn('同步前端端口配置失败:', syncError);
          message.warning('端口配置已保存，但同步到配置文件失败');
        }
      } else {
        message.success('设置保存成功');
      }

      fetchSettings();
      await reloadConfig();
    } catch (error) {
      message.error('保存设置失败');
    } finally {
      setSaving(false);
    }
  };

  const handleResetSetting = key => {
    Modal.confirm({
      title: '确认重置',
      icon: <ExclamationCircleOutlined />,
      content: `确定要将 "${settings[key]?.description || key}" 重置为默认值吗？`,
      onOk: async () => {
        try {
          await axios.post(`/api/system-settings/reset/${key}`);
          message.success('重置成功');
          fetchSettings();
          await reloadConfig();
        } catch (error) {
          message.error('重置失败');
        }
      },
    });
  };

  const renderFormItem = (key, data) => {
    if (!data.isEditable) {
      return (
        <Form.Item key={key} label={data.description || key} name={key}>
          <Input disabled suffix={<LockOutlined />} />
        </Form.Item>
      );
    }

    switch (data.type) {
      case 'boolean':
        return (
          <Form.Item key={key} label={data.description || key} name={key} valuePropName="checked">
            <Switch />
          </Form.Item>
        );
      case 'number':
        const isPortField = key === 'frontend_port';
        return (
          <Form.Item
            key={key}
            label={data.description || key}
            name={key}
            rules={[
              { required: false, message: `请输入${data.description || key}` },
              ...(isPortField
                ? [
                    {
                      type: 'number',
                      min: 1,
                      max: 65535,
                      message: '端口号必须在 1-65535 之间',
                      transform: value => Number(value),
                    },
                  ]
                : []),
            ]}
          >
            <Input
              type="number"
              style={{ width: '100%' }}
              min={isPortField ? 1 : undefined}
              max={isPortField ? 65535 : undefined}
            />
          </Form.Item>
        );
      case 'select':
        const options = getSelectOptions(key);
        return (
          <Form.Item key={key} label={data.description || key} name={key}>
            <Select>
              {options.map(opt => (
                <Option key={opt.value} value={opt.value}>
                  {opt.label}
                </Option>
              ))}
            </Select>
          </Form.Item>
        );
      default:
        return (
          <Form.Item key={key} label={data.description || key} name={key}>
            <Input />
          </Form.Item>
        );
    }
  };

  const getSelectOptions = key => {
    const optionsMap = {
      timezone: [
        { value: 'Asia/Shanghai', label: '亚洲/上海 (UTC+8)' },
        { value: 'Asia/Beijing', label: '亚洲/北京 (UTC+8)' },
        { value: 'America/New_York', label: '美洲/纽约 (UTC-5)' },
        { value: 'Europe/London', label: '欧洲/伦敦 (UTC+0)' },
        { value: 'UTC', label: 'UTC (UTC+0)' },
      ],
      date_format: [
        { value: 'YYYY-MM-DD', label: '2024-01-01' },
        { value: 'YYYY/MM/DD', label: '2024/01/01' },
        { value: 'DD/MM/YYYY', label: '01/01/2024' },
        { value: 'MM/DD/YYYY', label: '01/01/2024' },
      ],
      primary_color: [
        { value: '#667eea', label: '蓝色 (#667eea)' },
        { value: '#764ba2', label: '紫色 (#764ba2)' },
        { value: '#f093fb', label: '粉色 (#f093fb)' },
        { value: '#4facfe', label: '浅蓝色 (#4facfe)' },
        { value: '#43e97b', label: '绿色 (#43e97b)' },
        { value: '#fa709a', label: '红色 (#fa709a)' },
        { value: '#fee140', label: '黄色 (#fee140)' },
        { value: '#00b4db', label: '青色 (#00b4db)' },
        { value: '#0083b0', label: '深蓝色 (#0083b0)' },
        { value: '#fcb045', label: '橙色 (#fcb045)' },
      ],
      secondary_color: [
        { value: '#764ba2', label: '紫色 (#764ba2)' },
        { value: '#667eea', label: '蓝色 (#667eea)' },
        { value: '#4facfe', label: '浅蓝色 (#4facfe)' },
        { value: '#43e97b', label: '绿色 (#43e97b)' },
        { value: '#fa709a', label: '红色 (#fa709a)' },
        { value: '#fee140', label: '黄色 (#fee140)' },
        { value: '#00b4db', label: '青色 (#00b4db)' },
        { value: '#0083b0', label: '深蓝色 (#0083b0)' },
        { value: '#fcb045', label: '橙色 (#fcb045)' },
        { value: '#f093fb', label: '粉色 (#f093fb)' },
      ],
      table_row_height: [
        { value: 'small', label: '紧凑 (Small)' },
        { value: 'default', label: '默认 (Default)' },
        { value: 'middle', label: '中等 (Middle)' },
        { value: 'large', label: '宽松 (Large)' },
      ],
      dark_mode: [
        { value: 'false', label: '关闭' },
        { value: 'true', label: '开启' },
      ],
      compact_mode: [
        { value: 'false', label: '关闭' },
        { value: 'true', label: '开启' },
      ],
      animation_enabled: [
        { value: 'false', label: '关闭' },
        { value: 'true', label: '开启' },
      ],
      sidebar_collapsed: [
        { value: 'false', label: '展开' },
        { value: 'true', label: '折叠' },
      ],
    };
    return optionsMap[key] || [];
  };

  const settingGroups = {
    general: [
      {
        title: '站点信息',
        icon: <GlobalOutlined />,
        description: '配置系统基本信息和站点标识',
        keys: ['site_name', 'site_logo'],
      },
      {
        title: '时间设置',
        icon: <ClockCircleOutlined />,
        description: '设置系统时区和日期显示格式',
        keys: ['timezone', 'date_format'],
      },
      {
        title: '安全设置',
        icon: <SafetyCertificateOutlined />,
        description: '配置登录安全策略和维护模式',
        keys: ['idle_timeout', 'max_login_attempts', 'maintenance_mode'],
      },
    ],
    appearance: [
      {
        title: '主题颜色',
        icon: <BgColorsOutlined />,
        description: '自定义系统主题配色方案',
        keys: ['primary_color', 'secondary_color'],
      },
      {
        title: '界面布局',
        icon: <DesktopOutlined />,
        description: '调整界面显示密度和布局方式',
        keys: ['compact_mode', 'sidebar_collapsed', 'table_row_height'],
      },
      {
        title: '动画效果',
        icon: <ThunderboltOutlined />,
        description: '控制界面动画和过渡效果',
        keys: ['animation_enabled'],
      },
    ],
  };

  const menuItems = [
    {
      key: 'general',
      icon: <GlobalOutlined />,
      label: '全局配置',
      description: '站点信息、时间、安全设置',
    },
    {
      key: 'appearance',
      icon: <BgColorsOutlined />,
      label: '外观设置',
      description: '主题颜色、界面布局',
    },
    {
      key: 'about',
      icon: <InfoCircleOutlined />,
      label: '关于系统',
      description: '系统信息、版本详情',
    },
  ];

  const renderSettingGroup = (group) => {
    // 根据分组决定布局
    const isSiteInfo = group.title === '站点信息';
    const isTimeSetting = group.title === '时间设置';
    const isSecurity = group.title === '安全设置';

    return (
      <Card
        key={group.title}
        style={{
          marginBottom: 24,
          borderRadius: 12,
          border: '1px solid #e8e8e8',
          boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
        }}
        bodyStyle={{ padding: '24px' }}
      >
        {/* 居中的标题区 */}
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ 
            width: 48, 
            height: 48, 
            borderRadius: '50%', 
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 12,
          }}>
            <span style={{ color: '#fff', fontSize: 24 }}>{group.icon}</span>
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, color: '#262626', marginBottom: 6 }}>
            {group.title}
          </div>
          <div style={{ fontSize: 14, color: '#666' }}>
            {group.description}
          </div>
        </div>

        <Divider style={{ margin: '0 0 24px 0' }} />

        {/* 表单内容区 */}
        {isSiteInfo && (
          <Row gutter={[32, 16]}>
            <Col xs={24} md={12}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>网站名称</span>} 
                name="site_name"
                style={{ marginBottom: 0 }}
              >
                <Input 
                  placeholder="请输入网站名称" 
                  style={{ height: 40, borderRadius: 8 }}
                />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>网站Logo URL</span>} 
                name="site_logo"
                style={{ marginBottom: 0 }}
              >
                <Input 
                  placeholder="请输入Logo URL" 
                  style={{ height: 40, borderRadius: 8 }}
                  suffix={
                    <Button type="link" size="small" style={{ padding: 0 }}>
                      预览
                    </Button>
                  }
                />
              </Form.Item>
            </Col>
          </Row>
        )}

        {isTimeSetting && (
          <Row gutter={[32, 16]}>
            <Col xs={24} md={12}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>时区设置</span>} 
                name="timezone"
                style={{ marginBottom: 0 }}
              >
                <Select 
                  placeholder="请选择时区" 
                  style={{ width: '100%', height: 40 }}
                  dropdownStyle={{ borderRadius: 8 }}
                >
                  {getSelectOptions('timezone').map(opt => (
                    <Option key={opt.value} value={opt.value}>{opt.label}</Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>日期格式</span>} 
                name="date_format"
                style={{ marginBottom: 0 }}
              >
                <Select 
                  placeholder="请选择日期格式" 
                  style={{ width: '100%', height: 40 }}
                  dropdownStyle={{ borderRadius: 8 }}
                >
                  {getSelectOptions('date_format').map(opt => (
                    <Option key={opt.value} value={opt.value}>{opt.label}</Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        )}

        {isSecurity && (
          <Row gutter={[32, 16]} align="middle">
            <Col xs={24} md={8}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>用户空闲超时时间</span>} 
                name="idle_timeout"
                style={{ marginBottom: 0 }}
              >
                <Input 
                  type="number" 
                  placeholder="请输入超时时间" 
                  style={{ height: 40, borderRadius: 8 }}
                  suffix={<span style={{ color: '#999' }}>分钟</span>}
                />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>最大登录尝试次数</span>} 
                name="max_login_attempts"
                style={{ marginBottom: 0 }}
              >
                <Input 
                  type="number" 
                  placeholder="请输入次数" 
                  style={{ height: 40, borderRadius: 8 }}
                  suffix={<span style={{ color: '#999' }}>次</span>}
                />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item 
                label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>维护模式</span>} 
                name="maintenance_mode"
                valuePropName="checked"
                style={{ marginBottom: 0 }}
              >
                <Tooltip title="开启后所有用户将无法登录">
                  <Switch 
                    checkedChildren="开启" 
                    unCheckedChildren="关闭"
                    style={{ marginTop: 8 }}
                  />
                </Tooltip>
              </Form.Item>
            </Col>
          </Row>
        )}

        {!isSiteInfo && !isTimeSetting && !isSecurity && (
          <Row gutter={[32, 16]}>
            {group.keys.map(key => {
              const settingData = { ...settings[key] };
              if (key === 'timezone' || key === 'date_format') {
                settingData.type = 'select';
              }
              if (key === 'primary_color' || key === 'secondary_color') {
                settingData.type = 'select';
              }
              return (
                <Col xs={24} md={12} lg={8} key={key}>
                  {renderFormItem(key, settingData)}
                </Col>
              );
            })}
          </Row>
        )}
      </Card>
    );
  };

  // 底部固定操作栏
  const renderFixedFooter = (onSubmit) => (
    <div style={{
      position: 'sticky',
      bottom: 0,
      left: 0,
      right: 0,
      background: '#fff',
      borderTop: '1px solid #e8e8e8',
      padding: '16px 24px',
      display: 'flex',
      justifyContent: 'center',
      gap: 16,
      boxShadow: '0 -2px 8px rgba(0,0,0,0.06)',
      zIndex: 10,
      marginTop: 24,
    }}>
      <Button
        type="primary"
        htmlType="submit"
        loading={saving}
        icon={<SaveOutlined />}
        size="large"
        style={{ 
          borderRadius: 8, 
          minWidth: 140,
          height: 44,
          fontSize: 15,
          fontWeight: 500,
        }}
      >
        保存设置
      </Button>
      <Button
        onClick={() => fetchSettings()}
        icon={<ReloadOutlined />}
        size="large"
        style={{ 
          borderRadius: 8, 
          minWidth: 120,
          height: 44,
          fontSize: 15,
        }}
      >
        重置表单
      </Button>
    </div>
  );

  const renderGeneralSettings = () => {
    return (
      <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
        <div style={{ paddingBottom: 80 }}>
          {settingGroups.general.map(group => renderSettingGroup(group))}
        </div>
        {renderFixedFooter()}
      </Form>
    );
  };

  const presetColors = [
    '#667eea',
    '#764ba2',
    '#f093fb',
    '#4facfe',
    '#43e97b',
    '#fa709a',
    '#fee140',
    '#00b4db',
    '#0083b0',
    '#fcb045',
    '#1890ff',
    '#52c41a',
    '#eb2f96',
    '#722ed1',
    '#13c2c2',
    '#fa8c16',
  ];

  const handleColorChange = (color, key) => {
    const hexColor = typeof color === 'string' ? color : color.toHexString();
    form.setFieldValue(key, hexColor);
    
    const root = document.documentElement;
    if (key === 'primary_color') {
      root.style.setProperty('--primary-color', hexColor);
      root.style.setProperty('--primary-light', `${hexColor}20`);
    } else if (key === 'secondary_color') {
      root.style.setProperty('--secondary-color', hexColor);
      root.style.setProperty('--secondary-light', `${hexColor}20`);
    }
  };

  const renderColorFormItem = (key, data) => {
    const currentValue = form.getFieldValue(key) || settings[key]?.value || '#667eea';
    
    return (
      <Form.Item 
        key={key} 
        label={
          <Space>
            <span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>
              {data.description || key}
            </span>
            <div 
              style={{ 
                width: 20, 
                height: 20, 
                borderRadius: 4, 
                backgroundColor: currentValue,
                border: '1px solid #d9d9d9',
                boxShadow: '0 1px 2px rgba(0,0,0,0.1)'
              }} 
            />
          </Space>
        } 
        name={key}
        style={{ marginBottom: 0 }}
      >
        <Input type="hidden" />
      </Form.Item>
    );
  };

  const renderAppearanceSettings = () => {
    const primaryColor = form.getFieldValue('primary_color') || settings.primary_color?.value || '#667eea';
    const secondaryColor = form.getFieldValue('secondary_color') || settings.secondary_color?.value || '#764ba2';

    return (
      <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
        <div style={{ paddingBottom: 80 }}>
          <Alert
            message="主题颜色设置"
            description="选择颜色后可实时预览效果，保存设置后永久生效。建议选择对比度适中的颜色组合。"
            type="info"
            showIcon
            style={{ marginBottom: 24, borderRadius: 12 }}
          />
          
          <Card
            style={{
              marginBottom: 24,
              borderRadius: 12,
              border: '1px solid #e8e8e8',
              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
            }}
            bodyStyle={{ padding: '24px' }}
          >
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <div style={{ 
                width: 48, 
                height: 48, 
                borderRadius: '50%', 
                background: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 12,
              }}>
                <BgColorsOutlined style={{ color: '#fff', fontSize: 24 }} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, color: '#262626', marginBottom: 6 }}>
                主题颜色
              </div>
              <div style={{ fontSize: 14, color: '#666' }}>
                自定义系统主题配色方案
              </div>
            </div>

            <Divider style={{ margin: '0 0 24px 0' }} />

            <Row gutter={[32, 24]}>
              <Col xs={24} md={12}>
                <div style={{ marginBottom: 8 }}>
                  <Text strong style={{ fontSize: 14, color: '#262626' }}>主色调</Text>
                  <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
                    用于按钮、链接等主要交互元素
                  </Text>
                </div>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <ColorPicker
                    value={primaryColor}
                    onChange={(color) => handleColorChange(color, 'primary_color')}
                    format="hex"
                    showText
                    presets={[
                      {
                        label: '推荐配色',
                        colors: presetColors,
                      },
                    ]}
                    style={{ width: '100%' }}
                  />
                  <Input 
                    value={primaryColor}
                    onChange={(e) => handleColorChange(e.target.value, 'primary_color')}
                    placeholder="#667eea"
                    style={{ borderRadius: 8 }}
                    prefix={<BgColorsOutlined style={{ color: '#bfbfbf' }} />}
                  />
                </Space>
              </Col>
              <Col xs={24} md={12}>
                <div style={{ marginBottom: 8 }}>
                  <Text strong style={{ fontSize: 14, color: '#262626' }}>次色调</Text>
                  <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
                    用于渐变、悬停效果等辅助元素
                  </Text>
                </div>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <ColorPicker
                    value={secondaryColor}
                    onChange={(color) => handleColorChange(color, 'secondary_color')}
                    format="hex"
                    showText
                    presets={[
                      {
                        label: '推荐配色',
                        colors: presetColors,
                      },
                    ]}
                    style={{ width: '100%' }}
                  />
                  <Input 
                    value={secondaryColor}
                    onChange={(e) => handleColorChange(e.target.value, 'secondary_color')}
                    placeholder="#764ba2"
                    style={{ borderRadius: 8 }}
                    prefix={<BgColorsOutlined style={{ color: '#bfbfbf' }} />}
                  />
                </Space>
              </Col>
            </Row>

            <Divider style={{ margin: '24px 0' }} />

            <div style={{ 
              padding: 16, 
              background: '#fafafa', 
              borderRadius: 8,
              border: '1px solid #f0f0f0'
            }}>
              <Text strong style={{ fontSize: 13, color: '#595959', marginBottom: 12, display: 'block' }}>
                实时预览
              </Text>
              <Space size="middle" wrap>
                <Button 
                  type="primary" 
                  style={{ 
                    background: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
                    border: 'none'
                  }}
                >
                  主要按钮
                </Button>
                <Button 
                  style={{ 
                    borderColor: primaryColor,
                    color: primaryColor
                  }}
                >
                  次要按钮
                </Button>
                <Tag 
                  color={primaryColor}
                  style={{ borderRadius: 4 }}
                >
                  标签样式
                </Tag>
                <div 
                  style={{ 
                    width: 60, 
                    height: 24, 
                    borderRadius: 4,
                    background: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
                  }} 
                />
              </Space>
            </div>
          </Card>

          <Card
            style={{
              marginBottom: 24,
              borderRadius: 12,
              border: '1px solid #e8e8e8',
              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
            }}
            bodyStyle={{ padding: '24px' }}
          >
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <div style={{ 
                width: 48, 
                height: 48, 
                borderRadius: '50%', 
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 12,
              }}>
                <DesktopOutlined style={{ color: '#fff', fontSize: 24 }} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, color: '#262626', marginBottom: 6 }}>
                界面布局
              </div>
              <div style={{ fontSize: 14, color: '#666' }}>
                调整界面显示密度和布局方式
              </div>
            </div>

            <Divider style={{ margin: '0 0 24px 0' }} />

            <Row gutter={[32, 16]}>
              <Col xs={24} md={8}>
                <Form.Item 
                  label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>紧凑模式</span>} 
                  name="compact_mode"
                  valuePropName="checked"
                  style={{ marginBottom: 0 }}
                >
                  <Tooltip title="开启后界面元素间距缩小，显示更多内容">
                    <Switch 
                      checkedChildren="开启" 
                      unCheckedChildren="关闭"
                    />
                  </Tooltip>
                </Form.Item>
              </Col>
              <Col xs={24} md={8}>
                <Form.Item 
                  label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>侧边栏折叠</span>} 
                  name="sidebar_collapsed"
                  valuePropName="checked"
                  style={{ marginBottom: 0 }}
                >
                  <Tooltip title="开启后侧边栏默认折叠为图标模式">
                    <Switch 
                      checkedChildren="开启" 
                      unCheckedChildren="关闭"
                    />
                  </Tooltip>
                </Form.Item>
              </Col>
              <Col xs={24} md={8}>
                <Form.Item 
                  label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>表格行高度</span>} 
                  name="table_row_height"
                  style={{ marginBottom: 0 }}
                >
                  <Select 
                    placeholder="请选择" 
                    style={{ width: '100%', height: 40 }}
                    dropdownStyle={{ borderRadius: 8 }}
                  >
                    {getSelectOptions('table_row_height').map(opt => (
                      <Option key={opt.value} value={opt.value}>{opt.label}</Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card
            style={{
              marginBottom: 24,
              borderRadius: 12,
              border: '1px solid #e8e8e8',
              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
            }}
            bodyStyle={{ padding: '24px' }}
          >
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <div style={{ 
                width: 48, 
                height: 48, 
                borderRadius: '50%', 
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 12,
              }}>
                <ThunderboltOutlined style={{ color: '#fff', fontSize: 24 }} />
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, color: '#262626', marginBottom: 6 }}>
                动画效果
              </div>
              <div style={{ fontSize: 14, color: '#666' }}>
                控制界面动画和过渡效果
              </div>
            </div>

            <Divider style={{ margin: '0 0 24px 0' }} />

            <Row gutter={[32, 16]}>
              <Col xs={24} md={12}>
                <Form.Item 
                  label={<span style={{ fontSize: 14, color: '#262626', fontWeight: 500 }}>启用动画</span>} 
                  name="animation_enabled"
                  valuePropName="checked"
                  style={{ marginBottom: 0 }}
                >
                  <Tooltip title="关闭后可提升低配设备性能">
                    <Switch 
                      checkedChildren="开启" 
                      unCheckedChildren="关闭"
                    />
                  </Tooltip>
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </div>
        {renderFixedFooter()}
      </Form>
    );
  };

  const renderAboutPage = () => {
    return (
      <div>
        <Card
          style={{
            marginBottom: 16,
            borderRadius: 12,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            border: 'none',
          }}
          bodyStyle={{ padding: '24px' }}
        >
          <Row gutter={[20, 20]} align="middle">
            <Col xs={24} sm={6} md={5}>
              <div
                style={{
                  width: 80,
                  height: 80,
                  borderRadius: 16,
                  backgroundColor: 'rgba(255,255,255,0.15)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto',
                }}
              >
                <DatabaseOutlined style={{ fontSize: 40, color: '#fff' }} />
              </div>
            </Col>
            <Col xs={24} sm={18} md={19}>
              <Title level={3} style={{ color: '#fff', margin: 0, marginBottom: 6, fontSize: '22px' }}>
                机柜管理系统
              </Title>
              <Space size={12} wrap style={{ color: 'rgba(255,255,255,0.9)' }}>
                <span style={{ fontSize: 14 }}>版本 {settings.app_version?.value || '1.0.0'}</span>
                <span style={{ opacity: 0.5 }}>|</span>
                <Badge status="success" text={<span style={{ color: '#fff' }}>运行正常</span>} />
              </Space>
              <Paragraph style={{ color: 'rgba(255,255,255,0.85)', marginTop: 8, marginBottom: 0, fontSize: 13 }}>
                专业的数据中心设备管理平台，提供机房、机柜、设备的全生命周期管理
              </Paragraph>
            </Col>
          </Row>
        </Card>

        {systemInfo && (
          <Card
            style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e8e8e8' }}
            bodyStyle={{ padding: '20px' }}
          >
            <div style={{ marginBottom: 16 }}>
              <Space size={10}>
                <Avatar style={{ backgroundColor: '#52c41a', borderRadius: 8 }} icon={<CloudServerOutlined />} size={32} />
                <Text strong style={{ fontSize: 15 }}>系统统计</Text>
              </Space>
            </div>
            <Row gutter={[12, 12]}>
              <Col xs={12} sm={6}>
                <div
                  style={{
                    textAlign: 'center',
                    borderRadius: 10,
                    background: 'linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%)',
                    padding: '16px 12px',
                  }}
                >
                  <div style={{ fontSize: 24, fontWeight: 700, color: '#52c41a', marginBottom: 2 }}>
                    {systemInfo.statistics?.devices || 0}
                  </div>
                  <Text type="secondary" style={{ fontSize: 12 }}>设备总数</Text>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div
                  style={{
                    textAlign: 'center',
                    borderRadius: 10,
                    background: 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)',
                    padding: '16px 12px',
                  }}
                >
                  <div style={{ fontSize: 24, fontWeight: 700, color: '#1890ff', marginBottom: 2 }}>
                    {systemInfo.statistics?.racks || 0}
                  </div>
                  <Text type="secondary" style={{ fontSize: 12 }}>机柜总数</Text>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div
                  style={{
                    textAlign: 'center',
                    borderRadius: 10,
                    background: 'linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%)',
                    padding: '16px 12px',
                  }}
                >
                  <div style={{ fontSize: 24, fontWeight: 700, color: '#722ed1', marginBottom: 2 }}>
                    {systemInfo.statistics?.rooms || 0}
                  </div>
                  <Text type="secondary" style={{ fontSize: 12 }}>机房总数</Text>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div
                  style={{
                    textAlign: 'center',
                    borderRadius: 10,
                    background: 'linear-gradient(135deg, #fff7e6 0%, #ffd591 100%)',
                    padding: '16px 12px',
                  }}
                >
                  <div style={{ fontSize: 24, fontWeight: 700, color: '#fa8c16', marginBottom: 2 }}>
                    {systemInfo.statistics?.users || 0}
                  </div>
                  <Text type="secondary" style={{ fontSize: 12 }}>用户总数</Text>
                </div>
              </Col>
            </Row>

            <Divider style={{ margin: '20px 0' }} />

            <Descriptions column={{ xs: 1, sm: 2, md: 3 }} size="small" labelStyle={{ fontWeight: 500, fontSize: 13 }}>
              <Descriptions.Item label="Node.js 版本">
                <Tag color="blue" size="small">{systemInfo.system?.nodeVersion}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="运行平台">
                <Text style={{ fontSize: 13 }}>{systemInfo.system?.platform} ({systemInfo.system?.arch})</Text>
              </Descriptions.Item>
              <Descriptions.Item label="进程 ID">
                <Tag size="small">{systemInfo.system?.pid}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="运行时间">
                <Text style={{ fontSize: 13 }}>{systemInfo.system?.uptime
                  ? `${Math.floor(systemInfo.system.uptime / 3600)}小时${Math.floor((systemInfo.system.uptime % 3600) / 60)}分钟`
                  : '-'}</Text>
              </Descriptions.Item>
              <Descriptions.Item label="内存使用">
                <Text style={{ fontSize: 13 }}>{systemInfo.system?.memoryUsage
                  ? `${(systemInfo.system.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)} MB`
                  : '-'}</Text>
              </Descriptions.Item>
              <Descriptions.Item label="系统时间">
                <Text style={{ fontSize: 13 }}>{systemInfo.timestamp
                  ? new Date(systemInfo.timestamp).toLocaleString('zh-CN')
                  : '-'}</Text>
              </Descriptions.Item>
            </Descriptions>
          </Card>
        )}

        <Card
          style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e8e8e8' }}
          bodyStyle={{ padding: '20px' }}
        >
          <div style={{ marginBottom: 16 }}>
            <Space size={10}>
              <Avatar style={{ backgroundColor: '#667eea', borderRadius: 8 }} icon={<FileTextOutlined />} size={32} />
              <Text strong style={{ fontSize: 15 }}>公司信息</Text>
            </Space>
          </div>
          <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
            <Row gutter={[24, 8]}>
              <Col xs={24} sm={12}>
                <Form.Item label="公司名称" name="company_name">
                  <Input prefix={<GlobalOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入公司名称" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="联系邮箱" name="contact_email">
                  <Input prefix={<MailOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入联系邮箱" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="联系电话" name="contact_phone">
                  <Input prefix={<PhoneOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入联系电话" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12}>
                <Form.Item label="公司地址" name="company_address">
                  <Input prefix={<EnvironmentOutlined style={{ color: '#bfbfbf' }} />} placeholder="请输入公司地址" />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="系统描述" name="system_description">
                  <Input.TextArea rows={3} placeholder="请输入系统描述" style={{ borderRadius: 8 }} />
                </Form.Item>
              </Col>
            </Row>
            <Divider style={{ margin: '16px 0' }} />
            <Space size="middle">
              <Button
                type="primary"
                htmlType="submit"
                loading={saving}
                icon={<SaveOutlined />}
                style={{ borderRadius: 8 }}
              >
                保存信息
              </Button>
              <Button onClick={() => fetchSettings()} icon={<ReloadOutlined />} style={{ borderRadius: 8 }}>
                重置
              </Button>
            </Space>
          </Form>
        </Card>
      </div>
    );
  };

  const renderContent = () => {
    switch (activeMenu) {
      case 'general':
        return renderGeneralSettings();
      case 'appearance':
        return renderAppearanceSettings();
      case 'about':
        return renderAboutPage();
      default:
        return renderGeneralSettings();
    }
  };

  // 顶部导航栏菜单
  const renderTopNav = () => (
    <div style={{ 
      display: 'flex', 
      alignItems: 'center',
      gap: '4px',
      flexWrap: 'nowrap',
      overflowX: 'auto',
      scrollbarWidth: 'none',
      msOverflowStyle: 'none',
    }}>
      {menuItems.map(item => (
        <div
          key={item.key}
          onClick={() => setActiveMenu(item.key)}
          style={{
            display: 'flex',
            alignItems: 'center',
            padding: '8px 16px',
            borderRadius: 20,
            cursor: 'pointer',
            transition: 'all 0.3s ease',
            backgroundColor: activeMenu === item.key ? 'rgba(255,255,255,0.25)' : 'transparent',
            color: '#fff',
            whiteSpace: 'nowrap',
            fontSize: 14,
            fontWeight: activeMenu === item.key ? 600 : 400,
          }}
          onMouseEnter={(e) => {
            if (activeMenu !== item.key) {
              e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';
            }
          }}
          onMouseLeave={(e) => {
            if (activeMenu !== item.key) {
              e.currentTarget.style.backgroundColor = 'transparent';
            }
          }}
        >
          <span style={{ marginRight: 6, fontSize: 16 }}>{item.icon}</span>
          <span>{item.label}</span>
        </div>
      ))}
    </div>
  );

  // 移动端下拉菜单
  const renderMobileNav = () => (
    <Select
      value={activeMenu}
      onChange={(value) => setActiveMenu(value)}
      style={{ width: 140 }}
      bordered={false}
      dropdownStyle={{ borderRadius: 8 }}
      suffixIcon={<MenuUnfoldOutlined style={{ color: '#fff' }} />}
    >
      {menuItems.map(item => (
        <Option key={item.key} value={item.key}>
          <Space>
            {item.icon}
            {item.label}
          </Space>
        </Option>
      ))}
    </Select>
  );

  return (
    <div style={{ minHeight: '100vh', background: '#f5f7fa', display: 'flex', flexDirection: 'column' }}>
      {/* 顶部固定导航栏 */}
      <div style={{ 
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        padding: '16px 24px',
        position: 'sticky',
        top: 0,
        zIndex: 100,
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      }}>
        <div style={{ maxWidth: '100%', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Space align="center">
            <SettingOutlined style={{ fontSize: 20, color: '#fff' }} />
            <Title level={4} style={{ margin: 0, color: '#fff', fontSize: 18 }}>系统设置</Title>
          </Space>
          
          {/* 桌面端导航 */}
          {!isMobile && renderTopNav()}
          
          {/* 移动端导航 */}
          {isMobile && renderMobileNav()}
        </div>
      </div>

      {/* 主内容区 - 平铺填充 */}
      <div style={{ flex: 1, padding: '16px 24px' }}>
        <div style={{ maxWidth: '100%' }}>
          {renderContent()}
        </div>
      </div>
    </div>
  );
};

export default SystemSettings;