import React, { useEffect, useRef, useState } from 'react'

export default function CollapsibleUserGuide({ text, maxHeight = 160 }) {
  const [expanded, setExpanded] = useState(false)
  const [collapsible, setCollapsible] = useState(false)
  const bodyRef = useRef(null)

  useEffect(() => {
    try {
      const el = bodyRef.current
      if (!el) return
      // 渲染完成后判断是否需要折叠（内容高度超过 maxHeight）
      const h = el.scrollHeight || 0
      setCollapsible(h > Number(maxHeight) + 8)
    } catch (e) {
      // ignore
    }
  }, [text, maxHeight])

  if (!text) return null

  const effectiveMaxHeight = Math.max(60, Number(maxHeight) || 160)
  const showToggle = collapsible
  const isCollapsed = showToggle && !expanded

  return (
    <div className="collapsible-user-guide">
      <div
        ref={bodyRef}
        className={`cug-body ${isCollapsed ? 'collapsed' : 'expanded'}`}
        style={isCollapsed ? { maxHeight: `${effectiveMaxHeight}px` } : undefined}
      >
        <pre className="user-guide-content">{text}</pre>
        {isCollapsed && <div className="cug-fade" />}
      </div>
      {showToggle && (
        <button
          type="button"
          className="cug-toggle"
          onClick={() => setExpanded((v) => !v)}
          aria-expanded={expanded}
        >
          {expanded ? '收起' : '展开'}
        </button>
      )}
    </div>
  )
}