import { useStore } from '../store'
import { IconCopy, IconDown, IconInsert, IconTrash, IconUp, IconCamera } from '../components/icons'

export default function PageList(): React.JSX.Element {
  const pages = useStore((s) => s.pages)
  const curIdx = useStore((s) => s.curIdx)
  const selectPage = useStore((s) => s.selectPage)
  const insertBefore = useStore((s) => s.insertBefore)
  const addPage = useStore((s) => s.addPage)
  const capturePreview = useStore((s) => s.capturePreview)
  const movePage = useStore((s) => s.movePage)
  const dupPage = useStore((s) => s.dupPage)
  const delPage = useStore((s) => s.delPage)

  const stop = (e: React.MouseEvent): void => e.stopPropagation()

  return (
    <div className="panel edit-side">
      <div className="panel-head">
        <span className="ph-icon">📄</span>页面列表
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--c-text-faint)' }}>{pages.length} 页</span>
      </div>
      <div className="panel-body">
        {pages.map((p, i) => (
          <div
            key={p.id}
            className={'page-card' + (i === curIdx ? ' active' : '')}
            onClick={() => selectPage(i)}
          >
            <div className="pc-thumb">
              {p.preview ? (
                <img src={p.preview} alt={p.title} />
              ) : (
                <span className="pc-thumb-empty">🖼️ 暂无预览</span>
              )}
            </div>
            <div className="pc-top">
              <span className="pc-title">{p.title}</span>
              <span className="pc-id">{p.id}</span>
            </div>
            <div className="pc-desc">{p.desc || '（无描述）'}</div>
            <div className="pc-meta">
              <span className={'tag' + (p.display ? '' : ' gray')}>{p.display ? '显示' : '隐藏'}</span>
              <span className="tag">屏 {p.screen}</span>
              <span className={'tag' + (p.ctrl > 0 ? ' orange' : ' gray')}>键 {p.ctrl || '—'}</span>
            </div>
            <div className="pc-actions">
              <button title="在页面前面插入新页" onClick={(e) => { stop(e); selectPage(i); insertBefore(i) }}><IconInsert /></button>
              <button title="上移" disabled={i === 0} onClick={(e) => { stop(e); selectPage(i); movePage(-1) }}><IconUp /></button>
              <button title="下移" disabled={i === pages.length - 1} onClick={(e) => { stop(e); selectPage(i); movePage(1) }}><IconDown /></button>
              <button title="复制页面" onClick={(e) => { stop(e); selectPage(i); dupPage() }}><IconCopy /></button>
              <button title="删除页面" disabled={pages.length <= 1} onClick={(e) => { stop(e); selectPage(i); delPage() }}><IconTrash /></button>
              <button title="截图更新预览图" onClick={(e) => { stop(e); void capturePreview(i) }}><IconCamera /></button>
            </div>
          </div>
        ))}
        {pages.length === 0 && <div className="empty-hint">暂无页面</div>}
        <button className="add-page-btn" onClick={() => addPage()}>
          ＋ 新建页面
        </button>
      </div>
    </div>
  )
}
