{% extends 'base.html.twig' %}

{% block title %}Profitability Analysis - Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
    --dash-primary: #6366f1;
    --dash-success: #10b981;
    --dash-warning: #f59e0b;
    --dash-danger: #ef4444;
    --dash-bg: #f1f5f9;
    --dash-card: #ffffff;
    --dash-text: #1e293b;
    --dash-text-muted: #64748b;
    --dash-border: #e2e8f0;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dash-bg);
}

.profit-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.profit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.profit-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dash-text);
}

.card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--dash-text);
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--dash-border);
}

th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dash-text-muted);
}

td {
    font-size: 0.875rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dash-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--dash-text-muted);
    margin-top: 4px;
}

.profit-positive {
    color: var(--dash-success);
}

.profit-negative {
    color: var(--dash-danger);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.tier-card {
    background: var(--dash-card);
    border-radius: 12px;
    padding: 24px;
    border: 2px solid var(--dash-border);
}

.tier-card.recommended {
    border-color: var(--dash-primary);
}

.tier-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.tier-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dash-primary);
}

.tier-price span {
    font-size: 0.875rem;
    color: var(--dash-text-muted);
    font-weight: 400;
}

.tier-features {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dash-border);
}

.tier-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-primary);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.chart-container {
    height: 300px;
}
</style>
{% endblock %}

