<script>
    import { mapStore } from '$lib/stores/mapStore.js';
    import { getDecayInfo } from '$lib/utils/time.js';
    import { echoMessage } from '$lib/firebase/messages.js'

    let { message } = $props(); 

    let decay = $derived(
        message ? getDecayInfo(message.createdAt, message.lastEchoAt) : null
    );

    let echoed = $state(false);

    async function handleEcho() {
        await echoMessage(message.id);
        echoed = true;
    }
</script>

<div class = "panel">
    {#if message}
        <div class="content">
            {#if message.imageUrl}
                <img class="message-img" src={message.imageUrl} alt="message attachment" />
            {/if}
            <p class="message-text">{message.text}</p>
            {#if decay}
                <p class="meta">left {decay.daysAgo} days ago. fading in {decay.daysLeft} days.</p>
            {/if}
            <div class="actions">
                <button class="echo-button" 
                class:echoed={echoed} 
                onclick={handleEcho} 
                disabled={echoed}>
                    {echoed ? 'Echoed' : 'Echo'}
                </button>
                <button class="letgo-button" onclick={() => mapStore.set(
                    {selectedMessage: null, composing: false})}>
                    Let go
                </button>
            </div>
        </div>
    {:else}
        <div class="empty">
            <p>Tap a pin to read a message</p>
        </div>
    {/if}
</div>

<style>
    .panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 12px rgba(0,0,0,0.1);
        padding: 2rem 1.5rem;
        z-index: 100;
        overflow-y: auto;
    }

    .message-text{
        font-size: 1rem;
        line-height: 1.6;
        color: #111;
        margin-bottom: 0.5rem;
    }

    .meta {
        font-size: 1rem;
        line-height: 1.6;
        color: #111;
        margin-bottom: 0.5rem;
    }

    .actions {
        display: flex;
        gap: 0.75rem;
    }

    .echo-button {
        flex: 1;
        padding: 0.75rem;
        background: #111;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 0.95rem;
        cursor: pointer;
    }

    .letgo-button {
        flex: 1;
        padding: 0..75rem;
        background: transparent;
        color: #111;
        border: 1.5px solid #ddd;
        border-radius: 10px;
        font-size: 0.95rem;
        cursor: pointer;
    }

    .empty {
        color: #999;
        font-size: 0.9rem;
        margin-top: 2rem;
        text-align: center;
    }

    .echo-button.echoed {
        background: #4ecdc4;
        animation: pulsate 1.5s ease-in-out 3;
    }

    .message-img{
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        border-radius: 12px;
        margin-bottom: 0.75rem;
    }

    @keyframes pulsate {
        0%, 100% {box-shadow: 0 0 0 0 rgba(78,205,196,0.4); }
        50% {box-shadow: 0 0 0 12px rgba(78, 205, 196, 0);}
    }
</style>

