{% extends "base.html" %}

{% block content %}
<div class="row">
    <!-- Model Management -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-robot"></i> Manajemen Model
            </div>
            <div class="card-body">
                <!-- Tab Navigation -->
                <ul class="nav nav-pills mb-4" id="modelTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="upload-tab" data-bs-toggle="pill" data-bs-target="#upload-panel" type="button" role="tab">
                            <i class="fas fa-upload me-2"></i>Upload Model
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="select-tab" data-bs-toggle="pill" data-bs-target="#select-panel" type="button" role="tab">
                            <i class="fas fa-list me-2"></i>Pilih dari saved_models
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="modelTabContent">
                    <!-- Upload Panel -->
                    <div class="tab-pane fade show active" id="upload-panel" role="tabpanel">
                        <form id="upload-form" enctype="multipart/form-data">
                            <div class="upload-area" id="upload-area">
                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                <h5>Drag & Drop Model File</h5>
                                <p class="text-muted">atau klik untuk memilih file (.pkl)</p>
                                <input type="file" id="model-file" name="model_file" accept=".pkl" style="display: none;">
                                <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('model-file').click()">
                                    <i class="fas fa-file-upload me-2"></i>Pilih File
                                </button>
                            </div>
                            <div class="mt-3" id="file-info" style="display: none;">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <span id="file-name"></span> (<span id="file-size"></span>)
                                </div>
                                
                                <!-- Progress Bar -->
                                <div id="upload-progress" style="display: none;" class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <small class="text-muted">Uploading...</small>
                                        <small class="text-muted" id="upload-percentage">0%</small>
                                    </div>
                                    <div class="progress">
                                        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                             role="progressbar" style="width: 0%"></div>
                                    </div>
                                </div>
                                
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-upload me-2"></i>Upload & Load Model
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Select Panel -->
                    <div class="tab-pane fade" id="select-panel" role="tabpanel">
                        <form method="POST" action="/load_model" class="row g-3">
                            <div class="col-md-8">
                                <label for="selected_model" class="form-label">Pilih Model dari saved_models</label>
                                <select id="selected_model" name="selected_model" class="form-select">
                                    {% if model_files and model_files|length > 0 %}
                                        {% for path in model_files %}
                                            <option value="{{ path }}">{{ path }}</option>
                                        {% endfor %}
                                    {% else %}
                                        <option disabled selected>Tidak ada file .pkl di saved_models</option>
                                    {% endif %}
                                </select>
                                <div class="form-text">
                                    File yang terdeteksi otomatis dari folder saved_models
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">&nbsp;</label>
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-check me-2"></i>Load Model
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- URL Summarization -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-link"></i> Summarize dari URL Liputan6
            </div>
            <div class="card-body">
                <form id="url-form">
                    <div class="mb-3">
                        <label for="url" class="form-label">URL Artikel Liputan6</label>
                        <input type="url" class="form-control" id="url" name="url" 
                               placeholder="https://www.liputan6.com/news/read/..." required>
                        <div class="form-text">
                            Masukkan URL artikel dari Liputan6.com
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="url_num_sentences" class="form-label">Jumlah Kalimat Summary</label>
                        <select class="form-control" id="url_num_sentences" name="num_sentences">
                            <option value="2">2 kalimat</option>
                            <option value="3" selected>3 kalimat</option>
                            <option value="4">4 kalimat</option>
                            <option value="5">5 kalimat</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-magic"></i> Generate Summary
                    </button>
                </form>
                
                <div class="loading">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Sedang memproses artikel...</p>
                </div>
                
                <div id="url-result" class="summary-result" style="display: none;">
                    <!-- Result akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- Text Summarization -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-file-text"></i> Summarize dari Teks
            </div>
            <div class="card-body">
                <form id="text-form">
                    <div class="mb-3">
                        <label for="title" class="form-label">Judul Artikel (Opsional)</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               placeholder="Masukkan judul artikel...">
                    </div>
                    
                    <div class="mb-3">
                        <label for="text" class="form-label">Teks Artikel</label>
                        <textarea class="form-control" id="text" name="text" rows="8" 
                                  placeholder="Paste teks artikel di sini..." required></textarea>
                        <div class="form-text">
                            Minimal 3 kalimat untuk hasil yang optimal
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="text_num_sentences" class="form-label">Jumlah Kalimat Summary</label>
                        <select class="form-control" id="text_num_sentences" name="num_sentences">
                            <option value="2">2 kalimat</option>
                            <option value="3" selected>3 kalimat</option>
                            <option value="4">4 kalimat</option>
                            <option value="5">5 kalimat</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-magic"></i> Generate Summary
                    </button>
                </form>
                
                <div class="loading">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Sedang memproses teks...</p>
                </div>
                
                <div id="text-result" class="summary-result" style="display: none;">
                    <!-- Result akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    let currentSummary = '';
    
    // Handle URL form submission
    $('#url-form').on('submit', function(e) {
        e.preventDefault();
        
        const url = $('#url').val();
        const numSentences = $('#url_num_sentences').val();
        
        if (!url) {
            showAlert('URL tidak boleh kosong!');
            return;
        }
        
        // Show loading
        showLoading('url-form');
        $('#url-result').hide();
        
        // Send request
        $.ajax({
            url: '/summarize_url',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                url: url,
                num_sentences: parseInt(numSentences)
            }),
            success: function(data) {
                hideLoading('url-form');
                
                if (data.success) {
                    displayResult(data, 'url-result');
                    showAlert('Summary berhasil dibuat!', 'success');
                } else {
                    showAlert('Error: ' + data.error);
                }
            },
            error: function(xhr, status, error) {
                hideLoading('url-form');
                showAlert('Terjadi kesalahan: ' + error);
            }
        });
    });
    
    // Handle text form submission
    $('#text-form').on('submit', function(e) {
        e.preventDefault();
        
        const text = $('#text').val();
        const title = $('#title').val();
        const numSentences = $('#text_num_sentences').val();
        
        if (!text) {
            showAlert('Teks tidak boleh kosong!');
            return;
        }
        
        // Show loading
        showLoading('text-form');
        $('#text-result').hide();
        
        // Send request
        $.ajax({
            url: '/summarize_text',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                text: text,
                title: title,
                num_sentences: parseInt(numSentences)
            }),
            success: function(data) {
                hideLoading('text-form');
                
                if (data.success) {
                    displayResult(data, 'text-result');
                    showAlert('Summary berhasil dibuat!', 'success');
                } else {
                    showAlert('Error: ' + data.error);
                }
            },
            error: function(xhr, status, error) {
                hideLoading('text-form');
                showAlert('Terjadi kesalahan: ' + error);
            }
        });
    });
    
    // Display result
    function displayResult(data, containerId) {
        currentSummary = data.summary;
        
        let html = `
            <h5><i class="fas fa-newspaper"></i> ${data.title || 'Artikel'}</h5>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <small class="text-muted">
                        <i class="fas fa-clock"></i> Waktu proses: ${data.processing_time.toFixed(2)}s
                    </small>
                </div>
                <div class="col-md-6 text-end">
                    <small class="text-muted">
                        <i class="fas fa-robot"></i> Model: ${data.model_type}
                    </small>
                </div>
            </div>
            
            <div class="mb-3">
                <h6><i class="fas fa-compress-alt"></i> Summary (${data.selected_sentences.length} dari ${data.total_sentences} kalimat):</h6>
                <div class="alert alert-info">
                    ${data.summary}
                </div>
            </div>
            
            <div class="mb-3">
                <h6><i class="fas fa-list"></i> Kalimat yang Dipilih:</h6>
        `;
        
        data.selected_sentences.forEach(function(sent, idx) {
            html += `
                <div class="alert alert-light border-start border-primary border-4 mb-2">
                    <strong>Kalimat ${sent.index + 1}:</strong> ${sent.text}
                </div>
            `;
        });
        
        html += `
            </div>
            
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button class="btn btn-primary" onclick="copyToClipboard()">
                    <i class="fas fa-copy"></i> Copy Summary
                </button>
            </div>
        `;
        
        $('#' + containerId).html(html).show();
    }
    
    
    // Copy summary to clipboard
    function copyToClipboard() {
        // Get summary text from the current displayed result
        const summaryElement = $('.alert-info').last();
        const summaryText = summaryElement.text().trim();
        
        if (summaryText) {
            navigator.clipboard.writeText(summaryText).then(function() {
                showAlert('Summary berhasil disalin ke clipboard!', 'success');
            }).catch(function(err) {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = summaryText;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showAlert('Summary berhasil disalin ke clipboard!', 'success');
            });
        } else {
            showAlert('Tidak ada summary untuk disalin!', 'warning');
        }
    }
    
    // Sample text for testing
    function loadSampleText() {
        const sampleText = `Jakarta - Presiden Joko Widodo mengumumkan kebijakan ekonomi digital baru dalam upaya mempercepat transformasi digital Indonesia. Kebijakan ini mencakup berbagai inisiatif untuk mendukung pertumbuhan startup dan UMKM digital.

Menurut Presiden, transformasi digital adalah kunci untuk mencapai visi Indonesia Emas 2045. "Kita harus bergerak cepat dalam mengadopsi teknologi digital untuk meningkatkan daya saing ekonomi nasional," ujar Jokowi dalam konferensi pers di Istana Negara.

Kebijakan baru ini meliputi penyediaan infrastruktur digital yang lebih baik, pelatihan SDM di bidang teknologi, dan kemudahan regulasi untuk startup. Pemerintah juga akan memberikan insentif khusus bagi perusahaan teknologi yang berinvestasi di Indonesia.

Para ahli ekonomi memberikan respons positif terhadap kebijakan ini. Dr. Budi Santoso dari Universitas Indonesia mengatakan bahwa langkah ini sangat tepat waktu mengingat persaingan global yang semakin ketat.

Implementasi kebijakan akan dimulai pada kuartal pertama tahun depan dengan anggaran sebesar Rp 50 triliun. Pemerintah menargetkan Indonesia menjadi salah satu kekuatan ekonomi digital terbesar di Asia Tenggara.`;
        
        $('#text').val(sampleText);
        $('#title').val('Jokowi Umumkan Kebijakan Ekonomi Digital Baru');
    }
    
    // File upload handling
    $(document).ready(function() {
        const uploadArea = $('#upload-area');
        const fileInput = $('#model-file');
        const fileInfo = $('#file-info');
        const fileName = $('#file-name');
        const fileSize = $('#file-size');

        // Drag and drop handlers
        uploadArea.on('dragover', function(e) {
            e.preventDefault();
            $(this).addClass('dragover');
        });

        uploadArea.on('dragleave', function(e) {
            e.preventDefault();
            $(this).removeClass('dragover');
        });

        uploadArea.on('drop', function(e) {
            e.preventDefault();
            $(this).removeClass('dragover');
            
            const files = e.originalEvent.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(files[0]);
            }
        });

        // File input change
        fileInput.on('change', function(e) {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        // Handle file selection
        function handleFileSelect(file) {
            if (file.name.endsWith('.pkl')) {
                fileName.text(file.name);
                fileSize.text(formatFileSize(file.size));
                fileInfo.show();
            } else {
                showAlert('File harus berformat .pkl!', 'danger');
            }
        }

        // Format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // Upload form submission
        $('#upload-form').on('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData();
            const file = fileInput[0].files[0];
            
            if (!file) {
                showAlert('Pilih file model terlebih dahulu!', 'danger');
                return;
            }

            formData.append('model_file', file);

            // Show loading and progress
            const submitBtn = $(this).find('button[type="submit"]');
            const originalText = submitBtn.html();
            const progressDiv = $('#upload-progress');
            const progressBar = $('#progress-bar');
            const percentageText = $('#upload-percentage');
            
            submitBtn.html('<i class="fas fa-spinner fa-spin me-2"></i>Uploading...').prop('disabled', true);
            progressDiv.show();
            progressBar.css('width', '0%');
            percentageText.text('0%');

            $.ajax({
                url: '/upload_model',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function() {
                    const xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            const percentComplete = Math.round((evt.loaded / evt.total) * 100);
                            progressBar.css('width', percentComplete + '%');
                            percentageText.text(percentComplete + '%');
                            
                            // Change color based on progress
                            if (percentComplete < 50) {
                                progressBar.removeClass('bg-success bg-warning').addClass('bg-primary');
                            } else if (percentComplete < 90) {
                                progressBar.removeClass('bg-primary bg-success').addClass('bg-warning');
                            } else {
                                progressBar.removeClass('bg-primary bg-warning').addClass('bg-success');
                            }
                        }
                    }, false);
                    return xhr;
                },
                success: function(response) {
                    if (response.success) {
                        progressBar.css('width', '100%').removeClass('bg-primary bg-warning').addClass('bg-success');
                        percentageText.text('100%');
                        
                        let message = 'Model berhasil diupload dan dimuat!';
                        if (response.file_size_mb) {
                            message += ` (${response.file_size_mb}MB)`;
                        }
                        showAlert(message, 'success');
                        checkModelStatus(); // Refresh model status
                        fileInfo.hide();
                        fileInput.val('');
                    } else {
                        showAlert('Error: ' + response.error, 'danger');
                    }
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'Error uploading file: ' + error;
                    if (xhr.status === 413) {
                        errorMessage = 'File terlalu besar! Maksimal ukuran file adalah 2GB.';
                    }
                    showAlert(errorMessage, 'danger');
                },
                complete: function() {
                    submitBtn.html(originalText).prop('disabled', false);
                    setTimeout(function() {
                        progressDiv.hide();
                        progressBar.css('width', '0%').removeClass('bg-success bg-warning').addClass('bg-primary');
                        percentageText.text('0%');
                    }, 2000);
                }
            });
        });

        // Add sample text button
        const sampleButton = `
            <button type="button" class="btn btn-outline-secondary btn-sm mb-2" onclick="loadSampleText()">
                <i class="fas fa-file-import me-2"></i>Load Sample Text
            </button>
        `;
        $('#text').before(sampleButton);
    });
</script>
{% endblock %}