@extends('layouts.adminlte.adminlte')

@section('title')
    My Notes
@endsection

@section('content')
    <div class="card card-outline card-warning">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <span>
                    <a href="{{ route('chat.index') }}" class="btn btn-sm btn-outline-secondary mr-2">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <i class="fas fa-sticky-note mr-1 text-warning"></i>
                    Notes (chat with myself)
                </span>
            </div>
        </div>

        <div class="card-body" id="notes-box" style="height:400px; overflow-y:scroll;">
            {{-- Load Older Notes Button --}}
            <div id="load-older-container" class="text-center mb-3 {{ $hasMoreNotes ? '' : 'd-none' }}">
                <button type="button" class="btn btn-sm btn-outline-primary" id="load-older-btn">
                    <i class="fas fa-history mr-1"></i> Load Older Notes
                </button>
            </div>

            <div id="notes-container">
                @foreach($notes as $note)
                    <div class="note-item text-right mb-2 p-2" data-note-id="{{ $note->id }}" style="border-radius: 8px; background: rgba(255,193,7,0.15);">
                        <i class="fas fa-trash text-muted float-left delete-note" data-note-id="{{ $note->id }}" style="cursor:pointer;" title="Delete note"></i>
                        <span>{{ $note->content }}</span><br>
                        <small class="text-muted">{{ $note->created_at->format('d M Y H:i') }}</small>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer" id="note-form-container">
            <form id="note-form">
                @csrf

                <div class="input-group">
                    <input type="text" name="content" class="form-control" placeholder="Add a note..." required autocomplete="off">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-warning">Add</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    @parent
    <script>
        function formatDate(isoString) {
            const date = new Date(isoString);
            return date.toLocaleString(undefined, {
                year: 'numeric',
                month: 'short',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            const noteForm = document.getElementById('note-form');
            const notesBox = document.getElementById('notes-box');
            const notesContainer = document.getElementById('notes-container');
            const loadOlderBtn = document.getElementById('load-older-btn');
            const loadOlderContainer = document.getElementById('load-older-container');

            let oldestNoteId = {{ $oldestNoteId ?? 'null' }};
            let lastNoteId = {{ $notes->last()->id ?? 0 }};

            // Scroll to bottom initially
            notesBox.scrollTop = notesBox.scrollHeight;

            // Add note
            noteForm.addEventListener('submit', function (e) {
                e.preventDefault();

                let contentInput = this.querySelector('input[name="content"]');
                if (!contentInput.value.trim()) return;

                fetch("{{ route('notes.store') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json",
                        "Accept": "application/json"
                    },
                    body: JSON.stringify({
                        content: contentInput.value
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            alert(data.message || 'Error adding note');
                            return;
                        }
                        appendNote(data);
                        lastNoteId = data.id;
                        contentInput.value = '';
                    })
                    .catch(error => console.error(error));
            });

            // Fetch new notes
            setInterval(function () {
                fetch("{{ route('notes.fetch') }}?last_id=" + lastNoteId)
                    .then(response => response.json())
                    .then(data => {
                        if (data.notes) {
                            data.notes.forEach(note => {
                                appendNote(note);
                                lastNoteId = note.id;
                            });
                        }
                    })
                    .catch(error => console.error(error));
            }, 5000);

            // Load older notes
            loadOlderBtn.addEventListener('click', function () {
                if (!oldestNoteId) return;

                loadOlderBtn.disabled = true;
                loadOlderBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Loading...';

                fetch("{{ route('notes.fetch-older') }}?before_id=" + oldestNoteId)
                    .then(response => response.json())
                    .then(data => {
                        if (data.notes && data.notes.length > 0) {
                            const scrollHeightBefore = notesBox.scrollHeight;

                            data.notes.forEach(note => {
                                prependNote(note);
                            });

                            oldestNoteId = data.oldest_id;
                            notesBox.scrollTop = notesBox.scrollHeight - scrollHeightBefore;
                        }

                        if (!data.has_more) {
                            loadOlderContainer.classList.add('d-none');
                        }

                        loadOlderBtn.disabled = false;
                        loadOlderBtn.innerHTML = '<i class="fas fa-history mr-1"></i> Load Older Notes';
                    })
                    .catch(error => {
                        console.error(error);
                        loadOlderBtn.disabled = false;
                        loadOlderBtn.innerHTML = '<i class="fas fa-history mr-1"></i> Load Older Notes';
                    });
            });

            // Delete note
            notesContainer.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-note')) {
                    const noteId = e.target.dataset.noteId;
                    if (!confirm('Delete this note?')) return;

                    fetch(`/notes/${noteId}`, {
                        method: 'DELETE',
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Accept": "application/json"
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const noteEl = document.querySelector(`.note-item[data-note-id="${noteId}"]`);
                                if (noteEl) {
                                    noteEl.remove();
                                }
                            }
                        })
                        .catch(error => console.error(error));
                }
            });

            function appendNote(note) {
                const html = `
                    <div class="note-item text-right mb-2 p-2" data-note-id="${note.id}" style="border-radius: 8px; background: rgba(255,193,7,0.15);">
                        <i class="fas fa-trash text-muted float-left delete-note" data-note-id="${note.id}" style="cursor:pointer;" title="Delete note"></i>
                        <span>${escapeHtml(note.content)}</span><br>
                        <small class="text-muted">${formatDate(note.created_at)}</small>
                    </div>
                `;
                notesContainer.insertAdjacentHTML('beforeend', html);
                notesBox.scrollTop = notesBox.scrollHeight;
            }

            function prependNote(note) {
                const html = `
                    <div class="note-item text-right mb-2 p-2" data-note-id="${note.id}" style="border-radius: 8px; background: rgba(255,193,7,0.15);">
                        <i class="fas fa-trash text-muted float-left delete-note" data-note-id="${note.id}" style="cursor:pointer;" title="Delete note"></i>
                        <span>${escapeHtml(note.content)}</span><br>
                        <small class="text-muted">${formatDate(note.created_at)}</small>
                    </div>
                `;
                notesContainer.insertAdjacentHTML('afterbegin', html);
            }

            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        });
    </script>
@endsection