import { useGameStore } from '../store'
import { LegacyArch } from '../../game/core/legacy'
import { sBell } from '../sound'

function dimLabel(k: string): string {
  const map: Record<string, string> = {
    renXing: '人兴',
    daoXing: '道兴',
    weiMing: '威名',
    xiangHuo: '香火'
  }
  return map[k] ?? k
}

export function ResolveModal({ arch, onClose }: { arch: LegacyArch; onClose: () => void }) {
  return (
    <div className="modal-outer">
      <div className="modal resolve-modal">
        <div className="modal-cat" style={{ color: '#97835c', letterSpacing: 4 }}>
          —— 百年望气 · 定鼎之文 ——
        </div>
        <div className="resolve-title">「{arch.title}」</div>
        <div className="resolve-dims">
          {Object.entries(arch.dims)
            .filter(([k]) => k !== 'total')
            .map(([k, v]) => (
              <div key={k} className="resolve-dim">
                <span className="dim">{dimLabel(k)}</span>
                <div className="bar" style={{ flex: 1, height: 6 }}>
                  <div style={{ width: `${Math.min(100, (v / 160) * 100)}%` }} />
                </div>
                <b>{v}</b>
              </div>
            ))}
          <div className="resolve-dim">
            <span className="dim">总评</span>
            <div className="bar" style={{ flex: 1, height: 6 }}>
              <div style={{ width: `${Math.min(100, (arch.dims.total / 400) * 100)}%`, background: 'linear-gradient(90deg,#8e2f24,#c05a41,#e0c15e)' }} />
            </div>
            <b className="gold">{arch.dims.total}</b>
          </div>
        </div>
        <div className="resolve-poem">
          {arch.poem.map((l, i) => (
            <div key={i}>{l}</div>
          ))}
        </div>
        <div className="resolve-stamp">仙途家族志 · 青册</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 14 }}>
          <button className="btn" onClick={onClose}>暂不落印</button>
          <button
            className="btn btn-primary"
            onClick={() => {
              const w = useGameStore.getState().world
              if (w) {
                sBell()
                w.resolveLegacyNow()
                useGameStore.getState().bump()
                useGameStore.getState().refreshSlots()
              }
              onClose()
            }}
          >
            落 印 定 局
          </button>
        </div>
      </div>
    </div>
  )
}

export default ResolveModal