/* board/pieces.js — piece sets. Three built-in sets rendered as inline SVG:
   classic  — original detailed set (gradients + accent lines)
   minimal  — same silhouettes, flat fills, no detailing
   letters  — lettered discs (diagram style)
   pieceSVG(set, piece) -> svg string. Colors via CSS (.piece-w/.piece-b). */
'use strict';

const BASE = `
    <rect x="27" y="72" width="46" height="7" rx="3.5" class="pc-body"/>
    <rect x="23" y="79" width="54" height="10" rx="5" class="pc-body"/>
    <rect x="27" y="72" width="46" height="7" rx="3.5" class="pc-line" fill="none"/>
    <rect x="23" y="79" width="54" height="10" rx="5" class="pc-line" fill="none"/>`;

const SHAPES = {
  p: {
    body: `
      <circle cx="50" cy="30" r="12.5" class="pc-body"/>
      <path d="M50,44 C40.5,46 36,57 35,73 L65,73 C64,57 59.5,46 50,44 Z" class="pc-body"/>
      <rect x="37" y="42.5" width="26" height="6.5" rx="3.25" class="pc-body"/>
      <circle cx="50" cy="30" r="12.5" class="pc-line" fill="none"/>
      <path d="M50,44 C40.5,46 36,57 35,73 L65,73 C64,57 59.5,46 50,44 Z" class="pc-line" fill="none"/>
      <rect x="37" y="42.5" width="26" height="6.5" rx="3.25" class="pc-line" fill="none"/>`,
    detail: `<circle cx="45.5" cy="25.5" r="3.5" class="pc-gleam"/>`,
  },
  r: {
    body: `
      <path d="M31,20 L41,20 L41,27 L46,27 L46,20 L54,20 L54,27 L59,27 L59,20 L69,20 L69,34 L63,39 L63,64 L69,70 L69,73 L31,73 L31,70 L37,64 L37,39 L31,34 Z" class="pc-body"/>
      <path d="M31,20 L41,20 L41,27 L46,27 L46,20 L54,20 L54,27 L59,27 L59,20 L69,20 L69,34 L63,39 L63,64 L69,70 L69,73 L31,73 L31,70 L37,64 L37,39 L31,34 Z" class="pc-line" fill="none"/>`,
    detail: `
      <line x1="37" y1="39" x2="63" y2="39" class="pc-line"/>
      <line x1="37" y1="64" x2="63" y2="64" class="pc-line"/>
      <rect x="41" y="45" width="5" height="12" rx="2.5" class="pc-gleam"/>`,
  },
  n: {
    body: `
      <path d="M32,73 C32,60 36,53 43,47 C49,42 53,37 53,31 L51,22 L58,14 L62,24 C72,29 76,40 76,52 L76,60 L66,57 C64,51 60,49 56.5,51 C59.5,57 57,63 52.5,67 C49,70 47.5,71.5 47.5,73 Z" class="pc-body"/>
      <path d="M32,73 C32,60 36,53 43,47 C49,42 53,37 53,31 L51,22 L58,14 L62,24 C72,29 76,40 76,52 L76,60 L66,57 C64,51 60,49 56.5,51 C59.5,57 57,63 52.5,67 C49,70 47.5,71.5 47.5,73 Z" class="pc-line" fill="none"/>
      <path d="M58,14 L51,10 L51.5,20 Z" class="pc-body"/>
      <path d="M58,14 L51,10 L51.5,20 Z" class="pc-line" fill="none"/>`,
    detail: `
      <circle cx="62.5" cy="30" r="2.4" class="pc-dot"/>
      <path d="M44,49 C50,44 54,39 54.5,33" class="pc-gleamline" fill="none"/>`,
  },
  b: {
    body: `
      <circle cx="50" cy="14" r="5" class="pc-body"/>
      <path d="M50,21 C60,29.5 65.5,41 65.5,51 C65.5,61.5 58.5,68.5 50,68.5 C41.5,68.5 34.5,61.5 34.5,51 C34.5,41 40,29.5 50,21 Z" class="pc-body"/>
      <circle cx="50" cy="14" r="5" class="pc-line" fill="none"/>
      <path d="M50,21 C60,29.5 65.5,41 65.5,51 C65.5,61.5 58.5,68.5 50,68.5 C41.5,68.5 34.5,61.5 34.5,51 C34.5,41 40,29.5 50,21 Z" class="pc-line" fill="none"/>
      <rect x="36.5" y="66" width="27" height="6.5" rx="3.25" class="pc-body"/>
      <rect x="36.5" y="66" width="27" height="6.5" rx="3.25" class="pc-line" fill="none"/>`,
    detail: `
      <line x1="43.5" y1="37.5" x2="57" y2="51" class="pc-cut"/>
      <path d="M42,31 C39,36 37.5,41 37.3,46" class="pc-gleamline" fill="none"/>`,
  },
  q: {
    body: `
      <path d="M27.5,73 L21.5,36 L34.5,49 L41.5,27 L47,47 L50,23 L53,47 L58.5,27 L65.5,49 L78.5,36 L72.5,73 Z" class="pc-body"/>
      <path d="M27.5,73 L21.5,36 L34.5,49 L41.5,27 L47,47 L50,23 L53,47 L58.5,27 L65.5,49 L78.5,36 L72.5,73 Z" class="pc-line" fill="none"/>
      <circle cx="21.5" cy="31" r="3.6" class="pc-body"/><circle cx="21.5" cy="31" r="3.6" class="pc-line" fill="none"/>
      <circle cx="41.5" cy="22" r="3.6" class="pc-body"/><circle cx="41.5" cy="22" r="3.6" class="pc-line" fill="none"/>
      <circle cx="50" cy="17.5" r="3.6" class="pc-body"/><circle cx="50" cy="17.5" r="3.6" class="pc-line" fill="none"/>
      <circle cx="58.5" cy="22" r="3.6" class="pc-body"/><circle cx="58.5" cy="22" r="3.6" class="pc-line" fill="none"/>
      <circle cx="78.5" cy="31" r="3.6" class="pc-body"/><circle cx="78.5" cy="31" r="3.6" class="pc-line" fill="none"/>`,
    detail: `<path d="M29.5,62 C36,59 64,59 70.5,62" class="pc-line" fill="none"/>`,
  },
  k: {
    body: `
      <path d="M47,7 L53,7 L53,13 L59,13 L59,19 L53,19 L53,26 L47,26 L47,19 L41,19 L41,13 L47,13 Z" class="pc-body"/>
      <path d="M47,7 L53,7 L53,13 L59,13 L59,19 L53,19 L53,26 L47,26 L47,19 L41,19 L41,13 L47,13 Z" class="pc-line" fill="none"/>
      <path d="M33,73 L30.5,51 C30.5,39 38.5,30.5 50,30.5 C61.5,30.5 69.5,39 69.5,51 L67,73 Z" class="pc-body"/>
      <path d="M33,73 L30.5,51 C30.5,39 38.5,30.5 50,30.5 C61.5,30.5 69.5,39 69.5,51 L67,73 Z" class="pc-line" fill="none"/>`,
    detail: `
      <path d="M31.5,60 C38,56.5 62,56.5 68.5,60" class="pc-line" fill="none"/>
      <path d="M31,55 C31,44 39,37 50,37 M50,37 C61,37 69,44 69,55" class="pc-gleamline" fill="none"/>`,
  },
};

