xinghen.work/src/pages/HelpPage.tsx

import { Children, isValidElement, useEffect, useMemo, useState, type ReactNode } from 'react'
import {
  ArrowLeft,
  ChevronDown,
  ChevronUp,
  FileQuestion,
  Layers,
  MessageCircle,
  MessageSquare,
  Search,
  UploadCloud,
  UserCheck,
  Video,
} from 'lucide-react'
import { Link } from 'react-router-dom'
import { ContactModal } from '../components/ContactModal'
import { Brand } from '../components/Brand'
import { Footer } from '../components/Footer'
import { useAuth } from '../AuthContext'

interface FAQItem {
  id: string
  category: 'getting-started' | 'materials' | 'production' | 'account'
  question: string
  answer: ReactNode
}

const FEATURE_LIST = [
  { icon: Layers, title: '结构化大纲编排', description: '支持按集管理课程知识点、逐字稿讲义与预估时长，告别混乱的文档传输与版本断层。' },
  { icon: UserCheck, title: '数字讲师资产库', description: '个人和组织工作区分别管理数字讲师。课程可选择本工作区的一位讲师。' },
  { icon: UploadCloud, title: '全格式课件归集', description: 'PPT、PDF、教学讲义集中云端归档，自动匹配分集内容，让每一次制作都有迹可循。' },
  { icon: Video, title: '专业制作与成果交付', description: '一键提交进入流水线制作，在线实时跟踪制作状态，成片交付支持在线即时预览与下载。' },
]

const WORKFLOW_LIST = [
  { step: '01', title: '创建课程', description: '录入课程名称、分类和简介，或直接选择系统提供的官方范例模板一键快速生成。' },
  { step: '02', title: '编排大纲与台词', description: '添加分集，填写每集知识主题与口播讲义，设定课程节奏。' },
  { step: '03', title: '选择讲师与上传课件', description: '从工作区选择数字讲师，上传参考照片、录音和配套课件；提交制作前补齐讲师照片和录音。' },
  { step: '04', title: '提交制作与交付', description: '确认无误后提交，顾问团队排期制作，完成后在工作区一键获取成品。' },
]

const CATEGORIES = [
  { key: 'all', label: '全部问题' },
  { key: 'getting-started', label: '入门与创建' },
  { key: 'materials', label: '课件与素材规范' },
  { key: 'production', label: '制作与交付' },
  { key: 'account', label: '服务与支持' },
] as const

