import { useGameStore } from '../store'

export default function SettingsPanel() {
  const world = useGameStore((s) => s.world)
  const bump = useGameStore((s) => s.bump)
  const slot = useGameStore((s) => s.slot)
  const saveNow = useGameStore((s) => s.saveNow)
  const exportSave = useGameStore((s) => s.exportSave)
  const importSave = useGameStore((s) => s.importSave)
  const refreshSlots = useGameStore((s) => s.refreshSlots)
  const refreshSnapshots = useGameStore((s) => s.refreshSnapshots)
  const restoreSnapshot = useGameStore((s) => s.restoreSnapshot)
  const snapshots = useGameStore((s) => s.snapshots)
  const go = useGameStore((s) => s.go)
  const setSpeed = useGameStore((s) => s.setSpeed)
  if (!world) return null

  return (
    <div>
      <div className="card-title">存档与导出</div>
      <div className="set-row">
        <span>手动存点（当前第 {slot} 档）</span>
        <button className="btn btn-sm" onClick={() => void saveNow()}>立即保存</button>
      </div>
      <div className="set-row">
        <span>回档时间轴（每季自动快照，最近12份）</span>
        <button className="btn btn-sm" onClick={() => void refreshSnapshots()}>刷新列表</button>
      </div>
      {snapshots.length > 0 ? (
        <div style={{ maxWidth: 660, margin: '6px 0 10px' }}>
          {snapshots.slice(0, 12).map((sn, i) => (
            <div key={sn.id} className="set-row" style={{ padding: '6px 4px' }}>
              <span className={sn.year === world.state.year ? 'gold' : ''}>
                {sn.year}年{sn.month}月{sn.label !== '自动' ? ` · ${sn.label}` : ''}
                {sn.year === world.state.year && sn.month === world.state.month ? '（当前）' : ''}
              </span>
              <button
                className="btn btn-sm"
                disabled={sn.year === world.state.year && sn.month === world.state.month}
                onClick={() => {
                  if (window.confirm(`回卷到 ${sn.year}年${sn.month}月？当前进度会先保存为回档前夕。此操作不可撤销。`)) {
                    void restoreSnapshot(sn.id).then(() => bump())
                  }
                }}
              >
                回卷
              </button>
            </div>
          ))}
        </div>
      ) : (
        <div className="dim2" style={{ marginBottom: 8 }}>尚未生成快照（推进时间或保存后自动出现）</div>
      )}
      <div className="set-row">
        <span>导出存档（JSON 文件）</span>
        <button className="btn btn-sm" onClick={() => void exportSave()}>导出</button>
      </div>
      <div className="set-row">
        <span>导入存档到当前位置</span>
        <button className="btn btn-sm" onClick={() => void importSave(slot)}>导入</button>
      </div>
      <div className="set-row">
        <span>刷新存档槽</span>
        <button className="btn btn-sm" onClick={() => void refreshSlots()}>刷新</button>
      </div>
      <div className="set-row">
        <span>暂停时间</span>
        <button className="btn btn-sm" onClick={() => setSpeed(0)}>停止流转</button>
      </div>
      <div className="set-row">
        <span>回到主菜单（会先自动保存）</span>
        <button
          className="btn btn-sm"
          onClick={() => {
            void saveNow('离席前').then(() => {
              setSpeed(0)
              go('boot')
            })
          }}
        >
          主菜单
        </button>
      </div>
      <div className="set-row">
        <span>立即推送修复（保存完成提示）</span>
        <button className="btn btn-sm" onClick={bump}>重绘</button>
      </div>

      <div className="card-title" style={{ marginTop: 20 }}>玩法说明</div>
      <div className="help-text">
        · 日常以「月」流转：成员修炼、建筑产出、往事兴替、事件沓来。<br />
        · 「宗」字牌成员可闭关、服丹、冲击瓶颈；瓶颈即修为满百者，成功率看灵气、丹药与家主督学。<br />
        · 「探秘」选人结队远行，途中见战报；凯旋带回灵石、法帖、法器诸宝。<br />
        · 「外交」与四邻结好联姻；仇雠之族隔岁来犯，打得赢名望大涨，打不赢蚀钱伤丁。<br />
        · 「史书」自动记述繁华与凋零——百年之后，后人翻开这一卷家族志，见代代薪火、历历雪泥。
      </div>
      <div className="dim2">版本 0.1.0 · Chronicle of the Immortal Clan</div>
    </div>
  )
}