import type { AttackLine } from "../types";
import DiceButton from "./DiceButton";
import styles from "./AttackBlock.module.css";

interface AttackBlockProps {
  attacks: AttackLine[];
  campaignId?: number;
  characterId?: number;
  characterName?: string;
  characterColor?: string;
  mode?: "view" | "edit";
  critKeys?: Set<string>;
}

export default function AttackBlock({
  attacks,
  campaignId,
  characterId,
  characterName,
  characterColor,
  mode,
  critKeys,
}: AttackBlockProps) {
  const weapons = attacks.filter((a) => !a.isTalent);
  const talents = attacks.filter((a) => a.isTalent);

  return (
    <div className={styles.section}>
      <div className={styles.title}>Attacks</div>
      <div className={styles.list}>
        {weapons.length === 0 && talents.length === 0 && (
          <span className={styles.empty}>No weapons equipped</span>
        )}
        {weapons.map((atk) => (
          <div key={atk.name} className={styles.line}>
            <span>
              <span className={styles.weaponName}>{atk.name}</span>
              {atk.tags.length > 0 && (
                <span className={styles.tags}>({atk.tags.join(", ")})</span>
              )}
            </span>
            <span className={styles.stats}>
              <span className={styles.modifier}>{atk.modifierStr}</span>
              {", "}
              <span className={styles.damage}>{atk.damage}</span>
            </span>
            {mode === "view" && campaignId ? (
              <span className={styles.rollButtons}>
                <DiceButton
                  campaignId={campaignId}
                  characterId={characterId}
                  characterName={characterName}
                  characterColor={characterColor}
                  type="attack"
                  dice={`1d20${atk.modifier >= 0 ? "+" + atk.modifier : String(atk.modifier)}`}
                  label={`${atk.name} attack`}
                  icon="⚔"
                  title={`Attack roll: 1d20${atk.modifier >= 0 ? "+" + atk.modifier : atk.modifier}`}
                />
                <DiceButton
                  campaignId={campaignId}
                  characterId={characterId}
                  characterName={characterName}
                  characterColor={characterColor}
                  type="attack"
                  dice={atk.damage}
                  label={`${atk.name} damage`}
                  icon="💥"
                  title={
                    critKeys?.has(`${characterId}:${atk.name}`)
                      ? `CRIT damage: double ${atk.damage}`
                      : `Damage: ${atk.damage} (Shift: crit = double dice)`
                  }
                  forceCrit={critKeys?.has(`${characterId}:${atk.name}`)}
                />
              </span>
            ) : (
              <span className={styles.rollSpace}></span>
            )}
          </div>
        ))}
        {talents.map((atk) => (
          <div key={atk.name} className={styles.talentLine}>
            <strong>{atk.name}:</strong> {atk.description}
          </div>
        ))}
      </div>
    </div>
  );
}
