/**
 * 基本配置标签页组件
 * @author MHXY Development Team
 * @version 1.0.0
 */

import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Select, Card, Button, Space, Row, Col, Tooltip } from 'antd';
import { 
  InfoCircleOutlined, 
  SaveOutlined, 
  ReloadOutlined, 
  HistoryOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { SystemConfig, SaveConfigRequest } from '../../types/systemConfig';

const { Option } = Select;
const { TextArea } = Input;

interface BasicConfigTabProps {
  configs: SystemConfig[];
  loading: boolean;
  saving: boolean;
  onSave: (requests: SaveConfigRequest[]) => void;
  onReset: (configKey: string) => void;
  onShowHistory: (configKey: string) => void;
  onConfigChange: () => void;
}

const BasicConfigTab: React.FC<BasicConfigTabProps> = ({
  configs,
  loading,
  saving,
  onSave,
  onReset,
  onShowHistory,
  onConfigChange
}) => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState<Record<string, any>>({});

  // 初始化表单数据
  useEffect(() => {
    const initialData: Record<string, any> = {};
    configs.forEach(config => {
      initialData[config.config_key] = config.config_value;
    });
    setFormData(initialData);
    form.setFieldsValue(initialData);
  }, [configs, form]);

  // 处理表单值变化
  const handleValuesChange = (changedValues: any, allValues: any) => {
    setFormData(allValues);
    onConfigChange();
  };

  // 保存配置
  const handleSave = () => {
    form.validateFields().then(() => {
      const saveRequests: SaveConfigRequest[] = configs.map(config => ({
        config_key: config.config_key,
        config_value: formData[config.config_key] || '',
        config_label: config.config_label,
        config_group: config.config_group
      }));
      onSave(saveRequests);
    }).catch(() => {
      // 表单验证失败
    });
  };

  // 重置为默认值
  const handleReset = (configKey: string) => {
    onReset(configKey);
  };

  // 显示配置历史
  const handleShowHistory = (configKey: string) => {
    onShowHistory(configKey);
  };

  // 语言选项
  const languageOptions = [
    { value: 'zh-CN', label: '简体中文' },
    { value: 'zh-TW', label: '繁体中文' },
    { value: 'en-US', label: 'English' },
    { value: 'ja-JP', label: '日本語' }
  ];

  // 版本选项
  const versionOptions = [
    { value: '1.0.0', label: 'v1.0.0' },
    { value: '1.1.0', label: 'v1.1.0' },
    { value: '2.0.0', label: 'v2.0.0' }
  ];

  const configItems = [
    {
      key: 'site_name',
      title: '网站名称',
      description: '系统显示名称，将在页面标题和系统信息中显示',
      type: 'input',
      placeholder: '请输入网站名称',
      required: true
    },
    {
      key: 'site_version',
      title: '系统版本',
      description: '当前系统版本号，用于显示和版本管理',
      type: 'select',
      options: versionOptions,
      required: true
    },
    {
      key: 'site_description',
      title: '系统描述',
      description: '系统描述信息，简要介绍系统功能和用途',
      type: 'textarea',
      placeholder: '请输入系统描述',
      rows: 3
    },
    {
      key: 'admin_email',
      title: '管理员邮箱',
      description: '系统管理员联系邮箱，用于接收系统通知',
      type: 'input',
      placeholder: '请输入管理员邮箱',
      required: true
    },
    {
      key: 'maintenance_mode',
      title: '维护模式',
      description: '开启后用户无法正常访问系统，仅管理员可以登录',
      type: 'switch'
    },
    {
      key: 'default_language',
      title: '默认语言',
      description: '系统默认语言设置，影响界面显示语言',
      type: 'select',
      options: languageOptions,
      required: true
    }
  ];

  return (
    <div className="basic-config-tab" style={{ padding: '0' }}>
      {/* 配置表单 */}
      <Form
        form={form}
        layout="vertical"
        onValuesChange={handleValuesChange}
        style={{ marginBottom: '24px' }}
      >
        <Row gutter={[24, 0]}>
          {configItems.map((item, index) => {
            const config = configs.find(c => c.config_key === item.key);
            if (!config) return null;

            return (
              <Col span={12} key={item.key}>
                <Card 
                  size="small"
                  style={{ marginBottom: '16px' }}
                  title={
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <SettingOutlined />
                      {item.title}
                      {config.config_type === 'boolean' && (
                        <Switch
                          size="small"
                          checked={formData[item.key] === '1' || formData[item.key] === true}
                          onChange={(checked) => {
                            const newValue = checked ? '1' : '0';
                            form.setFieldValue(item.key, newValue);
                            onConfigChange();
                          }}
                          style={{ marginLeft: '8px' }}
                        />
                      )}
                    </div>
                  }
                  extra={
                    <Space>
                      <Tooltip title="查看历史记录">
                        <Button
                          type="text"
                          size="small"
                          icon={<HistoryOutlined />}
                          onClick={() => handleShowHistory(item.key)}
                        />
                      </Tooltip>
                      <Tooltip title="重置为默认值">
                        <Button
                          type="text"
                          size="small"
                          icon={<ReloadOutlined />}
                          onClick={() => handleReset(item.key)}
                        />
                      </Tooltip>
                    </Space>
                  }
                >
                  <div style={{ marginBottom: '8px' }}>
                    <div style={{ 
                      fontSize: '12px', 
                      color: '#666',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '4px'
                    }}>
                      <InfoCircleOutlined />
                      {item.description}
                    </div>
                  </div>

                  {/* 输入控件 */}
                  <Form.Item
                    name={item.key}
                    rules={[
                      { required: item.required, message: `请输入${item.title}` },
                      ...(item.key === 'admin_email' ? [
                        { type: 'email', message: '请输入有效的邮箱地址' }
                      ] : [])
                    ]}
                  >
                    {item.type === 'input' && (
                      <Input
                        placeholder={item.placeholder}
                        disabled={config.config_type === 'boolean'}
                      />
                    )}
                    {item.type === 'textarea' && (
                      <TextArea
                        placeholder={item.placeholder}
                        rows={item.rows || 2}
                      />
                    )}
                    {item.type === 'select' && (
                      <Select placeholder={item.placeholder}>
                        {item.options?.map(option => (
                          <Option key={option.value} value={option.value}>
                            {option.label}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </Form.Item>
                </Card>
              </Col>
            );
          })}
        </Row>
      </Form>

      {/* 保存按钮 */}
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center',
        padding: '24px 0',
        borderTop: '1px solid #f0f0f0'
      }}>
        <Button
          type="primary"
          size="large"
          icon={<SaveOutlined />}
          loading={saving}
          onClick={handleSave}
          style={{ minWidth: '120px' }}
        >
          保存基本配置
        </Button>
      </div>

      {/* 配置信息 */}
      <Card size="small" style={{ background: '#fafafa' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
          <InfoCircleOutlined style={{ color: '#1890ff' }} />
          <strong>配置说明</strong>
        </div>
        <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px', color: '#666' }}>
          <li>基本配置影响系统的整体显示和行为</li>
          <li>维护模式开启后，普通用户将无法访问系统</li>
          <li>系统版本用于标识当前软件版本，建议保持更新</li>
          <li>管理员邮箱用于接收系统重要通知，请确保可正常接收邮件</li>
        </ul>
      </Card>
    </div>
  );
};

export default BasicConfigTab;