import { useState } from 'react'
import { NavBar, Collapse } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import styles from './help.module.css'

const guideSections = [
  {
    key: 'login',
    title: '登录方式',
    icon: '🔐',
    content: [
      { q: '飞书内登录', a: '在飞书客户端中打开应用，系统会自动完成登录。' },
      { q: '飞书扫码登录', a: '点击「飞书扫码登录」，用飞书 APP 扫码确认登录。' },
      { q: '邮箱密码登录', a: '使用企业邮箱和密码登录系统。' }
    ]
  },
  {
    key: 'business-trip',
    title: '出差申请',
    icon: '✈️',
    content: [
      { q: '如何创建申请？', a: '进入「出差申请」，点击「新建申请」，填写信息后提交审批。' },
      { q: '草稿可以编辑吗？', a: '可以。草稿状态可以随时编辑修改。' },
      { q: '如何撤销申请？', a: '进入申请详情页，点击「撤销申请」确认即可。' }
    ]
  },
  {
    key: 'approval',
    title: '审批流程',
    icon: '📋',
    content: [
      { q: '如何审批？', a: '进入「审批」页面，选择申请查看详情，点击「通过」或「拒绝」。' },
      { q: '查看我的申请？', a: '在「审批」页面点击「我发起的」标签查看。' }
    ]
  },
  {
    key: 'profile',
    title: '个人中心',
    icon: '👤',
    content: [
      { q: '如何修改密码？', a: '进入「修改密码」页面，输入原密码和新密码，点击「确认修改」即可。' },
      { q: '支持哪些语言？', a: '系统支持简体中文、English、Русский、Español、Français 五种语言，可在首页或个人中心切换。' }
    ]
  },
  {
    key: 'faq',
    title: '常见问题',
    icon: '💡',
    content: [
      { q: '忘记密码？', a: '请联系管理员重置密码，或使用飞书扫码登录。' },
      { q: '如何切换语言？', a: '点击首页右上角的国旗图标，或在个人中心进行切换。' }
    ]
  }
]

export default function Help() {
  const [activeKey, setActiveKey] = useState<string[]>([])

  return (
    <div className={styles.help}>
      <NavBar backArrow>帮助中心</NavBar>
      <div className={styles.content}>
        <div className={styles.quickLinks}>
          <a href="/docs/user-guide.md" target="_blank" className={styles.quickLink}>
            <div className={styles.quickLinkIcon}>📖</div>
            <div className={styles.quickLinkText}>
              <div className={styles.quickLinkTitle}>用户手册</div>
              <div className={styles.quickLinkDesc}>查看完整使用说明</div>
            </div>
            <RightOutline />
          </a>
          <a href="mailto:support@example.com" className={styles.quickLink}>
            <div className={styles.quickLinkIcon}>📧</div>
            <div className={styles.quickLinkText}>
              <div className={styles.quickLinkTitle}>联系客服</div>
              <div className={styles.quickLinkDesc}>support@example.com</div>
            </div>
            <RightOutline />
          </a>
        </div>
        <div className={styles.sections}>
          {guideSections.map(section => (
            <div key={section.key} className={styles.section}>
              <div className={styles.sectionHeader}>
                <span className={styles.sectionIcon}>{section.icon}</span>
                <span className={styles.sectionTitle}>{section.title}</span>
              </div>
              <Collapse activeKey={activeKey} onChange={setActiveKey}>
                {section.content.map((item, index) => (
                  <Collapse.Panel key={`${section.key}-${index}`} title={item.q} className={styles.panel}>
                    <div className={styles.answer}>{item.a}</div>
                  </Collapse.Panel>
                ))}
              </Collapse>
            </div>
          ))}
        </div>
        <div className={styles.footer}>
          <div className={styles.version}>版本 1.0.0</div>
        </div>
      </div>
    </div>
  )
}