// Shared JavaScript across all pages
console.log('Web Scraper Pro loaded');

// DOM Elements
const scraperForm = document.getElementById('scraperForm');
const urlInput = document.getElementById('urlInput');
const loading = document.getElementById('loading');
const results = document.getElementById('results');
const error = document.getElementById('error');
const errorMessage = document.getElementById('errorMessage');
const articleContent = document.getElementById('articleContent');
const imageGallery = document.getElementById('imageGallery');

// Form submission handler
scraperForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const url = urlInput.value.trim();
    if (!url) return;

    // Show loading state
    showLoading();
    hideResults();
    hideError();

    try {
        // Note: In a real implementation, you would call a backend API
        // For demo purposes, we'll simulate the scraping process
        await simulateScraping(url);
    } catch (err) {
        showError('Failed to extract content. Please check the URL and try again.');
    }
});

// Simulate scraping process (replace with actual API call)
async function simulateScraping(url) {
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // Hide loading
    hideLoading();
    
    // For demo purposes, we'll show sample content
    // In a real implementation, you would call your scraping API here
    displaySampleResults();
}

// Display sample results for demo
function displaySampleResults() {
    // Sample article content
    articleContent.innerHTML = `
        <h1>Sample Article Title</h1>
        <p class="text-gray-500 mb-6">Extracted from: ${urlInput.value}</p>
        
        <h2>Introduction</h2>
        <p>This is a sample demonstration of how extracted content would appear. In a real implementation, this would be the actual content from the provided URL.</p>
        
        <h2>Main Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        
        <ul>
            <li>First extracted paragraph</li>
            <li>Second extracted paragraph</li>
            <li>Third extracted paragraph with more details</li>
        </ul>
        
        <h2>Conclusion</h2>
        <p>This demonstrates the web scraping capability. The actual implementation would connect to a backend service that extracts real content.</p>
    `;
    
    // Sample images
    imageGallery.innerHTML = `
        <div class="gallery-image">
            <img src="http://static.photos/technology/640x360/1" alt="Sample image 1" class="w-full h-48 object-cover">
        </div>
        <div class="gallery-image">
            <img src="http://static.photos/office/640x360/2" alt="Sample image 2" class="w-full h-48 object-cover">
        </div>
        <div class="gallery-image">
            <img src="http://static.photos/nature/640x360/3" alt="Sample image 3" class="w-full h-48 object-cover">
        </div>
    `;
    
    // Show results with animation
    showResults();
}

// UI Control Functions
function showLoading() {
    loading.classList.remove('hidden');
}

function hideLoading() {
    loading.classList.add('hidden');
}

function showResults() {
    results.classList.remove('hidden');
    results.classList.add('fade-in');
}

function hideResults() {
    results.classList.add('hidden');
    results.classList.remove('fade-in');
}

function showError(message) {
    errorMessage.textContent = message;
    error.classList.remove('hidden');
    hideLoading();
}

function hideError() {
    error.classList.add('hidden');
}

function clearResults() {
    urlInput.value = '';
    hideResults();
    hideError();
    hideLoading();
}

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    console.log('Web Scraper Pro initialized');
    feather.replace();
});