import { useState, useEffect, useRef } from 'react';
import { 
  ChevronLeft, 
  ChevronRight, 
  ZoomIn, 
  ZoomOut, 
  Pen, 
  Square, 
  Circle, 
  Highlighter, 
  Download,
  Upload
} from 'lucide-react';

// PDF.js را import می‌کنیم
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';

export default function PDFViewer() {
  const [pdfDoc, setPdfDoc] = useState(null);
  const [pageNum, setPageNum] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [scale, setScale] = useState(1.5);
  const [isDrawing, setIsDrawing] = useState(false);
  const [selectedTool, setSelectedTool] = useState('text'); // 'text', 'pen', 'square', 'circle', 'highlight'
  const [selectedColor, setSelectedColor] = useState('#FF0000');
  const [lineWidth, setLineWidth] = useState(2);

  const canvasRef = useRef(null);
  const textLayerRef = useRef(null);
  const drawingLayerRef = useRef(null);
  const fileInputRef = useRef(null);

  // PDF را لود می‌کند
  const loadPDF = async (file) => {
    const fileReader = new FileReader();
    fileReader.onload = async function() {
      const typedarray = new Uint8Array(this.result);
      const loadedPdf = await pdfjsLib.getDocument(typedarray).promise;
      setPdfDoc(loadedPdf);
      setTotalPages(loadedPdf.numPages);
      renderPage(1, loadedPdf);
    };
    fileReader.readAsArrayBuffer(file);
  };

  // صفحه PDF را رندر می‌کند
  const renderPage = async (pageNumber, pdf = pdfDoc) => {
    const page = await pdf.getPage(pageNumber);
    const viewport = page.getViewport({ scale });
    
    // تنظیم canvas اصلی
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // تنظیم canvas رسم
    const drawingCanvas = drawingLayerRef.current;
    drawingCanvas.height = viewport.height;
    drawingCanvas.width = viewport.width;

    // رندر PDF
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise;

    // رندر لایه متن
    const textContent = await page.getTextContent();
    const textLayer = textLayerRef.current;
    textLayer.style.height = `${viewport.height}px`;
    textLayer.style.width = `${viewport.width}px`;
    pdfjsLib.renderTextLayer({
      textContent,
      container: textLayer,
      viewport,
      textDivs: []
    });
  };

  // مدیریت رسم
  const startDrawing = (e) => {
    if (selectedTool === 'text') return;
    const ctx = drawingLayerRef.current.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle = selectedColor;
    ctx.lineWidth = lineWidth;
    const rect = drawingLayerRef.current.getBoundingClientRect();
    ctx.moveTo(
      e.clientX - rect.left,
      e.clientY - rect.top
    );
    setIsDrawing(true);
  };

  const draw = (e) => {
    if (!isDrawing || selectedTool === 'text') return;
    const ctx = drawingLayerRef.current.getContext('2d');
    const rect = drawingLayerRef.current.getBoundingClientRect();
    ctx.lineTo(
      e.clientX - rect.left,
      e.clientY - rect.top
    );
    ctx.stroke();
  };

  const stopDrawing = () => {
    setIsDrawing(false);
    if (selectedTool !== 'text') {
      setSelectedTool('text'); // برگشت به حالت انتخاب متن
    }
  };

  // ذخیره حاشیه‌نویسی
  const saveAnnotations = () => {
    const dataUrl = drawingLayerRef.current.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'annotations.png';
    link.href = dataUrl;
    link.click();
  };

  return (
    <div className="flex flex-col min-h-screen bg-gray-100">
      {/* نوار ابزار */}
      <div className="bg-white shadow-md p-4 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <input
            type="file"
            accept=".pdf"
            className="hidden"
            ref={fileInputRef}
            onChange={(e) => loadPDF(e.target.files[0])}
          />
          <button
            onClick={() => fileInputRef.current.click()}
            className="bg-indigo-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
          >
            <Upload className="w-5 h-5" />
            <span>آپلود PDF</span>
          </button>
          
          <div className="flex items-center space-x-2">
            <button
              onClick={() => setPageNum(prev => Math.max(prev - 1, 1))}
              disabled={pageNum <= 1}
              className="p-2 rounded hover:bg-gray-100"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
            <span>{`${pageNum} / ${totalPages}`}</span>
            <button
              onClick={() => setPageNum(prev => Math.min(prev + 1, totalPages))}
              disabled={pageNum >= totalPages}
              className="p-2 rounded hover:bg-gray-100"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
          </div>

          <div className="flex items-center space-x-2">
            <button
              onClick={() => setScale(prev => prev - 0.2)}
              className="p-2 rounded hover:bg-gray-100"
            >
              <ZoomOut className="w-5 h-5" />
            </button>
            <span>{`${Math.round(scale * 100)}%`}</span>
            <button
              onClick={() => setScale(prev => prev + 0.2)}
              className="p-2 rounded hover:bg-gray-100"
            >
              <ZoomIn className="w-5 h-5" />
            </button>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <button
              onClick={() => setSelectedTool('pen')}
              className={`p-2 rounded ${selectedTool === 'pen' ? 'bg-indigo-100' : 'hover:bg-gray-100'}`}
            >
              <Pen className="w-5 h-5" />
            </button>
            <button
              onClick={() => setSelectedTool('square')}
              className={`p-2 rounded ${selectedTool === 'square' ? 'bg-indigo-100' : 'hover:bg-gray-100'}`}
            >
              <Square className="w-5 h-5" />
            </button>
            <button
              onClick={() => setSelectedTool('circle')}
              className={`p-2 rounded ${selectedTool === 'circle' ? 'bg-indigo-100' : 'hover:bg-gray-100'}`}
            >
              <Circle className="w-5 h-5" />
            </button>
            <button
              onClick={() => setSelectedTool('highlight')}
              className={`p-2 rounded ${selectedTool === 'highlight' ? 'bg-indigo-100' : 'hover:bg-gray-100'}`}
            >
              <Highlighter className="w-5 h-5" />
            </button>
          </div>

          <input
            type="color"
            value={selectedColor}
            onChange={(e) => setSelectedColor(e.target.value)}
            className="w-8 h-8 rounded"
          />

          <input
            type="range"
            min="1"
            max="10"
            value={lineWidth}
            onChange={(e) => setLineWidth(parseInt(e.target.value))}
            className="w-24"
          />

          <button
            onClick={saveAnnotations}
            className="bg-green-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2"
          >
            <Download className="w-5 h-5" />
            <span>ذخیره حاشیه‌نویسی</span>
          </button>
        </div>
      </div>

      {/* محتوای PDF */}
      <div className="flex-1 overflow-auto p-4">
        <div className="relative mx-auto" style={{ width: 'fit-content' }}>
          <canvas
            ref={canvasRef}
            className="shadow-lg"
          />
          <div
            ref={textLayerRef}
            className="absolute top-0 left-0 text-layer"
            style={{ pointerEvents: selectedTool === 'text' ? 'auto' : 'none' }}
          />
          <canvas
            ref={drawingLayerRef}
            className="absolute top-0 left-0"
            style={{ pointerEvents: selectedTool !== 'text' ? 'auto' : 'none' }}
            onMouseDown={startDrawing}
            onMouseMove={draw}
            onMouseUp={stopDrawing}
            onMouseLeave={stopDrawing}
          />
        </div>
      </div>
    </div>
  );
}
  import { useState } from 'react';
