@extends('layouts.app')

@section('content')
<div class="grid grid-cols-1 gap-4 px-6" id="app">
    <!-- LOADING -->
    <div id="loading-spinner" class="fixed z-50 flex items-center ml-3 top-6 right-6" style="display: none;">
        <svg class="w-6 h-6 text-stone-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
            </circle>
            <path class="opacity-75" fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
            </path>
        </svg>
    </div>

    {{-- TOAST NOTIFICATIONS --}}
    <div id="toast-container" class="fixed z-40 space-y-3 pointer-events-none top-4 right-12"></div>

    {{-- ARAMA --}}
    <div>
        <div class="flex items-center gap-2 pt-4 pb-2 text-stone-400">
            <span class="material-symbols-rounded">search</span>
            Hızlı arama
        </div>
        <div class="flex mt-2 gap-x-4">
            <div
                class="relative flex w-1/3 bg-white rounded-lg outline-1 -outline-offset-1 outline-stone-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-yellow-500">
                <input id="search-input" type="text" name="search" placeholder="Ara..."
                    class="block min-w-0 grow px-3 py-1.5 text-base text-gray-900 placeholder:text-stone-400 focus:outline-none sm:text-sm/6" />
                <button id="clear-search-btn" style="display: none;"
                    class="absolute transition -translate-y-1/2 right-14 top-8 text-stone-400 hover:text-stone-600">
                    <span class="text-base material-symbols-rounded">close</span>
                </button>
                <div class="flex py-1.5 pr-1.5">
                    <kbd
                        class="inline-flex items-center px-1 font-sans text-xs border rounded-sm text-stone-400 border-stone-200">Ctrl+K</kbd>
                </div>
            </div>
        </div>
    </div>

    {{-- SABİTLENEN NOTLAR --}}
    <div class="flex items-center gap-2 pt-4 text-stone-400">
        <span class="material-symbols-rounded">push_pin</span>
        Sabitlenen Notlar
    </div>
    <div class="flex p-1 overflow-x-hidden gap-x-4">
        <div id="pinned-notes-container"
            class="w-auto max-w-full gap-4 columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5">
            <!-- Pinned notes will be rendered here -->
        </div>
    </div>

    {{-- DİĞER NOTLAR --}}
    <div class="flex items-center gap-2 pt-4 text-stone-400">
        <span class="material-symbols-rounded">note_stack</span>
        Diğer Notlar
    </div>
    <div class="flex p-1 overflow-x-hidden pb-36 gap-x-4">
        <div id="other-notes-container"
            class="w-auto max-w-full gap-4 columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5">
            <!-- Other notes will be rendered here -->
        </div>
    </div>

    <div class="fixed bottom-0 grid w-full py-2 border-t bg-white/90 border-stone-200 gap-y-3">
        {{-- ETİKETLER --}}
        <div class="flex max-w-full overflow-x-auto gap-x-1">
            <!-- Arama Butonu -->
            <button id="toggle-label-search"
                class="flex items-center p-1 gap-x-0.5 transition rounded hover:bg-stone-200 text-stone-500">
                <span class="material-symbols-rounded">label</span>
                <span class="text-xs material-symbols-rounded">search</span>
            </button>
            <!-- Arama Input ve Butonları -->
            <div id="label-search-container" class="relative" style="display: none;">
                <input id="label-search-input" placeholder="Etiket ara..."
                    class="px-2 py-1 mr-2 text-sm border rounded-lg bg-stone-50 border-stone-300 pr-14">
                <!-- "Ekle" Butonu -->
                <button id="add-label-btn" style="display: none;"
                    class="absolute transition -translate-y-1/2 right-10 top-1/2 text-stone-400 hover:text-stone-600">
                    <span class="text-sm material-symbols-rounded">add</span>
                </button>
                <!-- "Temizle" Butonu -->
                <button id="clear-label-search-btn" style="display: none;"
                    class="absolute transition -translate-y-1/2 right-4 top-1/2 text-stone-400 hover:text-stone-600">
                    <span class="text-sm material-symbols-rounded">close</span>
                </button>
            </div>
            <!-- Etiket Listesi -->
            <div id="labels-container" class="flex max-w-full overflow-x-auto gap-x-1"></div>
        </div>

        {{-- İŞLETMELER --}}
        <div class="flex max-w-full overflow-x-auto gap-x-1">
            <button id="toggle-company-search"
                class="flex items-center p-1 gap-x-0.5 transition rounded hover:bg-stone-200 text-stone-500">
                <span class="material-symbols-rounded">store</span>
                <span class="text-xs material-symbols-rounded">search</span>
            </button>
            <div id="company-search-container" class="relative" style="display: none;">
                <input id="company-search-input" placeholder="Şirket ara..."
                    class="px-2 py-1 mr-2 text-sm border rounded-lg bg-stone-50 border-stone-300 pr-7">
                <button id="clear-company-search-btn" style="display: none;"
                    class="absolute transition -translate-y-1/2 right-4 top-1/2 text-stone-400 hover:text-stone-600">
                    <span class="text-sm material-symbols-rounded">close</span>
                </button>
            </div>
            <div id="companies-container" class="flex max-w-full overflow-x-auto gap-x-1"></div>
        </div>
    </div>
