{% extends "dashboard/layout.html" %}

{% block title %}ThreeFold Dashboard - Application Provider{% endblock %}

{% block dashboard_content %}
<div class="my-4">
    <h1>Application Provider Dashboard</h1>
    <p class="lead">Develop, deploy, and manage applications for the ThreeFold ecosystem</p>

    <!-- Status Summary -->
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="stats-card info">
                <h5 class="card-title">Published Apps</h5>
                <div class="d-flex justify-content-between align-items-end">
                    <h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.published_apps is defined %}{{ application_provider_data.published_apps }}{% else %}0{% endif %}</h2>
                    <small class="text-muted">Active</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card primary">
                <h5 class="card-title">Active Deployments</h5>
                <div class="d-flex justify-content-between align-items-end">
                    <h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.active_deployments is defined %}{{ application_provider_data.active_deployments }}{% else %}0{% endif %}</h2>
                    <small class="text-muted">Instances</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card warning">
                <h5 class="card-title">Customer Base</h5>
                <div class="d-flex justify-content-between align-items-end">
                    <h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.total_deployments is defined %}{{ application_provider_data.total_deployments }}{% else %}0{% endif %}</h2>
                    <small class="text-muted">Total Deployments</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card success">
                <h5 class="card-title">Monthly Earnings</h5>
                <div class="d-flex justify-content-between align-items-end">
                    <h2 class="mb-0">{% if application_provider_data is defined and application_provider_data.monthly_revenue_usd is defined %}{{ application_provider_data.monthly_revenue_usd }}{% else %}0{% endif %}</h2>
                    <small class="text-muted">$/month</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Register New App Button -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-end">
                <a href="#" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#registerAppModal">
                    <i class="bi bi-plus-circle me-2"></i> Register New Application
                </a>
            </div>
        </div>
    </div>

    <!-- Published Applications Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>My Published Applications</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Application</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Version</th>
                                <th>Active Deployments</th>
                                <th>Average Rating</th>
                                <th>Monthly Revenue</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="apps-list-tbody">
                            <!-- Apps will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Application Deployments Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Active Deployments</h3>
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    Each application can have multiple deployments across different users and environments.
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Deployment ID</th>
                                <th>Application</th>
                                <th>Customer</th>
                                <th>Region</th>
                                <th>Instances</th>
                                <th>Deployed On</th>
                                <th>Status</th>
                                <th>Health</th>
                                <th>Resource Usage</th>
                                <th>Revenue</th>
                                <th>Monitoring</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="active-deployments-tbody">
                            <!-- Active deployments will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center mt-3">
                    <nav aria-label="Deployments pagination">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>



    <!-- Development Resources Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Developer Resources</h3>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5><i class="bi bi-book me-2 text-primary"></i> Documentation</h5>
                                <p>Access guides, tutorials, and API references for developing ThreeFold applications</p>
                                <a href="https://manual.threefold.io" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-box-arrow-up-right me-1"></i>Browse Documentation
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5><i class="bi bi-people me-2 text-info"></i> Developer Community</h5>
                                <p>Connect with other ThreeFold application developers, share insights, and get help</p>
                                <a href="https://t.me/threefoldtesting" target="_blank" class="btn btn-sm btn-outline-info">
                                    <i class="bi bi-box-arrow-up-right me-1"></i>Join Community
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenue Monitoring Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Revenue Monitoring</h3>
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5>Monthly Revenue Trend</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="revenueChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5>Revenue by Application</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="revenueDistributionChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Additional Charts Row -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>Deployment Trend</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="deploymentTrendChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>App Performance</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="appPerformanceChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
{{ super() }}
<!-- Hydration JSON for initial app provider dashboard data (safe, non-executable) -->
<script id="ap-dashboard-hydration" type="application/json">
{% if application_provider_data is defined %}
{{ application_provider_data | json_encode() }}
{% else %}
null
{% endif %}
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="/static/js/dashboard-application-provider.js"></script>
<style>
    /* Ensure charts have consistent sizes */
    .card-body {
        min-height: 340px;
    }
</style>
{% endblock %}

<!-- Register Application Modal -->
<div class="modal fade" id="registerAppModal" tabindex="-1" aria-labelledby="registerAppModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="registerAppModalLabel">Register New Application</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="appName" class="form-label">Application Name</label>
                        <input type="text" class="form-control" id="appName" placeholder="Enter application name">
                    </div>
                    <div class="mb-3">
                        <label for="appDesc" class="form-label">Description</label>
                        <textarea class="form-control" id="appDesc" rows="3" placeholder="Describe your application"></textarea>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="appCategory" class="form-label">Category</label>
                            <select class="form-select" id="appCategory">
                                <option selected>Select category</option>
                                <option value="productivity">Productivity</option>
                                <option value="communication">Communication</option>
                                <option value="business">Business</option>
                                <option value="storage">Storage & Backup</option>
                                <option value="development">Development Tools</option>
                                <option value="analytics">Analytics & BI</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="appType" class="form-label">Deployment Type</label>
                            <select class="form-select" id="appType">
                                <option selected>Select type</option>
                                <option value="container">Container-based</option>
                                <option value="vm">Virtual Machine</option>
                                <option value="kubernetes">Kubernetes Workload</option>
                                <option value="custom">Custom Deployment</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="appRepo" class="form-label">Source Repository URL</label>
                        <input type="url" class="form-control" id="appRepo" placeholder="https://github.com/yourusername/yourrepo">
                    </div>
                    <div class="mb-3">
                        <label for="resourceRequirements" class="form-label">Minimum Resource Requirements</label>
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <input type="number" class="form-control" id="minCPU" placeholder="vCPU Cores">
                            </div>
                            <div class="col-md-4 mb-2">
                                <input type="number" class="form-control" id="minRAM" placeholder="RAM (GB)">
                            </div>
                            <div class="col-md-4 mb-2">
                                <input type="number" class="form-control" id="minStorage" placeholder="Storage (GB)">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="appPrice" class="form-label">Pricing Model</label>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <select class="form-select" id="pricingType">
                                    <option selected>Select pricing model</option>
                                    <option value="subscription">Subscription (per user/month)</option>
                                    <option value="usage">Usage-based</option>
                                    <option value="fixed">Fixed price (per instance)</option>
                                    <option value="free">Free</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="input-group">
                                    <input type="number" class="form-control" id="priceAmount" placeholder="Amount">
                                    <span class="input-group-text">$</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="selfHealing">
                        <label class="form-check-label" for="selfHealing">Enable self-healing capabilities</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-info" id="registerAppBtn">Register Application</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}