// src/views/Community/components/DynamicNewsDetail/CollapsibleHeader.js
// 可折叠模块标题组件

import React from 'react';
import {
  Box,
  Flex,
  HStack,
  Heading,
  Badge,
  IconButton,
  Button,
  useColorModeValue,
} from '@chakra-ui/react';
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';

/**
 * 可折叠模块标题组件
 * @param {Object} props
 * @param {string} props.title - 标题文本
 * @param {boolean} props.isOpen - 是否展开
 * @param {Function} props.onToggle - 切换展开/收起的回调
 * @param {number} props.count - 可选的数量徽章
 * @param {React.ReactNode} props.subscriptionBadge - 可选的会员标签组件
 * @param {boolean} props.showModeToggle - 是否显示模式切换按钮（默认 false）
 * @param {string} props.currentMode - 当前模式：'detailed' | 'simple'
 * @param {Function} props.onModeToggle - 模式切换回调
 * @param {boolean} props.isLocked - 是否锁定（不可展开）
 */
const CollapsibleHeader = ({
  title,
  isOpen,
  onToggle,
  count = null,
  subscriptionBadge = null,
  showModeToggle = false,
  currentMode = 'detailed',
  onModeToggle = null,
  isLocked = false
}) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const hoverBg = useColorModeValue('gray.100', 'gray.700');
  const headingColor = useColorModeValue('gray.700', 'gray.200');

  // 获取按钮文案
  const getButtonText = () => {
    if (currentMode === 'simple') {
      return '查看详情';  // 简单模式时，按钮显示"查看详情"
    }
    return '精简模式';    // 详细模式时，按钮显示"精简模式"
  };

  // 获取按钮图标
  const getButtonIcon = () => {
    if (currentMode === 'simple') {
      return null; // 简单模式不显示图标
    }
    // 详细模式：展开显示向上箭头，收起显示向下箭头
    return isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />;
  };

  return (
    <Flex
      justify="space-between"
      align="center"
      cursor={showModeToggle ? 'default' : 'pointer'}
      onClick={showModeToggle ? undefined : onToggle}
      p={3}
      bg={sectionBg}
      borderRadius="md"
      _hover={showModeToggle ? {} : { bg: hoverBg }}
      transition="background 0.2s"
    >
      <HStack spacing={2}>
        <Heading size="sm" color={headingColor}>
          {title}
        </Heading>
        {subscriptionBadge && (
          <Box>
            {subscriptionBadge}
          </Box>
        )}
        {count !== null && count > 0 && (
          <Badge colorScheme="blue" borderRadius="full">
            {count}
          </Badge>
        )}
      </HStack>

      {/* 只有 showModeToggle=true 时才显示模式切换按钮 */}
      {showModeToggle && onModeToggle && (
        <Button
          size="sm"
          variant="ghost"
          colorScheme="blue"
          rightIcon={getButtonIcon()}
          onClick={(e) => {
            e.stopPropagation();
            onModeToggle(e);
          }}
        >
          {getButtonText()}
        </Button>
      )}

      {/* showModeToggle=false 时显示原有的 IconButton */}
      {!showModeToggle && (
        <IconButton
          icon={isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
          size="sm"
          variant="ghost"
          aria-label={isOpen ? '收起' : '展开'}
        />
      )}
    </Flex>
  );
};

export default CollapsibleHeader;