import type { Character } from "../types";
import { generateAttacks } from "../utils/derived-attacks";
import StatBlock from "./StatBlock";
import AttackBlock from "./AttackBlock";
import styles from "./StatsPanel.module.css";

const STATS = ["STR", "DEX", "CON", "INT", "WIS", "CHA"];

interface StatsPanelProps {
  character: Character;
  mode: "view" | "edit";
  campaignId: number;
  critKeys?: Set<string>;
  onStatChange: (characterId: number, statName: string, value: number) => void;
}

export default function StatsPanel({
  character,
  mode,
  campaignId,
  critKeys,
  onStatChange,
}: StatsPanelProps) {
  const attacks = generateAttacks(character);

  // Compute talent stat bonuses
  const statBonuses = new Map<string, number>();
  for (const stat of STATS) {
    let bonus = 0;
    for (const talent of character.talents) {
      if (talent.effect.stat_bonus === stat) {
        bonus += (talent.effect.stat_bonus_value as number) || 0;
      }
    }
    if (bonus > 0) statBonuses.set(stat, bonus);
  }

  return (
    <div className={styles.panel}>
      <div className={styles.sectionTitle}>Ability Scores</div>
      <StatBlock
        stats={character.stats}
        statBonuses={statBonuses.size > 0 ? statBonuses : undefined}
        onStatChange={(statName, value) =>
          onStatChange(character.id, statName, value)
        }
        mode={mode}
        campaignId={campaignId}
        characterId={character.id}
        characterName={character.name}
        characterColor={character.color}
      />
      <hr className={styles.separator} />
      <AttackBlock
        attacks={attacks}
        campaignId={campaignId}
        characterId={character.id}
        characterName={character.name}
        characterColor={character.color}
        mode={mode}
        critKeys={critKeys}
      />
    </div>
  );
}