const FAQ_LIST: FAQItem[] = [
  {
    id: 'what-is-xinghen',
    category: 'getting-started',
    question: '星痕·智能课程工坊是什么？它能为我做什么？',
    answer:
      '星痕是一个专为知识创作者、讲师和教研团队打造的数字化课程生产工坊。通过标准化的分集大纲编排、讲师形象资产归集与课件整理，星痕能将您的教案素材高效转化为高质量的音视频课件与数字化成品。',
  },
  {
    id: 'how-to-start',
    category: 'getting-started',
    question: '制作一门新课程的标准流程是怎样的？',
    answer: (
      <div>
        <p style={{ margin: '0 0 8px' }}>制作一门完整的课程通常包含以下 4 个步骤：</p>
        <ol style={{ margin: 0, paddingLeft: '20px', lineHeight: 1.8 }}>
          <li><strong>创建课程</strong>：填写课程主题、分类与简介，也可直接从官方模板一键生成；</li>
          <li><strong>编排分集大纲</strong>：添加各个分集的章节名称、预计时长与口播逐字稿；</li>
          <li><strong>配置讲师与上传素材</strong>：从工作区资产库选择一位数字讲师，上传照片、录音及配套 PPT 课件；照片和录音可稍后补齐，但提交制作前必须齐备；</li>
          <li><strong>提交制作</strong>：确认材料无误后点击“提交制作”，制作团队将跟进合成并交付最终视频。</li>
        </ol>
      </div>
    ),
  },
  {
    id: 'course-templates',
    category: 'getting-started',
    question: '新手可以如何快速体验？有预设模板吗？',
    answer:
      '在创建课程页面，我们提供了多种精选的官方课程模板（如企业培训、通识科普、专业讲座等）。使用示例后，可在课程页选择工作区数字讲师；模板不会自动生成可用于制作的讲师。',
  },
  {
    id: 'ppt-requirements',
    category: 'materials',
    question: '上传 PPT / 课件文件有什么格式和要求？',
    answer:
      '支持常见的 PPT、PPTX、PDF 以及压缩包文件。建议课件页面比例为 16:9（1920×1080 最佳），文字排版留有合适边距；若包含特殊字体或复杂排版动画，建议在提交前同步导出或上传一份 PDF 副本以便制作核对。',
  },
  {
    id: 'instructor-photo-guidelines',
    category: 'materials',
    question: '讲师照片与出镜形象有什么拍摄或上传规范？',
    answer: (
      <div>
        <p style={{ margin: '0 0 6px' }}>为保证最终合成的画质与真实感，推荐遵守以下要求：</p>
        <ul style={{ margin: 0, paddingLeft: '18px', lineHeight: 1.7 }}>
          <li><strong>背景要求</strong>：优先使用纯色背景（白底/绿幕/纯色墙面）或已抠图的透明背景 PNG；</li>
          <li><strong>姿态清晰</strong>：支持上传站姿、坐姿等高清照片，面部与服饰光线充足均匀，避免逆光与重度阴影；</li>
          <li><strong>格式大小</strong>：支持 JPG、PNG、WebP 等格式，单张建议在 5MB 以内。</li>
        </ul>
      </div>
    ),
  },
  {
    id: 'script-writing-tips',
    category: 'materials',
    question: '分集逐字稿（口播文案）怎么写更利于制作？',
    answer:
      '建议逐字稿使用通俗易懂的口语化表达，按讲解节奏合理分段并添加标点符号；对于生僻字、英文缩写或专业术语，可标注拼音或中文读音，以确保声音合成与讲解语调准确自然。',
  },
  {
    id: 'production-timeline',
    category: 'production',
    question: '课程提交制作后，通常需要多长时间交付？',
    answer:
      '提交制作后，课程会进入“等待制作”队列。通常 1~3 集的轻量课程在 1~3 个工作日内完成初版合成与质检；多集复杂课程将根据总时长与排期协商交付时间。您可以在控制台随时关注最新进度。',
  },
  {
    id: 'course-statuses-meaning',
    category: 'production',
    question: '课程的不同状态分别代表什么意思？',
    answer: (
      <div>
        <p style={{ margin: '0 0 6px' }}>课程生命周期包含以下状态：</p>
        <ul style={{ margin: 0, paddingLeft: '18px', lineHeight: 1.7 }}>
          <li><span className="status status--draft">草稿 DRAFT</span>：正在编辑完善阶段，可随时增删分集与素材；</li>
          <li><span className="status status--waiting_production">等待制作 WAITING</span>：已确认并提交，等待制作团队认领排期；</li>
          <li><span className="status status--in_production">制作中 IN PRODUCTION</span>：团队正在进行音视频渲染、剪辑与合成；</li>
          <li><span className="status status--completed">已完成 COMPLETED</span>：制作完成，所有分集交付物已上架供下载。</li>
        </ul>
      </div>
    ),
  },
  {
    id: 'edit-after-submit',
    category: 'production',
    question: '提交制作后如果发现材料有误，还能修改吗？',
    answer:
      '课程提交后工作区将进入锁定保护状态，以保证制作期间版本的一致性。如需紧急更新脚本或替换课件，可直接点击页面底部的“联系制作顾问”加入微信沟通群，告知客服进行素材补充或退回调整。',
  },
  {
    id: 'deliverables-download',
    category: 'production',
    question: '制作完成后我如何查看和下载最终成品？',
    answer:
      '课程状态变更为“已完成”后，进入该课程工作区即可看到绿色的「已交付成果」面板。您可以直接在线播放预览成片，或一键下载 MP4 高清视频文件及配套课件成果。',
  },
  {
    id: 'how-to-contact',
    category: 'account',
    question: '遇到问题如何联系官方制作顾问与技术支持？',
    answer:
      '您可以点击页面上的“联系顾问”按钮，扫描弹窗中的二维码加入「星痕课程制作沟通群」，将有专属制作顾问为您提供一对一咨询、进度追踪与课件定制支持。',
  },
  {
    id: 'profile-and-security',
    category: 'account',
    question: '如何修改我的联系人姓名或登录密码？',
    answer:
      '点击顶部导航栏右上角的个人账号名称（或前往「个人中心 /profile」），即可修改联系人姓名、微信号或登录密码。所属组织由组织管理员或平台管理员管理。',
  },
]

