import { LitElement, html, css, nothing } from 'lit';
import { customElement, state, query as litQuery } from 'lit/decorators.js';
import { designTokens } from '../../styles/tokens.css';
import { Search } from '@go/explore/Service';
import type {
    MBSearchResult,
    MBArtist,
    MBReleaseGroup,
    MBRecording,
} from '@go/explore/Service';
import '@awesome.me/webawesome/dist/components/icon/icon.js';

/* ── Constants ── */
const DEBOUNCE_MS = 300;
const CAA_GROUP_BASE = 'https://coverartarchive.org/release-group';
const TOP_RESULTS_COUNT = 3;

/**
 * Build a Cover Art Archive URL for a release-group front cover.
 * Mirrors the Wails CoverArtGroupURL binding but runs synchronously
 * on the frontend — avoids N async round-trips per render cycle.
 */
function CoverArtGroupURL(releaseGroupMBID: string): string {
    return `${CAA_GROUP_BASE}/${releaseGroupMBID}/front-250`;
}

/** Hash a string to a hue value 0–360 for avatar coloring. */
function nameToHue(name: string): number {
    let hash = 0;
    for (let i = 0; i < name.length; i++) {
        hash = name.charCodeAt(i) + ((hash << 5) - hash);
    }
    return Math.abs(hash) % 360;
}

