'use client';

import React, { useState } from 'react';
import {
  MessageSquare,
  Terminal,
  Layers,
  Wifi,
  WifiOff,
  Plus,
  Trash2,
  Send,
  ChevronDown,
  ChevronRight,
} from 'lucide-react';

interface SectionProps {
  icon: React.ReactNode;
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
}

function Section({ icon, title, children, defaultOpen = false }: SectionProps) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="border border-border rounded-lg overflow-hidden">
      <button
        className="w-full flex items-center gap-3 px-4 py-3 bg-card hover:bg-accent/50 transition-colors text-left"
        onClick={() => setOpen((v) => !v)}
      >
        <span className="text-primary">{icon}</span>
        <span className="font-medium flex-1">{title}</span>
        {open ? <ChevronDown className="w-4 h-4 text-muted-foreground" /> : <ChevronRight className="w-4 h-4 text-muted-foreground" />}
      </button>
      {open && (
        <div className="px-4 py-4 space-y-3 text-sm text-muted-foreground border-t border-border bg-background">
          {children}
        </div>
      )}
    </div>
  );
}

function Tag({ children, color = 'default' }: { children: React.ReactNode; color?: 'green' | 'yellow' | 'red' | 'default' }) {
  const cls = {
    green: 'bg-green-900/30 text-green-400 border-green-800',
    yellow: 'bg-yellow-900/30 text-yellow-400 border-yellow-800',
    red: 'bg-red-900/30 text-red-400 border-red-800',
    default: 'bg-muted text-foreground border-border',
  }[color];
  return (
    <span className={`inline-block px-2 py-0.5 rounded border text-xs font-mono ${cls}`}>
      {children}
    </span>
  );
}