function nodeToText(node: ReactNode): string {
  if (typeof node === 'string' || typeof node === 'number') return String(node)
  if (!isValidElement<{ children?: ReactNode }>(node)) return ''
  return Children.toArray(node.props.children).map(nodeToText).join(' ')
}

function matchesSearch(values: string[], keyword: string) {
  const terms = keyword.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean)
  if (terms.length === 0) return true
  const content = values.join(' ').toLocaleLowerCase()
  return terms.every((term) => content.includes(term))
}

export function HelpPage() {
  const { user } = useAuth()
  const [activeCategory, setActiveCategory] = useState<string>('all')
  const [searchKeyword, setSearchKeyword] = useState<string>('')
  const [openId, setOpenId] = useState<string | null>('what-is-xinghen')
  const [showContact, setShowContact] = useState<boolean>(false)

  const toggleAccordion = (id: string) => {
    setOpenId((prev) => (prev === id ? null : id))
  }

  const isSearching = searchKeyword.trim().length > 0
  const filteredFeatures = useMemo(
    () => FEATURE_LIST.filter((item) => matchesSearch([item.title, item.description], searchKeyword)),
    [searchKeyword],
  )
  const filteredWorkflow = useMemo(
    () => WORKFLOW_LIST.filter((item) => matchesSearch([item.title, item.description], searchKeyword)),
    [searchKeyword],
  )
  const filteredFaqs = useMemo(() => FAQ_LIST.filter((item) => {
    const matchCategory = isSearching || activeCategory === 'all' || item.category === activeCategory
    return matchCategory && matchesSearch([item.question, nodeToText(item.answer)], searchKeyword)
  }), [activeCategory, isSearching, searchKeyword])
  const searchResultCount = filteredFeatures.length + filteredWorkflow.length + filteredFaqs.length

  useEffect(() => {
    if (isSearching && filteredFaqs.length > 0) setOpenId(filteredFaqs[0].id)
  }, [isSearching, searchKeyword])

  return (
    <div className="page help-page">
      <Link to="/" className="back-link">
        <ArrowLeft size={16} /> {user ? '返回我的课程' : '返回首页'}
      </Link>

      {/* 顶部介绍区 */}
      <section className="help-hero">
        <div className="help-hero-content">
          <h1>帮助与使用指南</h1>
          <p className="help-hero-desc">
            了解星痕智能课程工坊的运作模式、素材规范与制作交付流程，让好课制作更轻松。
          </p>

          <div className="help-search-bar">
            <Search size={18} className="search-icon" />
            <input
              aria-label="搜索帮助页面内容"
              type="text"
              placeholder="搜索常见问题，例如：PPT要求、制作周期、讲师照片..."
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
            />
            {searchKeyword && (
              <button
                type="button"
                className="clear-search-btn"
                onClick={() => setSearchKeyword('')}
              >
                清空
              </button>
            )}
          </div>
          <div className="help-search-status" aria-live="polite">
            {isSearching && `找到 ${searchResultCount} 条与“${searchKeyword.trim()}”相关的内容`}
          </div>
        </div>
      </section>

      {/* 网站介绍与核心能力 */}
      {(!isSearching || filteredFeatures.length > 0) && <section className="help-section">
        <div className="help-section-header">
          <h2>认识星痕课程工坊</h2>
          <p>删去繁复，以工业级标准化流程助力数字化课程高效产出</p>
        </div>

        <div className={`help-feature-grid ${isSearching ? 'is-search-results' : ''}`}>
          {filteredFeatures.map(({ icon: Icon, title, description }) => <div className="help-feature-card" key={title}>
            <div className="feature-icon-box"><Icon size={22} /></div>
            <h3>{title}</h3><p>{description}</p>
          </div>)}
        </div>
      </section>}

      {/* 快速入门 4 步流程 */}
      {(!isSearching || filteredWorkflow.length > 0) && <section className="help-section">
        <div className="help-section-header">
          <h2>课程制作四步法</h2>
          <p>从创意构思到拿到成品成片，只需要清晰的四步</p>
        </div>

        <div className={`help-steps-grid ${isSearching ? 'is-search-results' : ''}`}>
          {filteredWorkflow.map(({ step, title, description }) => <div className="help-step-item" key={step}>
            <div className="step-badge">{step}</div>
            <div className="step-item-body"><h4>{title}</h4><p>{description}</p></div>
          </div>)}
        </div>
      </section>}

      {/* 常见问题 FAQ */}
      {(!isSearching || filteredFaqs.length > 0) && <section className="help-section">
        <div className="help-section-header">
          <h2>常见问题解答</h2>
          <p>遇到疑问？这里整理了大家最常咨询的操作与制作问题</p>
        </div>

        {/* 分类过滤标签 */}
        {!isSearching && <div className="faq-category-tabs">
          {CATEGORIES.map((cat) => (
            <button
              key={cat.key}
              type="button"
              className={`faq-tab-btn ${activeCategory === cat.key ? 'active' : ''}`}
              onClick={() => setActiveCategory(cat.key)}
            >
              {cat.label}
            </button>
          ))}
        </div>}

        {/* 问答列表 */}
        <div className="faq-accordion-list">
          {filteredFaqs.length === 0 ? (
            <div className="faq-empty-state">
              <FileQuestion size={36} />
              <h4>未找到匹配的问题</h4>
              <p>试着换个搜索关键词，或直接联系制作顾问获取支持。</p>
            </div>
          ) : (
            filteredFaqs.map((faq) => {
              const isOpen = openId === faq.id
              return (
                <div
                  key={faq.id}
                  className={`faq-accordion-item ${isOpen ? 'is-open' : ''}`}
                >
                  <button
                    type="button"
                    className="faq-question-btn"
                    onClick={() => toggleAccordion(faq.id)}
                    aria-expanded={isOpen}
                  >
                    <span className="faq-question-text">{faq.question}</span>
                    <span className="faq-chevron-icon">
                      {isOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
                    </span>
                  </button>
                  {isOpen && (
                    <div className="faq-answer-content">
                      <div className="faq-answer-inner">{faq.answer}</div>
                    </div>
                  )}
                </div>
              )
            })
          )}
        </div>
      </section>}

      {isSearching && searchResultCount === 0 && <div className="faq-empty-state help-search-empty">
        <FileQuestion size={36} />
        <h4>未找到相关内容</h4>
        <p>试着缩短关键词、使用其他说法，或清空搜索查看全部帮助内容。</p>
        <button type="button" className="secondary-button" onClick={() => setSearchKeyword('')}>查看全部内容</button>
      </div>}

      {/* 底部联系支持卡片 */}
      <section className="help-contact-banner">
        <div className="contact-banner-content">
          <div className="contact-banner-icon">
            <MessageSquare size={28} />
          </div>
          <div>
            <h3>还有其他疑问或需要定制支持？</h3>
            <p>
              加入星痕专属制作沟通群，制作顾问与技术团队将为您提供 1 对 1 咨询与进度同步。
            </p>
          </div>
        </div>
        <div className="contact-banner-action">
          <button
            type="button"
            className="primary-button"
            onClick={() => setShowContact(true)}
          >
            <MessageCircle size={16} /> 联系制作顾问
          </button>
        </div>
      </section>

      {/* 联系顾问弹窗 */}
      {showContact && <ContactModal onClose={() => setShowContact(false)} />}
    </div>
  )
}

export function PublicHelpPage() {
  return (
    <div className="marketing-page auth-wrapper">
      <header className="marketing-nav public-help-nav">
        <Link to="/mkt" aria-label="星痕首页"><Brand /></Link>
        <div className="marketing-nav-actions">
          <Link className="marketing-login" to="/login">登录</Link>
          <Link className="primary-button small-button" to="/login?mode=register">免费注册</Link>
        </div>
      </header>
      <main className="app-main"><HelpPage /></main>
      <Footer />
    </div>
  )
}