import React, { useState, useEffect, useRef } from 'react';
import { Settings, Printer, RefreshCw, Upload, Eye, EyeOff, Play, Flag } from 'lucide-react';

// Algoritmo de generación de laberintos (Depth-First Search - Backtracking)
const generateMaze = (width, height) => {
  const grid = [];
  for (let y = 0; y < height; y++) {
    const row = [];
    for (let x = 0; x < width; x++) {
      row.push({
        x, y,
        walls: { top: true, right: true, bottom: true, left: true },
        visited: false,
        path: false // Parte de la solución
      });
    }
    grid.push(row);
  }

  const stack = [];
  const start = grid[0][0];
  start.visited = true;
  stack.push(start);

  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = [];

    const dirs = [
      { x: 0, y: -1, wall: 'top', opp: 'bottom' },
      { x: 1, y: 0, wall: 'right', opp: 'left' },
      { x: 0, y: 1, wall: 'bottom', opp: 'top' },
      { x: -1, y: 0, wall: 'left', opp: 'right' }
    ];

    dirs.forEach(dir => {
      const nx = current.x + dir.x;
      const ny = current.y + dir.y;
      if (nx >= 0 && nx < width && ny >= 0 && ny < height && !grid[ny][nx].visited) {
        neighbors.push({ cell: grid[ny][nx], dir });
      }
    });

    if (neighbors.length > 0) {
      const chosen = neighbors[Math.floor(Math.random() * neighbors.length)];
      current.walls[chosen.dir.wall] = false;
      chosen.cell.walls[chosen.dir.opp] = false;
      chosen.cell.visited = true;
      stack.push(chosen.cell);
    } else {
      stack.pop();
    }
  }

  // Resetear visitados para el solver
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      grid[y][x].visited = false;
    }
  }

  // Resolver para encontrar el camino (BFS simple)
  const queue = [{ x: 0, y: 0, path: [] }];
  const visited = new Set(['0,0']);
  let solutionPath = [];

  while (queue.length > 0) {
    const { x, y, path } = queue.shift();
    const currentPath = [...path, { x, y }];

    if (x === width - 1 && y === height - 1) {
      solutionPath = currentPath;
      break;
    }

    const currentCell = grid[y][x];
    const moves = [
      { x: 0, y: -1, wall: 'top' },
      { x: 1, y: 0, wall: 'right' },
      { x: 0, y: 1, wall: 'bottom' },
      { x: -1, y: 0, wall: 'left' }
    ];

    moves.forEach(move => {
      if (!currentCell.walls[move.wall]) {
        const nx = x + move.x;
        const ny = y + move.y;
        if (!visited.has(`${nx},${ny}`)) {
          visited.add(`${nx},${ny}`);
          queue.push({ x: nx, y: ny, path: currentPath });
        }
      }
    });
  }

  return { grid, solutionPath };
};

