/* Kniffle Koi — rendering layer (React presentational, attaches to window) */
const { VARIETIES, R, hexPoints, neighborsKeys } = window.KK;

/* ---------- dice pips ---------- */
const PIPS = {
  1: [[0, 0]],
  2: [[-1, -1], [1, 1]],
  3: [[-1, -1], [0, 0], [1, 1]],
  4: [[-1, -1], [1, -1], [-1, 1], [1, 1]],
  5: [[-1, -1], [1, -1], [0, 0], [-1, 1], [1, 1]],
  6: [[-1, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [1, 1]],
};

function Die({ value, held, selected, dim, onClick, size = 58, idle }) {
  const off = size * 0.255, pr = size * 0.082, c = size / 2;
  return (
    <button
      type="button"
      onClick={onClick}
      className={"kk-die" + (held ? " is-held" : "") + (selected ? " is-sel" : "") + (dim ? " is-dim" : "")}
      style={{ width: size, height: size }}
      aria-label={value ? "die showing " + value : "die"}
    >
      <svg width={size} height={size} viewBox={"0 0 " + size + " " + size}>
        <rect x="1.5" y="1.5" width={size - 3} height={size - 3} rx={size * 0.2}
          fill="url(#dieFace)" stroke="#cfc6b4" strokeWidth="1.5" />
        {value && PIPS[value].map((p, i) => (
          <circle key={i} cx={c + p[0] * off} cy={c + p[1] * off} r={pr} fill="#2c2a26" />
        ))}
        {!value && idle && (
          <text x={c} y={c + size * 0.07} textAnchor="middle" fontSize={size * 0.34}
            fill="#bcae93" fontFamily="serif">?</text>
        )}
      </svg>
    </button>
  );
}

/* ---------- koi sprite (uses supplied SVG art, recoloured per variety) ---------- */
const KOI_BOX = { 1: 86, 2: 130, 3: 168 };   // sprite span (px) by koi size
const BADGE_R = { 1: 15, 2: 17, 3: 19 };
function Koi({ koi, byKey }) {
  const variety = VARIETIES[koi.variety];
  const pts = koi.cells.map((k) => byKey[k]);
  const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length;
  const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;

  // orientation: along the koi's footprint for multi-cell; stable angle otherwise
  let angle;
  if (pts.length > 1) {
    const a = pts[0], b = pts[pts.length - 1];
    angle = (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI - 90;
  } else {
    angle = ((koi.id * 67) % 90) - 45;
  }
  const box = KOI_BOX[koi.size];
  const s = box / 1024;
  const art = (window.KOI_ART || {})[variety.art === "B" ? "B" : "A"] || "";
  const style = {
    "--koi-body": variety.body,
    "--koi-patch": variety.patch,
    "--koi-patch2": variety.patch2 || variety.patch,
    "--koi-ink": variety.ink,
  };
  const br = BADGE_R[koi.size];
  return (
    <g className="kk-koi">
      <g filter="url(#koiShadow)" style={style}
         transform={`translate(${cx} ${cy}) rotate(${angle}) scale(${s}) translate(-512 -512)`}
         dangerouslySetInnerHTML={{ __html: art }} />
      {/* number badge — the koi's tile value (sum of its dice) */}
      <g className="kk-badge">
        <circle cx={cx} cy={cy} r={br} fill="#faf6ec" stroke={variety.ink} strokeWidth="2" />
        <circle cx={cx} cy={cy} r={br - 3.5} fill="none" stroke={variety.ink} strokeWidth="0.8" opacity="0.4" />
        <text x={cx} y={cy + br * 0.36} textAnchor="middle" fontFamily="'Zen Old Mincho',serif"
          fontWeight="700" fontSize={br * 1.15} fill={variety.ink}>{koi.number}</text>
      </g>
    </g>
  );
}

Object.assign(window, { KKDie: Die, KKKoi: Koi });