document.addEventListener('DOMContentLoaded', () => {
    const notesContainer = document.getElementById('notes-container');
    const noteModal = new bootstrap.Modal(document.getElementById('noteModal'));
    const noteForm = document.getElementById('noteForm');
    const noteIdInput = document.getElementById('noteId');
    const noteTitleInput = document.getElementById('noteTitle');
    const noteContentInput = document.getElementById('noteContent');
    const aiBtn = document.getElementById('aiBtn');
    const saveBtn = document.getElementById('saveBtn');

    const fetchNotes = async () => {
        const res = await fetch('api/notes.php');
        const notes = await res.json();
        renderNotes(notes);
    };

    const renderNotes = (notes) => {
        if (notes.length === 0) {
            notesContainer.innerHTML = '<div class="empty-state"><h3>Belum ada catatan</h3><p>Klik "Catatan Baru" untuk memulai.</p></div>';
            return;
        }

        notesContainer.innerHTML = '<div class="row row-cols-1 row-cols-md-3 g-4">' + 
            notes.map(note => `
                <div class="col">
                    <div class="note-card" onclick="editNote(${note.id})">
                        <h5 class="mb-1">${escapeHtml(note.title || 'Tanpa Judul')}</h5>
                        <p class="text-muted small mb-0">${escapeHtml(note.content).substring(0, 100)}...</p>
                        <div class="mt-2 text-end">
                            <button class="btn btn-sm btn-outline-danger" onclick="event.stopPropagation(); deleteNote(${note.id})">Hapus</button>
                        </div>
                    </div>
                </div>
            `).join('') + '</div>';
    };

    window.editNote = async (id) => {
        const res = await fetch(`api/notes.php?id=${id}`);
        const note = await res.json();
        noteIdInput.value = note.id;
        noteTitleInput.value = note.title;
        noteContentInput.value = note.content;
        noteModal.show();
    };

    window.deleteNote = async (id) => {
        if (confirm('Hapus catatan ini?')) {
            await fetch('api/notes.php', {
                method: 'DELETE',
                body: JSON.stringify({ id })
            });
            fetchNotes();
        }
    };

    document.getElementById('newNoteBtn').addEventListener('click', () => {
        noteForm.reset();
        noteIdInput.value = '';
        noteModal.show();
    });

    saveBtn.addEventListener('click', async () => {
        const data = {
            id: noteIdInput.value,
            title: noteTitleInput.value,
            content: noteContentInput.value
        };

        await fetch('api/notes.php', {
            method: 'POST',
            body: JSON.stringify(data)
        });

        noteModal.hide();
        fetchNotes();
    });

    aiBtn.addEventListener('click', async () => {
        const prompt = noteContentInput.value;
        if (!prompt) return alert('Tulis sesuatu dulu agar AI bisa membantu.');

        aiBtn.disabled = true;
        aiBtn.innerHTML = '<span>Sedang berpikir...</span>';

        try {
            const res = await fetch('api/ai_helper.php', {
                method: 'POST',
                body: JSON.stringify({ prompt, action: 'summarize' })
            });
            const data = await res.json();
            if (data.success) {
                noteContentInput.value += "\n\n--- Ringkasan AI ---" + data.text;
            } else {
                alert('Gagal: ' + data.error);
            }
        } catch (e) {
            alert('Kesalahan koneksi AI');
        } finally {
            aiBtn.disabled = false;
            aiBtn.innerHTML = '✨ Bantu dengan AI';
        }
    });

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    fetchNotes();
});