import { useEffect, useState } from 'react'
import { useStore } from '../../store'
import type { AppInfo } from '../../types'

export default function AboutPanel(): React.JSX.Element {
  const settings = useStore((s) => s.settings)
  const [info, setInfo] = useState<AppInfo | null>(null)

  useEffect(() => {
    void window.api.app.info().then(setInfo)
  }, [])

  return (
    <div className="cfg-section">
      <div className="cfg-card about-hero">
        <div className="about-logo">🌾</div>
        <div className="about-title">{settings?.projectName ?? '智慧农业大数据可视化控制中心'}</div>
        <div className="about-ver">
          Version {settings?.projectVersion ?? '0.1.0'}
          {info?.appVersion ? ` · 安装包 ${info.appVersion}` : ''}
        </div>
        <p className="about-desc">
          面向多屏演示场景的智慧农业大数据可视化控制中心：在编辑器中配置页面 URL
          与参数、屏幕与快捷键映射，一键将页面分发到大屏、轮播或编辑器屏幕全屏播放，支持检测屏幕布局与设备自检。
        </p>
      </div>

      <div className="cfg-card">
        <div className="cfg-card-head">运行环境</div>
        <div className="cfg-card-body">
          <table className="cfg-table">
            <tbody>
              <tr>
                <td>操作系统</td>
                <td>{info?.platform ?? '…'}</td>
              </tr>
              <tr>
                <td>Electron</td>
                <td>{info?.electron ?? '…'}</td>
              </tr>
              <tr>
                <td>Chromium</td>
                <td>{info?.chrome ?? '…'}</td>
              </tr>
              <tr>
                <td>Node.js</td>
                <td>{info?.node ?? '…'}</td>
              </tr>
              <tr>
                <td>技术栈</td>
                <td>Electron + React 19 + TypeScript + Zustand</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="cfg-card">
        <div className="cfg-card-head">编辑帮助</div>
        <div className="cfg-card-body">
          <table className="cfg-table">
            <thead>
              <tr>
                <th>操作</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>页面列表</td><td>左侧列出所有页面，点击可选中；顶部按钮可 新建 / 复制 / 插入 / 上移 / 下移 / 删除</td></tr>
              <tr><td>页面参数</td><td>每页可设置 标题、描述、所属屏幕、控制器编号、URL、网页参数（每行 键=值）</td></tr>
              <tr><td>参与多屏发布</td><td>勾选后该页参与「单屏发布 / 多屏发布」，并按所属屏幕 ID 分发</td></tr>
              <tr><td>页面截图</td><td>编辑区点击「截图」可抓取当前页面缩略图（需 URL 可访问）</td></tr>
              <tr><td>保存 / 打开</td><td>顶部工具栏保存工程；设置 JSON 密码后敏感字段将加密存储</td></tr>
              <tr><td>重排顺序</td><td>按当前页面顺序自动重排 屏幕 ID、控制器编号、PageID</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="cfg-card">
        <div className="cfg-card-head">发布帮助</div>
        <div className="cfg-card-body">
          <table className="cfg-table">
            <thead>
              <tr>
                <th>操作</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>检测屏幕</td><td>在每块屏幕左上角显示「编号 + 分辨率」标签 6 秒，确认屏幕布局</td></tr>
              <tr><td>多屏发布</td><td>弹窗预览各屏布局与页面分配，各页按所属屏幕 ID 分发到对应屏幕全屏播放</td></tr>
              <tr><td>预览本页</td><td>弹窗选屏，在指定屏幕全屏播放当前页面</td></tr>
              <tr><td>单屏发布</td><td>弹窗选屏，在指定屏幕轮播所有「参与多屏发布」的页面</td></tr>
              <tr><td>关闭所有</td><td>一键关闭所有播放页面并恢复编辑器窗口</td></tr>
              <tr><td>快捷键</td><td>数字 1-9 切页、↑↓ 轮播切换、Esc 退出、F5 刷新、{settings?.keyLockKey ?? 'F9'} 锁定/解锁识别</td></tr>
              <tr><td>快捷键阈值</td><td>数字/方向键需长按超过阈值（默认 {settings?.keyThreshold ?? 350}ms）才触发，避免网页输入误触</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
