{{-- resources/views/errors/404.blade.php --}}
@extends('layouts.appLayout')

@section('title', '404 - Página no encontrada')

@push('styles')
<style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #fdfdfd;
      font-family: Arial, sans-serif;
    }

    h1, p {
      text-align: center;
      margin: 10px 0;
    }

    h1 {
      font-size: 2em;
      color: #333;
    }

    p {
      color: #666;
    }

    canvas {
      display: block;
      margin: 0 auto;
      background-image: linear-gradient(#ccc 1px, transparent 1px), linear-gradient(90deg, #ccc 1px, transparent 1px);
      background-size: 25px 25px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    #gameOver {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
      display: none;
      text-align: center;
      z-index: 1000;
    }

    #gameOver button {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #561eaa;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #gameOver button:hover {
      background-color: #7749cc;
    }
</style>
@endpush

@section('content')
    <h1>¡Oops! Página no encontrada</h1>
    <p>404 – ¡Usa el lápiz para volver al camino!</p>

    <canvas id="snakeCanvas" width="500" height="500"></canvas>

    <div id="gameOver">
      <h2>¡Juego terminado!</h2>
      <p>Has conseguido <span id="finalScore"></span> puntos</p>
      <button onclick="window.location.href='/'">Volver al inicio</button>
    </div>
@endsection

@push('scripts')
<script>
  const canvas = document.getElementById("snakeCanvas");
  const ctx = canvas.getContext("2d");
  const box = 25;
  let snake = [{ x: 9 * box, y: 9 * box }];
  let food = {
    x: Math.floor(Math.random() * 20) * box,
    y: Math.floor(Math.random() * 20) * box
  };
  let score = 0;
  let direction;
  let game;

  const colors = {
    wood: "#deb887",
    yellow: "#ffcc00",
    lead: "#333",
    eraser: "#ff69b4"
  };

  document.addEventListener("keydown", directionControl);

  function directionControl(e) {
    if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
    else if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
    else if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
    else if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
  }

  function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Dibujar cuerpo completo
    for (let i = snake.length - 1; i >= 0; i--) {
      const segment = snake[i];

      // Calcular dirección del segmento
      let segmentDir = "RIGHT";
      if (i > 0) {
        const dx = snake[i - 1].x - segment.x;
        const dy = snake[i - 1].y - segment.y;
        if (dx > 0) segmentDir = "RIGHT";
        else if (dx < 0) segmentDir = "LEFT";
        else if (dy > 0) segmentDir = "DOWN";
        else if (dy < 0) segmentDir = "UP";
      } else {
        segmentDir = direction || "RIGHT";
      }

        if (i === 0) {
        drawPencil(segment.x, segment.y, segmentDir); // cabeza
        } else if (i === snake.length - 1) {
        drawEraser(segment.x, segment.y);
        } else {
        drawPencilSegment(segment.x, segment.y, segmentDir);
        }

    }

    // Dibujar comida
    ctx.beginPath();
    ctx.fillStyle = "#ff3333";
    ctx.arc(food.x + box / 2, food.y + box / 2, box / 2 - 3, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();

    // Movimiento
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;

    if (direction === "LEFT") snakeX -= box;
    if (direction === "UP") snakeY -= box;
    if (direction === "RIGHT") snakeX += box;
    if (direction === "DOWN") snakeY += box;

    // Comer
    if (snakeX === food.x && snakeY === food.y) {
      score++;
      food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };
    } else {
      snake.pop();
    }

    const newHead = { x: snakeX, y: snakeY };
    snake.unshift(newHead);

    // Colisión
    if (
      snakeX < 0 || snakeX >= canvas.width ||
      snakeY < 0 || snakeY >= canvas.height ||
      collision(snakeX, snakeY)
    ) {
      clearInterval(game);
      document.getElementById("finalScore").textContent = score;
      document.getElementById("gameOver").style.display = "block";
    }

    // Puntos
    ctx.fillStyle = "#333";
    ctx.font = "18px Arial";
    ctx.fillText("Puntos: " + score, box, box - 5);
  }

  function drawPencil(x, y, dir) {
    const centerX = x + box / 2;
    const centerY = y + box / 2;

    ctx.save();
    ctx.translate(centerX, centerY);

    let angle = 0;
    if (dir === "UP") angle = -Math.PI / 2;
    else if (dir === "DOWN") angle = Math.PI / 2;
    else if (dir === "LEFT") angle = Math.PI;
    ctx.rotate(angle);

    // Cuerpo
    ctx.fillStyle = colors.yellow;
    ctx.fillRect(-box / 2, -box / 2, box, box);

    // Líneas negras
    drawStripes();

    // Madera
    ctx.fillStyle = colors.wood;
    ctx.beginPath();
    ctx.moveTo(box / 2, -box / 2);
    ctx.lineTo(box / 2 + box, 0);
    ctx.lineTo(box / 2, box / 2);
    ctx.closePath();
    ctx.fill();

    // Mina
    const tipX = box / 2 + box;
    const offset = 6;
    ctx.fillStyle = colors.lead;
    ctx.beginPath();
    ctx.moveTo(tipX - offset, -offset * (box / (2 * box)));
    ctx.lineTo(tipX, 0);
    ctx.lineTo(tipX - offset, offset * (box / (2 * box)));
    ctx.closePath();
    ctx.fill();

    ctx.restore();
  }

  function drawPencilSegment(x, y, dir) {
    const centerX = x + box / 2;
    const centerY = y + box / 2;

    ctx.save();
    ctx.translate(centerX, centerY);

    let angle = 0;
    if (dir === "UP") angle = -Math.PI / 2;
    else if (dir === "DOWN") angle = Math.PI / 2;
    else if (dir === "LEFT") angle = Math.PI;
    ctx.rotate(angle);

    ctx.fillStyle = colors.yellow;
    ctx.fillRect(-box / 2, -box / 2, box, box);
    drawStripes();

    ctx.restore();
  }

  function drawStripes() {
    ctx.strokeStyle = "#222";
    ctx.lineWidth = 1;
    const numLines = 3;
    const spacing = box / (numLines + 1);

    for (let i = 1; i <= numLines; i++) {
      const y = -box / 2 + spacing * i;
      ctx.beginPath();
      ctx.moveTo(-box / 2, y);
      ctx.lineTo(box / 2, y);
      ctx.stroke();
    }
  }

  function drawEraser(x, y) {
    ctx.fillStyle = colors.eraser;
    ctx.fillRect(x, y, box, box);
  }

  function collision(x, y) {
    return snake.slice(1).some(s => s.x === x && s.y === y);
  }

  game = setInterval(drawGame, 100);
</script>
@endpush
