{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{% trans "Production Simulations" %}{% endblock page_title %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/page_headers.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/simulations.css' %}">
{% endblock extra_css %}

{% block content %}
<div class="container my-4 simulations-page" data-market-groups='{{ market_group_map|escapejs }}'>
    <div class="dev-alert alert alert-warning d-flex align-items-center gap-3 mb-4" role="alert">
        <i class="fas fa-exclamation-triangle fa-lg"></i>
        <div>
            <h2 class="h6 fw-semibold mb-1 text-uppercase">{% trans "Active development" %}</h2>
            <p class="mb-0 small">{% trans "This simulations dashboard is under active development. Please don't rely on the displayed data for decision making yet." %}</p>
        </div>
    </div>
    <div class="page-header simulations-hero d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-4">
        <div class="d-flex align-items-center gap-3">
            <div class="header-icon">
                <i class="fas fa-flask"></i>
            </div>
            <div>
                <h1 class="h2 mb-1">
                    {% trans "Production Simulations" %}
                </h1>
                <p class="description mb-0">{% trans "Review, compare, and launch your saved manufacturing scenarios." %}</p>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{% url 'indy_hub:all_bp_list' %}" class="btn btn-light btn-action">
                <i class="fas fa-plus me-2"></i>{% trans "New Simulation" %}
            </a>
            <a href="{% url 'indy_hub:index' %}" class="btn btn-outline-light btn-action">
                <i class="fas fa-home me-2"></i>{% trans "Back to Hub" %}
            </a>
        </div>
        <i class="fas fa-chart-line header-bg"></i>
    </div>

    {% if total_simulations > 0 %}
    <div class="row g-3 mb-4 stats-row">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card shadow-sm">
                <div class="stat-icon bg-primary">
                    <i class="fas fa-layer-group"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Total Simulations" %}</span>
                    <span class="stat-value">{{ total_simulations }}</span>
                    <span class="stat-subtext">{% blocktrans %}Active blueprints ready to run{% endblocktrans %}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card shadow-sm">
                <div class="stat-icon bg-success">
                    <i class="fas fa-sync"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Total Runs" %}</span>
                    <span class="stat-value">{{ stats.total_runs|default:0|intcomma }}</span>
                    <span class="stat-subtext">{% trans "All scheduled cycles" %}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card shadow-sm">
                <div class="stat-icon bg-warning">
                    <i class="fas fa-coins"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Projected Profit" %}</span>
                    <span class="stat-value">{{ stats.total_profit|floatformat:0|intcomma }} ISK</span>
                    <span class="stat-subtext">{% trans "Cumulative expected gains" %}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="stat-card shadow-sm">
                <div class="stat-icon bg-info">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Average Profit" %}</span>
                    <span class="stat-value">{{ stats.average_profit|floatformat:0|intcomma }} ISK</span>
                    <span class="stat-subtext">
                        {% if stats.latest_update %}
                            {% trans "Last update" %} · {{ stats.latest_update|timesince }} {% trans "ago" %}
                        {% else %}
                            {% trans "No activity recorded yet" %}
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="stat-card shadow-sm alt">
                <div class="stat-icon bg-indigo">
                    <i class="fas fa-shopping-cart"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Items to Buy" %}</span>
                    <span class="stat-value">{{ stats.total_buy_items|default:0|intcomma }}</span>
                    <span class="stat-subtext">{% trans "Across every simulation" %}</span>
                </div>
                <div class="stat-icon bg-emerald">
                    <i class="fas fa-industry"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Items to Produce" %}</span>
                    <span class="stat-value">{{ stats.total_prod_items|default:0|intcomma }}</span>
                    <span class="stat-subtext">{% trans "Crafting queue volume" %}</span>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="stat-card shadow-sm alt">
                <div class="stat-icon bg-orange">
                    <i class="fas fa-hand-holding-usd"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Estimated Costs" %}</span>
                    <span class="stat-value">{{ stats.total_cost|floatformat:0|intcomma }} ISK</span>
                    <span class="stat-subtext">{% trans "Material & reaction purchase" %}</span>
                </div>
                <div class="stat-icon bg-teal">
                    <i class="fas fa-piggy-bank"></i>
                </div>
                <div class="stat-content">
                    <span class="stat-label">{% trans "Estimated Revenue" %}</span>
                    <span class="stat-value">{{ stats.total_revenue|floatformat:0|intcomma }} ISK</span>
                    <span class="stat-subtext">{% trans "Target selling value" %}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="simulation-grid">
        {% for simulation in simulations %}
        <article class="simulation-card shadow-sm">
            <div class="simulation-card-body">
                <div class="simulation-header">
                    <div class="simulation-icon">
                    {% if simulation.product_icon_url %}
                    <img src="{{ simulation.product_icon_url }}" alt="{{ simulation.blueprint_name }}" onerror="if(!this.dataset.fallback){this.dataset.fallback='bp';this.src='{{ simulation.blueprint_icon_url }}';}else{this.onerror=null;this.src='https://images.evetech.net/types/{{ simulation.blueprint_type_id }}/bp?size=64';}">
                    {% elif simulation.blueprint_icon_url %}
                    <img src="{{ simulation.blueprint_icon_url }}" alt="{{ simulation.blueprint_name }}">
                        {% else %}
                        <span class="fallback"><i class="fas fa-industry"></i></span>
                        {% endif %}
                    </div>
                    <div class="simulation-title">
                        <h2 class="h5 mb-1">{{ simulation.display_name }}</h2>
                        <p class="mb-0 text-muted">
                            {% if simulation.blueprint_name %}
                                {{ simulation.blueprint_name }}
                            {% else %}
                                {% trans "Blueprint #" %}{{ simulation.blueprint_type_id }}
                            {% endif %}
                        </p>
                    </div>
                    <div class="simulation-meta">
                        <span class="meta-badge runs" title="{% trans 'Runs' %}">
                            <i class="fas fa-sync-alt"></i> {{ simulation.runs|intcomma }}
                        </span>
                        <span class="meta-badge items" title="{% trans 'Total Items' %}">
                            <i class="fas fa-cubes"></i> {{ simulation.total_items|intcomma }}
                        </span>
                    </div>
                </div>

                <div class="metric-grid">
                    <div class="metric">
                        <span class="metric-label text-danger">{% trans "Buy List" %}</span>
                        <span class="metric-value">{{ simulation.total_buy_items|intcomma }}</span>
                        <small class="metric-subtext">{% trans "Items to acquire" %}</small>
                    </div>
                    <div class="metric">
                        <span class="metric-label text-success">{% trans "Production" %}</span>
                        <span class="metric-value">{{ simulation.total_prod_items|intcomma }}</span>
                        <small class="metric-subtext">{% trans "Items to craft" %}</small>
                    </div>
                    <div class="metric">
                        <span class="metric-label text-warning">{% trans "Estimated Cost" %}</span>
                        <span class="metric-value">{{ simulation.estimated_cost|floatformat:0|intcomma }}</span>
                        <small class="metric-subtext">ISK</small>
                    </div>
                    <div class="metric">
                        <span class="metric-label text-info">{% trans "Expected Profit" %}</span>
                        <span class="metric-value">{{ simulation.estimated_profit|floatformat:0|intcomma }}</span>
                        <small class="metric-subtext">ISK</small>
                    </div>
                </div>
            </div>
            <div class="simulation-footer">
                <div class="timestamp">
                    <i class="fas fa-clock me-1"></i>
                    {% trans "Updated" %} {{ simulation.updated_at|timesince }} {% trans "ago" %}
                </div>
                <div class="btn-group" role="group">
                    <a href="{% url 'indy_hub:craft_bp' simulation.blueprint_type_id %}?runs={{ simulation.runs }}" class="btn btn-outline-primary btn-sm" title="{% trans 'Open Simulation' %}">
                        <i class="fas fa-play"></i>
                    </a>
                    <a href="{% url 'indy_hub:edit_simulation_name' simulation.id %}" class="btn btn-outline-secondary btn-sm" title="{% trans 'Edit Name' %}">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="{% url 'indy_hub:delete_production_simulation' simulation.id %}" class="btn btn-outline-danger btn-sm" title="{% trans 'Delete' %}">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </div>
        </article>
        {% endfor %}
    </div>

    {% if simulations.has_other_pages %}
    <nav aria-label="{% trans 'Simulations pagination' %}" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if simulations.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ simulations.previous_page_number }}">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% endif %}

            {% for num in simulations.paginator.page_range %}
            {% if simulations.number == num %}
            <li class="page-item active">
                <span class="page-link">{{ num }}</span>
            </li>
            {% elif num > simulations.number|add:'-3' and num < simulations.number|add:'3' %}
            <li class="page-item">
                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
            </li>
            {% endif %}
            {% endfor %}

            {% if simulations.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ simulations.next_page_number }}">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    {% else %}
    <div class="empty-state shadow-sm">
        <div class="empty-icon">
            <i class="fas fa-flask"></i>
        </div>
        <h4 class="mb-2">{% trans "No Simulations Yet" %}</h4>
        <p class="mb-4">{% trans "Explore your blueprints and save a scenario to keep track of your production planning." %}</p>
        <a href="{% url 'indy_hub:all_bp_list' %}" class="btn btn-primary btn-lg">
            <i class="fas fa-plus me-2"></i>{% trans "Create Your First Simulation" %}
        </a>
    </div>
    {% endif %}
</div>
{% endblock content %}