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

import { useCampaignService } from '~/services/Campaign.js';
import { emitter } from '~/services/Emitter';
import Server from '~/services/Server';
import { CreateWindow } from '~/services/Windows';
import NestedNoteList from './NestedNoteList.vue';

const { Campaign } = useCampaignService();
const notes = ref([]);
const folders = ref([]);
const loadingNotes = ref(false);
const notesError = ref('');
const sidebarCollapsed = ref(false);
const isDragOverSidebar = ref(false);
const expandedFolderIds = ref([]);
const nestedNoteListRef = ref(null);

async function handleSidebarDrop(event) {
    const noteKey = event.dataTransfer.getData('text/plain');
    if (!noteKey) return;
    try {
        await Server().post('/note/update', { id: noteKey, folder: null });
        fetchCampaignNotes();
    } catch (e) {}
}

function toggleExpandedFolder(folderId) {
    const arr = expandedFolderIds.value;
    const idx = arr.indexOf(folderId);
    if (idx !== -1) {
        arr.splice(idx, 1);
    } else {
        arr.push(folderId);
    }
}

function isFolderExpanded(folderId) {
    return expandedFolderIds.value.includes(folderId);
}

function openNote(note) {
    emitter.emit('push-note', 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
    };

    notes.value = notes.value.filter((currentNote) => currentNote.key !== createdNote.key);
    notes.value.unshift(createdNote);
    openNote(createdNote);
}

function handleNoteRenamed(data) {
    const note = notes.value.find(n => n.key === data.key);
    if (note) {
        note.title = data.title;
    }
    emitter.emit('title-updated', { key: data.key, title: data.title });
}

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

async function fetchCampaignNotes() {
    if (!campaignId.value) {
        notes.value = [];
        folders.value = [];
        notesError.value = '';
        return;
    }

    loadingNotes.value = true;
    notesError.value = '';

   try {
        const response = await Server().get('/note/list', { params: { campaign: campaignId.value } });

        if (response.data.status !== 'ok') {
            notes.value = [];
            folders.value = [];
            notesError.value = response.data.msg ?? 'Unable to load notes.';
            return;
        }

        folders.value = response.data.folders.map((folder) => ({
            _id: folder._id, name: folder.name, date: folder.date
        }));

        notes.value = response.data.notes.map((note) => {
            return { key: note._id, title: note.title, text: note.content ?? '', date: note.date };
        });
    } catch (error) {
        notes.value = [];
        folders.value = [];
        notesError.value = 'Unable to load notes.';
    } finally {
        loadingNotes.value = false;
    }
}

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

    const cid = Campaign.value?._id;

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

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

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

function createFolder() {
    CreateWindow('new_folder', { campaign: campaignId.value });
}

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

const rootNotes = computed(() => notes.value.filter(n => !n._folder));

watch(campaignId, (newVal) => {
    if (newVal) {
        fetchCampaignNotes();
    } else {
        notes.value = [];
        folders.value = [];
        notesError.value = '';
    }
});

onMounted(() => {
    if (campaignId.value) {
        fetchCampaignNotes();
    }
});
</script>

<template>
    <div class="sidebar-shell">
        <nav class="sidebar-actions" 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="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="createFolder"
                :disabled="!Campaign"
                title="New folder"
                aria-label="New folder"
            >
                <img class="sidebar-action-icon" src="/icons/iconoir/regular/folder.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>
        </nav>

        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
            <div class="sidebar-header">
                <div class="sidebar-copy">
                    <span class="sidebar-eyebrow">Campaign</span>
                    <strong class="sidebar-title">Notes</strong>
                </div>
            </div>

          <div class="sidebar-list-drop-wrap" :class="{ 'drag-over': isDragOverSidebar }" id="campaign-notes-list" @dragenter.self="isDragOverSidebar = true" @dragleave.self="isDragOverSidebar = false" @dragover.prevent @drop.stop="handleSidebarDrop">
                <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="folders.length === 0 && notes.length === 0" class="sidebar-state">
                     No notes in this campaign yet.
                 </div>

                 <template v-else>
                <NestedNoteList ref="nestedNoteListRef"
                     :parent-folder-id="null"
                     :folders="folders"
                     :notes="rootNotes"
                     :campaign-id="campaignId"
                     :expanded-folder-ids="expandedFolderIds"
                     @open-note="openNote"
                     @reload-notes="fetchCampaignNotes"
                     @toggle-expanded-folder="toggleExpandedFolder"
                 />
                 </template>
             </div>
        </aside>
    </div>
</template>

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

.sidebar-actions {
    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-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;
}

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

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

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

.notes-sidebar {
    min-width: 280px;
    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-drop-wrap {
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 2px;
    transition: background-color 0.15s ease;
    flex: 1;
    min-height: 0;
}

.sidebar-list-drop-wrap.drag-over {
    background: var(--color-button-hover);
}

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

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

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

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