'use client';

import { useState } from 'react';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import styles from './help.module.scss';

/**
 * 推荐文档数据接口
 */
interface RecommendedDoc {
  id: string;
  title: string;
  description: string;
}

/**
 * 文档列表数据接口
 */
interface DocItem {
  id: string;
  title: string;
  category: string;
  lastUpdate: string;
}

/**
 * FAQ 数据接口
 */
interface FAQItem {
  question: string;
  answer: string;
}

// 推荐文档数据
const recommendedDocs: RecommendedDoc[] = [
  {
    id: '1',
    title: '如何进行首次认种？',
    description: '本文将引导您完成从注册到成功认种第一棵榴莲树的全部流程...',
  },
  {
    id: '2',
    title: '结算参数配置指南',
    description: '详细解释各项结算参数的含义，以及如何根据业务需求进行配置...',
  },
  {
    id: '3',
    title: '龙虎榜规则详解',
    description: '了解日榜、周榜、月榜的计算逻辑，以及虚拟账户的排名规则...',
  },
];

// 文档列表数据
const docList: DocItem[] = [
  { id: '1', title: '考核规则设置说明', category: '系统设置', lastUpdate: '2023-10-25' },
  { id: '2', title: '用户管理与角色授权', category: '账号安全', lastUpdate: '2023-10-24' },
  { id: '3', title: '认种限额策略配置', category: '系统设置', lastUpdate: '2023-10-22' },
  { id: '4', title: '前端热度展示方式说明', category: '系统设置', lastUpdate: '2023-10-20' },
];

// FAQ 数据
const faqData: FAQItem[] = [
  {
    question: 'Q: 忘记密码怎么办？',
    answer: 'A: 您可以通过登录页面的"忘记密码"链接，使用注册邮箱或手机号重置密码。',
  },
  {
    question: 'Q: 如何导出数据报表？',
    answer: 'A: 在"数据统计"页面，选择您需要的时间范围和数据类型，然后点击右上角的"导出"按钮即可。',
  },
  {
    question: 'Q: 敏感操作审批流程是怎样的？',
    answer: 'A: 当您执行一项被标记为敏感的操作时，系统会要求多名管理员进行审批。只有达到预设的审批人数后，操作才会生效。',
  },
];

// 搜索图标
const SearchIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="8" />
    <path d="M21 21l-4.35-4.35" />
  </svg>
);

// 点赞图标
const ThumbUpIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
  </svg>
);

// 点踩图标
const ThumbDownIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
  </svg>
);

// 电话图标
const PhoneIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
  </svg>
);

// 邮件图标
const MailIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
    <polyline points="22,6 12,13 2,6" />
  </svg>
);

// 聊天图标
const ChatIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>
);

export default function HelpPage() {
  const [searchKeyword, setSearchKeyword] = useState('');

  return (
    <PageContainer title="帮助中心">
      <div className={styles.help}>
        {/* 页面头部 */}
        <header className={styles.help__header}>
          <h1 className={styles.help__title}>帮助中心</h1>
        <p className={styles.help__desc}>查找文档、常见问题解答，或联系我们的支持团队。</p>
        <div className={styles.help__searchBox}>
          <span className={styles.help__searchIcon}>
            <SearchIcon />
          </span>
          <input
            type="text"
            className={styles.help__searchInput}
            placeholder="搜索文档或问题..."
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
          />
        </div>
      </header>

      {/* 推荐文档 */}
      <section className={styles.help__section}>
        <h2 className={styles.help__sectionTitle}>推荐文档</h2>
        <div className={styles.help__docCards}>
          {recommendedDocs.map((doc) => (
            <div key={doc.id} className={styles.help__docCard}>
              <h3 className={styles.help__docCardTitle}>{doc.title}</h3>
              <p className={styles.help__docCardDesc}>{doc.description}</p>
              <div className={styles.help__docCardFooter}>
                <span className={styles.help__docCardQuestion}>这篇文章有用吗？</span>
                <div className={styles.help__docCardBtns}>
                  <button className={styles.help__docCardBtn}>
                    <ThumbUpIcon />
                    <span>有用</span>
                  </button>
                  <button className={styles.help__docCardBtn}>
                    <ThumbDownIcon />
                    <span>没用</span>
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 文档列表 */}
      <section className={styles.help__section}>
        <h2 className={styles.help__sectionTitle}>文档列表</h2>
        <div className={styles.help__tableWrapper}>
          <div className={styles.help__table}>
            <div className={styles.help__tableHead}>
              <div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--title'])}>标题</div>
              <div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--category'])}>分类</div>
              <div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--date'])}>最后更新</div>
              <div className={cn(styles.help__tableHeadCell, styles['help__tableHeadCell--rating'])}>评价</div>
            </div>
            <div className={styles.help__tableBody}>
              {docList.map((doc) => (
                <div key={doc.id} className={styles.help__tableRow}>
                  <div className={cn(styles.help__tableCell, styles['help__tableCell--title'])}>{doc.title}</div>
                  <div className={cn(styles.help__tableCell, styles['help__tableCell--category'])}>{doc.category}</div>
                  <div className={cn(styles.help__tableCell, styles['help__tableCell--date'])}>{doc.lastUpdate}</div>
                  <div className={cn(styles.help__tableCell, styles['help__tableCell--rating'])}>
                    <button className={styles.help__ratingBtn}>
                      <ThumbUpIcon />
                    </button>
                    <button className={styles.help__ratingBtn}>
                      <ThumbDownIcon />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ 和联系支持 */}
      <div className={styles.help__bottomSection}>
        {/* 常见问题 */}
        <div className={styles.help__faqCard}>
          <h2 className={styles.help__faqTitle}>常见问题 (FAQ)</h2>
          <div className={styles.help__faqList}>
            {faqData.map((faq, index) => (
              <div key={index} className={styles.help__faqItem}>
                <p className={styles.help__faqQuestion}>{faq.question}</p>
                <p className={styles.help__faqAnswer}>{faq.answer}</p>
              </div>
            ))}
          </div>
        </div>

        {/* 联系支持 */}
        <div className={styles.help__contactCard}>
          <h2 className={styles.help__contactTitle}>联系支持</h2>
          <div className={styles.help__contactList}>
            <div className={styles.help__contactItem}>
              <span className={styles.help__contactIcon}>
                <PhoneIcon />
              </span>
              <div className={styles.help__contactInfo}>
                <p className={styles.help__contactLabel}>技术支持热线</p>
                <p className={styles.help__contactValue}>400-123-4567 (工作日 9:00 - 18:00)</p>
              </div>
            </div>
            <div className={styles.help__contactItem}>
              <span className={styles.help__contactIcon}>
                <MailIcon />
              </span>
              <div className={styles.help__contactInfo}>
                <p className={styles.help__contactLabel}>支持邮箱</p>
                <p className={styles.help__contactValue}>support@durian-adopt.com</p>
              </div>
            </div>
            <div className={styles.help__contactItem}>
              <span className={styles.help__contactIcon}>
                <ChatIcon />
              </span>
              <div className={styles.help__contactInfo}>
                <p className={styles.help__contactLabel}>在线客服</p>
                <p className={styles.help__contactValue}>点击右下角浮动窗口，立即与我们的客服代表在线沟通。</p>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
    </PageContainer>
  );
}