{% block body %}
<div class="profit-container">
    <div class="profit-header">
        <div>
            <a href="{{ path('admin_playground_dashboard') }}" class="back-link">
                ← Back to Dashboard
            </a>
            <h1 class="profit-title">Profitability Analysis</h1>
        </div>
    </div>

    <!-- Summary Stats -->
    <div class="stat-grid">
        {% set total_cost = 0 %}
        {% set total_requests = 0 %}
        {% set total_users = 0 %}
        {% for month in monthly_data %}
            {% set total_cost = total_cost + month.azure_cost %}
            {% set total_requests = total_requests + month.requests %}
            {% set total_users = total_users + month.active_users %}
        {% endfor %}
        
        <div class="stat-card">
            <div class="stat-value">${{ total_cost|number_format(2) }}</div>
            <div class="stat-label">Total Azure Cost (6 months)</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ total_requests|number_format }}</div>
            <div class="stat-label">Total Requests</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">${{ total_requests > 0 ? (total_cost / total_requests * 1000)|number_format(4) : 0 }}</div>
            <div class="stat-label">Cost per 1K Requests</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">${{ total_users > 0 ? (total_cost / total_users)|number_format(4) : 0 }}</div>
            <div class="stat-label">Avg Cost per User</div>
        </div>
    </div>

    <!-- Monthly Data Table -->
    <div class="card">
        <h2 class="card-title">Monthly Cost Analysis</h2>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Requests</th>
                        <th>Tokens</th>
                        <th>Azure Cost</th>
                        <th>Active Users</th>
                        <th>Avg Cost/User</th>
                    </tr>
                </thead>
                <tbody>
                    {% for month in monthly_data %}
                    <tr>
                        <td>{{ month.month }}</td>
                        <td>{{ month.requests|number_format }}</td>
                        <td>{{ month.tokens|number_format }}</td>
                        <td>${{ month.azure_cost|number_format(2) }}</td>
                        <td>{{ month.active_users }}</td>
                        <td>${{ month.avg_cost_per_user|number_format(4) }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px;">
                            No usage data available yet
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Cost Chart -->
    <div class="card">
        <h2 class="card-title">Cost Trend</h2>
        <div class="chart-container">
            <canvas id="costChart"></canvas>
        </div>
    </div>

    <!-- Pricing Tiers -->
    <div class="card">
        <h2 class="card-title">Subscription Tiers</h2>
        <div class="tier-grid">
            {% for tier in tier_configs %}
            <div class="tier-card {% if tier.tier_name == 'researcher' %}recommended{% endif %}">
                <div class="tier-name">{{ tier.display_name }}</div>
                <div class="tier-price">
                    ${{ tier.price_monthly_usd|number_format(0) }}
                    <span>/month</span>
                </div>
                <div class="tier-features">
                    <div class="tier-feature">
                        ✓ {{ tier.credits_monthly|number_format }} credits/month
                    </div>
                    <div class="tier-feature">
                        ✓ {{ tier.max_requests_daily }} requests/day
                    </div>
                </div>
            </div>
            {% else %}
            <!-- Default tiers if not configured -->
            <div class="tier-card">
                <div class="tier-name">Starter</div>
                <div class="tier-price">$9 <span>/month</span></div>
                <div class="tier-features">
                    <div class="tier-feature">✓ 500 credits/month</div>
                    <div class="tier-feature">✓ 50 requests/day</div>
                </div>
            </div>
            <div class="tier-card recommended">
                <div class="tier-name">Researcher</div>
                <div class="tier-price">$19 <span>/month</span></div>
                <div class="tier-features">
                    <div class="tier-feature">✓ 1,500 credits/month</div>
                    <div class="tier-feature">✓ 150 requests/day</div>
                </div>
            </div>
            <div class="tier-card">
                <div class="tier-name">Professional</div>
                <div class="tier-price">$39 <span>/month</span></div>
                <div class="tier-features">
                    <div class="tier-feature">✓ 4,000 credits/month</div>
                    <div class="tier-feature">✓ 500 requests/day</div>
                </div>
            </div>
            <div class="tier-card">
                <div class="tier-name">Institution</div>
                <div class="tier-price">$99 <span>/month</span></div>
                <div class="tier-features">
                    <div class="tier-feature">✓ 15,000 credits/month</div>
                    <div class="tier-feature">✓ 2,000 requests/day</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- API Pricing Reference -->
    <div class="card">
        <h2 class="card-title">Azure OpenAI Pricing Reference</h2>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Model</th>
                        <th>Input (per 1K tokens)</th>
                        <th>Output (per 1K tokens)</th>
                        <th>Use Case</th>
                    </tr>
                </thead>
                <tbody>
                    {% for model, prices in pricing.models %}
                    <tr>
                        <td><strong>{{ model }}</strong></td>
                        <td>${{ prices.input|number_format(5) }}</td>
                        <td>${{ prices.output|number_format(5) }}</td>
                        <td>
                            {% if model == 'gpt-4o-mini' %}
                                Light operations (keywords, citations)
                            {% elseif model == 'gpt-4o' %}
                                Standard operations (chat, generate)
                            {% elseif model == 'gpt-4.5-preview' %}
                                Complex operations (research, analysis)
                            {% else %}
                                General purpose
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Profitability Calculator -->
    <div class="card">
        <h2 class="card-title">Profitability Calculator</h2>
        <p style="color: var(--dash-text-muted); margin-bottom: 16px;">
            Based on current data, here's the estimated profitability per tier:
        </p>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Tier</th>
                        <th>Price</th>
                        <th>Est. Avg Cost/User</th>
                        <th>Est. Profit/User</th>
                        <th>Margin</th>
                    </tr>
                </thead>
                <tbody>
                    {% set avg_cost = total_users > 0 ? (total_cost / total_users) : 2.5 %}
                    <tr>
                        <td>Starter</td>
                        <td>$9.00</td>
                        <td>${{ (avg_cost * 0.5)|number_format(2) }}</td>
                        <td class="profit-positive">${{ (9 - avg_cost * 0.5)|number_format(2) }}</td>
                        <td>{{ ((9 - avg_cost * 0.5) / 9 * 100)|number_format(1) }}%</td>
                    </tr>
                    <tr>
                        <td>Researcher</td>
                        <td>$19.00</td>
                        <td>${{ (avg_cost * 1.5)|number_format(2) }}</td>
                        <td class="profit-positive">${{ (19 - avg_cost * 1.5)|number_format(2) }}</td>
                        <td>{{ ((19 - avg_cost * 1.5) / 19 * 100)|number_format(1) }}%</td>
                    </tr>
                    <tr>
                        <td>Professional</td>
                        <td>$39.00</td>
                        <td>${{ (avg_cost * 4)|number_format(2) }}</td>
                        <td class="profit-positive">${{ (39 - avg_cost * 4)|number_format(2) }}</td>
                        <td>{{ ((39 - avg_cost * 4) / 39 * 100)|number_format(1) }}%</td>
                    </tr>
                    <tr>
                        <td>Institution</td>
                        <td>$99.00</td>
                        <td>${{ (avg_cost * 10)|number_format(2) }}</td>
                        <td class="profit-positive">${{ (99 - avg_cost * 10)|number_format(2) }}</td>
                        <td>{{ ((99 - avg_cost * 10) / 99 * 100)|number_format(1) }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const monthlyData = {{ monthly_data|json_encode|raw }};
    
    if (monthlyData.length > 0) {
        const ctx = document.getElementById('costChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: monthlyData.map(d => d.month),
                datasets: [{
                    label: 'Azure Cost ($)',
                    data: monthlyData.map(d => d.azure_cost),
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    fill: true,
                    tension: 0.3
                }, {
                    label: 'Active Users',
                    data: monthlyData.map(d => d.active_users),
                    borderColor: '#10b981',
                    backgroundColor: 'transparent',
                    yAxisID: 'y1',
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Cost ($)'
                        }
                    },
                    y1: {
                        position: 'right',
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Users'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    }
});
</script>
{% endblock %}