src/app/DrawingBoard.js

import React from 'react';
import { 
  Undo2, 
  Redo2, 
  Pencil, 
  Hand, 
  Square, 
  Eraser,
  Sun,
  Moon,
  ZoomIn,
  ZoomOut,
  Grid,
  GripHorizontal,
  RotateCcw,
  Scan,
  Download,
  Menu,
  X,
  Ruler,
  Palette
} from 'lucide-react';

const PRESET_COLORS = [
  '#000000', '#FFFFFF', '#FF4500', '#FFA500',
  '#FF0000', '#FF1493', '#800080', '#4B0082',
  '#008000', '#C0C0C0', '#FFA500', '#4169E1',
  '#00FF00', '#40E0D0', '#0000FF', '#FFD700'
];




const DrawingBoard = ({
  tool,
  setTool,
  elements,
  pencilSize,
  setPencilSize,
  scale,
  setScale,
  onZoom,
  undo,
  redo,
  action,
  selectedElement,
  panOffset,
  scaleOffset,
  handleMouseDown,
  handleMouseMove,
  handleMouseUp,
  handleBlur,
  captureDrawnArea,
  handleDetectRegions,
  handleDownloadRegions
}) => {
  const textAreaRef = React.useRef(null);
  const backgroundCanvasRef = React.useRef(null);
  const drawingCanvasRef = React.useRef(null);
  const [backgroundType, setBackgroundType] = React.useState('none');
  const [gridSize, setGridSize] = React.useState(45);
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  const [showDownloadButton, setShowDownloadButton] = React.useState(false);
  const [showColorPicker, setShowColorPicker] = React.useState(false);
  const [currentColor, setCurrentColor] = React.useState('#000000');
  const [customColor, setCustomColor] = React.useState('#000000');
  const [darkMode, setDarkMode] = React.useState(() => {
    const savedMode = localStorage.getItem('drawingBoardDarkMode');
    if (savedMode !== null) {
      return savedMode === 'true';
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  });

  React.useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e) => {
      const savedMode = localStorage.getItem('drawingBoardDarkMode');
      if (savedMode === null) {
        setDarkMode(e.matches);
      }
    };

    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  React.useEffect(() => {
    localStorage.setItem('drawingBoardDarkMode', darkMode);
    drawElements();
  }, [darkMode]);

  const drawBackground = React.useCallback(() => {
    const canvas = backgroundCanvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;

    ctx.fillStyle = darkMode ? '#ffffff' : '#000000';
    ctx.fillRect(0, 0, width, height);

    const offsetX = (panOffset.x * scale - scaleOffset.x) % (gridSize * scale);
    const offsetY = (panOffset.y * scale - scaleOffset.y) % (gridSize * scale);
    const gridColor = darkMode ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)';

    if (backgroundType === 'grid') {
      const majorGridSize = gridSize *5;
      const majorGridColor = darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
      const minorGridColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
      ctx.beginPath();
      ctx.strokeStyle = gridColor;
      ctx.lineWidth = 0.5;

      for (let x = offsetX; x < width; x += gridSize * scale) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
      }

      for (let y = offsetY; y < height; y += gridSize * scale) {
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
      }

      ctx.stroke();
      ctx.beginPath();
      ctx.strokeStyle = majorGridColor;
      ctx.lineWidth = 1.5;

      // Tính offset cho grid lớn
      const majorOffsetX = offsetX - (offsetX % (majorGridSize * scale));
      const majorOffsetY = offsetY - (offsetY % (majorGridSize * scale));
      for (let x = majorOffsetX; x < width; x += majorGridSize * scale) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
      }

      // Vẽ các đường ngang lớn
      for (let y = majorOffsetY; y < height; y += majorGridSize * scale) {
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
      }
      ctx.stroke();
    } else if (backgroundType === 'dots') {
      ctx.fillStyle = gridColor;
      const dotSize = 2;
      
      for (let x = offsetX; x < width; x += gridSize * scale) {
        for (let y = offsetY; y < height; y += gridSize * scale) {
          ctx.beginPath();
          ctx.arc(x, y, 1, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    }
  }, [backgroundType, gridSize, scale, panOffset, scaleOffset, darkMode]);
  const toggleBackground = () => {
    setBackgroundType(prev => {
      if (prev === 'none') return 'grid';
      if (prev === 'grid') return 'dots';
      return 'none';
    });
  };
  const drawElements = React.useCallback(() => {
    const canvas = drawingCanvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.translate(panOffset.x * scale - scaleOffset.x, panOffset.y * scale - scaleOffset.y);
    ctx.scale(scale, scale);

    elements.forEach(element => {
      if (element.type === 'pencil') {
        ctx.beginPath();
        ctx.strokeStyle = element.color || currentColor;
        ctx.lineWidth = element.size;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        
        element.points.forEach((point, index) => {
          if (index === 0) {
            ctx.moveTo(point.x, point.y);
          } else {
            ctx.lineTo(point.x, point.y);
          }
        });
        ctx.stroke();
      } else if (element.type === 'line') {
        ctx.beginPath();
        ctx.strokeStyle = element.color || currentColor;
        ctx.lineWidth = 2;
        ctx.moveTo(element.x1, element.y1);
        ctx.lineTo(element.x2, element.y2);
        ctx.stroke();
      } else if (element.type === 'rectangle') {
        ctx.strokeStyle = element.color || currentColor;
        ctx.lineWidth = 2;
        ctx.strokeRect(
          element.x1,
          element.y1,
          element.x2 - element.x1,
          element.y2 - element.y1
        );
      } else if (element.type === 'text') {
        ctx.font = '24px sans-serif';
        ctx.fillStyle = element.color || currentColor;
        ctx.fillText(element.text, element.x1, element.y1);
      }
    });

    ctx.restore();
  }, [elements, scale, panOffset, scaleOffset, currentColor]);
  React.useEffect(() => {
    drawBackground();
    drawElements();
  }, [drawBackground, drawElements]);
  const ColorPickerButton = () => (
    <div className="relative">
      <button
        onClick={() => setShowColorPicker(!showColorPicker)}
        className="p-2 rounded hover:bg-opacity-80 flex items-center gap-1"
        title="Color Picker"
      >
        <div
          className="w-5 h-5 rounded-full border border-gray-300"
          style={{ backgroundColor: currentColor }}
        />
        <Palette size={16} color={iconColor} />
      </button>
      {showColorPicker && <ColorPicker />}
    </div>
  );

  React.useEffect(() => {
    const handleResize = () => {
      if (backgroundCanvasRef.current && drawingCanvasRef.current) {
        backgroundCanvasRef.current.width = window.innerWidth;
        backgroundCanvasRef.current.height = window.innerHeight;
        drawingCanvasRef.current.width = window.innerWidth;
        drawingCanvasRef.current.height = window.innerHeight;
        drawBackground();
        drawElements();
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, [drawBackground, drawElements]);

  const toggleDarkMode = () => {
    setDarkMode(prev => !prev);
  };
  
  const handleDetectAndShowDownload = () => {
    handleDetectRegions();
    setShowDownloadButton(true);
    setIsMenuOpen(false);
  };  

  const iconColor = darkMode ? "#000000" : "#ffffff"; // Đảo ngược màu icon
  const barBgColor = darkMode ? "bg-white" : "bg-gray-800"; // Giữ nguyên màu nền
  const textColor = darkMode ? 'text-black' : 'text-white'; // Đảo ngược màu text
  const handleColorChange =(color)=>{
    setCurrentColor(color);
    setShowColorPicker(false);
  };
  const handleCustomColorChange = (e) =>{
    const newColor = e.target.value;
    setCustomColor(newColor);
    setCurrentColor(newColor);
  };
  const ColorPicker = () => (
    <div className={`absolute top-full mt-2 p-2 ${barBgColor} rounded-lg shadow-lg`}>
      <div className="grid grid-cols-4 gap-2 mb-2">
        {PRESET_COLORS.map((color, index) => (
          <button
            key={index}
            onClick={() => handleColorChange(color)}
            className="w-6 h-6 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
            style={{ 
              backgroundColor: color,
              border: currentColor === color ? '2px solid #3B82F6' : '1px solid #D1D5DB'
            }}
          />
        ))}
      </div>
      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-gray-600">
        <input
          type="color"
          value={customColor}
          onChange={handleCustomColorChange}
          className="w-8 h-8 p-0 border-0 rounded cursor-pointer"
        />
        <input
          type="text"
          value={customColor.toUpperCase()}
          onChange={(e) => {
            const val = e.target.value;
            if (/^#[0-9A-F]{0,6}$/i.test(val)) {
              setCustomColor(val);
              if (val.length === 7) setCurrentColor(val);
            }
          }}
          className={`w-20 px-1 py-0.5 text-sm rounded ${
            darkMode ? 'bg-gray-700 text-white' : 'bg-white text-black'
          }`}
          placeholder="#000000"
        />
      </div>
    </div>
  );
  return (
    <div className={`relative w-full h-screen ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
      {/* Corner Menu Button */}
      <button
        onClick={() => setIsMenuOpen(!isMenuOpen)}
        className={`fixed top-4 left-4 z-20 p-2 ${barBgColor} rounded-lg shadow-lg hover:bg-opacity-80`}
      >
        {isMenuOpen ? 
          <X size={24} color={iconColor} /> : 
          <Menu size={24} color={iconColor} />
        }
      </button>

      {/* Corner Menu Panel */}
      {isMenuOpen && (
        <div className={`fixed top-16 left-4 z-20 ${barBgColor} rounded-lg shadow-lg p-4 w-64`}>
          <div className="flex flex-col gap-4">
            {/* Theme Toggle */}
            <button
              onClick={toggleDarkMode}
              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
            >
              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
                {darkMode ? 'Light Mode' : 'Dark Mode'}
              </span>
              {darkMode ? 
                <Sun size={20} color={iconColor} /> : 
                <Moon size={20} color={iconColor} />
              }
            </button>

            {/* Grid Toggle */}
            <button
              onClick={() => setBackgroundType(prev => prev === 'grid' ? 'none' : 'grid')}
              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
            >
              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
                Show Grid
              </span>
              <Grid 
                size={20} 
                color={iconColor}
                className={backgroundType === 'grid' ? 'opacity-100' : 'opacity-50'}
              />
            </button>
            <button
              onClick={toggleBackground}
              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${
                darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'
              }`}
            >
              <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
                {backgroundType === 'none' ? 'No Grid' : 
                backgroundType === 'grid' ? 'Grid Lines' : 'Grid Dots'}
              </span>
              <Grid 
                size={20} 
                color={iconColor}
                className={backgroundType !== 'none' ? 'opacity-100' : 'opacity-50'}
              />
            </button>
            
            {backgroundType !== 'none' && (
              <div className="flex flex-col gap-2 p-2">
                <div className="flex items-center justify-between">
                  <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
                    Grid Size
                  </span>
                  <span className={`text-sm ${darkMode ? 'text-black' : 'text-white'}`}>
                    {gridSize}px
                  </span>
                </div>
                <input
                  type="range"
                  min="10"
                  max="100"
                  value={gridSize}
                  onChange={(e) => setGridSize(parseInt(e.target.value))}
                  className="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
                />
              </div>
            )}
            <style jsx global>{`
              input[type="range"] {
                -webkit-appearance: none;
                height: 4px;
                background: ${darkMode ? '#ffffff40' : '#00000040'};
                border-radius: 2px;
                outline: none;
              }

              input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 12px;
                height: 12px;
                background: ${darkMode ? '#ffffff' : '#000000'};
                border-radius: 50%;
                cursor: pointer;
              }

              input[type="range"]::-moz-range-thumb {
                width: 12px;
                height: 12px;
                background: ${darkMode ? '#ffffff' : '#000000'};
                border-radius: 50%;
                cursor: pointer;
                border: none;
              }

              input[type="range"]:hover::-webkit-slider-thumb {
                background: #3b82f6;
              }

              input[type="range"]:hover::-moz-range-thumb {
                background: #3b82f6;
              }
            `}</style>
            {/* Region Detection */}
            <button
              onClick={handleDetectAndShowDownload}
              className={`w-full flex items-center justify-between p-2 rounded hover:bg-opacity-80 ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
            >
              <span className={`text-sm ${darkMode ? 'text-gray-600' : 'text-white'}`}>
                Detect Regions
              </span>
              <Scan size={20} color={iconColor} />
            </button>
          </div>
        </div>
      )}

      {/* Main Toolbar */}
      <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 flex items-center gap-1 ${barBgColor} rounded-lg shadow-lg p-2 z-10`}>
        <div className="flex items-center gap-1 pr-2 border-r border-gray-200">
          <button onClick={undo} className="p-2 rounded hover:bg-opacity-80" title="Undo">
            <Undo2 size={20} color={iconColor} />
          </button>
          <button onClick={redo} className="p-2 rounded hover:bg-opacity-80" title="Redo">
            <Redo2 size={20} color={iconColor} />
          </button>
        </div>

        <div className="flex items-center gap-1 px-2">
          <ColorPickerButton />
          <button
            onClick={() => setTool('selection')}
            className={`p-2 rounded ${tool === 'selection' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
            title="Selection"
          >
            <Hand size={20} color={tool === 'selection' ? '#ffffff' : iconColor} />
          </button>
          <button
            onClick={() => setTool('line')}
            className={`p-2 rounded ${tool === 'line' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
            title="Line"
          >
            <GripHorizontal size={20} color={tool === 'line' ? '#ffffff' : iconColor} />
          </button>
          <button
            onClick={() => setTool('rectangle')}
            className={`p-2 rounded ${tool === 'rectangle' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
            title="Rectangle"
          >
            <Square size={20} color={tool === 'rectangle' ? '#ffffff' : iconColor} />
          </button>
          <button
            onClick={() => setTool('pencil')}
            className={`p-2 rounded ${tool === 'pencil' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
            title="Pencil"
          >
            <Pencil size={20} color={tool === 'pencil' ? '#ffffff' : iconColor} />
          </button>
          <button
            onClick={() => setTool('eraser')}
            className={`p-2 rounded ${tool === 'eraser' ? 'bg-blue-500' : 'hover:bg-opacity-80'}`}
            title="Eraser"
          >
            <Eraser size={20} color={tool === 'eraser' ? '#ffffff' : iconColor} />
          </button>
        {(tool === 'pencil') && (
          <div className=' flex items-center gap-2 ml-2'>
            <Ruler size={16} color={iconColor} />
            <input
              type="range"
              min="1"
              max="20"
              value={pencilSize}
              onChange={(e) => setPencilSize(parseInt(e.target.value))}
              className="w-24 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
              title="Pencil Size"
            />
            <span className={'text-sm ${textColor}'}>{pencilSize}px</span>
          </div>
        )}
        </div>

        <div className="flex items-center gap-1 pl-2 border-l border-gray-200">
          <button
            onClick={() => setScale(1)}
            className="p-2 rounded hover:bg-opacity-80"
            title="Reset View"
          >
            <RotateCcw size={20} color={iconColor} />
          </button>
          <button
            onClick={() => onZoom(-0.1)}
            className="p-2 rounded hover:bg-opacity-80"
            title="Zoom Out"
          >
            <ZoomOut size={20} color={iconColor} />
          </button>
          <span className={`text-sm min-w-[4rem] text-center ${textColor}`}>
            {Math.round(scale * 100)}%
          </span>
          <button
            onClick={() => onZoom(0.1)}
            className="p-2 rounded hover:bg-opacity-80"
            title="Zoom In"
          >
            <ZoomIn size={20} color={iconColor} />
          </button>
        </div>
      </div>

      {/* Download Button */}
      {showDownloadButton && (
        <button
          onClick={() => {
            handleDownloadRegions();
            setShowDownloadButton(false);
          }}
          className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-20 px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 flex items-center gap-2"
        >
          <Download size={20} color="#ffffff" />
          Download Detected Regions
        </button>
      )}


      {/* Canvas Container */}
      <div className="absolute inset-0">
        <canvas
          ref={backgroundCanvasRef}
          className="absolute inset-0 z-0"
        />
        <canvas
          id="canvas"
          ref={drawingCanvasRef}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          className="absolute inset-0 z-1"
        />
      </div>

      {/* Text Area for Writing */}
      {action === "writing" && (
        <textarea
          ref={textAreaRef}
          onBlur={handleBlur}
          style={{
            position: "fixed",
            top: (selectedElement.y1 - 2) * scale + panOffset.y * scale - scaleOffset.y,
            left: selectedElement.x1 * scale + panOffset.x * scale - scaleOffset.x,
            font: `${24 * scale}px sans-serif`,
            margin: 0,
            padding: 0,
            border: 0,
            outline: 0,
            resize: "auto",
            overflow: "hidden",
            whiteSpace: "pre",
            background: "transparent",
            color: darkMode ? 'white' : 'black',
            zIndex: 2,
          }}
        />
      )}
    </div>
  );
};

export default DrawingBoard;