/**
 * @fileoverview Search Page Component for Rantii
 * @author retoor <retoor@molodetz.nl>
 * @description Search results and search interface page
 * @keywords search, page, results, find, query
 */

import { BaseComponent } from '../components/base-component.js';

class SearchPage extends BaseComponent {
    static get observedAttributes() {
        return ['query'];
    }

    init() {
        this.render();
        this.bindEvents();
    }

    render() {
        const query = this.getAttr('query') || '';

        this.addClass('page', 'search-page');

        this.setHtml(`
            <header class="search-header">
                <form class="search-form">
                    <input type="search"
                           class="search-input"
                           placeholder="Search rants..."
                           value="${query}"
                           autofocus>
                    <button type="submit" class="search-btn">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                    </button>
                </form>
            </header>
            <section class="search-results">
                ${query ? `<rant-feed feed-type="search"></rant-feed>` : `
                    <div class="search-empty">
                        <svg viewBox="0 0 24 24" width="64" height="64">
                            <path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                        <p>Enter a search term</p>
                    </div>
                `}
            </section>
        `);

        if (query) {
            this.search(query);
        }
    }

    bindEvents() {
        this.on(this, 'submit', this.handleSubmit);
    }

    handleSubmit(e) {
        e.preventDefault();
        const input = this.$('.search-input');
        if (input && input.value.trim()) {
            this.getRouter()?.goToSearch(input.value.trim());
        }
    }

    async search(query) {
        const feed = this.$('rant-feed');
        if (feed) {
            await feed.search(query);
        }
    }

    onAttributeChanged(name, oldValue, newValue) {
        if (name === 'query') {
            this.render();
            if (newValue) {
                this.search(newValue);
            }
        }
    }
}

customElements.define('search-page', SearchPage);

export { SearchPage };