import { createEffect, onMount } from 'solid-js';

type CaptchaCanvasProps = {
  /** Human-readable challenge text from the server, e.g. "7 + 12 = ?" */
  challenge: string;
  class?: string;
};

export default function CaptchaCanvas(props: CaptchaCanvasProps) {
  let canvasRef: HTMLCanvasElement | undefined;

  const drawCaptcha = () => {
    const canvas = canvasRef;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const width = 176;
    const height = 52;

    // Set canvas resolution (fixed at 1x to prevent zoom issues)
    canvas.width = width;
    canvas.height = height;
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    ctx.setTransform(1, 0, 0, 1, 0, 0);

    // Clear and fill background
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, width, height);

    // Draw decorative lines (within bounds)
    for (let i = 0; i < 2; i += 1) {
      ctx.strokeStyle = i % 2 === 0 ? 'rgba(253,98,22,0.16)' : 'rgba(27,36,64,0.14)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(Math.random() * width, Math.random() * height);
      ctx.lineTo(Math.random() * width, Math.random() * height);
      ctx.stroke();
    }

    // Draw decorative circles (within bounds)
    for (let i = 0; i < 3; i += 1) {
      ctx.fillStyle = i % 2 === 0 ? 'rgba(253,98,22,0.10)' : 'rgba(27,36,64,0.09)';
      ctx.beginPath();
      ctx.arc(Math.random() * width, Math.random() * height, Math.random() * 1.8 + 0.6, 0, Math.PI * 2);
      ctx.fill();
    }

    const text = String(props.challenge || '').trim();
    if (!text) return;

    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';

    // Shrink the font until the (variable-length) challenge text fits.
    const paddingX = 10;
    const maxWidth = width - paddingX * 2;
    let fontSize = 20;
    const minFontSize = 10;
    ctx.font = `800 ${fontSize}px "Courier New", monospace`;
    while (fontSize > minFontSize && ctx.measureText(text).width > maxWidth) {
      fontSize -= 1;
      ctx.font = `800 ${fontSize}px "Courier New", monospace`;
    }

    ctx.fillStyle = '#0f172a';
    ctx.fillText(text, width / 2, height / 2, maxWidth);
  };

  onMount(() => {
    drawCaptcha();
  });

  createEffect(() => {
    // Access props.challenge to track it and redraw when it changes
    const _ = props.challenge;
    drawCaptcha();
  });

  return (
    <canvas
      ref={canvasRef}
      width={176}
      height={52}
      aria-label="Captcha challenge"
      draggable={false}
      onContextMenu={(event) => event.preventDefault()}
      class={props.class}
    />
  );
}
