import type { SpellCastResult as CastResult } from "../types.js";
import styles from "./SpellCastResult.module.css";

interface Props {
  result: CastResult;
  spellName: string;
  onClose: () => void;
}

export default function SpellCastResult({ result, spellName, onClose }: Props) {
  const labels = {
    success: { text: "Success", cls: styles.success },
    failure: { text: "Failure", cls: styles.failure },
    crit_success: { text: "Critical Success!", cls: styles.critSuccess },
    crit_fail: { text: "Critical Failure!", cls: styles.critFail },
  };
  const label = labels[result.result];
  const mishap = result.mishapResult as Record<string, unknown> | null;

  return (
    <div className={styles.overlay} onClick={onClose}>
      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
        <div className={styles.spellName}>{spellName}</div>
        <div className={styles.roll}>
          {result.roll} {result.modifier >= 0 ? "+" : ""}
          {result.modifier} = {result.total}
          <span className={styles.dc}> vs DC {result.dc}</span>
        </div>
        <div className={`${styles.resultLabel} ${label.cls}`}>{label.text}</div>

        {result.result === "failure" && (
          <p className={styles.note}>Spell exhausted until rest.</p>
        )}
        {result.result === "crit_success" && (
          <p className={styles.note}>Double one numerical effect!</p>
        )}
        {result.result === "crit_fail" && mishap && (
          <div className={styles.mishap}>
            <div className={styles.mishapTitle}>&#9888; Wizard Mishap</div>
            <p className={styles.mishapDesc}>{String(mishap.description ?? "")}</p>
            {mishap.damage ? (
              <p className={styles.mishapEffect}>Took {String(mishap.damage)} damage</p>
            ) : null}
          </div>
        )}
        {result.result === "crit_fail" && !mishap && (
          <p className={styles.note}>Spell exhausted. Deity is displeased &mdash; penance required.</p>
        )}

        <button className={styles.closeBtn} onClick={onClose}>
          Dismiss
        </button>
      </div>
    </div>
  );
}
