{% extends 'base.html' %}
{% from "macros.html" import render_selectable_table %}

{% block title %}License Periods - {{ license.id }}{% endblock %}

{% block content_title %}License Periods{% endblock %}
{% block content_description %}License: {{ license.id }} | Tier: {{ license.license_tier.name }} | Periods: {{ periods|length }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- License Summary Card -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <strong>License ID:</strong> {{ license.id }}
                </div>
                <div class="col-md-3">
                    <strong>Start Date:</strong> {{ license.start_date }}
                </div>
                <div class="col-md-3">
                    <strong>Total Periods:</strong> {{ license.nr_of_periods }}
                </div>
                <div class="col-md-3">
                    <strong>Currency:</strong> {{ license.currency }}
                </div>
            </div>
        </div>
    </div>

    <!-- Periods Table -->
    <div class="card">
        <div class="card-header">
            <h5>License Periods</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Period</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Status</th>
                            <th>Usage</th>
                            <th>Payments</th>
                            <th>Invoices</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for period in periods %}
                        <tr class="period-row" data-period-id="{{ period.id }}">
                            <td>{{ period.period_number }}</td>
                            <td>{{ period.period_start }}</td>
                            <td>{{ period.period_end }}</td>
                            <td>
                                <span class="badge badge-{{ period.status.name|status_color }}">
                                    {{ period.status.name }}
                                </span>
                            </td>
                            <td>
                                {% set usage = usage_by_period.get(period.id) %}
                                {% if usage %}
                                    <small>
                                        S: {{ "%.1f"|format(usage.storage_mb_used or 0) }}MB<br>
                                        E: {{ "%.1f"|format(usage.embedding_mb_used or 0) }}MB<br>
                                        I: {{ "{:,}"|format(usage.interaction_total_tokens_used or 0) }}
                                    </small>
                                {% else %}
                                    <span class="text-muted">No usage</span>
                                {% endif %}
                            </td>
                            <td>
                                {% set payments = payments_by_period.get(period.id, []) %}
                                <small>{{ payments|length }} payment(s)</small>
                            </td>
                            <td>
                                {% set invoices = invoices_by_period.get(period.id, []) %}
                                <small>{{ invoices|length }} invoice(s)</small>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-info" onclick="showPeriodDetails({{ period.id }})">
                                    Details
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Period Details Modal -->
<div class="modal fade" id="periodDetailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="periodModalTitle">Period Details</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" id="periodTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="status-tab" data-toggle="tab" href="#status" role="tab">
                            Status & Timeline
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="usage-tab" data-toggle="tab" href="#usage" role="tab">
                            Usage
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="financial-tab" data-toggle="tab" href="#financial" role="tab">
                            Financial
                        </a>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content mt-3">
                    <!-- Status Tab -->
                    <div class="tab-pane fade show active" id="status" role="tabpanel">
                        <div id="statusContent"></div>
                    </div>

                    <!-- Usage Tab -->
                    <div class="tab-pane fade" id="usage" role="tabpanel">
                        <div id="usageContent"></div>
                    </div>

                    <!-- Financial Tab -->
                    <div class="tab-pane fade" id="financial" role="tabpanel">
                        <div id="financialContent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Period data for JavaScript access
