{% extends "base.html" %}

{% block title %}Home - {{ app_name }}{% endblock %}

{% block content %}
<!-- Public Lists Section -->
<div class="py-12 md:py-16 mt-8">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-8">Browse Public Lists</h2>
    
    <!-- Search Public Lists -->
    <div class="max-w-2xl mx-auto mb-8">
        <div class="relative">
            <input 
                type="text" 
                id="publicSearch"
                placeholder="Search public lists by domain (e.g., github.com)..."
                class="w-full bg-slate-900 border border-slate-700 rounded px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition text-sm"
            >
        </div>
    </div>
    
    <!-- Public Lists Table -->
    <div class="bg-slate-800 rounded-lg border border-slate-700 overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-700 bg-slate-900">
                    <th class="px-6 py-3 text-left font-semibold text-slate-300">Name</th>
                    <th class="px-6 py-3 text-left font-semibold text-slate-300">URLs</th>
                    <th class="px-6 py-3 text-left font-semibold text-slate-300">Updated</th>
                    <th class="px-6 py-3 text-right font-semibold text-slate-300">Actions</th>
                </tr>
            </thead>
            <tbody id="publicListsContainer" class="divide-y divide-slate-700">
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-slate-400">Loading public lists...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- CTA Section -->
{% if not current_user %}
<div class="py-12 md:py-16 mt-8">
    <div class="card p-8 md:p-12 text-center bg-gradient-to-r from-slate-800 to-slate-700">
        <h2 class="text-3xl font-bold mb-4">Ready to Get Started?</h2>
        <p class="text-slate-400 mb-6 max-w-xl mx-auto">
            Create your first URL list in seconds. It's free, fast, and secure.
        </p>
        <a href="{{ url_for('register') }}" class="btn-primary inline-block">
            Create Your Free Account
        </a>
    </div>
</div>
{% endif %}

<script>
// Load and display public lists on page load
let allPublicLists = [];

async function loadPublicLists() {
    try {
        const response = await fetch('/api/public-lists/');
        allPublicLists = await response.json();
        renderPublicLists(allPublicLists);
    } catch (error) {
        console.error('Error loading public lists:', error);
        document.getElementById('publicListsContainer').innerHTML = '<div class="col-span-full text-center text-red-400">Failed to load public lists</div>';
    }
}

function renderPublicLists(lists) {
    const container = document.getElementById('publicListsContainer');
    
    if (!lists || lists.length === 0) {
        container.innerHTML = '<tr><td colspan="4" class="px-6 py-8 text-center text-slate-400">No public lists found</td></tr>';
        return;
    }
    
    let html = '';
    lists.forEach(list => {
        const urlCount = list.urls.split('\n').filter(u => u.trim()).length;
        const updatedDate = new Date(list.updated_at).toLocaleDateString();
        const listUrl = `${window.location.origin}/list-read/${encodeURIComponent(list.unique_slug)}`;
        
        html += `
            <tr class="hover:bg-slate-700 transition">
                <td class="px-6 py-4 font-semibold text-slate-100">${escapeHtml(list.name)}</td>
                <td class="px-6 py-4 text-slate-300">${urlCount} URL${urlCount !== 1 ? 's' : ''}</td>
                <td class="px-6 py-4 text-slate-400 text-xs">${updatedDate}</td>
                <td class="px-6 py-4 text-right">
                    <div class="flex gap-2 justify-end">
                        <button onclick="copyListLink('${listUrl}')" class="inline-flex items-center justify-center w-8 h-8 bg-slate-700 hover:bg-slate-600 rounded transition duration-200 text-sm" title="Copy link">
                            📋
                        </button>
                        <a href="${listUrl}" target="_blank" class="inline-flex items-center justify-center w-8 h-8 bg-slate-700 hover:bg-sky-600 rounded transition duration-200 text-sm" title="Open in new window">
                            👁️
                        </a>
                    </div>
                </td>
            </tr>
        `;
    });
    
    container.innerHTML = html;
}

function copyListLink(url) {
    navigator.clipboard.writeText(url).then(() => {
        // Show feedback
        const feedback = document.createElement('div');
        feedback.textContent = 'Link copied!';
        feedback.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #10b981; color: white; padding: 12px 20px; border-radius: 6px; z-index: 1000; font-size: 14px;';
        document.body.appendChild(feedback);
        setTimeout(() => feedback.remove(), 2000);
    }).catch(() => {
        alert('Failed to copy link');
    });
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

// Debounced search for public lists
let searchTimeout;
document.getElementById('publicSearch').addEventListener('input', (e) => {
    clearTimeout(searchTimeout);
    const query = e.target.value.trim();
    const container = document.getElementById('publicListsContainer');
    
    if (!query) {
        renderPublicLists(allPublicLists);
        return;
    }
    
    // Wait 500ms after user stops typing before searching
    searchTimeout = setTimeout(async () => {
        container.innerHTML = '<div class="col-span-full text-center text-slate-400">Searching...</div>';
        
        try {
            const response = await fetch(`/api/public-lists/search?domain=${encodeURIComponent(query)}`);
            const results = await response.json();
            renderPublicLists(results);
        } catch (error) {
            console.error('Error searching public lists:', error);
            container.innerHTML = '<div class="col-span-full text-center text-red-400">Error searching public lists</div>';
        }
    }, 500);
});

// Load public lists on page load
document.addEventListener('DOMContentLoaded', loadPublicLists);
</script>
{% endblock %}