export default function HelpPage() {
  return (
    <div className="max-w-2xl mx-auto px-4 py-8 space-y-4">
      <div className="mb-6">
        <h1 className="text-2xl font-bold mb-1">使用帮助</h1>
        <p className="text-muted-foreground text-sm">了解如何使用 Boardware Agent Sandbox 的各项功能</p>
      </div>

      <Section icon={<MessageSquare className="w-5 h-5" />} title="如何开始对话" defaultOpen>
        <p>进入页面后，你会看到主界面分为左侧<strong className="text-foreground">对话列表</strong>和右侧<strong className="text-foreground">聊天区域</strong>。</p>
        <ol className="list-decimal list-inside space-y-1.5 ml-1">
          <li>在底部输入框中输入你的问题或指令</li>
          <li>按 <Tag>Enter</Tag> 发送，按 <Tag>Shift + Enter</Tag> 换行</li>
          <li>等待 Boardware Agent Sandbox 回复（右上角会显示"思考中..."）</li>
        </ol>
        <p className="mt-1">
          点击左上角的 <Tag>新对话</Tag> 按钮可以开启一个全新的对话，历史对话会保存在左侧列表中。
        </p>
      </Section>

      <Section icon={<Terminal className="w-5 h-5" />} title="斜杠命令（/命令）">
        <p>在输入框中输入 <Tag>/</Tag> 可以呼出命令选择菜单，列出所有可用的快捷指令。</p>
        <ul className="space-y-1.5 ml-1">
          <li>输入 <Tag>/</Tag> 后继续输入关键词可以过滤命令</li>
          <li>用 <Tag>↑</Tag> <Tag>↓</Tag> 方向键选择命令</li>
          <li>按 <Tag>Enter</Tag> 或 <Tag>Tab</Tag> 确认选择</li>
          <li>按 <Tag>Esc</Tag> 关闭命令菜单</li>
        </ul>
        <p>命令由内置功能或已安装的插件提供，可在<strong className="text-foreground">技能</strong>和<strong className="text-foreground">插件</strong>页面查看详情。</p>
      </Section>

      <Section icon={<Layers className="w-5 h-5" />} title="对话管理">
        <ul className="space-y-2 ml-1">
          <li>
            <span className="inline-flex items-center gap-1"><Plus className="w-3.5 h-3.5" /><strong className="text-foreground">新对话</strong></span>
            {' '}— 创建一个新的独立对话，不会影响现有对话
          </li>
          <li>
            <span className="inline-flex items-center gap-1"><MessageSquare className="w-3.5 h-3.5" /><strong className="text-foreground">切换对话</strong></span>
            {' '}— 点击左侧列表中的对话条目即可切换
          </li>
          <li>
            <span className="inline-flex items-center gap-1"><Trash2 className="w-3.5 h-3.5" /><strong className="text-foreground">删除对话</strong></span>
            {' '}— 鼠标悬停在对话条目上，点击右侧垃圾桶图标删除
          </li>
        </ul>
        <p className="text-xs mt-1 text-muted-foreground/70">对话历史保存在服务器端，刷新页面或重启前端后仍可查看。</p>
      </Section>

      <Section icon={<Wifi className="w-5 h-5" />} title="连接状态说明">
        <p>右上角导航栏会显示当前连接状态：</p>
        <div className="space-y-2 ml-1 mt-2">
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
            <Tag color="green">已连接</Tag>
            <span>— Boardware Agent Sandbox 服务正常运行，可以正常对话</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0" />
            <Tag color="yellow">连接中 / 检查中</Tag>
            <span>— 正在建立连接或检测服务状态，请稍等</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" />
            <Tag color="red">服务离线</Tag>
            <span>— 已连到后端接口，但 Boardware Agent Sandbox 服务当前不可用</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" />
            <Tag color="red">未连接</Tag>
            <span>— 无法连接到服务器，系统会自动重试</span>
          </div>
        </div>
        <p className="mt-3 text-xs">
          <strong className="text-foreground">提示：</strong>若长时间显示"服务离线"，请检查后端进程是否已启动并监听正确端口。
        </p>
      </Section>

      <Section icon={<Send className="w-5 h-5" />} title="输入技巧">
        <ul className="space-y-2 ml-1">
          <li><Tag>Enter</Tag> — 发送消息</li>
          <li><Tag>Shift + Enter</Tag> — 在消息中插入换行，不发送</li>
          <li>使用中文输入法时，选字过程中按 Enter 不会误发送，选好汉字后再按 Enter 才会发送</li>
          <li>输入 <Tag>/</Tag> 可以快速调用内置命令和插件功能</li>
        </ul>
      </Section>

      <Section icon={<WifiOff className="w-5 h-5" />} title="常见问题">
        <div className="space-y-4">
          <div>
            <p className="font-medium text-foreground mb-1">Q：发送消息后一直没有回复？</p>
            <p>请检查右上角连接状态是否为"已连接"。若显示"服务离线"或"未连接"，说明后端服务未运行，消息无法被处理。</p>
          </div>
          <div>
            <p className="font-medium text-foreground mb-1">Q：如何查看 Boardware Agent Sandbox 的运行状态？</p>
            <p>点击顶部导航栏的<strong className="text-foreground">状态</strong>页面，可以查看服务配置、AI 模型、各通道和定时任务的运行状况。</p>
          </div>
          <div>
            <p className="font-medium text-foreground mb-1">Q：如何使用定时任务？</p>
            <p>点击顶部导航栏的<strong className="text-foreground">定时任务</strong>，可以添加、启用或禁用周期性执行的指令，例如定时提醒、数据采集等。</p>
          </div>
          <div>
            <p className="font-medium text-foreground mb-1">Q：什么是技能和插件？</p>
            <p><strong className="text-foreground">技能</strong>是可上传的自定义提示词包，扩展 Boardware Agent Sandbox 的能力范围。<strong className="text-foreground">插件</strong>是更完整的功能扩展，可以提供新的斜杠命令、专用 Agent 等。</p>
          </div>
        </div>
      </Section>
    </div>
  );
}