import { useGameStore } from '../store'
import { GUIDE_STEPS, computeGuide, guideAdvance } from '../../game/engine/kernel/guide'

export function GuideStrip() {
  const world = useGameStore((s) => s.world)
  const revision = useGameStore((s) => s.revision)
  const bump = useGameStore((s) => s.bump)
  void revision
  if (!world) return null
  const g = computeGuide(world)
  if (g.done || world.state.year > 2) return null
  const step = GUIDE_STEPS[g.step]
  if (!step) return null
  const advance = () => {
    guideAdvance(world, g.step + 1)
    bump()
  }
  return (
    <div className="guide-strip">
      <span className="guide-icon">✧</span>
      <div style={{ flex: 1 }}>
        <b>{step.title}</b>
        <span className="dim" style={{ marginLeft: 8 }}>{step.hint}</span>
      </div>
      <button className="btn btn-sm btn-primary" onClick={advance}>完成，继续</button>
      <button className="btn btn-sm" onClick={advance} title="跳过引导">×</button>
    </div>
  )
}