import React, { useEffect, useState, useRef } from 'react';
import {
  Button,
  Divider,
  Form,
  Grid,
  Header,
  Label,
  Message,
  Icon,
} from 'semantic-ui-react';
import { API, showError, showSuccess } from '../helpers';

const ServerConfigSetting = () => {
  const [configs, setConfigs] = useState([]);
  const [loading, setLoading] = useState(false);
  const [downloadLoading, setDownloadLoading] = useState(false);
  const fileInputRef = useRef(null);

  const getConfigs = async () => {
    setLoading(true);
    const res = await API.get('/api/server/config/');
    const { success, message, data } = res.data;
    if (success) {
      setConfigs(data);
    } else {
      showError(message);
    }
    setLoading(false);
  };

  useEffect(() => {
    getConfigs().then();
  }, []);

  const categories = [
    { key: 'database', icon: 'database', title: '数据库' },
    { key: 'redis', icon: 'server', title: 'Redis' },
    { key: 'performance', icon: 'tachometer alternate', title: '性能与调试' },
    { key: 'network', icon: 'globe', title: '网络与代理' },
    { key: 'ratelimit', icon: 'clock', title: '速率限制' },
    { key: 'metrics', icon: 'chart line', title: '指标与监控' },
    { key: 'other', icon: 'cog', title: '其他设置' },
  ];

  const getConfigsByCategory = (category) => {
    return configs.filter((item) => item.category === category);
  };

  const isSecretKey = (key) => {
    const secretKeys = [
      'SESSION_SECRET', 'REDIS_PASSWORD', 'REDIS_CONN_STRING',
      'SQL_DSN', 'LOG_SQL_DSN', 'HTTPS_PROXY',
    ];
    return secretKeys.includes(key);
  };

  const isBooleanKey = (key) => {
    const booleanKeys = [
      'DEBUG', 'DEBUG_SQL', 'MEMORY_CACHE_ENABLED', 'BATCH_UPDATE_ENABLED',
      'ENABLE_METRIC', 'ONLY_ONE_LOG_FILE', 'ENFORCE_INCLUDE_USAGE',
    ];
    return booleanKeys.includes(key);
  };

  const isNumericKey = (key) => {
    const numericKeys = [
      'BATCH_UPDATE_INTERVAL', 'RELAY_TIMEOUT', 'USER_CONTENT_REQUEST_TIMEOUT',
      'GLOBAL_API_RATE_LIMIT', 'GLOBAL_WEB_RATE_LIMIT', 'METRIC_QUEUE_SIZE',
      'METRIC_SUCCESS_RATE_THRESHOLD', 'PORT', 'SQLITE_BUSY_TIMEOUT',
      'SQL_MAX_IDLE_CONNS', 'SQL_MAX_OPEN_CONNS', 'SQL_MAX_LIFETIME',
      'SYNC_FREQUENCY', 'CHANNEL_TEST_FREQUENCY',
    ];
    return numericKeys.includes(key);
  };

  const handleValueChange = (key, value) => {
    setConfigs((prev) =>
      prev.map((item) => (item.key === key ? { ...item, value } : item))
    );
  };

  const updateConfig = async (key, value) => {
    setLoading(true);
    const res = await API.put('/api/server/config/', { key, value });
    const { success, message } = res.data;
    if (success) {
      showSuccess('设置已更新');
    } else {
      showError(message);
      getConfigs().then();
    }
    setLoading(false);
  };

  const handleSaveRuntime = async (key) => {
    const item = configs.find((c) => c.key === key);
    if (!item) return;
    let value = item.value;
    if (isBooleanKey(key)) {
      value = value === 'true' ? 'true' : 'false';
    }
    await updateConfig(key, value);
  };

  const handleToggle = async (key) => {
    const item = configs.find((c) => c.key === key);
    if (!item) return;
    const newValue = item.value === 'true' ? 'false' : 'true';
    setConfigs((prev) =>
      prev.map((c) => (c.key === key ? { ...c, value: newValue } : c))
    );
    await updateConfig(key, newValue);
  };

  const handleDownloadEnv = async () => {
    setDownloadLoading(true);
    try {
      const res = await API.get('/api/server/config/download', {
        responseType: 'blob',
      });
      const url = window.URL.createObjectURL(new Blob([res.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'server-config.env');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      showSuccess('配置已下载');
    } catch (error) {
      showError('下载失败');
    }
    setDownloadLoading(false);
  };

  const handleImportClick = () => {
    fileInputRef.current?.click();
  };

  const handleImportEnv = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    setLoading(true);
    try {
      const res = await API.post('/api/server/config/import', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const { success, message } = res.data;
      if (success) {
        showSuccess(message);
      } else {
        showError(message);
      }
    } catch (error) {
      showError('导入失败，请检查文件格式');
    }
    setLoading(false);
    e.target.value = '';
  };

  const renderConfigInput = (item) => {
    const { key, value, restart_required } = item;

    if (isBooleanKey(key)) {
      return (
        <Form.Group inline key={key}>
          <Form.Checkbox
            checked={value === 'true'}
            label={
              <label>
                {key}
                {restart_required && (
                  <Label size='tiny' color='yellow' style={{ marginLeft: 8 }}>
                    <Icon name='refresh' />需要重启生效
                  </Label>
                )}
              </label>
            }
            onChange={() => handleToggle(key)}
          />
        </Form.Group>
      );
    }

    if (key === 'db_type') {
      return (
        <Form.Group widths='equal' key={key}>
          <Form.Input
            label={
              <label>
                {key}
                {restart_required && (
                  <Label size='tiny' color='yellow' style={{ marginLeft: 8 }}>
                    <Icon name='refresh' />需要重启生效
                  </Label>
                )}
              </label>
            }
            value={value}
            readOnly
            icon='info circle'
            iconPosition='left'
          />
        </Form.Group>
      );
    }

    return (
      <Form.Group widths='equal' key={key}>
        <Form.Input
          label={
            <label>
              {key}
              {restart_required && (
                <Label size='tiny' color='yellow' style={{ marginLeft: 8 }}>
                  <Icon name='refresh' />需要重启生效
                </Label>
              )}
            </label>
          }
          placeholder={item.default_value}
          value={value}
          type={isSecretKey(key) ? 'password' : isNumericKey(key) ? 'number' : 'text'}
          onChange={(e, { value: v }) => handleValueChange(key, v)}
          action={
            !restart_required && (
              <Button color='green' onClick={() => handleSaveRuntime(key)}>
                保存
              </Button>
            )
          }
        />
      </Form.Group>
    );
  };

  return (
    <Grid columns={1}>
      <Grid.Column>
        <Message info>
          <Message.Header>
            <Icon name='info circle' />
            关于服务器配置
          </Message.Header>
          <p>
            此处显示的是通过环境变量或命令行参数配置的服务器设置。部分设置修改后需要重启服务才能生效。
            您可以使用「下载 .env」按钮导出完整配置，修改后重启即可。
          </p>
        </Message>

        <div style={{ marginBottom: 20 }}>
          <Button
            color='blue'
            loading={downloadLoading}
            onClick={handleDownloadEnv}
            style={{ marginRight: 10 }}
          >
            <Icon name='download' />
            下载 .env
          </Button>
          <Button color='teal' onClick={handleImportClick}>
            <Icon name='upload' />
            导入 .env
          </Button>
          <input
            ref={fileInputRef}
            type='file'
            accept='.env,.txt'
            style={{ display: 'none' }}
            onChange={handleImportEnv}
          />
          <Button
            color='grey'
            onClick={getConfigs}
            style={{ marginLeft: 10 }}
          >
            <Icon name='refresh' />
            刷新
          </Button>
        </div>

        <Form loading={loading}>
          {categories.map((cat) => {
            const catConfigs = getConfigsByCategory(cat.key);
            if (catConfigs.length === 0) return null;

            return (
              <div key={cat.key}>
                <Header as='h3'>
                  <Icon name={cat.icon} />
                  <Header.Content>
                    {cat.title}
                    <Header.Subheader>
                      共 {catConfigs.length} 项配置
                    </Header.Subheader>
                  </Header.Content>
                </Header>

                {catConfigs.map((item) => renderConfigInput(item))}

                <Divider />
              </div>
            );
          })}
        </Form>
      </Grid.Column>
    </Grid>
  );
};

export default ServerConfigSetting;