/** Format milliseconds as mm:ss. */
function formatDuration(ms: number): string {
    if (!ms || ms <= 0) return '0:00';
    const totalSeconds = Math.floor(ms / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

/** Extract the year from a date string like "2005-03-29" or "2005". */
function extractYear(dateStr: string): string {
    if (!dateStr) return '';
    return dateStr.substring(0, 4);
}

/**
 * Union type for top-results ranking. We can only rank items with
 * a score field — MBReleaseGroup lacks one in the Go struct.
 */
interface ScoredItem {
    type: 'artist' | 'recording';
    score: number;
    artist?: MBArtist;
    recording?: MBRecording;
}

@customElement('explore-view')
export class ExploreView extends LitElement {
    /* ── State ── */

    @state() private searchQuery = '';
    @state() private results: MBSearchResult | null = null;
    @state() private loading = false;
    @state() private error = '';

    /** Monotonic counter to discard stale responses. */
    private searchVersion = 0;
    private debounceTimer: ReturnType<typeof setTimeout> | null = null;

    @litQuery('input') private inputEl!: HTMLInputElement;

    /* ── Styles ── */

    static override styles = [
        designTokens,
        css`
            :host {
                display: block;
                padding: 24px;
                overflow-y: auto;
                height: 100%;
                box-sizing: border-box;
            }

            /* ── Search input ── */
            .search-container {
                display: flex;
                align-items: center;
                background: var(--yj-bg-surface, #212529);
                border: 1px solid var(--yj-border-subtle, #555);
                border-radius: 6px;
                padding: 0 12px;
                gap: 8px;
                height: 36px;
                max-width: 520px;
                transition: border-color 0.15s ease;
            }

            .search-container:focus-within {
                border-color: var(--yj-accent, #ffd43b);
            }

            .search-icon {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-icon-sm);
                flex-shrink: 0;
            }

            input {
                flex: 1;
                background: none;
                border: none;
                outline: none;
                color: var(--yj-text-primary, #fff);
                font-size: var(--yj-text-md);
                font-family: inherit;
                min-width: 0;
            }

            input::placeholder {
                color: var(--yj-text-tertiary, #888);
            }

            .clear-button {
                display: flex;
                align-items: center;
                justify-content: center;
                background: none;
                border: none;
                color: var(--yj-text-tertiary, #888);
                cursor: pointer;
                padding: 0;
                font-size: var(--yj-text-sm);
                flex-shrink: 0;
            }

            .clear-button:hover {
                color: var(--yj-text-primary, #fff);
            }

            /* ── Status messages ── */
            .status-message {
                margin-top: 32px;
                color: var(--yj-text-secondary, #b3b3b3);
                font-size: var(--yj-text-md);
            }

            .error-message {
                margin-top: 16px;
                display: flex;
                align-items: center;
                gap: 6px;
                color: var(--yj-text-secondary, #b3b3b3);
                font-size: var(--yj-text-sm);
            }

            .error-message wa-icon {
                color: #e5534b;
                font-size: var(--yj-icon-sm);
                flex-shrink: 0;
            }

            .loading-indicator {
                margin-top: 24px;
                color: var(--yj-text-secondary, #b3b3b3);
                font-size: var(--yj-text-md);
                animation: pulse 1.5s ease-in-out infinite;
            }

            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }

            /* ── Sections ── */
            .results-container {
                margin-top: 24px;
                display: flex;
                flex-direction: column;
                gap: 28px;
            }

            .section-header {
                font-size: var(--yj-text-lg);
                font-weight: 600;
                color: var(--yj-text-secondary, #b3b3b3);
                margin: 0 0 12px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                font-size: 11px;
            }

            /* ── Horizontal scroll rows ── */
            .horizontal-row {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                padding-bottom: 4px;
                scrollbar-width: none;
            }

            .horizontal-row::-webkit-scrollbar {
                display: none;
            }

            /* ── Top result cards ── */
            .top-card {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 14px;
                background: var(--yj-bg-surface, #212529);
                border-radius: 8px;
                cursor: pointer;
                min-width: 200px;
                max-width: 280px;
                flex-shrink: 0;
                transition: background 0.15s ease;
            }

            .top-card:hover {
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
            }

            .top-card:active {
                transform: scale(0.98);
            }

            .top-card-info {
                flex: 1;
                min-width: 0;
            }

            .top-card-name {
                font-weight: 500;
                color: var(--yj-text-primary, #fff);
                font-size: var(--yj-text-md);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .top-card-meta {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-sm);
                margin-top: 2px;
            }

            /* ── Artist cards ── */
            .artist-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 10px;
                border-radius: 8px;
                cursor: pointer;
                min-width: 100px;
                max-width: 120px;
                flex-shrink: 0;
                text-align: center;
                transition: background 0.15s ease;
            }

            .artist-card:hover {
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
            }

            .artist-card:active {
                transform: scale(0.97);
            }

            .artist-avatar {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 600;
                font-size: 20px;
                text-transform: uppercase;
                user-select: none;
                flex-shrink: 0;
            }

            .artist-name {
                font-weight: 500;
                color: var(--yj-text-primary, #fff);
                font-size: var(--yj-text-sm);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
            }

            .artist-disambiguation {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-xs);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                margin-top: -4px;
            }

            .artist-country {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-xs);
            }

            /* ── Album cards ── */
            .album-card {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 8px;
                border-radius: 8px;
                cursor: pointer;
                min-width: 130px;
                max-width: 150px;
                flex-shrink: 0;
                transition: background 0.15s ease;
            }

            .album-card:hover {
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
            }

            .album-card:active {
                transform: scale(0.97);
            }

            .album-art-container {
                width: 100%;
                aspect-ratio: 1;
                border-radius: 4px;
                overflow: hidden;
                background: linear-gradient(
                    135deg,
                    var(--yj-bg-overlay, #404040) 0%,
                    var(--yj-bg-surface, #282828) 100%
                );
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .album-art-container img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .album-art-fallback {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0;
            }

            .album-art-fallback wa-icon {
                color: var(--yj-text-tertiary, #888);
                font-size: 24px;
                opacity: 0.5;
            }

            .album-title {
                font-weight: 500;
                color: var(--yj-text-primary, #fff);
                font-size: var(--yj-text-sm);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .album-artist {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-xs);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .album-meta {
                display: flex;
                align-items: center;
                gap: 6px;
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-xs);
            }

            .type-badge {
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.08));
                padding: 1px 6px;
                border-radius: 3px;
                font-size: 10px;
                white-space: nowrap;
            }

            /* ── Track list ── */
            .track-list {
                display: flex;
                flex-direction: column;
            }

            .track-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 8px 12px;
                border-radius: 6px;
                cursor: default;
                transition: background 0.1s ease;
            }

            .track-item:hover {
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.04));
            }

            .track-info {
                flex: 1;
                min-width: 0;
            }

            .track-title {
                font-weight: 500;
                color: var(--yj-text-primary, #fff);
                font-size: var(--yj-text-md);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .track-artist {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-sm);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .track-duration {
                color: var(--yj-text-tertiary, #888);
                font-size: var(--yj-text-sm);
                flex-shrink: 0;
                font-variant-numeric: tabular-nums;
            }
        `,
    ];

    /* ── Lifecycle ── */

    override disconnectedCallback() {
        super.disconnectedCallback();
        if (this.debounceTimer !== null) {
            clearTimeout(this.debounceTimer);
            this.debounceTimer = null;
        }
    }

    /* ── Search Logic ── */

    private handleInput(e: Event) {
        const input = e.target as HTMLInputElement;
        this.searchQuery = input.value;

        if (this.debounceTimer !== null) {
            clearTimeout(this.debounceTimer);
            this.debounceTimer = null;
        }

        if (!this.searchQuery.trim()) {
            this.results = null;
            this.error = '';
            this.loading = false;
            return;
        }

        this.debounceTimer = setTimeout(() => {
            this.debounceTimer = null;
            void this.executeSearch();
        }, DEBOUNCE_MS);
    }

    private handleClear() {
        this.searchQuery = '';
        this.results = null;
        this.error = '';
        this.loading = false;
        if (this.debounceTimer !== null) {
            clearTimeout(this.debounceTimer);
            this.debounceTimer = null;
        }
        if (this.inputEl) {
            this.inputEl.value = '';
            this.inputEl.focus();
        }
    }

    private handleKeydown(e: KeyboardEvent) {
        if (e.key === 'Escape') {
            this.handleClear();
        }
    }

    private async executeSearch() {
        const version = ++this.searchVersion;
        const query = this.searchQuery.trim();
        if (!query) return;

        this.loading = true;
        this.error = '';

        const startTime = performance.now();
        console.log(`[explore] search started: "${query}"`);

        try {
            const result = await Search(query);

            // Discard stale response
            if (version !== this.searchVersion) {
                console.debug(
                    `[explore] discarded stale response for "${query}" (v${version} != v${this.searchVersion})`,
                );
                return;
            }

            this.results = result;
            const elapsed = (performance.now() - startTime).toFixed(0);
            console.log(
                `[explore] search completed: "${query}" in ${elapsed}ms — ` +
                    `artists=${result.artists?.length ?? 0}, ` +
                    `albums=${result.releaseGroups?.length ?? 0}, ` +
                    `tracks=${result.recordings?.length ?? 0}`,
            );
        } catch (err) {
            if (version !== this.searchVersion) return;
            const message = err instanceof Error ? err.message : String(err);
            this.error = message;
            console.error(`[explore] search error: "${query}" — ${message}`);
        } finally {
            if (version === this.searchVersion) {
                this.loading = false;
            }
        }
    }

    /* ── Top Results ── */

    private getTopResults(): ScoredItem[] {
        if (!this.results) return [];

        const items: ScoredItem[] = [];

        if (this.results.artists) {
            for (const a of this.results.artists) {
                items.push({ type: 'artist', score: a.score, artist: a });
            }
        }

        if (this.results.recordings) {
            for (const r of this.results.recordings) {
                items.push({ type: 'recording', score: r.score, recording: r });
            }
        }

        items.sort((a, b) => b.score - a.score);
        return items.slice(0, TOP_RESULTS_COUNT);
    }

    /* ── Navigation ── */

    private navigateToArtist(artist: MBArtist) {
        this.dispatchEvent(
            new CustomEvent('navigate', {
                bubbles: true,
                composed: true,
                detail: {
                    view: 'explore-artist-details',
                    artistMBID: artist.mbid,
                    artistName: artist.name,
                },
            }),
        );
    }

    private navigateToAlbum(rg: MBReleaseGroup) {
        this.dispatchEvent(
            new CustomEvent('navigate', {
                bubbles: true,
                composed: true,
                detail: {
                    view: 'explore-album-details',
                    releaseGroupMBID: rg.mbid,
                    albumName: rg.title,
                },
            }),
        );
    }

    /* ── Image Error Handling ── */

    private handleImageError(e: Event) {
        const img = e.target as HTMLImageElement;
        img.style.display = 'none';
        // Reveal the fallback placeholder behind the image
        const fallback = img.nextElementSibling as HTMLElement | null;
        if (fallback) {
            fallback.style.display = 'flex';
        }
    }

    /* ── Render ── */

    override render() {
        return html`
            ${this.renderSearchInput()}
            ${this.loading
                ? html`<div class="loading-indicator">Searching\u2026</div>`
                : nothing}
            ${this.error
                ? html`<div class="error-message">
                      <wa-icon name="triangle-exclamation"></wa-icon>
                      ${this.error}
                  </div>`
                : nothing}
            ${this.renderBody()}
        `;
    }

    private renderSearchInput() {
        return html`
            <div class="search-container">
                <wa-icon class="search-icon" name="magnifying-glass"></wa-icon>
                <input
                    type="text"
                    placeholder="Search MusicBrainz\u2026"
                    .value=${this.searchQuery}
                    @input=${this.handleInput}
                    @keydown=${this.handleKeydown}
                />
                ${this.searchQuery
                    ? html`
                          <button
                              class="clear-button"
                              @click=${this.handleClear}
                          >
                              <wa-icon name="xmark"></wa-icon>
                          </button>
                      `
                    : nothing}
            </div>
        `;
    }

    private renderBody() {
        // No query entered yet
        if (!this.searchQuery.trim() && !this.results) {
            return html`<div class="status-message">
                Search MusicBrainz to discover artists, albums, and tracks.
            </div>`;
        }

        // Loading state already shown above
        if (this.loading && !this.results) return nothing;

        // Results exist
        if (this.results) {
            const hasArtists = (this.results.artists?.length ?? 0) > 0;
            const hasAlbums = (this.results.releaseGroups?.length ?? 0) > 0;
            const hasTracks = (this.results.recordings?.length ?? 0) > 0;

            if (!hasArtists && !hasAlbums && !hasTracks) {
                return html`<div class="status-message">
                    No results found for \u201c${this.searchQuery}\u201d
                </div>`;
            }

            const topResults = this.getTopResults();

            return html`
                <div class="results-container">
                    ${topResults.length > 0
                        ? this.renderTopResults(topResults)
                        : nothing}
                    ${hasArtists
                        ? this.renderArtistsSection(this.results.artists!)
                        : nothing}
                    ${hasAlbums
                        ? this.renderAlbumsSection(this.results.releaseGroups!)
                        : nothing}
                    ${hasTracks
                        ? this.renderTracksSection(this.results.recordings!)
                        : nothing}
                </div>
            `;
        }

        return nothing;
    }

    /* ── Section Renderers ── */

    private renderTopResults(items: ScoredItem[]) {
        return html`
            <section>
                <h3 class="section-header">Top Results</h3>
                <div class="horizontal-row">
                    ${items.map((item) => this.renderTopCard(item))}
                </div>
            </section>
        `;
    }

    private renderTopCard(item: ScoredItem) {
        if (item.type === 'artist' && item.artist) {
            const a = item.artist;
            const hue = nameToHue(a.name);
            return html`
                <div
                    class="top-card"
                    @click=${() => this.navigateToArtist(a)}
                    role="button"
                    tabindex="0"
                    @keydown=${(e: KeyboardEvent) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            this.navigateToArtist(a);
                        }
                    }}
                >
                    <div
                        class="artist-avatar"
                        style="background: hsl(${hue}, 45%, 35%)"
                    >
                        ${a.name.charAt(0).toUpperCase()}
                    </div>
                    <div class="top-card-info">
                        <div class="top-card-name">${a.name}</div>
                        <div class="top-card-meta">Artist${a.country ? ` · ${a.country}` : ''}</div>
                    </div>
                </div>
            `;
        }

        if (item.type === 'recording' && item.recording) {
            const r = item.recording;
            return html`
                <div class="top-card" role="listitem">
                    <wa-icon
                        style="color: var(--yj-text-tertiary, #888); font-size: 18px; flex-shrink: 0;"
                        name="music"
                    ></wa-icon>
                    <div class="top-card-info">
                        <div class="top-card-name">${r.title}</div>
                        <div class="top-card-meta">
                            ${r.artistCredit}${r.length
                                ? ` · ${formatDuration(r.length)}`
                                : ''}
                        </div>
                    </div>
                </div>
            `;
        }

        return nothing;
    }

    private renderArtistsSection(artists: MBArtist[]) {
        return html`
            <section>
                <h3 class="section-header">Artists</h3>
                <div class="horizontal-row">
                    ${artists.map((a) => {
                        const hue = nameToHue(a.name);
                        return html`
                            <div
                                class="artist-card"
                                @click=${() => this.navigateToArtist(a)}
                                role="button"
                                tabindex="0"
                                @keydown=${(e: KeyboardEvent) => {
                                    if (e.key === 'Enter' || e.key === ' ') {
                                        e.preventDefault();
                                        this.navigateToArtist(a);
                                    }
                                }}
                            >
                                <div
                                    class="artist-avatar"
                                    style="background: hsl(${hue}, 45%, 35%)"
                                >
                                    ${a.name.charAt(0).toUpperCase()}
                                </div>
                                <div class="artist-name" title="${a.name}">
                                    ${a.name}
                                </div>
                                ${a.disambiguation
                                    ? html`<div class="artist-disambiguation">
                                          ${a.disambiguation}
                                      </div>`
                                    : nothing}
                                ${a.country
                                    ? html`<div class="artist-country">
                                          ${a.country}
                                      </div>`
                                    : nothing}
                            </div>
                        `;
                    })}
                </div>
            </section>
        `;
    }

    private renderAlbumsSection(releaseGroups: MBReleaseGroup[]) {
        return html`
            <section>
                <h3 class="section-header">Albums</h3>
                <div class="horizontal-row">
                    ${releaseGroups.map((rg) => {
                        const artURL = CoverArtGroupURL(rg.mbid);
                        const year = extractYear(rg.firstReleaseDate);
                        return html`
                            <div
                                class="album-card"
                                @click=${() => this.navigateToAlbum(rg)}
                                role="button"
                                tabindex="0"
                                @keydown=${(e: KeyboardEvent) => {
                                    if (e.key === 'Enter' || e.key === ' ') {
                                        e.preventDefault();
                                        this.navigateToAlbum(rg);
                                    }
                                }}
                            >
                                <div class="album-art-container">
                                    <img
                                        src="${artURL}"
                                        alt="${rg.title}"
                                        loading="lazy"
                                        @error=${this.handleImageError}
                                    />
                                    <div
                                        class="album-art-fallback"
                                        style="display: none"
                                    >
                                        <wa-icon name="compact-disc"></wa-icon>
                                    </div>
                                </div>
                                <div class="album-title" title="${rg.title}">
                                    ${rg.title}
                                </div>
                                <div class="album-artist">${rg.artistCredit}</div>
                                <div class="album-meta">
                                    ${rg.primaryType
                                        ? html`<span class="type-badge"
                                              >${rg.primaryType}</span
                                          >`
                                        : nothing}
                                    ${year ? html`<span>${year}</span>` : nothing}
                                </div>
                            </div>
                        `;
                    })}
                </div>
            </section>
        `;
    }

    private renderTracksSection(recordings: MBRecording[]) {
        return html`
            <section>
                <h3 class="section-header">Tracks</h3>
                <div class="track-list">
                    ${recordings.map(
                        (r) => html`
                            <div class="track-item">
                                <div class="track-info">
                                    <div class="track-title">${r.title}</div>
                                    <div class="track-artist">
                                        ${r.artistCredit}
                                    </div>
                                </div>
                                <div class="track-duration">
                                    ${formatDuration(r.length)}
                                </div>
                            </div>
                        `,
                    )}
                </div>
            </section>
        `;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'explore-view': ExploreView;
    }
}