import { Brain, BookOpen, Map, PenTool, Users, ChevronRight } from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50">
      {/* نوار ناوبری */}
      <nav className="bg-white shadow-lg">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <Brain className="h-8 w-8 text-indigo-600" />
              <span className="font-bold text-xl text-gray-800">دانش‌یار هوشمند</span>
            </div>
            <div className="flex items-center space-x-4">
              <button className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
                ورود
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* بخش اصلی */}
      <main className="max-w-7xl mx-auto px-4 py-12">
        {/* قسمت هدر */}
        <div className="text-center mb-16">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            پلتفرم هوشمند یادگیری با کمک هوش مصنوعی
          </h1>
          <p className="text-xl text-gray-600">
            یادگیری شخصی‌سازی شده با استفاده از تکنولوژی‌های پیشرفته هوش مصنوعی
          </p>
        </div>

        {/* کارت‌های ویژگی */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <FeatureCard 
            icon={<Map />}
            title="مایندمپ هوشمند"
            description="ایجاد نقشه‌های ذهنی خودکار برای درک بهتر مفاهیم"
          />
          <FeatureCard 
            icon={<PenTool />}
            title="کوییز هوشمند"
            description="تولید سوالات متناسب با سطح یادگیری شما"
          />
          <FeatureCard 
            icon={<Users />}
            title="یادگیری مشارکتی"
            description="همکاری با سایر دانشجویان و یادگیری گروهی"
          />
        </div>

        {/* بخش شروع */}
        <div className="mt-16 text-center">
          <button className="bg-indigo-600 text-white px-8 py-4 rounded-xl hover:bg-indigo-700 transition flex items-center mx-auto space-x-2">
            <span>شروع یادگیری</span>
            <ChevronRight className="h-5 w-5" />
          </button>
        </div>
      </main>
    </div>
  );
}

function FeatureCard({ icon, title, description }) {
  return (
    <div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
      <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
        <div className="text-indigo-600">
          {icon}
        </div>
      </div>
      <h3 className="text-xl font-semibold text-gray-800 mb-2">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}