import { useGameStore } from '../store'
import { useMemo, useState } from 'react'
import { ChronicleEntry } from '../../game/types/domain'

const CAT_NAME: Record<string, string> = {
  birth: '诞庆',
  marriage: '姻缘',
  death: '祭丧',
  breakthrough: '突破',
  battle: '战事',
  trade: '商贸',
  diplomacy: '外交',
  exploration: '寻宝',
  building: '营造',
  event: '奇遇',
  misc: '家常'
}

export default function ChroniclePanel() {
  const world = useGameStore((s) => s.world)
  const revision = useGameStore((s) => s.revision)
  void revision
  const [filter, setFilter] = useState<string>('all')
  const [battleId, setBattleId] = useState<string | null>(null)
  const entries = useMemo(() => {
    if (!world) return []
    const all = [...world.state.chronicle]
    const filtered = filter === 'all' ? all : all.filter((e) => e.category === filter)
    return filtered.slice().sort((a, b) => (b.year - a.year) || (b.month - a.month))
  }, [world, filter, revision])
  if (!world) return null
  const battles = world.state.battles.slice().reverse()
  const battle = battles.find((b) => b.id === battleId)

  return (
    <div>
      <div className="help-text">
        族史一卷：由系统自动记下的家族大事。倒序排列，可回看任意一年的兴衰细节。
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
        <button className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : ''}`} onClick={() => setFilter('all')}>全部</button>
        {Object.entries(CAT_NAME).map(([k, v]) => (
          <button key={k} className={`btn btn-sm ${filter === k ? 'btn-primary' : ''}`} onClick={() => setFilter(k)}>
            {v}
          </button>
        ))}
      </div>
      <div className="chronicle-list">
        {entries.map((e) => (
          <div key={e.id} className={`ch-item ${e.important ? 'gold' : ''}`}>
            <span className="ch-year">{e.year}年{e.month}月</span>
            <span>
              <span className="tag" style={{ marginRight: 8 }}>{CAT_NAME[e.category] ?? e.category}</span>
              {e.text}
            </span>
          </div>
        ))}
        {entries.length === 0 && <div className="dim2">暂无记载。</div>}
      </div>

      <div className="card-title" style={{ fontSize: '1.02rem', marginTop: 22 }}>战报匣（全文留存）</div>
      {battle ? (
        <div className="mission-card" style={{ maxWidth: 720 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <b>{battle.title}</b>
            <span className="dim2" style={{ fontSize: '0.85rem' }}>
              {battle.year}年{battle.month}月 ·{' '}
              <span className={battle.winner === 'player' ? 'good' : battle.winner === 'enemy' ? 'bad' : 'warn'}>
                {battle.winner === 'player' ? '我方得胜' : battle.winner === 'enemy' ? '我方败北' : '平分秋色'}
              </span>
            </span>
            <button className="btn btn-sm" style={{ marginLeft: 'auto' }} onClick={() => setBattleId(null)}>
              收起
            </button>
          </div>
          <div className="dim" style={{ fontSize: '0.92rem', lineHeight: 1.8, marginTop: 8 }}>
            {battle.lines.slice(1).map((l, i) => (
              <div key={i}>· {l}</div>
            ))}
            {battle.losses.length > 0 && (
              <div className="bad">我方折损：{battle.losses.join('、')}</div>
            )}
          </div>
        </div>
      ) : battles.length === 0 ? (
        <div className="dim2" style={{ marginBottom: 6 }}>尚无战事可录。</div>
      ) : (
        <div style={{ maxWidth: 720 }}>
          {battles.map((b) => (
            <div key={b.id} className="set-row" style={{ maxWidth: 720 }}>
              <span>
                <span className="ch-year" style={{ marginRight: 10 }}>{b.year}年{b.month}月</span>
                {b.title}
                <span className={`tag ${b.winner === 'player' ? 'good' : b.winner === 'enemy' ? 'bad' : 'warn'}`} style={{ marginLeft: 8 }}>
                  {b.winner === 'player' ? '胜' : b.winner === 'enemy' ? '负' : '平'}
                </span>
              </span>
              <button className="btn btn-sm" onClick={() => setBattleId(b.id)}>阅</button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}