{% extends "base.html" %}

{% block title %}Data Operations{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">⚙️ Data Operations</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Transform, manipulate, and engineer your data</p>
        </div>
    </div>

    {% if not has_data %}
    <div class="no-data">
        <div class="no-data-icon">⚙️</div>
        <div class="no-data-title">No Dataset Loaded</div>
        <p class="no-data-desc">Upload a dataset to perform data operations and transformations.</p>
        <a href="/upload" class="btn-liquid"><i class="fas fa-cloud-upload-alt"></i> Upload Dataset</a>
    </div>
    {% else %}

    <div class="dataset-info-bar" style="margin-bottom: 24px;">
        <span><i class="fas fa-database"></i> <span class="dataset-name">Active Dataset</span></span>
        <span id="shape-info">
            <span class="badge badge-primary">{{ columns | length }} columns</span>
        </span>
        <button class="btn-liquid btn-liquid-danger" style="padding: 6px 16px; font-size: 0.8rem;" onclick="clearDataset()">
            <i class="fas fa-trash"></i> Clear
        </button>
    </div>

    <div class="operation-panel">
        <div class="operation-panel-header">
            <span style="font-size: 1.5rem;">🧮</span>
            <div class="operation-panel-title">Mathematical Operations</div>
        </div>
        <div class="operation-grid">
            <div class="operation-card" onclick="showOperationModal('increase_pct')">
                <div class="operation-card-icon">📈</div>
                <div class="operation-card-title">Increase by %</div>
                <div class="operation-card-desc">Increase column values by percentage</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('decrease_pct')">
                <div class="operation-card-icon">📉</div>
                <div class="operation-card-title">Decrease by %</div>
                <div class="operation-card-desc">Decrease column values by percentage</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('multiply')">
                <div class="operation-card-icon">✖️</div>
                <div class="operation-card-title">Multiply</div>
                <div class="operation-card-desc">Multiply column by a value</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('divide')">
                <div class="operation-card-icon">➗</div>
                <div class="operation-card-title">Divide</div>
                <div class="operation-card-desc">Divide column by a value</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('add')">
                <div class="operation-card-icon">➕</div>
                <div class="operation-card-title">Add</div>
                <div class="operation-card-desc">Add a value to column</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('subtract')">
                <div class="operation-card-icon">➖</div>
                <div class="operation-card-title">Subtract</div>
                <div class="operation-card-desc">Subtract a value from column</div>
            </div>
        </div>
    </div>

    <div class="operation-panel">
        <div class="operation-panel-header">
            <span style="font-size: 1.5rem;">🔧</span>
            <div class="operation-panel-title">Data Cleaning</div>
        </div>
        <div class="operation-grid">
            <div class="operation-card" onclick="showOperationModal('fillna')">
                <div class="operation-card-icon">🩹</div>
                <div class="operation-card-title">Fill Missing</div>
                <div class="operation-card-desc">Fill null values with specified value</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('drop_na')">
                <div class="operation-card-icon">🗑️</div>
                <div class="operation-card-title">Drop NA Rows</div>
                <div class="operation-card-desc">Remove rows with missing values</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('drop_duplicates')">
                <div class="operation-card-icon">♊</div>
                <div class="operation-card-title">Drop Duplicates</div>
                <div class="operation-card-desc">Remove duplicate rows</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('drop_column')">
                <div class="operation-card-icon">🚫</div>
                <div class="operation-card-title">Drop Column</div>
                <div class="operation-card-desc">Remove a column from dataset</div>
            </div>
        </div>
    </div>

    <div class="operation-panel">
        <div class="operation-panel-header">
            <span style="font-size: 1.5rem;">🆕</span>
            <div class="operation-panel-title">New Columns & Engineering</div>
        </div>
        <div class="operation-grid">
            <div class="operation-card" onclick="showOperationModal('new_column')">
                <div class="operation-card-icon">📐</div>
                <div class="operation-card-title">New Column</div>
                <div class="operation-card-desc">Create column from formula (sum, mean, log, etc.)</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('rename')">
                <div class="operation-card-icon">🏷️</div>
                <div class="operation-card-title">Rename Column</div>
                <div class="operation-card-desc">Change column name</div>
            </div>
        </div>
    </div>

    <div class="operation-panel">
        <div class="operation-panel-header">
            <span style="font-size: 1.5rem;">🔍</span>
            <div class="operation-panel-title">Filter & Sort</div>
        </div>
        <div class="operation-grid">
            <div class="operation-card" onclick="showOperationModal('filter')">
                <div class="operation-card-icon">🔎</div>
                <div class="operation-card-title">Filter Rows</div>
                <div class="operation-card-desc">Filter by condition (&gt;, &lt;, =, contains)</div>
            </div>
            <div class="operation-card" onclick="showOperationModal('sort')">
                <div class="operation-card-icon">📊</div>
                <div class="operation-card-title">Sort</div>
                <div class="operation-card-desc">Sort by column ascending/descending</div>
            </div>
        </div>
    </div>

    <div class="glass-card" style="margin-top: 24px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3><i class="fas fa-eye" style="margin-right: 8px;"></i> Data Preview</h3>
            <span id="preview-shape" class="badge badge-primary"></span>
        </div>
        <div id="data-preview">
            <p style="color: var(--text-muted); text-align: center; padding: 40px;">
                Perform an operation to see the updated preview
            </p>
        </div>
    </div>
    {% endif %}
</div>

{% if has_data %}
<div id="operation-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 9999; align-items: center; justify-content: center;">
    <div class="glass-strong" style="width: 90%; max-width: 500px; padding: 32px; position: relative;">
        <button onclick="closeModal()" style="position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">✕</button>
        <h3 id="modal-title" style="margin-bottom: 24px;">Operation</h3>
        <div id="modal-content"></div>
    </div>
</div>

<div id="loading-overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 10000; align-items: center; justify-content: center; flex-direction: column;">
    <div style="width: 50px; height: 50px; border: 3px solid rgba(102, 126, 234, 0.3); border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px;"></div>
    <p id="loading-text" style="color: #e0e0ff; font-size: 1rem;">Processing...</p>
</div>

<div id="alert-container" style="position: fixed; top: 80px; right: 20px; z-index: 10001; display: flex; flex-direction: column; gap: 8px;"></div>

<script>
var columns = {{ columns | tojson }};
var numericCols = {{ numeric_cols | tojson }};
var dtypes = {{ dtypes | tojson }};

function showLoading(show, text) {
    var overlay = document.getElementById('loading-overlay');
    var loadingText = document.getElementById('loading-text');
    if (show) {
        loadingText.textContent = text || 'Processing...';
        overlay.style.display = 'flex';
    } else {
        overlay.style.display = 'none';
    }
}

function showAlert(message, type) {
    var container = document.getElementById('alert-container');
    var alert = document.createElement('div');
    var colors = {
        'success': 'linear-gradient(135deg, #28a745, #20c997)',
        'danger': 'linear-gradient(135deg, #dc3545, #fd7e14)',
        'info': 'linear-gradient(135deg, #17a2b8, #6f42c1)',
        'warning': 'linear-gradient(135deg, #ffc107, #fd7e14)'
    };
    alert.style.cssText = 'background: ' + (colors[type] || colors.info) + '; color: white; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: slideIn 0.3s ease; min-width: 250px;';
    var icon = type === 'success' ? 'check' : type === 'danger' ? 'exclamation-circle' : 'info-circle';
    alert.innerHTML = '<i class="fas fa-' + icon + '" style="margin-right: 8px;"></i>' + message;
    container.appendChild(alert);
    setTimeout(function() {
        alert.style.animation = 'slideOut 0.3s ease forwards';
        setTimeout(function() { alert.remove(); }, 300);
    }, 4000);
}

function showOperationModal(operation) {
    var modal = document.getElementById('operation-modal');
    var title = document.getElementById('modal-title');
    var content = document.getElementById('modal-content');

    var titles = {
        'increase_pct': 'Increase by Percentage',
        'decrease_pct': 'Decrease by Percentage',
        'multiply': 'Multiply by Value',
        'divide': 'Divide by Value',
        'add': 'Add Value',
        'subtract': 'Subtract Value',
        'fillna': 'Fill Missing Values',
        'drop_na': 'Drop NA Rows',
        'drop_duplicates': 'Drop Duplicate Rows',
        'drop_column': 'Drop Column',
        'new_column': 'Create New Column',
        'rename': 'Rename Column',
        'filter': 'Filter Rows',
        'sort': 'Sort Data'
    };

    title.textContent = titles[operation] || operation;

    var html = '<form onsubmit="submitOperation(event, \'' + operation + '\')">';

    if (['increase_pct', 'decrease_pct', 'multiply', 'divide', 'add', 'subtract', 'fillna', 'drop_na', 'drop_column', 'rename', 'filter', 'sort', 'new_column'].indexOf(operation) !== -1) {
        var opts = '';
        for (var i = 0; i < columns.length; i++) {
            var c = columns[i];
            opts += '<option value="' + c + '">' + c + ' (' + dtypes[c] + ')</option>';
        }
        html += '<div class="form-group"><label class="form-label">Select Column</label><select class="form-select" name="column" id="op-column" required>' + opts + '</select></div>';
    }

    if (['increase_pct', 'decrease_pct'].indexOf(operation) !== -1) {
        html += '<div class="form-group"><label class="form-label">Percentage (' + (operation.indexOf('increase') !== -1 ? 'Increase' : 'Decrease') + ' by)</label><input type="number" class="form-input" name="value" placeholder="e.g., 30 for 30%" required min="0" step="0.01"></div>';
    } else if (['multiply', 'divide', 'add', 'subtract'].indexOf(operation) !== -1) {
        html += '<div class="form-group"><label class="form-label">Value</label><input type="number" class="form-input" name="value" placeholder="Enter value" required step="any"></div>';
    } else if (operation === 'fillna') {
        html += '<div class="form-group"><label class="form-label">Fill Value</label><input type="text" class="form-input" name="value" placeholder="Value to fill missing cells" required></div>';
    } else if (operation === 'rename') {
        html += '<div class="form-group"><label class="form-label">New Name</label><input type="text" class="form-input" name="value" placeholder="New column name" required></div>';
    } else if (operation === 'filter') {
        html += '<div class="form-group"><label class="form-label">Condition</label><select class="form-select" name="condition"><option value="eq">Equals (=)</option><option value="gt">Greater Than (&gt;)</option><option value="lt">Less Than (&lt;)</option><option value="gte">Greater Than or Equal (&gt;=)</option><option value="lte">Less Than or Equal (&lt;=)</option><option value="contains">Contains</option></select></div><div class="form-group"><label class="form-label">Value</label><input type="text" class="form-input" name="value" placeholder="Filter value" required></div>';
    } else if (operation === 'sort') {
        html += '<div class="form-group"><label class="form-label">Order</label><select class="form-select" name="value"><option value="true">Ascending</option><option value="false">Descending</option></select></div>';
    } else if (operation === 'new_column') {
        html += '<div class="form-group"><label class="form-label">New Column Name</label><input type="text" class="form-input" name="new_column_name" placeholder="e.g., total_sales" required></div><div class="form-group"><label class="form-label">Formula</label><select class="form-select" name="formula"><option value="sum">Sum of column</option><option value="mean">Mean of column</option><option value="cumsum">Cumulative Sum</option><option value="pct_change">Percentage Change</option><option value="log">Natural Log</option><option value="sqrt">Square Root</option><option value="square">Square</option></select></div>';
    }

    html += '<button type="submit" class="btn-liquid" style="width: 100%;"><i class="fas fa-play"></i> Apply Operation</button></form>';

    content.innerHTML = html;
    modal.style.display = 'flex';
}

function closeModal() {
    document.getElementById('operation-modal').style.display = 'none';
}

function submitOperation(event, operation) {
    event.preventDefault();
    closeModal();

    var formData = new FormData(event.target);
    var data = { operation: operation };

    formData.forEach(function(value, key) { data[key] = value; });

    if (operation === 'sort') {
        data.ascending = data.value === 'true';
        delete data.value;
    }

    showLoading(true, 'Applying operation...');

    fetch('/data-operations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(function(response) { return response.json(); })
    .then(function(result) {
        showLoading(false);
        if (result.success) {
            showAlert('Operation completed successfully!', 'success');
            document.getElementById('data-preview').innerHTML = '<div class="data-table-container">' + result.preview + '</div>';
            document.getElementById('preview-shape').innerHTML = '<span class="badge badge-primary">' + result.shape[0] + ' rows</span> <span class="badge badge-primary">' + result.shape[1] + ' columns</span>';
        } else {
            showAlert(result.error, 'danger');
        }
    })
    .catch(function(error) {
        showLoading(false);
        showAlert('Operation failed: ' + error.message, 'danger');
    });
}

function clearDataset() {
    if (!confirm('Are you sure you want to clear the current dataset?')) return;
    fetch('/api/clear-dataset', { method: 'POST' })
        .then(function() {
            showAlert('Dataset cleared', 'info');
            setTimeout(function() { window.location.reload(); }, 500);
        });
}

document.getElementById('operation-modal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

var animStyle = document.createElement('style');
animStyle.textContent = '@keyframes spin { to { transform: rotate(360deg); } } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }';
document.head.appendChild(animStyle);
</script>
{% endif %}
{% endblock %}