const LETTER = { p: 'P', n: 'N', b: 'B', r: 'R', q: 'Q', k: 'K' };

export const PIECE_SETS = {
  clean: 'Clean', neo: 'Neo (flat modern)', classic: 'Classic',
  cburnett: 'Lichess (Cburnett)', merida: 'Merida', minimal: 'Minimal', letters: 'Letters',
};
/* image-based sets shipped in gui/pieces/<set>/. Each entry: file extension +
   whether the piece letter in the filename is upper- or lower-case.
   cburnett (CC BY-SA 3.0) / merida (freeware): wK.svg…bP.svg.
   'clean': user-supplied local PNGs named wk.png…bp.png. */
const IMAGE_SETS = {
  cburnett: { ext: 'svg', upper: true },
  merida: { ext: 'svg', upper: true },
  clean: { ext: 'png', upper: false },
};

export function pieceSVG(set, piece) {
  const isWhite = piece === piece.toUpperCase();
  const lower = piece.toLowerCase();
  const colorCls = isWhite ? 'piece-w' : 'piece-b';
  if (IMAGE_SETS[set]) {
    const cfg = IMAGE_SETS[set];
    const letter = cfg.upper ? LETTER[lower] : lower;
    const file = (isWhite ? 'w' : 'b') + letter;
    return `<img class="piece-svg piece-img" draggable="false" alt="${piece}" src="pieces/${set}/${file}.${cfg.ext}">`;
  }
  if (set === 'letters') {
    return `<svg viewBox="0 0 100 100" class="piece-svg ${colorCls} set-letters" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="34" class="pc-body"/>
      <circle cx="50" cy="50" r="34" class="pc-line" fill="none"/>
      <text x="50" y="64" text-anchor="middle" font-size="42" font-weight="700" font-family="Segoe UI, sans-serif" class="pc-letter">${LETTER[lower]}</text>
    </svg>`;
  }
  const s = SHAPES[lower];
  // 'neo' and 'minimal' render flat (no fine gleam detailing); colour comes from CSS
  const detail = (set === 'minimal' || set === 'neo') ? '' : s.detail;
  return `<svg viewBox="0 0 100 100" class="piece-svg ${colorCls} set-${set}" xmlns="http://www.w3.org/2000/svg">${s.body}${detail}${BASE}</svg>`;
}

/** Hidden defs required once per document (classic set gradients). */
export function pieceDefsSVG() {
  return `<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
    <linearGradient id="pgw" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#ccd4e3"/>
    </linearGradient>
    <linearGradient id="pgb" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#464e62"/><stop offset="1" stop-color="#191d2b"/>
    </linearGradient>
  </defs></svg>`;
}
