/* ============================================================
   DICE — original abstract glyphs (NOT the game's real symbols)
   hit ▲ · crit ✦ · double ▲▲ · hitcrit ▲+✦ · acc ◎ · blank —
   ============================================================ */
const { useState: useStateDice } = React;

function Tri({ x = 12, y = 12, s = 9, opacity = 1 }) {
  const h = s * 0.92;
  return <path d={`M ${x} ${y - h * 0.62} L ${x + s * 0.6} ${y + h * 0.45} L ${x - s * 0.6} ${y + h * 0.45} Z`} fill="currentColor" opacity={opacity} />;
}
function Star({ x = 12, y = 12, r = 8, opacity = 1 }) {
  // 4-point sparkle
  const pts = [];
  for (let i = 0; i < 4; i++) {
    const a = (Math.PI / 2) * i;
    const a2 = a + Math.PI / 4;
    pts.push(`${x + Math.cos(a) * r},${y + Math.sin(a) * r}`);
    pts.push(`${x + Math.cos(a2) * r * 0.36},${y + Math.sin(a2) * r * 0.36}`);
  }
  return <polygon points={pts.join(" ")} fill="currentColor" opacity={opacity} />;
}

function FaceGlyph({ face, size = 26 }) {
  const vb = 24;
  const wrap = (children) => (
    <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} style={{ display: "block" }}>{children}</svg>
  );
  switch (face) {
    case "hit":
      return wrap(<Tri x={12} y={12} s={13} />);
    case "crit":
      return wrap(<Star x={12} y={12} r={9} />);
    case "double":
      return wrap(<><Tri x={12} y={7.5} s={10} /><Tri x={12} y={17} s={10} /></>);
    case "hitcrit":
      return wrap(<><Tri x={8.5} y={13} s={10} /><Star x={16.5} y={9} r={5.5} /></>);
    case "acc":
      return wrap(<>
        <circle cx="12" cy="12" r="7.5" fill="none" stroke="currentColor" strokeWidth="1.6" />
        <circle cx="12" cy="12" r="2.4" fill="currentColor" />
        <line x1="12" y1="1.5" x2="12" y2="5" stroke="currentColor" strokeWidth="1.6" />
        <line x1="12" y1="19" x2="12" y2="22.5" stroke="currentColor" strokeWidth="1.6" />
        <line x1="1.5" y1="12" x2="5" y2="12" stroke="currentColor" strokeWidth="1.6" />
        <line x1="19" y1="12" x2="22.5" y2="12" stroke="currentColor" strokeWidth="1.6" />
      </>);
    case "blank":
    default:
      return wrap(<circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.32" />);
  }
}

// small representative chip for the adder column
function DieChip({ color, size = 30 }) {
  const repFace = color === "red" ? "hit" : color === "blue" ? "crit" : "hitcrit";
  return (
    <div className="die" data-color={color} style={{ width: size, height: size }}>
      <div className="die-face" style={{ borderRadius: 7 }}>
        <FaceGlyph face={repFace} size={size * 0.5} />
      </div>
    </div>
  );
}

// a rolled die in the tray; click to reroll
function Die({ d, onReroll }) {
  const [rolling, setRolling] = useStateDice(false);
  const handle = () => {
    setRolling(true);
    setTimeout(() => setRolling(false), 480);
    onReroll && onReroll(d.id);
  };
  return (
    <div className={"die" + (rolling ? " rolling" : "")} data-color={d.color}
         title="Tik om te herrollen" onClick={handle}>
      <div className="die-face">
        <FaceGlyph face={d.face} size={28} />
        {d.rerolled ? <span className="die-reroll-dot">r</span> : null}
      </div>
    </div>
  );
}

function tallyDice(dice) {
  return dice.reduce((acc, d) => {
    const v = FACE_VALUE[d.face];
    acc.dmg += v.dmg; acc.crit += v.crit; acc.acc += v.acc;
    return acc;
  }, { dmg: 0, crit: 0, acc: 0 });
}

Object.assign(window, { FaceGlyph, DieChip, Die, tallyDice });