/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useEffect, useState, useContext } from 'react';
import {
  Button,
  Card,
  Col,
  Form,
  Row,
  Switch,
  Typography,
} from '@douyinfe/semi-ui';
import { API, showError, showSuccess } from '../../../helpers';
import { useTranslation } from 'react-i18next';
import { StatusContext } from '../../../context/Status';

const { Text } = Typography;

export default function SettingsHeaderNavModules(props) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [statusState, statusDispatch] = useContext(StatusContext);

  // 顶栏模块管理状态
  const [headerNavModules, setHeaderNavModules] = useState({
    home: {
      enabled: true,
      blurPricing: false,
      showCostPrice: false,
    },
    pricing: {
      enabled: true,
      requireAuth: false,
      blurPricing: false,
    },
    console: true,
    benchmark: true,
    docs: true,
  });
  const [showThemeToggle, setShowThemeToggle] = useState(true);
  const [showLanguageSelector, setShowLanguageSelector] = useState(true);

  // 处理顶栏模块配置变更
  function handleHeaderNavModuleChange(moduleKey) {
    return (checked) => {
      const newModules = { ...headerNavModules };
      if (moduleKey === 'pricing' || moduleKey === 'home') {
        newModules[moduleKey] = {
          ...newModules[moduleKey],
          enabled: checked,
        };
      } else {
        newModules[moduleKey] = checked;
      }
      setHeaderNavModules(newModules);
    };
  }

  // 处理模型广场权限控制变更
  function handlePricingAuthChange(checked) {
    const newModules = { ...headerNavModules };
    newModules.pricing = {
      ...newModules.pricing,
      requireAuth: checked,
    };
    setHeaderNavModules(newModules);
  }

  // 处理首页成本价展示开关变更（即时保存）
  function handleShowCostPriceChange(checked) {
    const newModules = { ...headerNavModules };
    newModules.home = {
      ...newModules.home,
      showCostPrice: checked,
    };
    setHeaderNavModules(newModules);
    (async () => {
      try {
        const res = await API.put('/api/option/', {
          key: 'HeaderNavModules',
          value: JSON.stringify(newModules),
        });
        const { success, message } = res.data;
        if (success) {
          showSuccess(t('保存成功'));
          statusDispatch({
            type: 'set',
            payload: {
              ...statusState.status,
              HeaderNavModules: JSON.stringify(newModules),
            },
          });
          if (props.refresh) {
            await props.refresh();
          }
        } else {
          showError(message);
          newModules.home = {
            ...newModules.home,
            showCostPrice: !checked,
          };
          setHeaderNavModules(newModules);
        }
      } catch {
        showError(t('保存失败，请重试'));
        newModules.home = {
          ...newModules.home,
          showCostPrice: !checked,
        };
        setHeaderNavModules(newModules);
      }
    })();
  }

  // 处理主题切换开关变更（即时保存）
  async function handleShowThemeToggleChange(checked) {
    setShowThemeToggle(checked);
    const key = 'HeaderShowThemeToggle';
    const value = String(checked);
    try {
      const res = await API.put('/api/option/', { key, value });
      if (res.data.success) {
        showSuccess(t('保存成功'));
        statusDispatch({
          type: 'set',
          payload: { ...statusState.status, [key]: value },
        });
      } else {
        showError(res.data.message);
        setShowThemeToggle(!checked);
      }
    } catch {
      showError(t('保存失败，请重试'));
      setShowThemeToggle(!checked);
    }
  }

  // 处理语言选择器开关变更（即时保存）
  async function handleShowLanguageSelectorChange(checked) {
    setShowLanguageSelector(checked);
    const key = 'HeaderShowLanguageSelector';
    const value = String(checked);
    try {
      const res = await API.put('/api/option/', { key, value });
      if (res.data.success) {
        showSuccess(t('保存成功'));
        statusDispatch({
          type: 'set',
          payload: { ...statusState.status, [key]: value },
        });
      } else {
        showError(res.data.message);
        setShowLanguageSelector(!checked);
      }
    } catch {
      showError(t('保存失败，请重试'));
      setShowLanguageSelector(!checked);
    }
  }

  // 处理模糊价格开关变更（即时保存）
  function handleBlurPricingChange(moduleKey) {
    return async (checked) => {
      const newModules = { ...headerNavModules };
      newModules[moduleKey] = {
        ...newModules[moduleKey],
        blurPricing: checked,
      };
      setHeaderNavModules(newModules);
      try {
        const res = await API.put('/api/option/', {
          key: 'HeaderNavModules',
          value: JSON.stringify(newModules),
        });
        const { success, message } = res.data;
        if (success) {
          showSuccess(t('保存成功'));
          statusDispatch({
            type: 'set',
            payload: {
              ...statusState.status,
              HeaderNavModules: JSON.stringify(newModules),
            },
          });
          if (props.refresh) {
            await props.refresh();
          }
        } else {
          showError(message);
          newModules[moduleKey] = { ...newModules[moduleKey], blurPricing: !checked };
          setHeaderNavModules(newModules);
        }
      } catch {
        showError(t('保存失败，请重试'));
        newModules[moduleKey] = { ...newModules[moduleKey], blurPricing: !checked };
        setHeaderNavModules(newModules);
      }
    };
  }

  // 重置顶栏模块为默认配置
  function resetHeaderNavModules() {
    const defaultModules = {
      home: {
        enabled: true,
        blurPricing: false,
        showCostPrice: false,
      },
      pricing: {
        enabled: true,
        requireAuth: false,
        blurPricing: false,
      },
      console: true,
      benchmark: true,
      docs: true,
    };
    setHeaderNavModules(defaultModules);
    showSuccess(t('已重置为默认配置'));
  }

  // 保存配置
  async function onSubmit() {
    setLoading(true);
    try {
      const res = await API.put('/api/option/', {
        key: 'HeaderNavModules',
        value: JSON.stringify(headerNavModules),
      });
      const { success, message } = res.data;
      if (success) {
        showSuccess(t('保存成功'));

        // 立即更新StatusContext中的状态
        statusDispatch({
          type: 'set',
          payload: {
            ...statusState.status,
            HeaderNavModules: JSON.stringify(headerNavModules),
          },
        });

        // 刷新父组件状态
        if (props.refresh) {
          await props.refresh();
        }
      } else {
        showError(message);
      }
    } catch (error) {
      showError(t('保存失败，请重试'));
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    // 从 props.options 中获取主题切换和语言选择器设置
    if (props.options) {
      const themeVal = props.options.HeaderShowThemeToggle;
      if (themeVal !== undefined && themeVal !== null) {
        setShowThemeToggle(themeVal === 'true' || themeVal === true);
      }
      const langVal = props.options.HeaderShowLanguageSelector;
      if (langVal !== undefined && langVal !== null) {
        setShowLanguageSelector(langVal === 'true' || langVal === true);
      }
    }
    // 从 props.options 中获取配置
    if (props.options && props.options.HeaderNavModules) {
      try {
        const modules = JSON.parse(props.options.HeaderNavModules);

        // 处理向后兼容性：如果home是boolean，转换为对象格式
        if (typeof modules.home === 'boolean') {
          modules.home = {
            enabled: modules.home,
            blurPricing: false,
            showCostPrice: false,
          };
        }

        // 处理向后兼容性：如果pricing是boolean，转换为对象格式
        if (typeof modules.pricing === 'boolean') {
          modules.pricing = {
            enabled: modules.pricing,
            requireAuth: false,
            blurPricing: false,
          };
        }

        // 确保 blurPricing 字段存在
        if (typeof modules.home === 'object' && modules.home.blurPricing === undefined) {
          modules.home.blurPricing = false;
        }
        if (typeof modules.home === 'object' && modules.home.showCostPrice === undefined) {
          modules.home.showCostPrice = false;
        }
        if (typeof modules.pricing === 'object' && modules.pricing.blurPricing === undefined) {
          modules.pricing.blurPricing = false;
        }

        setHeaderNavModules(modules);
      } catch (error) {
        // 使用默认配置
        const defaultModules = {
          home: {
            enabled: true,
            blurPricing: false,
            showCostPrice: false,
          },
          pricing: {
            enabled: true,
            requireAuth: false,
            blurPricing: false,
          },
          console: true,
          benchmark: true,
          docs: true,
        };
        setHeaderNavModules(defaultModules);
      }
    }
  }, [props.options]);

  // 获取模块是否启用
  function getModuleEnabled(moduleKey) {
    const val = headerNavModules[moduleKey];
    if (typeof val === 'object' && val !== null) {
      return val.enabled;
    }
    return !!val;
  }

  // 模块配置数据
  const moduleConfigs = [
    {
      key: 'home',
      title: t('首页'),
      description: t('用户主页，展示系统信息'),
      hasBlurPricing: true,
      hasCostPrice: true,
    },
    {
      key: 'pricing',
      title: t('模型'),
      description: t('模型定价，需要登录访问'),
      hasSubConfig: true,
      hasBlurPricing: true,
    },
    {
      key: 'console',
      title: t('控制台'),
      description: t('用户控制面板，管理账户'),
    },
    {
      key: 'benchmark',
      title: t('评测'),
      description: t('AI 模型评测与排行'),
    },
    {
      key: 'docs',
      title: t('文档'),
      description: t('系统文档和帮助信息'),
    },
  ];

  return (
    <Card>
      <Form.Section
        text={t('顶栏管理')}
        extraText={t('控制顶栏模块显示状态，全局生效')}
      >
        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          {moduleConfigs.map((module) => (
            <Col key={module.key} xs={24} sm={12} md={6} lg={6} xl={6}>
              <Card
                className='transition-shadow hover:shadow-md'
                style={{
                  borderRadius: '8px',
                  border: '1px solid var(--semi-color-border)',
                  transition: 'all 0.2s ease',
                  background: 'var(--semi-color-bg-1)',
                  minHeight: '80px',
                }}
                bodyStyle={{ padding: '16px' }}
              >
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    height: '100%',
                  }}
                >
                  <div style={{ flex: 1, textAlign: 'left' }}>
                    <div
                      style={{
                        fontWeight: '600',
                        fontSize: '14px',
                        color: 'var(--semi-color-text-0)',
                        marginBottom: '4px',
                      }}
                    >
                      {module.title}
                    </div>
                    <Text
                      type='secondary'
                      size='small'
                      style={{
                        fontSize: '12px',
                        color: 'var(--semi-color-text-2)',
                        lineHeight: '1.4',
                        display: 'block',
                      }}
                    >
                      {module.description}
                    </Text>
                  </div>
                  <div style={{ marginLeft: '16px' }}>
                    <Switch
                      checked={getModuleEnabled(module.key)}
                      onChange={handleHeaderNavModuleChange(module.key)}
                      size='default'
                    />
                  </div>
                </div>

                {/* 为模型广场添加权限控制子开关 */}
                {module.key === 'pricing' && getModuleEnabled(module.key) && (
                    <div
                      style={{
                        borderTop: '1px solid var(--semi-color-border)',
                        marginTop: '12px',
                        paddingTop: '12px',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                        }}
                      >
                        <div style={{ flex: 1, textAlign: 'left' }}>
                          <div
                            style={{
                              fontWeight: '500',
                              fontSize: '12px',
                              color: 'var(--semi-color-text-1)',
                              marginBottom: '2px',
                            }}
                          >
                            {t('需要登录访问')}
                          </div>
                          <Text
                            type='secondary'
                            size='small'
                            style={{
                              fontSize: '11px',
                              color: 'var(--semi-color-text-2)',
                              lineHeight: '1.4',
                              display: 'block',
                            }}
                          >
                            {t('开启后未登录用户无法访问模型广场')}
                          </Text>
                        </div>
                        <div style={{ marginLeft: '16px' }}>
                          <Switch
                            checked={
                              headerNavModules.pricing?.requireAuth || false
                            }
                            onChange={handlePricingAuthChange}
                            size='default'
                          />
                        </div>
                      </div>
                    </div>
                  )}

                {/* 未登录模糊价格子开关 */}
                {module.hasBlurPricing && getModuleEnabled(module.key) && (
                    <div
                      style={{
                        borderTop: '1px solid var(--semi-color-border)',
                        marginTop: '12px',
                        paddingTop: '12px',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                        }}
                      >
                        <div style={{ flex: 1, textAlign: 'left' }}>
                          <div
                            style={{
                              fontWeight: '500',
                              fontSize: '12px',
                              color: 'var(--semi-color-text-1)',
                              marginBottom: '2px',
                            }}
                          >
                            {t('未登录模糊价格')}
                          </div>
                          <Text
                            type='secondary'
                            size='small'
                            style={{
                              fontSize: '11px',
                              color: 'var(--semi-color-text-2)',
                              lineHeight: '1.4',
                              display: 'block',
                            }}
                          >
                            {t('开启后未登录用户看到的价格和供应商信息将模糊处理')}
                          </Text>
                        </div>
                        <div style={{ marginLeft: '16px' }}>
                          <Switch
                            checked={
                              headerNavModules[module.key]?.blurPricing || false
                            }
                            onChange={handleBlurPricingChange(module.key)}
                            size='default'
                          />
                        </div>
                      </div>
                    </div>
                  )}

                {/* 首页成本价展示子开关 */}
                {module.hasCostPrice && getModuleEnabled(module.key) && (
                    <div
                      style={{
                        borderTop: '1px solid var(--semi-color-border)',
                        marginTop: '12px',
                        paddingTop: '12px',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                        }}
                      >
                        <div style={{ flex: 1, textAlign: 'left' }}>
                          <div
                            style={{
                              fontWeight: '500',
                              fontSize: '12px',
                              color: 'var(--semi-color-text-1)',
                              marginBottom: '2px',
                            }}
                          >
                            {t('成本价')}
                          </div>
                          <Text
                            type='secondary'
                            size='small'
                            style={{
                              fontSize: '11px',
                              color: 'var(--semi-color-text-2)',
                              lineHeight: '1.4',
                              display: 'block',
                            }}
                          >
                            {t(
                              '开启后，供应商、代理商、管理员与超级管理员在首页模型详情侧栏「我的令牌」下方可查看各通道成本价',
                            )}
                          </Text>
                        </div>
                        <div style={{ marginLeft: '16px' }}>
                          <Switch
                            checked={
                              headerNavModules.home?.showCostPrice || false
                            }
                            onChange={handleShowCostPriceChange}
                            size='default'
                          />
                        </div>
                      </div>
                    </div>
                  )}
              </Card>
            </Col>
          ))}

          {/* 主题切换开关 */}
          <Col xs={24} sm={12} md={6} lg={6} xl={6}>
            <Card
              className='transition-shadow hover:shadow-md'
              style={{
                borderRadius: '8px',
                border: '1px solid var(--semi-color-border)',
                transition: 'all 0.2s ease',
                background: 'var(--semi-color-bg-1)',
                minHeight: '80px',
              }}
              bodyStyle={{ padding: '16px' }}
            >
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  height: '100%',
                }}
              >
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div
                    style={{
                      fontWeight: '600',
                      fontSize: '14px',
                      color: 'var(--semi-color-text-0)',
                      marginBottom: '4px',
                    }}
                  >
                    {t('主题切换')}
                  </div>
                  <Text
                    type='secondary'
                    size='small'
                    style={{
                      fontSize: '12px',
                      color: 'var(--semi-color-text-2)',
                      lineHeight: '1.4',
                      display: 'block',
                    }}
                  >
                    {t('顶栏显示主题切换按钮，允许用户切换亮色/暗色模式')}
                  </Text>
                </div>
                <div style={{ marginLeft: '16px' }}>
                  <Switch
                    checked={showThemeToggle}
                    onChange={handleShowThemeToggleChange}
                    size='default'
                  />
                </div>
              </div>
            </Card>
          </Col>

          {/* 语言选择器开关 */}
          <Col xs={24} sm={12} md={6} lg={6} xl={6}>
            <Card
              className='transition-shadow hover:shadow-md'
              style={{
                borderRadius: '8px',
                border: '1px solid var(--semi-color-border)',
                transition: 'all 0.2s ease',
                background: 'var(--semi-color-bg-1)',
                minHeight: '80px',
              }}
              bodyStyle={{ padding: '16px' }}
            >
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  height: '100%',
                }}
              >
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div
                    style={{
                      fontWeight: '600',
                      fontSize: '14px',
                      color: 'var(--semi-color-text-0)',
                      marginBottom: '4px',
                    }}
                  >
                    {t('语言选择器')}
                  </div>
                  <Text
                    type='secondary'
                    size='small'
                    style={{
                      fontSize: '12px',
                      color: 'var(--semi-color-text-2)',
                      lineHeight: '1.4',
                      display: 'block',
                    }}
                  >
                    {t('顶栏显示语言选择器，允许用户切换界面语言')}
                  </Text>
                </div>
                <div style={{ marginLeft: '16px' }}>
                  <Switch
                    checked={showLanguageSelector}
                    onChange={handleShowLanguageSelectorChange}
                    size='default'
                  />
                </div>
              </div>
            </Card>
          </Col>
        </Row>

        <div
          style={{
            display: 'flex',
            gap: '12px',
            justifyContent: 'flex-start',
            alignItems: 'center',
            paddingTop: '8px',
            borderTop: '1px solid var(--semi-color-border)',
          }}
        >
          <Button
            size='default'
            type='tertiary'
            onClick={resetHeaderNavModules}
            style={{
              borderRadius: '6px',
              fontWeight: '500',
            }}
          >
            {t('重置为默认')}
          </Button>
          <Button
            size='default'
            type='primary'
            onClick={onSubmit}
            loading={loading}
            style={{
              borderRadius: '6px',
              fontWeight: '500',
              minWidth: '100px',
            }}
          >
            {t('保存设置')}
          </Button>
        </div>
      </Form.Section>
    </Card>
  );
}
