import { useGameStore } from '../store'
import { Character } from '../../game/types/domain'
import { describeRealm } from '../../game/data/realms'
import { describeRoots } from '../../game/data/elements'

const STATE_LABEL: Record<string, { label: string; cls: string }> = {
  idle: { label: '无事', cls: '' },
  meditation: { label: '闭关', cls: 'good' },
  expedition: { label: '出探', cls: 'warn' },
  wounded: { label: '养伤', cls: 'bad' }
}

export function MemberCard({ c }: { c: Character }) {
  const world = useGameStore((s) => s.world)
  const setSelected = useGameStore((s) => s.setSelected)
  if (!world) return null
  const dead = !c.alive
  const isHead = world.state.family.headId === c.id
  const state = STATE_LABEL[c.state]
  return (
    <div className={`member-card ${dead ? 'dead' : ''}`} onClick={() => setSelected(c.id)}>
      <div className="mc-head">
        <div className="m-avatar">{world.state.family.surname}</div>
        <div style={{ flex: 1 }}>
          <div className="member-name">
            <span>{c.name}</span>
            {isHead && <span className="tag head-t">家主</span>}
            {c.spouseHouse && <span className="tag">外亲</span>}
          </div>
          <div className="member-realm">
            {dead
              ? `殁于${c.deathYear}年 · ${c.deathCause ?? '寿终'}`
              : `${describeRealm(c.realm)} · ${world.ageOf(c)}岁 · 修为${Math.floor(c.realmProgress)}%`}
          </div>
        </div>
      </div>
      <div className="member-tags">
        <span className="tag">{describeRoots(c.roots)}</span>
        {!dead && c.realmProgress >= 100 && <span className="tag gold-t">瓶颈 · 可冲击</span>}
        {C_STATE[dead ? 'dead' : c.state] && (
          <span className={`tag ${C_STATE[dead ? 'dead' : c.state]}`}>{STATE_LABEL[c.state]?.label ?? ''}</span>
        )}
      </div>
      {!dead && (
        <div className="mc-foot">
          <div className="bar" title="灵气修为" style={{ height: 6 }}>
            <div style={{ width: `${c.realmProgress}%` }} />
          </div>
        </div>
      )}
    </div>
  )
}

const C_STATE: Record<string, string> = {
  idle: '',
  meditation: 'good',
  expedition: 'warn',
  wounded: 'bad',
  dead: 'bad'
}