<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastLink - URL Shortener</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="background-animation"></div>
    
    <header class="header">
        <nav class="nav">
            <div class="logo">
                <i class="fas fa-link"></i>
                <span>FastLink</span>
            </div>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#stats">Stats</a>
            </div>
        </nav>
    </header>

    <main class="main">
        <div class="hero">
            <div class="hero-content">
                <h1 class="hero-title">
                    Shorten Your Links
                    <span class="highlight">Instantly</span>
                </h1>
                <p class="hero-description">
                    Transform long URLs into short, shareable links with our fast and reliable URL shortener.
                    Track clicks and manage your links with ease.
                </p>
            </div>
        </div>

        <div class="container">
            <div class="shortener-card">
                <div class="card-header">
                    <i class="fas fa-scissors"></i>
                    <h2>Create Short Link</h2>
                </div>
                
                <form id="shortenForm" class="shortener-form">
                    <div class="input-group">
                        <div class="input-wrapper">
                            <i class="fas fa-globe input-icon"></i>
                            <input type="url" id="url" placeholder="Paste your long URL here..." required>
                        </div>
                        <button type="submit" class="shorten-btn" id="shortenBtn">
                            <span class="btn-text">Shorten URL</span>
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </form>
                
                <div class="result" id="result">
                    <!-- Results will be displayed here -->
                </div>
            </div>

            <div class="features" id="features">
                <h3 class="features-title">Why Choose FastLink?</h3>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <h4>Lightning Fast</h4>
                        <p>Generate short links instantly with our optimized system</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4>Click Tracking</h4>
                        <p>Monitor your link performance with detailed analytics</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h4>Secure & Reliable</h4>
                        <p>Your links are safe with our secure infrastructure</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 FastLink. Made with ❤️ for the web.</p>
        </div>
    </footer>

    <script>
        const form = document.getElementById('shortenForm');
        const urlInput = document.getElementById('url');
        const resultDiv = document.getElementById('result');
        const shortenBtn = document.getElementById('shortenBtn');

        // Add loading state management
        function setLoading(isLoading) {
            if (isLoading) {
                shortenBtn.disabled = true;
                shortenBtn.innerHTML = `
                    <span class="btn-text">Shortening...</span>
                    <div class="spinner"></div>
                `;
            } else {
                shortenBtn.disabled = false;
                shortenBtn.innerHTML = `
                    <span class="btn-text">Shorten URL</span>
                    <i class="fas fa-arrow-right"></i>
                `;
            }
        }

        // Copy to clipboard function
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                showNotification('Link copied to clipboard!', 'success');
            }).catch(() => {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showNotification('Link copied to clipboard!', 'success');
            });
        }

        // Show notification
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.innerHTML = `
                <i class="fas fa-check-circle"></i>
                <span>${message}</span>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);
            
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // Function to generate short code
        function generateShortCode(length = 6) {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }

        // Fallback function using localStorage
        function shortenUrlLocally(url) {
            const shortCode = generateShortCode(6);
            const shortUrl = `${window.location.origin}/${shortCode}`;
            
            // Store in localStorage as fallback
            const urlData = {
                original_url: url,
                short_code: shortCode,
                clicks: 0,
                created_at: new Date().toISOString()
            };
            
            localStorage.setItem(`url_${shortCode}`, JSON.stringify(urlData));
            
            return { shortUrl, shortCode };
        }

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            setLoading(true);

            try {
                // Try API first
                const response = await fetch('/api/shorten', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ url: urlInput.value })
                });

                let shortUrl, shortCode;
                
                if (response.ok) {
                    const data = await response.json();
                    shortUrl = data.shortUrl;
                    shortCode = data.shortCode;
                } else {
                    // Fallback to localStorage
                    const result = shortenUrlLocally(urlInput.value);
                    shortUrl = result.shortUrl;
                    shortCode = result.shortCode;
                    showNotification('Using local storage (API not available)', 'warning');
                }

                resultDiv.innerHTML = `
                    <div class="result-success">
                        <div class="result-header">
                            <i class="fas fa-check-circle"></i>
                            <h3>Link shortened successfully!</h3>
                        </div>
                        <div class="result-content">
                            <div class="url-display">
                                <div class="url-label">Your short link:</div>
                                <div class="url-container">
                                    <input type="text" value="${shortUrl}" readonly class="short-url-input">
                                    <button class="copy-btn" onclick="copyToClipboard('${shortUrl}')">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="result-actions">
                                <a href="${shortUrl}" target="_blank" class="test-link">
                                    <i class="fas fa-external-link-alt"></i>
                                    Test Link
                                </a>
                                <button class="stats-link" onclick="showStats('${shortCode}')">
                                    <i class="fas fa-chart-bar"></i>
                                    View Stats
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                resultDiv.classList.add('show');
                
            } catch (error) {
                // Fallback to localStorage on network error
                try {
                    const result = shortenUrlLocally(urlInput.value);
                    const { shortUrl, shortCode } = result;
                    
                    resultDiv.innerHTML = `
                        <div class="result-success">
                            <div class="result-header">
                                <i class="fas fa-check-circle"></i>
                                <h3>Link shortened successfully!</h3>
                            </div>
                            <div class="result-content">
                                <div class="url-display">
                                    <div class="url-label">Your short link (local):</div>
                                    <div class="url-container">
                                        <input type="text" value="${shortUrl}" readonly class="short-url-input">
                                        <button class="copy-btn" onclick="copyToClipboard('${shortUrl}')">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="result-actions">
                                    <a href="${shortUrl}" target="_blank" class="test-link">
                                        <i class="fas fa-external-link-alt"></i>
                                        Test Link
                                    </a>
                                    <button class="stats-link" onclick="showStats('${shortCode}')">
                                        <i class="fas fa-chart-bar"></i>
                                        View Stats
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    resultDiv.classList.add('show');
                    showNotification('Using local storage (Network error)', 'warning');
                } catch (fallbackError) {
                    resultDiv.innerHTML = `
                        <div class="result-error">
                            <i class="fas fa-exclamation-triangle"></i>
                            <h3>Error</h3>
                            <p>Unable to shorten URL. Please try again.</p>
                        </div>
                    `;
                    resultDiv.classList.add('show');
                }
            } finally {
                setLoading(false);
            }

            urlInput.value = '';
        });

        // Function to show stats
        function showStats(shortCode) {
            const urlData = localStorage.getItem(`url_${shortCode}`);
            if (urlData) {
                const data = JSON.parse(urlData);
                alert(`Stats for ${shortCode}:\n\nOriginal URL: ${data.original_url}\nClicks: ${data.clicks}\nCreated: ${new Date(data.created_at).toLocaleString()}`);
            } else {
                alert('Stats not available for this link.');
            }
        }

        // Add input focus effects
        urlInput.addEventListener('focus', () => {
            urlInput.parentElement.classList.add('focused');
        });

        urlInput.addEventListener('blur', () => {
            urlInput.parentElement.classList.remove('focused');
        });

        // Clear results when input changes
        urlInput.addEventListener('input', () => {
            if (resultDiv.classList.contains('show')) {
                resultDiv.classList.remove('show');
                setTimeout(() => {
                    resultDiv.innerHTML = '';
                }, 300);
            }
        });

        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>

