<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

import { useCampaignService } from '~/services/Campaign.js';
import { FetchCampaignNotes, PushNote, TotalNotes } from '~/services/Content';
import { emitter } from '~/services/Emitter';
import Server from '~/services/Server';

const { Campaign } = useCampaignService();
const loadingNotes = ref(false);
const notesError = ref('');
const sidebarCollapsed = ref(false);

const selectedTool = ref('');

const campaignId = computed(() => {
    return Campaign.value?._id ?? Campaign.value?.id ?? null;
});

const notesMeta = computed(() => {
    const count = TotalNotes.value.length;
    return `${count} ${count === 1 ? 'note' : 'notes'}`;
});

function toggleSidebar() {
    sidebarCollapsed.value = !sidebarCollapsed.value;
}

async function createNote() {
    if (!Campaign.value) {
        return;
    }

    const campaignId = Campaign.value?._id 

    try {
        const response = await Server().post('/note/create', {
            title: 'New note',
            content: "",
            campaign: campaignId
        });

        if (response.data.status !== 'ok') {
            return;
        }

        emitter.emit('note-created', response.data.note);
    } catch (err) {
        console.log(err);
    }
}


function openNote(note) {
    PushNote(note);
}

function handleNoteCreated(note) {
    if (!note) {
        return;
    }

    const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
    if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) {
        return;
    }

    const createdNote = {
        key: note._id,
        title: note.title,
        text: note.content ?? '',
        date: note.date
    };

    TotalNotes.value = TotalNotes.value.filter((currentNote) => {
        return currentNote.key !== createdNote.key;
    });
    TotalNotes.value.unshift(createdNote);
    openNote(createdNote);
}

onMounted(() => {
    selectedTool.value = 'notes'; 
    FetchCampaignNotes();
    emitter.on('note-created', handleNoteCreated);
});

onUnmounted(() => {
    emitter.off('note-created', handleNoteCreated);
});

watch(Campaign, () => {
    FetchCampaignNotes();
}, { immediate: true });
</script>

<template>
    <div class="sidebar-shell">
        <nav class="sidebar-tools" aria-label="Campaign tools">
            <button
                class="sidebar-action"
                type="button"
                @click="toggleSidebar"
                :aria-expanded="(!sidebarCollapsed).toString()"
                aria-controls="campaign-notes-list"
                :title="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
                :aria-label="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
            >
                <img
                    class="sidebar-action-icon"
                    :src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
                    alt=""
                    aria-hidden="true"
                >
            </button>

            <button
                class="sidebar-action"
                type="button"
                @click="selectedTool = 'notes'"
                :class="{ active: selectedTool === 'notes' }"
            >
                <img
                    class="sidebar-action-icon"
                    :src="'/icons/iconoir/regular/bookmark-book.svg'"
                    alt=""
                    aria-hidden="true"
                >
            </button>
        </nav>

        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
            <div class="sidebar-actions">
                <button
                    class="sidebar-action"
                    type="button"
                    @click="createNote"
                    :disabled="!Campaign"
                    title="New note"
                    aria-label="New note"
                >
                    <img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
                </button>

                <button
                    class="sidebar-action"
                    type="button"
                    @click="fetchCampaignNotes"
                    :disabled="!Campaign || loadingNotes"
                    title="Refresh notes"
                    aria-label="Refresh notes"
                >
                    <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
                </button>
            </div>

            <div class="sidebar-header">
                <div class="sidebar-copy">
                    <span class="sidebar-eyebrow">Campaign</span>
                    <strong class="sidebar-title">Notes</strong>
                    <span class="sidebar-meta">{{ notesMeta }}</span>
                </div>
            </div>

            <div id="campaign-notes-list" class="sidebar-list">
                <div v-if="loadingNotes" class="sidebar-state">
                    Loading notes...
                </div>

                <div v-else-if="notesError" class="sidebar-state error">
                    {{ notesError }}
                </div>

                <div v-else-if="TotalNotes.length === 0" class="sidebar-state">
                    No notes in this campaign yet.
                </div>

                <template v-else>
                    <button
                        v-for="note in TotalNotes"
                        :key="note.key"
                        type="button"
                        class="note-link"
                        @click="openNote(note)"
                    >
                        <span class="note-link-title">{{ note.title }}</span>
                    </button>
                </template>
            </div>
        </aside>
    </div>
</template>

<style scoped>
.sidebar-shell {
    min-height: 0;
    flex-shrink: 0;
    display: flex;
}

.sidebar-tools {
    width: 32px;
    min-width: 32px;
    padding: 8px 6px;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sidebar-actions {
    display: flex;
    justify-content: center;
}

.sidebar-action {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background-soft);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    
    &.active {
        background-color: var(--color-selected);
    }
}

.sidebar-action:hover {
    background: var(--color-button-hover);
    &.active {
        background-color: var(--color-selected);
    }
}

.sidebar-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sidebar-action-icon {
    width: 18px;
    height: 18px;
    filter: invert(var(--color-icon-invert));
}

.notes-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
}

.notes-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right-color: transparent;
}

.sidebar-header {
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-eyebrow,
.sidebar-meta {
    font-size: 12px;
    opacity: 0.7;
}

.sidebar-title {
    line-height: 1.2;
    word-break: break-word;
}

.sidebar-list {
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-state {
    padding: 12px;
    border-radius: 10px;
    background: var(--color-background-soft);
    font-size: 14px;
}

.sidebar-state.error {
    color: #9e2a2b;
}

.note-link {
    width: 100%;
    padding: 6px;
    margin: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.note-link:hover {
    transform: translateX(2px);
    background: var(--color-background-light);
}

.note-link-title {
    font-weight: 600;
    word-break: break-word;
}

.note-link-date {
    font-size: 12px;
    opacity: 0.7;
}

@media (max-width: 900px) {
    .notes-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .sidebar-header,
    .sidebar-list {
        width: 220px;
        min-width: 220px;
    }
}
</style>
