import type { Monster, MonsterAction } from '@/lib/compendium/types';
import { crLabel } from '@/lib/compendium';
import { abilityModifier } from '@/lib/rules';
import { formatModifier } from '@/lib/format';

function actionList(value: MonsterAction[] | string | undefined): MonsterAction[] {
  return Array.isArray(value) ? value : [];
}

export function MonsterDetail({ monster: m }: { monster: Monster }) {
  const abilities: [string, number | undefined][] = [
    ['STR', m.strength],
    ['DEX', m.dexterity],
    ['CON', m.constitution],
    ['INT', m.intelligence],
    ['WIS', m.wisdom],
    ['CHA', m.charisma],
  ];
  return (
    <div className="space-y-4">
      <header>
        <h2 className="font-display text-2xl font-bold text-accent">{m.name}</h2>
        <p className="text-sm italic text-muted">
          {[m.size, m.type, m.alignment].filter(Boolean).join(', ')}
        </p>
      </header>

      <div className="flex flex-wrap gap-x-6 gap-y-1 text-sm">
        <span><strong className="text-ink">AC</strong> {m.armor_class ?? '—'} {m.armor_desc ? `(${m.armor_desc})` : ''}</span>
        <span><strong className="text-ink">HP</strong> {m.hit_points ?? '—'} {m.hit_dice ? `(${m.hit_dice})` : ''}</span>
        <span><strong className="text-ink">CR</strong> {crLabel(m)}</span>
        {m.speed?.walk !== undefined && <span><strong className="text-ink">Speed</strong> {m.speed.walk} ft.</span>}
      </div>

      <div className="grid grid-cols-6 gap-2 rounded-lg border border-line bg-surface p-3 text-center text-sm">
        {abilities.map(([label, score]) => (
          <div key={label}>
            <div className="text-xs font-semibold text-muted">{label}</div>
            <div className="text-ink">{score ?? '—'}</div>
            <div className="text-xs text-accent">
              {score !== undefined ? formatModifier(abilityModifier(score)) : ''}
            </div>
          </div>
        ))}
      </div>

      {(m.damage_resistances || m.damage_immunities || m.condition_immunities || m.senses || m.languages) && (
        <div className="space-y-1 text-sm text-muted">
          {m.damage_resistances && <p><strong className="text-ink">Resistances</strong> {m.damage_resistances}</p>}
          {m.damage_immunities && <p><strong className="text-ink">Immunities</strong> {m.damage_immunities}</p>}
          {m.condition_immunities && <p><strong className="text-ink">Condition Immunities</strong> {m.condition_immunities}</p>}
          {m.senses && <p><strong className="text-ink">Senses</strong> {m.senses}</p>}
          {m.languages && <p><strong className="text-ink">Languages</strong> {m.languages}</p>}
        </div>
      )}

      <ActionBlock title="Special Abilities" actions={actionList(m.special_abilities)} />
      <ActionBlock title="Actions" actions={actionList(m.actions)} />
      <ActionBlock title="Reactions" actions={actionList(m.reactions)} />
      <ActionBlock title="Legendary Actions" actions={actionList(m.legendary_actions)} />
    </div>
  );
}

function ActionBlock({ title, actions }: { title: string; actions: MonsterAction[] }) {
  if (actions.length === 0) return null;
  return (
    <section>
      <h3 className="mb-1 border-b border-line pb-1 font-display text-lg font-semibold text-ink">{title}</h3>
      <div className="space-y-2">
        {actions.map((a, i) => (
          <p key={`${a.name}-${i}`} className="text-sm text-muted">
            <strong className="text-ink">{a.name}.</strong> {a.desc}
          </p>
        ))}
      </div>
    </section>
  );
}