const periodsData = {
    {% for period in periods %}
    {{ period.id }}: {
        period_number: {{ period.period_number }},
        period_start: "{{ period.period_start }}",
        period_end: "{{ period.period_end }}",
        status: "{{ period.status.name }}",
        upcoming_at: "{{ period.upcoming_at or '' }}",
        pending_at: "{{ period.pending_at or '' }}",
        active_at: "{{ period.active_at or '' }}",
        completed_at: "{{ period.completed_at or '' }}",
        invoiced_at: "{{ period.invoiced_at or '' }}",
        closed_at: "{{ period.closed_at or '' }}",
        usage: {{ usage_by_period.get(period.id).to_dict() if usage_by_period.get(period.id) else 'null' }},
        payments: [
            {% for payment in payments_by_period.get(period.id, []) %}
            {
                id: {{ payment.id }},
                type: "{{ payment.payment_type.name }}",
                amount: {{ payment.amount }},
                currency: "{{ payment.currency }}",
                status: "{{ payment.status.name }}",
                paid_at: "{{ payment.paid_at or '' }}"
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        ],
        invoices: [
            {% for invoice in invoices_by_period.get(period.id, []) %}
            {
                id: {{ invoice.id }},
                type: "{{ invoice.invoice_type.name }}",
                number: "{{ invoice.invoice_number }}",
                amount: {{ invoice.amount }},
                currency: "{{ invoice.currency }}",
                status: "{{ invoice.status.name }}",
                due_date: "{{ invoice.due_date }}"
            }{% if not loop.last %},{% endif %}
            {% endfor %}
        ]
    }{% if not loop.last %},{% endif %}
    {% endfor %}
};

function showPeriodDetails(periodId) {
    const period = periodsData[periodId];
    if (!period) return;

    // Update modal title
    document.getElementById('periodModalTitle').textContent = `Period ${period.period_number} Details`;

    // Update status content
    updateStatusContent(period);
    updateUsageContent(period);
    updateFinancialContent(period);

    // Show modal
    $('#periodDetailsModal').modal('show');
}

function updateStatusContent(period) {
    const statusContent = document.getElementById('statusContent');
    const statusDates = [
        { label: 'Upcoming', date: period.upcoming_at },
        { label: 'Pending', date: period.pending_at },
        { label: 'Active', date: period.active_at },
        { label: 'Completed', date: period.completed_at },
        { label: 'Invoiced', date: period.invoiced_at },
        { label: 'Closed', date: period.closed_at }
    ];

    let html = `
        <div class="row">
            <div class="col-md-6">
                <h6>Current Status</h6>
                <span class="badge badge-${getStatusColor(period.status)} badge-lg">${period.status}</span>
            </div>
            <div class="col-md-6">
                <h6>Period Dates</h6>
                <p><strong>Start:</strong> ${period.period_start}<br>
                <strong>End:</strong> ${period.period_end}</p>
            </div>
        </div>
        <hr>
        <h6>Status Timeline</h6>
        <div class="timeline">
    `;

    statusDates.forEach(item => {
        if (item.date) {
            html += `
                <div class="timeline-item">
                    <strong>${item.label}:</strong> ${item.date}
                </div>
            `;
        }
    });

    html += '</div>';
    statusContent.innerHTML = html;
}

function updateUsageContent(period) {
    const usageContent = document.getElementById('usageContent');
    
    if (!period.usage) {
        usageContent.innerHTML = '<p class="text-muted">No usage data available</p>';
        return;
    }

    const usage = period.usage;
    usageContent.innerHTML = `
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h5>Storage</h5>
                        <h3>${(usage.storage_mb_used || 0).toFixed(1)} MB</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h5>Embedding</h5>
                        <h3>${(usage.embedding_mb_used || 0).toFixed(1)} MB</h3>
                        <small>Tokens: ${(usage.embedding_total_tokens_used || 0).toLocaleString()}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h5>Interaction</h5>
                        <h3>${(usage.interaction_total_tokens_used || 0).toLocaleString()}</h3>
                        <small>Prompt: ${(usage.interaction_prompt_tokens_used || 0).toLocaleString()}<br>
                        Completion: ${(usage.interaction_completion_tokens_used || 0).toLocaleString()}</small>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function updateFinancialContent(period) {
    const financialContent = document.getElementById('financialContent');
    
    let html = '<div class="row">';
    
    // Payments section
    html += '<div class="col-md-6"><h6>Payments</h6>';
    if (period.payments.length === 0) {
        html += '<p class="text-muted">No payments</p>';
    } else {
        html += '<div class="table-responsive"><table class="table table-sm">';
        html += '<thead><tr><th>Type</th><th>Amount</th><th>Status</th><th>Date</th></tr></thead><tbody>';
        period.payments.forEach(payment => {
            html += `
                <tr>
                    <td>${payment.type}</td>
                    <td>${payment.amount} ${payment.currency}</td>
                    <td><span class="badge badge-${getPaymentStatusColor(payment.status)}">${payment.status}</span></td>
                    <td>${payment.paid_at || '-'}</td>
                </tr>
            `;
        });
        html += '</tbody></table></div>';
    }
    html += '</div>';
    
    // Invoices section
    html += '<div class="col-md-6"><h6>Invoices</h6>';
    if (period.invoices.length === 0) {
        html += '<p class="text-muted">No invoices</p>';
    } else {
        html += '<div class="table-responsive"><table class="table table-sm">';
        html += '<thead><tr><th>Type</th><th>Number</th><th>Amount</th><th>Status</th><th>Due</th></tr></thead><tbody>';
        period.invoices.forEach(invoice => {
            html += `
                <tr>
                    <td>${invoice.type}</td>
                    <td>${invoice.number}</td>
                    <td>${invoice.amount} ${invoice.currency}</td>
                    <td><span class="badge badge-${getInvoiceStatusColor(invoice.status)}">${invoice.status}</span></td>
                    <td>${invoice.due_date}</td>
                </tr>
            `;
        });
        html += '</tbody></table></div>';
    }
    html += '</div></div>';
    
    financialContent.innerHTML = html;
}

function getStatusColor(status) {
    const colors = {
        'UPCOMING': 'secondary',
        'PENDING': 'warning',
        'ACTIVE': 'success',
        'COMPLETED': 'info',
        'INVOICED': 'primary',
        'CLOSED': 'dark'
    };
    return colors[status] || 'secondary';
}

function getPaymentStatusColor(status) {
    const colors = {
        'PENDING': 'warning',
        'PAID': 'success',
        'FAILED': 'danger',
        'CANCELLED': 'secondary'
    };
    return colors[status] || 'secondary';
}

function getInvoiceStatusColor(status) {
    const colors = {
        'DRAFT': 'secondary',
        'SENT': 'info',
        'PAID': 'success',
        'OVERDUE': 'danger',
        'CANCELLED': 'secondary'
    };
    return colors[status] || 'secondary';
}
</script>

<style>
.timeline-item {
    padding: 5px 0;
    border-left: 2px solid #e9ecef;
    padding-left: 15px;
    margin-left: 10px;
}

.period-row:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

.badge-lg {
    font-size: 0.9em;
    padding: 0.5em 0.75em;
}
</style>
{% endblock %}