<script>
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    import { browser } from '$app/environment';
    import { audioPlaylist } from '$lib/stores/audioPlaylist';

    let realm = null;
    let audioFiles = [];
    let loading = true;
    let error = null;

    $: realmName = $page.params.name;

    function formatDuration(seconds) {
        if (!seconds) return '0:00';
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, '0')}`;
    }

    function formatBitrate(bps) {
        if (!bps) return '';
        const kbps = Math.round(bps / 1000);
        if (kbps >= 1000) return (kbps / 1000).toFixed(1) + ' Mbps';
        return kbps + ' kbps';
    }

    function timeAgo(dateStr) {
        const date = new Date(dateStr);
        const now = new Date();
        const seconds = Math.floor((now - date) / 1000);

        if (seconds < 60) return 'just now';
        if (seconds < 3600) return Math.floor(seconds / 60) + ' min ago';
        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
        return date.toLocaleDateString();
    }

    function isInPlaylist(audioId) {
        return $audioPlaylist.queue.some(t => t.id === audioId);
    }

    function togglePlaylist(audio) {
        if (isInPlaylist(audio.id)) {
            audioPlaylist.removeTrack(audio.id);
        } else {
            audioPlaylist.addTrack({
                id: audio.id,
                title: audio.title,
                username: audio.username || realm?.username,
                filePath: audio.filePath,
                thumbnailPath: audio.thumbnailPath || '',
                durationSeconds: audio.durationSeconds,
                realmName: realm?.name
            });
        }
    }

    function addToPlaylist(audio) {
        audioPlaylist.addTrack({
            id: audio.id,
            title: audio.title,
            username: audio.username || realm?.username,
            filePath: audio.filePath,
            thumbnailPath: audio.thumbnailPath || '',
            durationSeconds: audio.durationSeconds,
            realmName: realm?.name
        });
    }

    function playNow(audio) {
        audioPlaylist.playTrack({
            id: audio.id,
            title: audio.title,
            username: audio.username || realm?.username,
            filePath: audio.filePath,
            thumbnailPath: audio.thumbnailPath || '',
            durationSeconds: audio.durationSeconds,
            realmName: realm?.name
        });
    }

    function addAllToPlaylist() {
        audioFiles.forEach(audio => {
            if (!isInPlaylist(audio.id)) {
                addToPlaylist(audio);
            }
        });
    }

    async function loadRealmAudio() {
        if (!browser || !realmName) return;

        try {
            const res = await fetch(`/api/audio/realm/name/${encodeURIComponent(realmName)}`);
            if (res.ok) {
                const data = await res.json();
                realm = data.realm || null;
                audioFiles = data.audio || [];
            } else if (res.status === 404) {
                error = 'Realm not found';
            } else {
                error = 'Failed to load realm';
            }
        } catch (e) {
            console.error('Failed to load realm audio:', e);
            error = 'Failed to load realm';
        } finally {
            loading = false;
        }
    }

    let prevRealmName = null;

    onMount(() => {
        prevRealmName = realmName;
        loadRealmAudio();
    });

    // Re-load only when realmName actually changes (not on initial mount)
    $: if (browser && realmName && prevRealmName !== null && prevRealmName !== realmName) {
        prevRealmName = realmName;
        loading = true;
        error = null;
        loadRealmAudio();
    }
</script>

<style>
    .realm-header {
        text-align: center;
        padding: 3rem 0;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--border);
    }

    .realm-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #ec4899, #f472b6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .realm-description {
        font-size: 1.1rem;
        color: var(--gray);
        margin-bottom: 1rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .realm-meta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .realm-meta-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .owner-link {
        color: #ec4899;
        text-decoration: none;
    }

    .owner-link:hover {
        text-decoration: underline;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #ec4899;
        text-decoration: none;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    .back-link:hover {
        text-decoration: underline;
    }

    .audio-count-badge {
        background: rgba(236, 72, 153, 0.2);
        color: #ec4899;
        padding: 0.3rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }

    .realm-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    .add-all-btn {
        padding: 0.6rem 1.5rem;
        background: rgba(236, 72, 153, 0.2);
        border: 1px solid rgba(236, 72, 153, 0.4);
        border-radius: 8px;
        color: #ec4899;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .add-all-btn:hover {
        background: rgba(236, 72, 153, 0.3);
        transform: translateY(-2px);
    }

    .audio-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .audio-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: #111;
        border: 1px solid var(--border);
        border-radius: 8px;
        transition: all 0.2s;
    }

    .audio-item:hover {
        border-color: #ec4899;
        background: rgba(236, 72, 153, 0.05);
    }

    .audio-number {
        width: 30px;
        text-align: center;
        color: var(--gray);
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .audio-thumbnail {
        width: 48px;
        height: 48px;
        border-radius: 4px;
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
    }

    .audio-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .audio-thumbnail .placeholder {
        font-size: 1.5rem;
        opacity: 0.5;
    }

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

    .audio-title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--white);
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .audio-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--gray);
        font-size: 0.8rem;
    }

    .audio-bitrate {
        color: #ec4899;
    }

    .audio-duration {
        font-family: monospace;
        color: var(--gray);
        font-size: 0.9rem;
        min-width: 50px;
        text-align: right;
    }

    .audio-actions {
        display: flex;
        gap: 0.5rem;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.05);
        color: var(--gray);
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .action-btn:hover {
        background: rgba(236, 72, 153, 0.2);
        border-color: #ec4899;
        color: #ec4899;
    }

    .action-btn.play {
        background: rgba(236, 72, 153, 0.2);
        border-color: rgba(236, 72, 153, 0.4);
        color: #ec4899;
    }

    .action-btn.play:hover {
        background: #ec4899;
        color: white;
    }

    .action-btn.added {
        background: rgba(126, 231, 135, 0.2);
        border-color: #7ee787;
        color: #7ee787;
    }

    .no-audio {
        text-align: center;
        padding: 4rem 0;
        color: var(--gray);
    }

    .no-audio-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .error-message {
        text-align: center;
        padding: 4rem 0;
        color: #ef4444;
    }

    .loading {
        text-align: center;
        padding: 4rem 0;
        color: var(--gray);
    }

    .terminal-hint {
        text-align: center;
        margin-top: 2rem;
        padding: 1rem;
        background: rgba(236, 72, 153, 0.1);
        border: 1px solid rgba(236, 72, 153, 0.2);
        border-radius: 8px;
        color: var(--gray);
        font-size: 0.85rem;
    }

    .terminal-hint strong {
        color: #ec4899;
    }
</style>

<div class="container">
    <a href="/audio" class="back-link">
        <span>&#8592;</span> Back to all audio
    </a>

    {#if loading}
        <div class="loading">
            <p>Loading realm...</p>
        </div>
    {:else if error}
        <div class="error-message">
            <h2>{error}</h2>
            <p>The audio realm you're looking for doesn't exist or has been removed.</p>
        </div>
    {:else if realm}
        <div class="realm-header">
            <h1 style="color: {realm.titleColor || '#ffffff'};">{realm.name}</h1>
            {#if realm.description}
                <p class="realm-description">{realm.description}</p>
            {/if}
            <div class="realm-meta">
                <div class="realm-meta-item">
                    <span>by</span>
                    <a href={`/profile/${realm.username}`} class="owner-link">@{realm.username}</a>
                </div>
                <div class="audio-count-badge">
                    {audioFiles.length} {audioFiles.length === 1 ? 'track' : 'tracks'}
                </div>
            </div>
            {#if audioFiles.length > 0}
                <div class="realm-actions">
                    <button class="add-all-btn" on:click={addAllToPlaylist}>
                        <span>+</span> Add All to Playlist
                    </button>
                </div>
            {/if}
        </div>

        {#if audioFiles.length === 0}
            <div class="no-audio">
                <div class="no-audio-icon">🎵</div>
                <h2>No audio yet</h2>
                <p>This realm doesn't have any audio files yet.</p>
            </div>
        {:else}
            <div class="audio-list">
                {#each audioFiles as audio, index}
                    <div class="audio-item">
                        <span class="audio-number">{index + 1}</span>
                        <div class="audio-thumbnail">
                            {#if audio.thumbnailPath}
                                <img src={audio.thumbnailPath} alt={audio.title} />
                            {:else}
                                <span class="placeholder">🎵</span>
                            {/if}
                        </div>
                        <div class="audio-info">
                            <div class="audio-title">{audio.title}</div>
                            <div class="audio-meta">
                                {#if audio.bitrate}
                                    <span class="audio-bitrate">{formatBitrate(audio.bitrate)}</span>
                                    <span>•</span>
                                {/if}
                                <span>{timeAgo(audio.createdAt)}</span>
                            </div>
                        </div>
                        <span class="audio-duration">{formatDuration(audio.durationSeconds)}</span>
                        <div class="audio-actions">
                            <button
                                class="action-btn play"
                                on:click={() => playNow(audio)}
                                title="Play now"
                            >
                                ▶
                            </button>
                            <button
                                class="action-btn"
                                class:added={$audioPlaylist.queue.some(t => t.id === audio.id)}
                                on:click={() => togglePlaylist(audio)}
                                title={$audioPlaylist.queue.some(t => t.id === audio.id) ? 'Remove from playlist' : 'Add to playlist'}
                            >
                                {$audioPlaylist.queue.some(t => t.id === audio.id) ? '✓' : '+'}
                            </button>
                        </div>
                    </div>
                {/each}
            </div>

            <div class="terminal-hint">
                Tracks added to playlist will play in the <strong>Terminal Audio tab</strong>. Press <strong>`</strong> to open the terminal.
            </div>
        {/if}
    {/if}
</div>
