import { useGameStore } from '../store'
import { YearlyReport } from '../../game/types/domain'

export function PaperModal() {
  const report = useGameStore((s) => s.paperReport)
  const closePaper = useGameStore((s) => s.closePaper)
  if (!report) return null

  const nets = report.nets
  const y = report.year

  return (
    <div className="modal-outer" onClick={closePaper}>
      <div className="modal yearpaper-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-title" style={{ fontSize: '1.3rem' }}>岁 末 族 簿</div>
        <div className="modal-cat">{y}年 全 族 收 支 与 人 丁 情 形</div>
        <div className="modal-text" style={{ textAlign: 'center', fontSize: '0.98rem', lineHeight: 2.1 }}>
          <div>灵石盈亏 <b className={nets >= 0 ? 'good' : 'bad'}>{nets >= 0 ? `+${nets}` : nets}</b> 枚</div>
          <div>人丁 <b className="good">新增 {report.births}</b> · <b className="bad">辞世 {report.deaths}</b></div>
          <div>家族声望 <b>{report.rep}</b> · 宗族战力 <b>{report.power}</b></div>
          {report.deaths > report.births && <div className="bad">丁口在减 —— 传宗接代是头等大事</div>}
          {report.births > report.deaths && <div className="good">丁口渐旺，香火有望。</div>}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <button className="btn btn-primary" onClick={closePaper}>
            翻 过 此 页
          </button>
        </div>
      </div>
    </div>
  )
}