import { t, i18n } from '../../i18n.js';
import '../listing-card.js';
import '../search-box.js';

class PageHome extends HTMLElement {
    connectedCallback() {
        this.render();
        this.unsubscribe = i18n.subscribe(() => this.render());
    }

    disconnectedCallback() {
        if (this.unsubscribe) this.unsubscribe();
    }

    render() {
        this.innerHTML = /* html */ `
            <section class="search-section">
                <search-box></search-box>
            </section>
            
            <section class="categories-desktop">
                <div class="category-badges">
                    ${this.renderCategoryBadges()}
                </div>
            </section>
            
            <section class="recent-listings">
                <h2>${t('home.recentListings')}</h2>
                <div class="listings-grid">
                    ${this.renderPlaceholderListings()}
                </div>
            </section>
        `;
    }

    renderCategoryBadges() {
        const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports'];
        return topCategories.map(cat => `
            <a href="#/search?category=${cat}" class="badge">${t(`categories.${cat}`)}</a>
        `).join('');
    }

    renderPlaceholderListings() {
        const placeholders = Array(10).fill(null);
        return placeholders.map((_, i) => /* html */`
            <listing-card 
                listing-id="${i + 1}"
                title="${t('home.placeholderTitle')}"
                location="${t('home.placeholderLocation')}"
            ></listing-card>
        `).join('');
    }
}

customElements.define('page-home', PageHome);

const style = document.createElement('style');
style.textContent = /* css */ `
    /* Search Section */
    page-home .search-section {
        padding: var(--space-xl) 0;
    }
    
    /* Category Badges (Desktop only) */
    page-home .categories-desktop {
        display: none;
        margin-bottom: var(--space-xl);
    }
    
    @media (min-width: 768px) {
        page-home .categories-desktop {
            display: block;
        }
    }
    
    page-home .category-badges {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: center;
    }
    
    page-home .badge {
        display: inline-block;
        padding: var(--space-xs) var(--space-md);
        background: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: all var(--transition-fast);
    }
    
    page-home .badge:hover {
        background: var(--color-primary);
        color: var(--color-bg);
        border-color: var(--color-primary);
    }
    
    /* Listings */
    page-home section {
        margin-bottom: var(--space-xl);
    }
    
    page-home section h2 {
        margin-bottom: var(--space-lg);
    }
    
    page-home .listings-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    @media (min-width: 768px) {
        page-home .listings-grid {
            grid-template-columns: repeat(5, 1fr);
        }
    }
`;
document.head.appendChild(style);