</div>

<script>
    // CSRF Token
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // State Management
    let state = {
        notes: [],
        labels: [],
        companies: [],
        searchQuery: '',
        labelSearchText: '',
        companySearchText: '',
        showLabelSearch: false,
        showCompanySearch: false,
        draggedItemId: null,
        draggedItemType: null
    };

    // Normalize Turkish characters for search
    function normalizeText(text) {
        if (!text) return '';
        return text.toLowerCase()
            .replace(/ı/g, 'i')
            .replace(/ğ/g, 'g')
            .replace(/ü/g, 'u')
            .replace(/ş/g, 's')
            .replace(/ö/g, 'o')
            .replace(/ç/g, 'c')
            .replace(/İ/g, 'i');
    }

    // Toast Notification
    function showToast(message, type = 'success') {
        const toastContainer = document.getElementById('toast-container');
        const colors = {
            success: { bg: 'bg-teal-50', border: 'border-teal-200', text: 'text-teal-800', icon: 'text-teal-400' },
            info: { bg: 'bg-sky-50', border: 'border-sky-200', text: 'text-sky-800', icon: 'text-sky-400' },
            error: { bg: 'bg-rose-50', border: 'border-rose-200', text: 'text-rose-800', icon: 'text-rose-400' }
        };
        const color = colors[type];

        const icons = {
            success: '<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" fill-rule="evenodd" />',
            info: '<path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" fill-rule="evenodd" />',
            error: '<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" fill-rule="evenodd" />'
        };

        const toast = document.createElement('div');
        toast.className = `p-3 border ${color.border} rounded-md shadow-lg pointer-events-auto ${color.bg} transition-opacity duration-300`;
        toast.innerHTML = `
            <div class="flex">
                <div class="shrink-0">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="${color.icon} size-5">
                        ${icons[type]}
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium ${color.text}">${message}</p>
                </div>
            </div>
        `;

        toastContainer.appendChild(toast);

        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    // Loading Spinner
    function showLoading() {
        document.getElementById('loading-spinner').style.display = 'flex';
    }

    function hideLoading() {
        document.getElementById('loading-spinner').style.display = 'none';
    }

    // API Calls
    async function fetchNotes() {
        showLoading();
        try {
            const url = new URL('/api/notes', window.location.origin);
            if (state.searchQuery) {
                url.searchParams.append('search', state.searchQuery);
            }
            const response = await fetch(url);
            state.notes = await response.json();
            renderNotes();
        } catch (error) {
            showToast('Notlar yüklenemedi!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function fetchLabels() {
        try {
            const url = new URL('/api/labels', window.location.origin);
            if (state.labelSearchText) {
                url.searchParams.append('search', state.labelSearchText);
            }
            const response = await fetch(url);
            state.labels = await response.json();
            renderLabels();
        } catch (error) {
            showToast('Etiketler yüklenemedi!', 'error');
        }
    }

    async function fetchCompanies() {
        try {
            const url = new URL('/api/companies', window.location.origin);
            if (state.companySearchText) {
                url.searchParams.append('search', state.companySearchText);
            }
            const response = await fetch(url);
            state.companies = await response.json();
            renderCompanies();
        } catch (error) {
            showToast('Şirketler yüklenemedi!', 'error');
        }
    }

    async function pinNote(noteId) {
        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}/pin`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            const data = await response.json();
            showToast(data.message, 'success');
            await fetchNotes();
        } catch (error) {
            showToast('İşlem başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function deleteNote(noteId) {
        if (!confirm('Emin misiniz?')) return;

        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            const data = await response.json();
            showToast(data.message, 'success');
            await fetchNotes();
        } catch (error) {
            showToast('Silme işlemi başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function removeLabelFromNote(noteId, labelId, event) {
        event.stopPropagation();
        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}/labels/${labelId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            const data = await response.json();
            showToast(data.message, 'success');
            await fetchNotes();
        } catch (error) {
            showToast('İşlem başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function removeCompanyFromNote(noteId, companyId, event) {
        event.stopPropagation();
        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}/companies/${companyId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            const data = await response.json();
            showToast(data.message, 'success');
            await fetchNotes();
        } catch (error) {
            showToast('İşlem başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function addLabelToNote(noteId, labelId) {
        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}/labels`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ label_id: labelId })
            });
            const data = await response.json();
            showToast(data.message, response.ok ? 'success' : 'info');
            await fetchNotes();
        } catch (error) {
            showToast('İşlem başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function addCompanyToNote(noteId, companyId) {
        showLoading();
        try {
            const response = await fetch(`/api/notes/${noteId}/companies`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ company_id: companyId })
            });
            const data = await response.json();
            showToast(data.message, response.ok ? 'success' : 'info');
            await fetchNotes();
        } catch (error) {
            showToast('İşlem başarısız!', 'error');
        } finally {
            hideLoading();
        }
    }

    async function createLabel() {
        const labelName = state.labelSearchText.trim();
        if (!labelName) {
            showToast('Etiket adı boş olamaz!', 'error');
            return;
        }

        showLoading();
        try {
            const response = await fetch('/api/labels', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ name: labelName })
            });
            const data = await response.json();
            showToast(data.message, 'success');
            state.labelSearchText = '';
            document.getElementById('label-search-input').value = '';
            await fetchLabels();
        } catch (error) {
            showToast('Etiket oluşturulamadı!', 'error');
        } finally {
            hideLoading();
        }
    }

    // Render Functions
    function renderNoteCard(note) {
        const color = note.color || 'stone';
        return `
            <div class="relative note-item transition-all p-3 bg-${color}-100 border-b border-${color}-300 hover:border-opacity-0 text-sm rounded-t-2xl gap-4 break-inside-avoid-column mb-4 transition-all hover:ring-2 hover:ring-${color}-400 cursor-pointer"
                data-note-id="${note.id}"
                ondrop="handleDrop(event, ${note.id})"
                ondragover="handleDragOver(event)"
                ondragleave="handleDragLeave(event)">
                <div class="grid gap-1 overflow-hidden text-nowrap text-ellipsis text-stone-800">
                    <div class="flex items-center justify-between gap-2">
                        <div class="text-base font-bold leading-6 tracking-tight">
                            ${note.title}
                        </div>
                        ${note.is_pinned ? `<span class="flex-shrink-0 text-xl material-symbols-rounded icon-filled text-${color}-600">push_pin</span>` : ''}
                    </div>
                    <p class="overflow-hidden text-sm text-ellipsis">${note.content}</p>
                    <div class="flex flex-wrap gap-1 mt-2">
                        ${note.companies.map(company => `
                            <span class="inline-flex items-center gap-0.5 rounded-md bg-${color}-200/80 px-2 py-1 text-xs font-medium text-${color}-500">
                                <span class="text-xs material-symbols-rounded">store</span>
                                ${company.name}
                                <button type="button" onclick="removeCompanyFromNote(${note.id}, ${company.id}, event)"
                                    class="group relative -mr-1 size-3.5 rounded-xs hover:bg-${color}-500/20 transition">
                                    <span class="sr-only">Remove</span>
                                    <svg viewBox="0 0 14 14" class="size-3.5 stroke-${color}-700/50 group-hover:stroke-${color}-700/75">
                                        <path d="M4 4l6 6m0-6l-6 6" />
                                    </svg>
                                    <span class="absolute -inset-1"></span>
                                </button>
                            </span>
                        `).join('')}
                        ${note.labels.map(label => `
                            <span class="inline-flex items-center gap-0.5 rounded-md bg-${color}-200/80 px-2 py-1 text-xs font-medium text-${color}-500">
                                <span class="text-xs material-symbols-rounded">label</span>
                                ${label.name}
                                <button type="button" onclick="removeLabelFromNote(${note.id}, ${label.id}, event)"
                                    class="group relative -mr-1 size-3.5 rounded-xs hover:bg-${color}-500/20 transition">
                                    <span class="sr-only">Remove</span>
                                    <svg viewBox="0 0 14 14" class="size-3.5 stroke-${color}-700/50 group-hover:stroke-${color}-700/75">
                                        <path d="M4 4l6 6m0-6l-6 6" />
                                    </svg>
                                    <span class="absolute -inset-1"></span>
                                </button>
                            </span>
                        `).join('')}
                    </div>
                </div>
                <div class="flex justify-end text-stone-500">
                    <div class="flex gap-1">
                        <button onclick="pinNote(${note.id}); event.stopPropagation();"
                            class="w-6 h-6 transition-all hover:bg-${color}-200/60 rounded-lg p-0.5 text-${color}-400 hover:text-${color}-600">
                            <span class="text-sm material-symbols-rounded">
                                ${note.is_pinned ? 'keep_off' : 'keep'}
                            </span>
                        </button>
                        <button onclick="deleteNote(${note.id}); event.stopPropagation();"
                            class="w-6 h-6 transition-all hover:bg-${color}-200/60 rounded-lg p-0.5 text-${color}-400 hover:text-${color}-600">
                            <span class="text-sm material-symbols-rounded">delete</span>
                        </button>
                    </div>
                </div>
            </div>
        `;
    }

    function renderNotes() {
        const pinnedNotes = state.notes.filter(note => note.is_pinned);
        const otherNotes = state.notes.filter(note => !note.is_pinned);

        document.getElementById('pinned-notes-container').innerHTML = pinnedNotes.map(renderNoteCard).join('');
        document.getElementById('other-notes-container').innerHTML = otherNotes.map(renderNoteCard).join('');
    }

    function renderLabels() {
        const hasMatches = state.labels.length > 0;
        const showAddButton = state.labelSearchText && !hasMatches;

        document.getElementById('add-label-btn').style.display = showAddButton ? 'block' : 'none';
        document.getElementById('clear-label-search-btn').style.display = state.labelSearchText ? 'block' : 'none';

        document.getElementById('labels-container').innerHTML = state.labels.map(label => `
            <span draggable="true"
                ondragstart="handleDragStart(event, ${label.id}, 'label')"
                class="flex items-center gap-x-0.5 pl-1 pr-2 py-1.5 text-xs font-medium rounded-md min-w-fit bg-stone-100 text-stone-600 cursor-grab active:cursor-grabbing select-none hover:bg-stone-200 transition">
                <span class="text-sm text-stone-400 material-symbols-rounded">drag_indicator</span>
                ${label.name}
            </span>
        `).join('');
    }

    function renderCompanies() {
        const normalizedSearch = normalizeText(state.companySearchText);
        const filteredCompanies = state.companySearchText
            ? state.companies.filter(c => normalizeText(c.name).includes(normalizedSearch))
            : state.companies;

        document.getElementById('clear-company-search-btn').style.display = state.companySearchText ? 'block' : 'none';

        document.getElementById('companies-container').innerHTML = filteredCompanies.map(company => `
            <span draggable="true"
                ondragstart="handleDragStart(event, ${company.id}, 'company')"
                class="flex items-center gap-x-0.5 pl-1 pr-2 py-1.5 text-xs font-medium rounded-md min-w-fit bg-stone-100 text-stone-600 cursor-grab active:cursor-grabbing select-none hover:bg-stone-200 transition">
                <span class="text-sm text-stone-400 material-symbols-rounded">drag_indicator</span>
                ${company.name}
            </span>
        `).join('');
    }

    // Drag & Drop
    function handleDragStart(event, itemId, itemType) {
        state.draggedItemId = itemId;
        state.draggedItemType = itemType;
        event.dataTransfer.effectAllowed = 'copy';
        event.target.style.opacity = '0.6';
    }

    function handleDragOver(event) {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
        event.currentTarget.classList.add('ring-2', 'ring-amber-500', 'bg-amber-50');
    }

    function handleDragLeave(event) {
        event.currentTarget.classList.remove('ring-2', 'ring-amber-500', 'bg-amber-50');
    }

    function handleDrop(event, noteId) {
        event.preventDefault();
        event.stopPropagation();
        event.currentTarget.classList.remove('ring-2', 'ring-amber-500', 'bg-amber-50');

        if (state.draggedItemId && noteId) {
            if (state.draggedItemType === 'company') {
                addCompanyToNote(noteId, state.draggedItemId);
            } else if (state.draggedItemType === 'label') {
                addLabelToNote(noteId, state.draggedItemId);
            }
            state.draggedItemId = null;
            state.draggedItemType = null;
        }
    }

    document.addEventListener('dragend', function(event) {
        event.target.style.opacity = '1';
    });

    // Event Listeners
    document.getElementById('search-input').addEventListener('input', debounce(function(e) {
        state.searchQuery = e.target.value;
        document.getElementById('clear-search-btn').style.display = state.searchQuery ? 'block' : 'none';
        fetchNotes();
    }, 300));

    document.getElementById('clear-search-btn').addEventListener('click', function() {
        state.searchQuery = '';
        document.getElementById('search-input').value = '';
        this.style.display = 'none';
        fetchNotes();
    });

    document.getElementById('toggle-label-search').addEventListener('click', function() {
        state.showLabelSearch = !state.showLabelSearch;
        document.getElementById('label-search-container').style.display = state.showLabelSearch ? 'block' : 'none';
        if (!state.showLabelSearch) {
            state.labelSearchText = '';
            document.getElementById('label-search-input').value = '';
            fetchLabels();
        }
    });

    document.getElementById('label-search-input').addEventListener('input', debounce(function(e) {
        state.labelSearchText = e.target.value;
        fetchLabels();
    }, 300));

    document.getElementById('clear-label-search-btn').addEventListener('click', function() {
        state.labelSearchText = '';
        document.getElementById('label-search-input').value = '';
        fetchLabels();
    });

    document.getElementById('add-label-btn').addEventListener('click', createLabel);

    document.getElementById('toggle-company-search').addEventListener('click', function() {
        state.showCompanySearch = !state.showCompanySearch;
        document.getElementById('company-search-container').style.display = state.showCompanySearch ? 'block' : 'none';
        if (!state.showCompanySearch) {
            state.companySearchText = '';
            document.getElementById('company-search-input').value = '';
            renderCompanies();
        }
    });

    document.getElementById('company-search-input').addEventListener('input', function(e) {
        state.companySearchText = e.target.value;
        renderCompanies();
    });

    document.getElementById('clear-company-search-btn').addEventListener('click', function() {
        state.companySearchText = '';
        document.getElementById('company-search-input').value = '';
        renderCompanies();
    });

    // Ctrl+K shortcut
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 'k') {
            e.preventDefault();
            const searchInput = document.getElementById('search-input');
            searchInput.focus();
            searchInput.select();
        }
        if (e.key === 'Escape') {
            const searchInput = document.getElementById('search-input');
            if (document.activeElement === searchInput) {
                state.searchQuery = '';
                searchInput.value = '';
                searchInput.blur();
                fetchNotes();
            }
        }
    });

    // Utility: Debounce
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        fetchNotes();
        fetchLabels();
        fetchCompanies();
    });
</script>
@endsection