{% extends "base.html" %}
{% set active_page = 'dashboard' %}

{% block title %}Dashboard - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Welcome back{% if customer %}, {{ customer.customer_name }}{% endif %}!</h1>
        <p class="page-subtitle">Here's an overview of your genomics processing activity</p>
    </div>
    
    <!-- Status Tiles Grid -->
    <div class="grid grid-5 mb-xl">
        <a href="/portal/worksets?status=in_progress" class="stat-card stat-card-clickable">
            <div class="card-icon primary">
                <i class="fas fa-spinner fa-spin"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-in-progress">{{ stats.in_progress_worksets | default(0) }}</div>
                <div class="stat-label">In Progress</div>
            </div>
        </a>

        <a href="/portal/worksets?status=ready" class="stat-card stat-card-clickable">
            <div class="card-icon info">
                <i class="fas fa-clock"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-ready">{{ stats.ready_worksets | default(0) }}</div>
                <div class="stat-label">Ready/Queued</div>
            </div>
        </a>

        <a href="/portal/worksets?status=complete" class="stat-card stat-card-clickable">
            <div class="card-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-completed">{{ stats.completed_worksets | default(0) }}</div>
                <div class="stat-label">Completed</div>
            </div>
        </a>

        <a href="/portal/worksets?status=error" class="stat-card stat-card-clickable">
            <div class="card-icon error">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-error">{{ stats.error_worksets | default(0) }}</div>
                <div class="stat-label">Errors</div>
            </div>
        </a>

        <a href="/portal/usage" class="stat-card stat-card-clickable">
            <div class="card-icon warning">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div>
                <div class="stat-value">${{ "%.2f"|format(stats.cost_this_month | default(0)) }}</div>
                <div class="stat-label">This Month</div>
                <div class="stat-subtext">
                    Compute: ${{ "%.2f"|format(stats.compute_cost_usd | default(0)) }}
                </div>
            </div>
        </a>
    </div>

    <!-- Additional Tiles Grid -->
    <div class="grid grid-3 mb-xl">
        <a href="/portal/files" class="stat-card stat-card-clickable">
            <div class="card-icon accent">
                <i class="fas fa-file-alt"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-files">{{ stats.registered_files | default(0) }}</div>
                <div class="stat-label">Registered Files</div>
                <div class="stat-subtext">{{ "%.2f"|format(stats.total_file_size_gb | default(0)) }} GB</div>
            </div>
        </a>

        <a href="/portal/usage" class="stat-card stat-card-clickable">
            <div class="card-icon info">
                <i class="fas fa-database"></i>
            </div>
            <div>
                <div class="stat-value">${{ "%.4f"|format(stats.storage_cost_usd | default(0)) }}</div>
                <div class="stat-label">Storage Cost</div>
                <div class="stat-subtext">{{ stats.workset_storage_human | default('0 B') }}</div>
            </div>
        </a>

        <a href="/portal/usage" class="stat-card stat-card-clickable">
            <div class="card-icon success">
                <i class="fas fa-chart-line"></i>
            </div>
            <div>
                <div class="stat-value" id="stat-cost-30d">${{ "%.2f"|format(stats.cost_this_month | default(0)) }}</div>
                <div class="stat-label">30-Day Costs</div>
                <div class="stat-subtext">View breakdown</div>
            </div>
        </a>
    </div>

    <!-- Storage Overview -->
    <div class="grid grid-2 mb-xl" style="gap: var(--spacing-lg);">
        <!-- File Storage Bar -->
        <div class="card" style="padding: var(--spacing-md);">
            <div class="d-flex justify-between align-center mb-sm">
                <span class="text-muted"><i class="fas fa-file-alt"></i> Registered Files</span>
                <span><strong>{{ "%.2f"|format(stats.total_file_size_gb | default(0)) }} GB</strong></span>
            </div>
            <div class="progress" style="height: 8px;">
                <div class="progress-bar success" style="width: 100%;"></div>
            </div>
            <div class="text-xs text-muted mt-sm">{{ stats.registered_files | default(0) }} files</div>
        </div>

        <!-- Workset Storage Card -->
        <div class="card" style="padding: var(--spacing-md);">
            <div class="d-flex justify-between align-center mb-sm">
                <span class="text-muted"><i class="fas fa-folder"></i> Workset Storage</span>
                <span><strong>{{ stats.workset_storage_human | default('0 B') }}</strong></span>
            </div>
            <div class="progress" style="height: 8px;">
                <div class="progress-bar primary" style="width: 100%;"></div>
            </div>
            <div class="text-xs text-muted mt-sm">{{ stats.completed_worksets | default(0) }} completed worksets</div>
        </div>
    </div>
    
    <!-- Main Content Grid -->
    <div class="grid" style="grid-template-columns: 2fr 1fr; gap: var(--spacing-xl);">
        <!-- Recent Worksets -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Worksets</h3>
                <a href="/portal/worksets" class="btn btn-outline btn-sm">View All</a>
            </div>
            
            <div class="table-container" style="box-shadow: none;">
                <table class="table" id="recent-worksets-table" data-sortable>
                    <thead>
                        <tr>
                            <th>Workset ID</th>
                            <th>Status</th>
                            <th>Samples</th>
                            <th>Created</th>
                            <th data-no-sort>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if worksets %}
                        {% for ws in worksets[:5] %}
                        <tr>
                            <td><a href="/portal/worksets/{{ ws.workset_id }}">{{ ws.workset_id[:12] }}...</a></td>
                            <td><span class="badge badge-{{ ws.state | lower | replace('_', '-') }}">{{ ws.state }}</span></td>
                            <td>{{ ws.sample_count | default(0) }}</td>
                            <td>{{ ws.created_at | default('N/A') }}</td>
                            <td>
                                <a href="/portal/worksets/{{ ws.workset_id }}" class="btn btn-outline btn-sm">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="5" class="text-center text-muted p-xl">
                                <i class="fas fa-folder-open" style="font-size: 2rem; opacity: 0.5;"></i>
                                <p class="mt-md mb-0">No worksets yet</p>
                                <a href="/portal/worksets/new" class="btn btn-primary btn-sm mt-md">Create Your First Workset</a>
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Quick Actions & Info -->
        <div>
            <!-- Quick Actions -->
            <div class="card">
                <h3 class="card-title">Quick Actions</h3>
                <div class="d-flex flex-column gap-md">
                    <a href="/portal/worksets/new" class="btn btn-primary btn-block">
                        <i class="fas fa-plus"></i> Submit New Workset
                    </a>
                    <a href="/portal/manifest-generator" class="btn btn-accent btn-block">
                        <i class="fas fa-list-alt"></i> Generate Manifest
                    </a>
                    <a href="/portal/files" class="btn btn-outline btn-block">
                        <i class="fas fa-upload"></i> Upload Files
                    </a>
                    <a href="/docs" target="_blank" class="btn btn-outline btn-block">
                        <i class="fas fa-book"></i> API Documentation
                    </a>
                    <a href="/portal/feature-requests" class="btn btn-outline btn-block">
                        <i class="fas fa-lightbulb"></i> Feature Requests
                    </a>
                </div>
            </div>
            
            <!-- Account Info -->
            <div class="card">
                <div class="card-header" style="padding: 0 0 var(--spacing-md) 0;">
                    <h3 class="card-title" style="margin: 0;">Account Details</h3>
                    <button class="btn btn-outline btn-sm" onclick="showEditModal()">
                        <i class="fas fa-edit"></i> Edit
                    </button>
                </div>
                <dl style="margin: 0;">
                    <div class="d-flex justify-between mb-md">
                        <dt class="text-muted">Display Name</dt>
                        <dd id="customer-display-name"><strong>{{ customer.customer_name | default(customer.customer_id) }}</strong></dd>
                    </div>
                    <div class="d-flex justify-between mb-md">
                        <dt class="text-muted">Customer ID</dt>
                        <dd><code>{{ customer.customer_id | default('N/A') }}</code></dd>
                    </div>
                    <div class="d-flex justify-between mb-md">
                        <dt class="text-muted">S3 Bucket</dt>
                        <dd><code>{{ customer.s3_bucket | default('N/A') }}</code></dd>
                    </div>
                    <div class="d-flex justify-between mb-md">
                        <dt class="text-muted">Max Worksets</dt>
                        <dd id="customer-max-worksets">{{ customer.max_concurrent_worksets | default(10) }}</dd>
                    </div>
                    <div class="d-flex justify-between mb-md">
                        <dt class="text-muted">Billing Account ID</dt>
                        <dd id="customer-billing-account">{{ customer.billing_account_id | default('N/A') }}</dd>
                    </div>
                    <div class="d-flex justify-between">
                        <dt class="text-muted">Cost Center (chargeback tag)</dt>
                        <dd id="customer-cost-center">{{ customer.cost_center | default('N/A') }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
    
    <!-- Activity Chart -->
    <div class="card mt-xl">
        <div class="card-header">
            <h3 class="card-title">Processing Activity (Last 30 Days)</h3>
        </div>
        <div class="chart-container">
            <canvas id="activity-chart"></canvas>
        </div>
    </div>
</div>

<!-- Edit Account Modal -->
<div class="modal" id="edit-modal">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h3>Edit Account</h3>
            <button class="modal-close" onclick="closeModal('edit-modal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Display Name</label>
                <input type="text" id="edit-display-name" class="form-control"
                       value="{{ customer.customer_name | default(customer.customer_id) }}"
                       placeholder="Enter display name">
                <p class="form-text">This name will be shown in the portal header and reports.</p>
            </div>
            <div class="form-group">
                <label class="form-label">Billing Account ID</label>
                <input type="text" id="edit-billing-account" class="form-control"
                       value="{{ customer.billing_account_id | default('') }}"
                       placeholder="Enter billing account ID">
                <p class="form-text">Used for billing and invoicing purposes.</p>
            </div>
            <div class="form-group">
                <label class="form-label">Cost Center</label>
                <input type="text" id="edit-cost-center" class="form-control"
                       value="{{ customer.cost_center | default('') }}"
                       placeholder="Enter cost center">
                <p class="form-text">Used for chargeback tagging on AWS resources.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline" onclick="closeModal('edit-modal')">Cancel</button>
            <button class="btn btn-primary" onclick="saveAccountDetails()">
                <i class="fas fa-save"></i> Save
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/charts.js?v={{ cache_bust | default('1') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize activity chart with real data from API
    const customerId = window.UrsaConfig?.customerId;
    initActivityChart('activity-chart', customerId);

    // Refresh stats periodically
    setInterval(refreshDashboardStats, 60000);
});

function showEditModal() {
    showModal('edit-modal');
    document.getElementById('edit-display-name').focus();
}

async function saveAccountDetails() {
    const newName = document.getElementById('edit-display-name').value.trim();
    const billingAccount = document.getElementById('edit-billing-account').value.trim();
    const costCenter = document.getElementById('edit-cost-center').value.trim();

    if (!newName) {
        showToast('error', 'Error', 'Please enter a display name');
        return;
    }

    const customerId = window.UrsaConfig?.customerId;
    if (!customerId) return;

    // Build update payload with only non-empty fields
    const updateData = { customer_name: newName };
    if (billingAccount) updateData.billing_account_id = billingAccount;
    if (costCenter) updateData.cost_center = costCenter;

    try {
        const response = await fetch(`/api/v1/customers/${customerId}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(updateData)
        });

        if (response.ok) {
            const data = await response.json();
            // Update display elements
            document.getElementById('customer-display-name').innerHTML = `<strong>${data.customer_name}</strong>`;
            document.getElementById('customer-billing-account').textContent = data.billing_account_id || 'N/A';
            document.getElementById('customer-cost-center').textContent = data.cost_center || 'N/A';

            // Update header if exists
            const headerName = document.querySelector('.user-name');
            if (headerName) headerName.textContent = data.customer_name;

            closeModal('edit-modal');
            showToast('success', 'Saved', 'Account details updated');
        } else {
            const error = await response.json();
            showToast('error', 'Error', error.detail || 'Failed to update account');
        }
    } catch (error) {
        console.error('Edit account error:', error);
        showToast('error', 'Error', 'Failed to update account');
    }
}
</script>
{% endblock %}