import React, { useState, useCallback, useEffect } from 'react';
import { Upload, Download, Copy, Chrome, FileText, AlertCircle, CheckCircle } from 'lucide-react';

const PDFToTextApp = () => {
  const [extractedText, setExtractedText] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [fileName, setFileName] = useState('');
  const [error, setError] = useState('');
  const [copySuccess, setCopySuccess] = useState(false);
  const [pdfLibLoaded, setPdfLibLoaded] = useState(false);

  // Load PDF.js library
  useEffect(() => {
    const loadPDFJS = () => {
      if (window.pdfjsLib) {
        setPdfLibLoaded(true);
        return;
      }

      const script = document.createElement('script');
      script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
      script.onload = () => {
        if (window.pdfjsLib) {
          window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
          setPdfLibLoaded(true);
        }
      };
      script.onerror = () => {
        setError('Failed to load PDF processing library. Please refresh the page.');
      };
      document.head.appendChild(script);
    };

    loadPDFJS();
  }, []);

  const handleFileUpload = useCallback(async (file) => {
    if (!file || file.type !== 'application/pdf') {
      setError('Please select a valid PDF file');
      return;
    }

    if (file.size > 10 * 1024 * 1024) {
      setError('File size must be less than 10MB');
      return;
    }

    if (!pdfLibLoaded) {
      setError('PDF processing library is still loading. Please wait a moment and try again.');
      return;
    }

    setError('');
    setIsProcessing(true);
    setFileName(file.name);

    try {
      const arrayBuffer = await file.arrayBuffer();
      const typedArray = new Uint8Array(arrayBuffer);
      
      const loadingTask = window.pdfjsLib.getDocument({
        data: typedArray,
      });

      const pdf = await loadingTask.promise;
      let fullText = '';

      for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
        const page = await pdf.getPage(pageNum);
        const textContent = await page.getTextContent();
        
        const pageText = textContent.items
          .map(item => item.str)
          .join(' ')
          .replace(/\s+/g, ' ')
          .trim();
          
        if (pageText) {
          fullText += `Page ${pageNum}:\n${pageText}\n\n`;
        }
      }

      if (!fullText.trim()) {
        setError('No text found in this PDF. It might be a scanned document or contain only images.');
      } else {
        setExtractedText(fullText.trim());
      }
    } catch (err) {
      console.error('PDF extraction error:', err);
      setError('Failed to extract text from PDF. The file might be encrypted, corrupted, or contain only images.');
    } finally {
      setIsProcessing(false);
    }
  }, [pdfLibLoaded]);

  const handleDrop = useCallback((e) => {
    e.preventDefault();
    if (!pdfLibLoaded) return;
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      handleFileUpload(files[0]);
    }
  }, [handleFileUpload, pdfLibLoaded]);

  const handleDragOver = useCallback((e) => {
    e.preventDefault();
  }, []);

  const handleFileSelect = useCallback((e) => {
    const files = e.target.files;
    if (files.length > 0) {
      handleFileUpload(files[0]);
    }
  }, [handleFileUpload]);

  const downloadText = useCallback(() => {
    const blob = new Blob([extractedText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName.replace('.pdf', '.txt');
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, [extractedText, fileName]);

  const copyToClipboard = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(extractedText);
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    } catch (err) {
      console.error('Failed to copy text');
    }
  }, [extractedText]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Chrome Extension Promotion Banner */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 px-6 shadow-lg">
        <div className="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center gap-3">
            <Chrome className="w-8 h-8" />
            <div>
              <h3 className="font-semibold text-lg">Get Our Chrome Extension!</h3>
              <p className="text-blue-100 text-sm">Convert PDFs directly in your browser - even faster and more convenient!</p>
            </div>
          </div>
          <a
            href="https://chromewebstore.google.com/detail/pdf-to-text/ebbjjgknalnhiikophnjodoenamanonj?hl=en"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-white text-blue-600 px-6 py-2 rounded-full font-semibold hover:bg-blue-50 transition-colors duration-200 flex items-center gap-2"
          >
            <Chrome className="w-4 h-4" />
            Add to Chrome
          </a>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-4xl mx-auto px-6 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="flex items-center justify-center gap-3 mb-4">
            <FileText className="w-12 h-12 text-blue-600" />
            <h1 className="text-4xl font-bold text-gray-800">PDF to Text Converter</h1>
          </div>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            Extract text from your PDF files instantly. Fast, secure, and completely free. 
            All processing happens in your browser - your files never leave your device.
          </p>
        </div>

        {/* Upload Section */}
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <div
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            className={`border-3 border-dashed border-blue-300 rounded-xl p-12 text-center transition-all duration-200 ${
              pdfLibLoaded ? 'hover:border-blue-400 hover:bg-blue-50 cursor-pointer' : 'cursor-not-allowed opacity-75'
            }`}
          >
            <Upload className="w-16 h-16 text-blue-500 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              Drag and drop your PDF here
            </h3>
            <p className="text-gray-500 mb-4">or click to browse files</p>
            <input
              type="file"
              accept=".pdf,application/pdf"
              onChange={handleFileSelect}
              className="hidden"
              id="file-input"
              disabled={!pdfLibLoaded}
            />
            <label
              htmlFor="file-input"
              className={`px-6 py-3 rounded-lg font-medium transition-colors duration-200 cursor-pointer inline-block ${
                pdfLibLoaded 
                  ? 'bg-blue-600 text-white hover:bg-blue-700' 
                  : 'bg-gray-400 text-gray-200 cursor-not-allowed'
              }`}
            >
              {pdfLibLoaded ? 'Select PDF File' : 'Loading PDF Library...'}
            </label>
            <p className="text-sm text-gray-400 mt-3">Maximum file size: 10MB</p>
          </div>

          {error && (
            <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2 text-red-700">
              <AlertCircle className="w-5 h-5" />
              {error}
            </div>
          )}

          {isProcessing && (
            <div className="mt-6 text-center">
              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3"></div>
              <p className="text-gray-600">Extracting text from PDF...</p>
            </div>
          )}
        </div>

        {/* Results Section */}
        {extractedText && (
          <div className="bg-white rounded-2xl shadow-xl p-8">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold text-gray-800">Extracted Text</h3>
              <div className="flex gap-3">
                <button
                  onClick={copyToClipboard}
                  className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200"
                >
                  {copySuccess ? <CheckCircle className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
                  {copySuccess ? 'Copied!' : 'Copy Text'}
                </button>
                <button
                  onClick={downloadText}
                  className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200"
                >
                  <Download className="w-4 h-4" />
                  Download
                </button>
              </div>
            </div>
            <div className="bg-gray-50 rounded-lg p-6 max-h-96 overflow-y-auto">
              <pre className="whitespace-pre-wrap text-sm text-gray-700 font-mono">
                {extractedText}
              </pre>
            </div>
          </div>
        )}

        {/* Extension Promotion Section */}
        <div className="mt-12 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-2xl p-8 border border-indigo-200">
          <div className="text-center">
            <Chrome className="w-16 h-16 text-blue-600 mx-auto mb-4" />
            <h3 className="text-2xl font-bold text-gray-800 mb-4">Why Install Our Chrome Extension?</h3>
            <div className="grid md:grid-cols-3 gap-6 mb-8">
              <div className="text-center">
                <div className="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
                  <FileText className="w-6 h-6 text-blue-600" />
                </div>
                <h4 className="font-semibold mb-2">Right-Click Conversion</h4>
                <p className="text-gray-600 text-sm">Convert PDFs directly from any webpage with a simple right-click</p>
              </div>
              <div className="text-center">
                <div className="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
                  <CheckCircle className="w-6 h-6 text-green-600" />
                </div>
                <h4 className="font-semibold mb-2">Always Available</h4>
                <p className="text-gray-600 text-sm">No need to open a separate tab - works wherever you are browsing</p>
              </div>
              <div className="text-center">
                <div className="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
                  <Upload className="w-6 h-6 text-purple-600" />
                </div>
                <h4 className="font-semibold mb-2">Faster Processing</h4>
                <p className="text-gray-600 text-sm">Optimized for speed with instant access to your conversion history</p>
              </div>
            </div>
            <a
              href="https://chromewebstore.google.com/detail/pdf-to-text/ebbjjgknalnhiikophnjodoenamanonj?hl=en"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-8 py-4 rounded-full font-semibold hover:from-blue-700 hover:to-indigo-700 transition-all duration-200 inline-flex items-center gap-3 text-lg shadow-lg"
            >
              <Chrome className="w-6 h-6" />
              Install Chrome Extension - It's Free!
            </a>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-8 px-6 mt-16">
        <div className="max-w-4xl mx-auto text-center">
          <p className="mb-4">© 2024 PDF to Text Converter. All rights reserved.</p>
          <p className="text-gray-400 mb-4">
            Secure, fast, and reliable PDF text extraction. Your privacy is our priority.
          </p>
          <a
            href="https://chromewebstore.google.com/detail/pdf-to-text/ebbjjgknalnhiikophnjodoenamanonj?hl=en"
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-400 hover:text-blue-300 transition-colors duration-200"
          >
            Don't forget to check out our Chrome Extension →
          </a>
        </div>
      </footer>
    </div>
  );
};

export default PDFToTextApp;