import { useStore } from '../store'
import { toast } from '../toast'

export default function PropertyPanel(): React.JSX.Element {
  const page = useStore((s) => s.pages[s.curIdx])
  const updatePage = useStore((s) => s.updatePage)
  const screens = useStore((s) => s.screens)
  const screenCount = Math.max(screens.length, 4)

  if (!page) {
    return (
      <div className="panel edit-props">
        <div className="panel-head">
          <span className="ph-icon">⚙️</span>页面属性
        </div>
        <div className="panel-body">
          <div className="empty-hint">请选择页面</div>
        </div>
      </div>
    )
  }

  const setCtr = (v: string): void => {
    const n = parseInt(v, 10)
    if (isNaN(n) || n < 0 || n > 9) {
      toast('控制器编号范围 0-9', 'warn')
      return
    }
    updatePage({ ctrl: n })
  }

  return (
    <div className="panel edit-props">
      <div className="panel-head">
        <span className="ph-icon">⚙️</span>页面属性
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--c-text-faint)' }}>{page.id}</span>
      </div>
      <div className="panel-body">
        <div className="prop-grid">
          <div className="prop-section">基本信息</div>
          <div className="prop-item">
            <label>页面标题</label>
            <input type="text" value={page.title} onChange={(e) => updatePage({ title: e.target.value })} />
          </div>
          <div className="prop-item">
            <label>页面描述</label>
            <input type="text" value={page.desc} onChange={(e) => updatePage({ desc: e.target.value })} />
          </div>

          <div className="prop-section">发布调度</div>
          <div className="prop-item">
            <label>所属屏幕（ScreenIndex）</label>
            <select value={page.screen} onChange={(e) => updatePage({ screen: parseInt(e.target.value, 10) })}>
              {Array.from({ length: Math.max(screenCount, 1) }, (_, i) => i + 1).map((n) => (
                <option key={n} value={n}>
                  屏幕 {n}
                </option>
              ))}
            </select>
            <span className="hint">多屏发布时该页面将分发到此屏幕</span>
          </div>
          <div className="prop-item">
            <label>控制器编号（ControllerIndex）</label>
            <input
              type="number"
              min={0}
              max={9}
              value={page.ctrl}
              onChange={(e) => setCtr(e.target.value)}
            />
            <span className="hint">按数字键 1-9 可切换到对应控制器编号的页面</span>
          </div>
          <div className="prop-item">
            <label className="check-row">
              <input
                type="checkbox"
                checked={page.display}
                onChange={(e) => updatePage({ display: e.target.checked })}
              />
              参与多屏发布（IsDisplay）
            </label>
          </div>

          <div className="prop-section">页面内容</div>
          <div className="prop-item">
            <label>大屏页面 URL（PageUrl）</label>
            <textarea
              className="url-area"
              rows={2}
              value={page.url}
              onChange={(e) => updatePage({ url: e.target.value })}
              placeholder={'sample-screen.html\nhttps://…\nabout:blank'}
            />
            <span className="hint">支持多行文本，相对路径基于应用运行目录解析</span>
          </div>
          <div className="prop-item">
            <label>页面参数（PageParams，每行 key=value，最多 255 字符）</label>
            <textarea
              maxLength={255}
              value={page.params}
              onChange={(e) => updatePage({ params: e.target.value })}
              placeholder={'no=1\ntitle=农业数据总览'}
            />
            <span className="hint">已输入 {page.params.length} / 255</span>
          </div>
        </div>
      </div>
    </div>
  )
}