const App = () => {
  const [width, setWidth] = useState(15);
  const [height, setHeight] = useState(15);
  const [title, setTitle] = useState("¡Encuentra el camino!");
  const [maze, setMaze] = useState({ grid: [], solutionPath: [] });
  const [showSolution, setShowSolution] = useState(false);
  const [startImg, setStartImg] = useState(null);
  const [endImg, setEndImg] = useState(null);
  
  // Referencias para file inputs
  const startInputRef = useRef(null);
  const endInputRef = useRef(null);

  useEffect(() => {
    handleGenerate();
  }, []); // Generar al montar

  const handleGenerate = () => {
    const newMaze = generateMaze(width, height);
    setMaze(newMaze);
    setShowSolution(false);
  };

  const handleImageUpload = (e, type) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        if (type === 'start') setStartImg(event.target.result);
        else setEndImg(event.target.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const handlePrint = () => {
    window.print();
  };

  // Constantes de dibujo
  const cellSize = 30; // Tamaño base para el SVG
  const wallWidth = 2;
  const svgWidth = width * cellSize + wallWidth;
  const svgHeight = height * cellSize + wallWidth;

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 flex flex-col items-center p-4 print:p-0 print:bg-white">
      
      {/* --- PANEL DE CONTROL (Oculto al imprimir) --- */}
      <div className="w-full max-w-5xl bg-white shadow-xl rounded-2xl overflow-hidden mb-8 print:hidden border border-slate-200">
        <div className="bg-indigo-600 p-4 text-white flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Settings className="w-6 h-6" />
            <h1 className="text-xl font-bold">Generador de Laberintos Docente</h1>
          </div>
          <button 
            onClick={handleGenerate}
            className="flex items-center gap-2 bg-indigo-500 hover:bg-indigo-400 px-4 py-2 rounded-lg transition-colors font-medium text-sm"
          >
            <RefreshCw className="w-4 h-4" /> Regenerar
          </button>
        </div>

        <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Configuración Básica */}
          <div className="space-y-4">
            <h3 className="font-semibold text-slate-500 text-sm uppercase tracking-wider">Configuración</h3>
            
            <div>
              <label className="block text-sm font-medium mb-1">Título de la actividad</label>
              <input 
                type="text" 
                value={title} 
                onChange={(e) => setTitle(e.target.value)}
                className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-1">
                Complejidad (Ancho: {width}, Alto: {height})
              </label>
              <input 
                type="range" min="5" max="35" 
                value={width} 
                onChange={(e) => {
                  setWidth(parseInt(e.target.value));
                  setHeight(parseInt(e.target.value)); // Mantener cuadrado por simplicidad visual
                }}
                className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
              />
              <p className="text-xs text-slate-400 mt-1">Desliza para ajustar la dificultad</p>
            </div>
          </div>

          {/* Imágenes */}
          <div className="space-y-4">
            <h3 className="font-semibold text-slate-500 text-sm uppercase tracking-wider">Imágenes Personalizadas</h3>
            
            <div className="flex gap-4">
              <div className="flex-1">
                <button 
                  onClick={() => startInputRef.current.click()}
                  className="w-full border-2 border-dashed border-slate-300 hover:border-indigo-400 rounded-lg p-3 flex flex-col items-center justify-center text-slate-500 hover:text-indigo-600 transition-colors h-24"
                >
                  {startImg ? (
                    <img src={startImg} alt="Inicio" className="h-12 w-12 object-contain" />
                  ) : (
                    <>
                      <Upload className="w-5 h-5 mb-1" />
                      <span className="text-xs text-center">Subir Inicio</span>
                    </>
                  )}
                </button>
                <input ref={startInputRef} type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, 'start')} />
                {startImg && <button onClick={() => setStartImg(null)} className="text-xs text-red-500 mt-1 w-full text-center hover:underline">Quitar</button>}
              </div>

              <div className="flex-1">
                <button 
                  onClick={() => endInputRef.current.click()}
                  className="w-full border-2 border-dashed border-slate-300 hover:border-indigo-400 rounded-lg p-3 flex flex-col items-center justify-center text-slate-500 hover:text-indigo-600 transition-colors h-24"
                >
                  {endImg ? (
                    <img src={endImg} alt="Fin" className="h-12 w-12 object-contain" />
                  ) : (
                    <>
                      <Upload className="w-5 h-5 mb-1" />
                      <span className="text-xs text-center">Subir Final</span>
                    </>
                  )}
                </button>
                <input ref={endInputRef} type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(e, 'end')} />
                {endImg && <button onClick={() => setEndImg(null)} className="text-xs text-red-500 mt-1 w-full text-center hover:underline">Quitar</button>}
              </div>
            </div>
          </div>

          {/* Acciones */}
          <div className="space-y-4">
            <h3 className="font-semibold text-slate-500 text-sm uppercase tracking-wider">Acciones</h3>
            
            <button 
              onClick={() => setShowSolution(!showSolution)}
              className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium transition-colors ${showSolution ? 'bg-amber-100 text-amber-700 hover:bg-amber-200' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}
            >
              {showSolution ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
              {showSolution ? 'Ocultar Solución' : 'Ver Solución'}
            </button>

            <button 
              onClick={handlePrint}
              className="w-full flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-3 rounded-lg font-medium shadow-md transition-all hover:shadow-lg"
            >
              <Printer className="w-5 h-5" />
              Exportar PDF / Imprimir
            </button>
            <p className="text-xs text-slate-400 text-center">Usa "Guardar como PDF" en el diálogo de impresión.</p>
          </div>
        </div>
      </div>

      {/* --- ÁREA IMPRIMIBLE (Vista Previa) --- */}
      <div id="print-area" className="bg-white p-8 rounded-xl shadow-lg print:shadow-none print:w-full print:h-screen print:p-0 flex flex-col items-center">
        
        {/* Encabezado del documento */}
        <div className="w-full text-center mb-6">
          <h2 className="text-3xl font-bold text-slate-800 mb-2 font-serif">{title}</h2>
          <div className="flex justify-center gap-8 text-sm text-slate-500">
            <p>Nombre: ________________________________</p>
            <p>Fecha: _______________</p>
          </div>
        </div>

        {/* El Laberinto SVG */}
        <div className="relative border-4 border-slate-800 rounded-lg overflow-hidden">
          <svg 
            width={svgWidth} 
            height={svgHeight} 
            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
            className="block"
          >
            <defs>
              <pattern id="gridPattern" width={cellSize} height={cellSize} patternUnits="userSpaceOnUse">
                 {/* Fondo sutil si se desea, ahora blanco puro */}
                 <rect width={cellSize} height={cellSize} fill="white" />
              </pattern>
            </defs>

            {/* Fondo */}
            <rect width={svgWidth} height={svgHeight} fill="white" />

            {/* Solución (Si está activada) */}
            {showSolution && maze.solutionPath.length > 0 && (
              <polyline
                points={maze.solutionPath.map(p => `${p.x * cellSize + cellSize/2},${p.y * cellSize + cellSize/2}`).join(' ')}
                fill="none"
                stroke="#fbbf24" // Amber-400
                strokeWidth={cellSize * 0.4}
                strokeLinecap="round"
                strokeLinejoin="round"
                opacity="0.6"
              />
            )}

            {/* Paredes del Laberinto */}
            <g stroke="#1e293b" strokeWidth={wallWidth} strokeLinecap="square">
              {/* Bordes exteriores */}
              <line x1={0} y1={0} x2={svgWidth} y2={0} />
              <line x1={svgWidth} y1={0} x2={svgWidth} y2={svgHeight} />
              <line x1={0} y1={svgHeight} x2={svgWidth} y2={svgHeight} />
              <line x1={0} y1={0} x2={0} y2={svgHeight} />

              {/* Paredes internas */}
              {maze.grid.map((row) => 
                row.map((cell) => (
                  <React.Fragment key={`${cell.x}-${cell.y}`}>
                    {cell.walls.bottom && (
                      <line 
                        x1={cell.x * cellSize} 
                        y1={(cell.y + 1) * cellSize} 
                        x2={(cell.x + 1) * cellSize} 
                        y2={(cell.y + 1) * cellSize} 
                      />
                    )}
                    {cell.walls.right && (
                      <line 
                        x1={(cell.x + 1) * cellSize} 
                        y1={cell.y * cellSize} 
                        x2={(cell.x + 1) * cellSize} 
                        y2={(cell.y + 1) * cellSize} 
                      />
                    )}
                  </React.Fragment>
                ))
              )}
            </g>

            {/* Marcadores de Inicio y Fin */}
            <foreignObject x={2} y={2} width={cellSize - 4} height={cellSize - 4}>
              <div className="w-full h-full flex items-center justify-center">
                {startImg ? (
                  <img src={startImg} className="w-full h-full object-contain" alt="Start" />
                ) : (
                   <Play className="text-green-600 w-full h-full" fill="currentColor" />
                )}
              </div>
            </foreignObject>

            <foreignObject x={(width - 1) * cellSize + 2} y={(height - 1) * cellSize + 2} width={cellSize - 4} height={cellSize - 4}>
              <div className="w-full h-full flex items-center justify-center">
                {endImg ? (
                  <img src={endImg} className="w-full h-full object-contain" alt="End" />
                ) : (
                  <Flag className="text-red-600 w-full h-full" fill="currentColor" />
                )}
              </div>
            </foreignObject>

          </svg>
        </div>

        {/* Instrucciones al pie */}
        <div className="mt-8 text-center text-slate-500 text-sm max-w-lg print:mt-12">
          <p className="italic">¡Ayuda a llegar desde el punto de inicio hasta el final sin chocar con las paredes!</p>
        </div>
      </div>

      <style>{`
        @media print {
          @page {
            size: auto;
            margin: 10mm;
          }
          body {
            background: white;
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }
          /* Ocultar todo lo que no sea el área de impresión */
          body > *:not(#root) { display: none; }
          #root > *:not(.print\\:block) { display: none; } /* Tailwind print classes are easier, but let's be explicit */
          
          /* Forzar visibilidad del área de impresión y ocultar panel */
          .print\\:hidden { display: none !important; }
          
          /* Resetear contenedores para impresión */
          .min-h-screen { min-height: auto; display: block; }
          .flex { display: block; }
          
          /* Centrar el contenido impreso */
          #print-area {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin: 0 auto;
            box-shadow: none;
            padding: 0;
          }
        }
      `}</style>
    </div>
  );
};

export default App;