import React, { useState, useEffect, useRef } from 'react'; 
import { Palette, Eraser, Trash2, Download, Users } from 
'lucide-react'; export default function 
CollaborativeWhiteboard() {
  const canvasRef = useRef(null); const [isDrawing, 
  setIsDrawing] = useState(false); const [color, setColor] = 
  useState('#000000'); const [brushSize, setBrushSize] = 
  useState(3); const [tool, setTool] = useState('pen'); const 
  [activeUsers, setActiveUsers] = useState(1); const [loading, 
  setLoading] = useState(true); const colors = ['#000000', 
  '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', 
  '#00FFFF', '#FFA500']; useEffect(() => {
    loadCanvas(); const interval = setInterval(loadCanvas, 
    1000); return () => clearInterval(interval);
  }, []);
  const loadCanvas = async () => { try { const result = await 
      window.storage.get('whiteboard-data', true); if (result && 
      result.value) {
        const data = JSON.parse(result.value); const canvas = 
        canvasRef.current; const ctx = canvas.getContext('2d'); 
        const img = new Image(); img.onload = () => {
          ctx.drawImage(img, 0, 0); setLoading(false);
        };
        img.src = data.imageData;
        
        if (data.userCount) { setActiveUsers(data.userCount);
        }
      } else {
        setLoading(false);
      }
    } catch (error) {
      setLoading(false);
    }
  };
  const saveCanvas = async () => { try { const canvas = 
      canvasRef.current; const imageData = canvas.toDataURL(); 
      const timestamp = Date.now();
      
      await window.storage.set('whiteboard-data', 
      JSON.stringify({
        imageData, timestamp, userCount: activeUsers
      }), true);
    } catch (error) {
      console.error('Save failed:', error);
    }
  };
  const getCoordinates = (e) => { const canvas = 
    canvasRef.current; const rect = 
    canvas.getBoundingClientRect(); const scaleX = canvas.width 
    / rect.width; const scaleY = canvas.height / rect.height; if 
    (e.touches) {
      return { x: (e.touches[0].clientX - rect.left) * scaleX, 
        y: (e.touches[0].clientY - rect.top) * scaleY
      };
    }
    return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY 
      - rect.top) * scaleY
    };
  };
  const startDrawing = (e) => { e.preventDefault(); 
    setIsDrawing(true); const { x, y } = getCoordinates(e); 
    const ctx = canvasRef.current.getContext('2d'); 
    ctx.beginPath(); ctx.moveTo(x, y);
  };
  const draw = (e) => { if (!isDrawing) return; 
    e.preventDefault();
    
    const { x, y } = getCoordinates(e); const ctx = 
    canvasRef.current.getContext('2d');
    
    ctx.lineWidth = brushSize; ctx.lineCap = 'round'; 
    ctx.lineJoin = 'round';
    
    if (tool === 'eraser') { ctx.globalCompositeOperation = 
      'destination-out'; ctx.strokeStyle = 'rgba(0,0,0,1)';
    } else {
      ctx.globalCompositeOperation = 'source-over'; 
      ctx.strokeStyle = color;
    }
    
    ctx.lineTo(x, y); ctx.stroke(); ctx.beginPath(); 
    ctx.moveTo(x, y);
  };
  const stopDrawing = () => { if (isDrawing) { 
      setIsDrawing(false); saveCanvas();
    }
  };
  const clearCanvas = async () => { const ctx = 
    canvasRef.current.getContext('2d'); ctx.clearRect(0, 0, 
    canvasRef.current.width, canvasRef.current.height); await 
    saveCanvas();
  };
  const downloadCanvas = () => { const canvas = 
    canvasRef.current; const link = document.createElement('a'); 
    link.download = 'whiteboard.png'; link.href = 
    canvas.toDataURL(); link.click();
  };
  useEffect(() => { const canvas = canvasRef.current; 
    canvas.width = 1200; canvas.height = 700; const ctx = 
    canvas.getContext('2d'); ctx.fillStyle = 'white'; 
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, []);
  return ( <div className="min-h-screen bg-gradient-to-br 
    from-purple-50 to-blue-50 p-4">
      <div className="max-w-7xl mx-auto"> <div 
        className="bg-white rounded-lg shadow-2xl 
        overflow-hidden">
          {/* Header */} <div className="bg-gradient-to-r 
          from-purple-600 to-blue-600 p-6 text-white">
            <div className="flex items-center justify-between"> 
              <div>
                <h1 className="text-3xl font-bold mb-2">Live 
                Collaborative Whiteboard</h1> <p 
                className="text-purple-100">Draw together in 
                real-time with anyone!</p>
              </div> <div className="flex items-center gap-2 
              bg-white/20 px-4 py-2 rounded-full">
                <Users size={20} /> <span 
                className="font-semibold">{activeUsers} 
                active</span>
              </div> </div> </div> {/* Toolbar */} <div 
          className="bg-gray-50 p-4 border-b border-gray-200">
            <div className="flex flex-wrap items-center gap-4"> 
              {/* Tool Selection */} <div className="flex 
              gap-2">
                <button onClick={() => setTool('pen')} 
                  className={`p-3 rounded-lg transition-all ${
                    tool === 'pen' ? 'bg-purple-600 text-white 
                      shadow-lg'
                      : 'bg-white text-gray-700 
                      : hover:bg-gray-100'
                  }`}
                  title="Pen"
                >
                  <Palette size={20} /> </button> <button 
                  onClick={() => setTool('eraser')} 
                  className={`p-3 rounded-lg transition-all ${
                    tool === 'eraser' ? 'bg-purple-600 
                      text-white shadow-lg'
                      : 'bg-white text-gray-700 
                      : hover:bg-gray-100'
                  }`}
                  title="Eraser"
                >
                  <Eraser size={20} /> </button> </div> {/* 
              Color Palette */} <div className="flex gap-2 
              flex-wrap">
                {colors.map((c) => ( <button key={c} onClick={() 
                    => {
                      setColor(c); setTool('pen');
                    }}
                    className={`w-10 h-10 rounded-full border-4 
                    transition-all ${
                      color === c && tool === 'pen' ? 
                        'border-purple-600 scale-110'
                        : 'border-gray-300 hover:scale-105'
                    }`}
                    style={{ backgroundColor: c }} title={c} /> 
                ))}
              </div> {/* Brush Size */} <div className="flex 
              items-center gap-2 bg-white px-4 py-2 rounded-lg">
                <label className="text-sm font-medium 
                text-gray-700">Size:</label> <input
                  type="range" min="1" max="20" 
                  value={brushSize} onChange={(e) => 
                  setBrushSize(Number(e.target.value))} 
                  className="w-24"
                /> <span className="text-sm font-semibold 
                text-gray-700 w-8">{brushSize}px</span>
              </div> {/* Actions */} <div className="flex gap-2 
              ml-auto">
                <button onClick={downloadCanvas} className="p-3 
                  bg-green-600 text-white rounded-lg 
                  hover:bg-green-700 transition-colors" 
                  title="Download"
                >
                  <Download size={20} /> </button> <button 
                  onClick={clearCanvas} className="p-3 
                  bg-red-600 text-white rounded-lg 
                  hover:bg-red-700 transition-colors" 
                  title="Clear Canvas"
                >
                  <Trash2 size={20} /> </button> </div> </div> 
          </div> {/* Canvas */} <div className="p-4 
          bg-gray-100">
            {loading && ( <div className="absolute inset-0 flex 
              items-center justify-center bg-white/80 z-10">
                <div className="text-center"> <div 
                  className="w-12 h-12 border-4 
                  border-purple-600 border-t-transparent 
                  rounded-full animate-spin mx-auto mb-3"></div> 
                  <p className="text-gray-600">Loading 
                  canvas...</p>
                </div> </div> )} <canvas ref={canvasRef} 
              onMouseDown={startDrawing} onMouseMove={draw} 
              onMouseUp={stopDrawing} onMouseLeave={stopDrawing} 
              onTouchStart={startDrawing} onTouchMove={draw} 
              onTouchEnd={stopDrawing} className="w-full 
              border-4 border-gray-300 rounded-lg 
              cursor-crosshair shadow-inner bg-white" style={{ 
              touchAction: 'none' }}
            /> </div> {/* Info */} <div className="bg-gray-50 
          p-4 text-center text-sm text-gray-600 border-t 
          border-gray-200">
            <p className="font-medium">✨ Your drawings are 
            automatically saved and synced with all users!</p> 
            <p className="text-xs mt-1 text-gray-500">Changes 
            appear within 1 second for everyone viewing this 
            board</p>
          </div> </div> </div> </div> );
}