// stadium.jsx — Interactive SVG stadium map
// Octagonal stadium: 4 main stands + 4 corners (grouped as "Famille")
// Pitch in center with markings.

const Stadium = ({ zones, selected, hovered, onSelect, onHover, showPrices }) => {
  // Each shape is a polygon connecting outer-octagon edges to inner-octagon edges.
  // outer ring: 130,150  200,80  800,80  870,150  870,550  800,620  200,620  130,550
  // inner ring: 320,230  340,210  660,210  680,230  680,470  660,490  340,490  320,470

  const SHAPES = {
    officielle: {
      points: "200,80 800,80 660,210 340,210",
      label:  { x: 500, y: 142, anchor: "middle" },
      price:  { x: 500, y: 168, anchor: "middle" },
    },
    presidentielle: {
      points: "340,490 660,490 800,620 200,620",
      label:  { x: 500, y: 545, anchor: "middle" },
      price:  { x: 500, y: 580, anchor: "middle" },
    },
    kop: {
      points: "680,230 870,150 870,550 680,470",
      label:  { x: 798, y: 340, anchor: "middle", rotate: 90, cx: 798, cy: 350 },
      price:  { x: 798, y: 376, anchor: "middle", rotate: 90, cx: 798, cy: 350 },
    },
    ouest: {
      points: "130,150 320,230 320,470 130,550",
      label:  { x: 202, y: 340, anchor: "middle", rotate: -90, cx: 202, cy: 350 },
      price:  { x: 202, y: 376, anchor: "middle", rotate: -90, cx: 202, cy: 350 },
    },
    // Famille — 4 corner pieces, all share zone id
    famille: {
      pieces: [
        { points: "200,80 340,210 320,230 130,150" },   // NW
        { points: "800,80 870,150 680,230 660,210" },   // NE
        { points: "870,550 800,620 660,490 680,470" },  // SE
        { points: "200,620 130,550 320,470 340,490" },  // SW
      ],
      label: { x: 245, y: 165, anchor: "middle" },
    },
  };

  const ORDER = ["officielle", "presidentielle", "kop", "ouest", "famille"];

  const renderZone = (id) => {
    const z = zones.find(z => z.id === id);
    if (!z) return null; // zone absente pour ce match
    const s = SHAPES[id];
    const cls = [
      "zone",
      `zone--${z.status}`,
      selected === id ? "zone--selected" : "",
      hovered === id  ? "zone--hovered"  : "",
    ].join(" ");

    const events = z.status === "sold" ? {} : {
      onClick: () => onSelect(id),
      onMouseEnter: () => onHover(id),
      onMouseLeave: () => onHover(null),
    };

    if (id === "famille") {
      return (
        <g key={id} className={cls} {...events}>
          {s.pieces.map((p, i) => (
            <polygon key={i} className="zone-shape" points={p.points} strokeLinejoin="round" />
          ))}
          {/* Labels in 2 corners (NW + SE) for visibility */}
          <text className="zone-label" x="225" y="160" textAnchor="middle">FAMILLE</text>
          {showPrices && <text className="zone-price" x="225" y="180" textAnchor="middle">{z.priceFrom}€</text>}
          <text className="zone-label" x="775" y="555" textAnchor="middle">FAMILLE</text>
          {showPrices && <text className="zone-price" x="775" y="575" textAnchor="middle">{z.priceFrom}€</text>}
        </g>
      );
    }

    const labelTransform = s.label.rotate
      ? `rotate(${s.label.rotate} ${s.label.cx} ${s.label.cy})`
      : undefined;

    return (
      <g key={id} className={cls} {...events}>
        <polygon className="zone-shape" points={s.points} strokeLinejoin="round" />
        <text
          className="zone-label"
          x={s.label.x} y={s.label.y}
          textAnchor={s.label.anchor}
          transform={labelTransform}
        >
          {z.shortName}
        </text>
        {showPrices && (
          <text
            className="zone-price"
            x={s.price.x} y={s.price.y}
            textAnchor={s.price.anchor}
            transform={labelTransform}
          >
            {z.status === "sold" ? "COMPLET" : `${z.priceFrom}€`}
          </text>
        )}
      </g>
    );
  };

  return (
    <div className="map-stage">
      <svg viewBox="0 0 1000 700" preserveAspectRatio="xMidYMid meet" aria-label="Plan du stade">
        {/* Pitch */}
        <g>
          <rect className="pitch-fill" x="340" y="230" width="320" height="240" rx="4" />
          {/* Mowing stripes */}
          <g className="pitch-stripes">
            {Array.from({length: 8}).map((_, i) => (
              <line key={i}
                x1={340 + i*40} y1={230}
                x2={340 + i*40} y2={470}
              />
            ))}
          </g>
          {/* Pitch lines */}
          <g className="pitch-line">
            <rect x="340" y="230" width="320" height="240" />
            <line x1="500" y1="230" x2="500" y2="470" />
            <circle cx="500" cy="350" r="32" />
            {/* Penalty boxes (left & right since horizontal pitch) */}
            <rect x="340" y="290" width="40" height="120" />
            <rect x="620" y="290" width="40" height="120" />
            <rect x="340" y="320" width="16" height="60" />
            <rect x="644" y="320" width="16" height="60" />
            {/* Goals */}
            <line x1="338" y1="335" x2="338" y2="365" strokeWidth="2.5" />
            <line x1="662" y1="335" x2="662" y2="365" strokeWidth="2.5" />
          </g>
          <circle className="pitch-spot" cx="500" cy="350" r="2" />
          <text className="pitch-label" x="500" y="358">PELOUSE · STADE BONAL</text>
        </g>

        {/* Zones */}
        {ORDER.map(renderZone)}
      </svg>

      <div className="compass">N ↑</div>
    </div>
  );
};

window.Stadium = Stadium;