// src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
// 通用可折叠区块组件

import React, { useState } from 'react';
import {
  Box,
  Collapse,
  useColorModeValue,
} from '@chakra-ui/react';
import CollapsibleHeader from './CollapsibleHeader';

/**
 * 通用可折叠区块组件
 * @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.isLocked - 是否锁定（不可展开）
 * @param {Function} props.onLockedClick - 锁定时点击的回调
 * @param {React.ReactNode} props.children - 详细内容
 * @param {React.ReactNode} props.simpleContent - 精简模式的内容（可选）
 * @param {boolean} props.showModeToggle - 是否显示模式切换按钮（默认 false）
 * @param {string} props.defaultMode - 默认模式：'detailed' | 'simple'（默认 'detailed'）
 */
const CollapsibleSection = ({
  title,
  isOpen,
  onToggle,
  count = null,
  subscriptionBadge = null,
  isLocked = false,
  onLockedClick = null,
  children,
  simpleContent = null,
  showModeToggle = false,
  defaultMode = 'detailed'
}) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');

  // 模式状态：'detailed' | 'simple'
  const [displayMode, setDisplayMode] = useState(defaultMode);

  // 处理点击：如果锁定则触发锁定回调，否则触发正常切换
  const handleToggle = () => {
    if (isLocked && onLockedClick) {
      onLockedClick();
    } else if (!isLocked) {
      onToggle();
    }
  };

  // 处理模式切换
  const handleModeToggle = (e) => {
    e.stopPropagation(); // 阻止冒泡到标题栏的 onToggle

    if (isLocked && onLockedClick) {
      // 如果被锁定，触发付费弹窗
      onLockedClick();
      return;
    }

    if (displayMode === 'detailed') {
      // 从详细模式切换到精简模式
      setDisplayMode('simple');
    } else {
      // 从精简模式切换回详细模式
      setDisplayMode('detailed');
      // 切换回详细模式时，如果未展开则自动展开
      if (!isOpen && onToggle) {
        onToggle();
      }
    }
  };

  // 渲染精简模式
  const renderSimpleMode = () => {
    if (!simpleContent) return null;

    return (
      <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
        {simpleContent}
      </Box>
    );
  };

  // 渲染详细模式
  const renderDetailedMode = () => {
    return (
      <Collapse
        in={isOpen && !isLocked}
        animateOpacity
        unmountOnExit={false}
        startingHeight={0}
      >
        <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
          {children}
        </Box>
      </Collapse>
    );
  };

  return (
    <Box>
      <CollapsibleHeader
        title={title}
        isOpen={isOpen}
        onToggle={handleToggle}
        count={count}
        subscriptionBadge={subscriptionBadge}
        showModeToggle={showModeToggle}
        currentMode={displayMode}
        onModeToggle={handleModeToggle}
        isLocked={isLocked}
      />

      {/* 根据当前模式渲染对应内容 */}
      {displayMode === 'simple' ? renderSimpleMode() : renderDetailedMode()}
    </Box>
  );
};

export default CollapsibleSection;