import { useEffect, useRef } from 'react';
import raspberryPi3Svg from '../../assets/Raspberry_Pi_3_illustration.svg';

interface RaspberryPi3Props {
  id?: string;
  x?: number;
  y?: number;
}

// Raspberry Pi 3 GPIO 40-pin header (2 rows × 20 cols).
// Coordinates are in CSS pixels relative to the top-left of the board image
// rendered at 320×205 px.
// Physical layout: pin 1 top-left, pins go left→right, odd=top row, even=bottom row.
//   Top row (odd pins 1,3,5,…39) : y ≈ 8 px
//   Bottom row (even pins 2,4,6,…40): y ≈ 17 px
//   First column x ≈ 15 px, step ≈ 9 px
function buildPinInfo() {
  const PIN_X_START = 15;
  const PIN_X_STEP  = 9;
  const PIN_Y_TOP   = 8;
  const PIN_Y_BOT   = 17;

  const GPIO_NAMES: Record<number, string> = {
    1:'3V3', 2:'5V', 3:'GPIO2', 4:'5V', 5:'GPIO3', 6:'GND',
    7:'GPIO4', 8:'GPIO14', 9:'GND', 10:'GPIO15', 11:'GPIO17',
    12:'GPIO18', 13:'GPIO27', 14:'GND', 15:'GPIO22', 16:'GPIO23',
    17:'3V3', 18:'GPIO24', 19:'GPIO10', 20:'GND', 21:'GPIO9',
    22:'GPIO25', 23:'GPIO11', 24:'GPIO8', 25:'GND', 26:'GPIO7',
    27:'ID_SD', 28:'ID_SC', 29:'GPIO5', 30:'GND', 31:'GPIO6',
    32:'GPIO12', 33:'GPIO13', 34:'GND', 35:'GPIO19', 36:'GPIO16',
    37:'GPIO26', 38:'GPIO20', 39:'GND', 40:'GPIO21',
  };

  const pins = [];
  for (let col = 0; col < 20; col++) {
    const oddPin  = col * 2 + 1;  // top row
    const evenPin = col * 2 + 2;  // bottom row
    const px = PIN_X_START + col * PIN_X_STEP;
    pins.push({ name: GPIO_NAMES[oddPin]  ?? `P${oddPin}`,  x: px, y: PIN_Y_TOP });
    pins.push({ name: GPIO_NAMES[evenPin] ?? `P${evenPin}`, x: px, y: PIN_Y_BOT });
  }
  return pins;
}

export const RaspberryPi3 = ({ id = 'raspberry-pi-3', x = 0, y = 0 }: RaspberryPi3Props) => {
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (imgRef.current) {
      (imgRef.current as any).pinInfo = buildPinInfo();
    }
  }, []);

  return (
    <img
      ref={imgRef}
      id={id}
      src={raspberryPi3Svg}
      alt="Raspberry Pi 3"
      style={{
        position: 'absolute',
        left: `${x}px`,
        top: `${y}px`,
        width: '320px',
        height: '205px',
        display: 'block',
        userSelect: 'none',
        pointerEvents: 'none',
      }}
    />
  );
};