{{template "base.html" .}}

{{define "content"}}
<div class="max-w-4xl mx-auto p-6">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-3xl font-bold text-white">Edit: {{.title}}</h1>
            <div class="flex items-center space-x-3">
                <a href="/note/{{.note_path}}" class="btn-secondary">
                    <i class="fas fa-eye mr-2"></i>Preview
                </a>
                <button type="submit" form="edit-form" class="btn-primary">
                    <i class="fas fa-save mr-2"></i>Save
                </button>
            </div>
        </div>
        
        {{if .folder_path}}
        <p class="text-gray-400">
            <i class="fas fa-folder mr-2"></i>
            <a href="/folder/{{.folder_path}}" class="text-blue-400 hover:text-blue-300">{{.folder_path}}</a>
        </p>
        {{end}}
    </div>

    <!-- Edit Form -->
    <form id="edit-form" class="space-y-6">
        <div class="bg-gray-800 rounded-lg p-6">
            <!-- Content Editor -->
            <div class="mb-6">
                <label for="content" class="block text-sm font-medium text-gray-300 mb-2">
                    Content
                </label>
                <textarea id="content" name="content" rows="25"
                          class="editor-textarea">{{.content}}</textarea>
            </div>

            <!-- Editor Toolbar -->
            <div class="flex items-center justify-between border-t border-gray-700 pt-4">
                <div class="flex items-center space-x-2">
                    <button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('**', '**')" title="Bold">
                        <i class="fas fa-bold"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('*', '*')" title="Italic">
                        <i class="fas fa-italic"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('`', '`')" title="Code">
                        <i class="fas fa-code"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('[', '](url)')" title="Link">
                        <i class="fas fa-link"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('![', '](image.png)')" title="Image">
                        <i class="fas fa-image"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertHeading()" title="Heading">
                        <i class="fas fa-heading"></i>
                    </button>
                    <button type="button" class="btn-secondary text-sm" onclick="insertList()" title="List">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
                
                <div class="text-xs text-gray-500">
                    Press Ctrl+S to save
                </div>
            </div>
        </div>
    </form>
</div>
{{end}}

{{define "scripts"}}
<script>
    const editForm = document.getElementById('edit-form');
    const contentTextarea = document.getElementById('content');

    editForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const content = contentTextarea.value;
        const notePath = '{{.note_path}}';

        const formData = new FormData();
        formData.append('content', content);

        fetch('/edit/' + notePath, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Note saved successfully', 'success');
                if (data.redirect) {
                    setTimeout(() => {
                        window.location.href = data.redirect;
                    }, 1000);
                }
            } else {
                throw new Error(data.error || 'Failed to save note');
            }
        })
        .catch(error => {
            showNotification('Error: ' + error.message, 'error');
        });
    });

    // Auto-resize textarea
    function autoResize() {
        contentTextarea.style.height = 'auto';
        contentTextarea.style.height = (contentTextarea.scrollHeight) + 'px';
    }

    contentTextarea.addEventListener('input', autoResize);
    
    // Initial resize
    autoResize();

    // Keyboard shortcuts
    contentTextarea.addEventListener('keydown', function(e) {
        // Ctrl+S or Cmd+S to save
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            editForm.dispatchEvent(new Event('submit'));
        }
        
        // Tab for indentation
        if (e.key === 'Tab') {
            e.preventDefault();
            const start = this.selectionStart;
            const end = this.selectionEnd;
            const value = this.value;
            
            this.value = value.substring(0, start) + '\t' + value.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
        }
    });

    // Markdown insertion functions
    function insertMarkdown(before, after) {
        const start = contentTextarea.selectionStart;
        const end = contentTextarea.selectionEnd;
        const text = contentTextarea.value;
        const selectedText = text.substring(start, end);
        
        const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
        contentTextarea.value = newText;
        
        // Position cursor
        const newPos = start + before.length + selectedText.length;
        contentTextarea.focus();
        contentTextarea.setSelectionRange(newPos, newPos);
        
        autoResize();
    }

    function insertHeading() {
        const start = contentTextarea.selectionStart;
        const text = contentTextarea.value;
        const lineStart = text.lastIndexOf('\n', start - 1) + 1;
        const lineText = text.substring(lineStart, start);
        
        if (lineText.startsWith('# ')) {
            return; // Already a heading
        }
        
        const newText = text.substring(0, lineStart) + '# ' + text.substring(lineStart);
        contentTextarea.value = newText;
        contentTextarea.focus();
        contentTextarea.setSelectionRange(start + 2, start + 2);
        
        autoResize();
    }

    function insertList() {
        const start = contentTextarea.selectionStart;
        const text = contentTextarea.value;
        const lineStart = text.lastIndexOf('\n', start - 1) + 1;
        
        const newText = text.substring(0, lineStart) + '- ' + text.substring(lineStart);
        contentTextarea.value = newText;
        contentTextarea.focus();
        contentTextarea.setSelectionRange(start + 2, start + 2);
        
        autoResize();
    }
</script>
{{end}}