{% extends "indy_hub/base.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/blueprints.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/simulations.css' %}">
{% endblock extra_css %}

{% block content %}
<div class="container-fluid py-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>
            <h3 class="h6 fw-semibold mb-1 text-uppercase">{% trans "Active development" %}</h3>
            <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 mb-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <h2 class="h3 mb-1">
                    <i class="fas fa-flask me-2"></i>
                    {% trans "Production Simulations" %}
                </h2>
                <p class="description mb-0">{% trans "Stay ahead of your industrial queue with curated simulation dashboards." %}</p>
            </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>
        </div>
        <i class="fas fa-chart-line header-bg"></i>
    </div>

    <div class="simulations-callout alert alert-info shadow-sm d-flex align-items-center gap-3 mb-4" role="alert">
        <i class="fas fa-lightbulb-on fa-lg"></i>
        <div>
            <h3 class="h6 fw-semibold mb-1 text-uppercase">{% trans "Production insights" %}</h3>
            <p class="mb-0 small">{% trans "Simulations pull live blueprint metrics. Refresh the craft tool to update inventory, then return here to review profitability." %}</p>
        </div>
    </div>

    {% if total_simulations > 0 %}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="summary-card h-100">
                <div class="summary-card__icon bg-primary-subtle text-primary">
                    <i class="fas fa-layer-group"></i>
                </div>
                <div>
                    <p class="summary-card__label mb-1">{% trans "Total simulations" %}</p>
                    <h5 class="summary-card__value mb-0">{{ total_simulations|intcomma }}</h5>
                    <small class="text-muted">{% trans "Saved scenarios ready to launch" %}</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="summary-card h-100">
                <div class="summary-card__icon bg-success-subtle text-success">
                    <i class="fas fa-sync"></i>
                </div>
                <div>
                    <p class="summary-card__label mb-1">{% trans "Total runs" %}</p>
                    <h5 class="summary-card__value mb-0">{{ stats.total_runs|default:0|intcomma }}</h5>
                    <small class="text-muted">{% trans "Across every simulation" %}</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="summary-card h-100">
                <div class="summary-card__icon bg-warning-subtle text-warning">
                    <i class="fas fa-coins"></i>
                </div>
                <div>
                    <p class="summary-card__label mb-1">{% trans "Estimated revenue" %}</p>
                    <h5 class="summary-card__value mb-0">{{ stats.total_revenue|floatformat:0|intcomma }} ISK</h5>
                    <small class="text-muted">{% trans "Projected sales value" %}</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="summary-card h-100">
                <div class="summary-card__icon bg-info-subtle text-info">
                    <i class="fas fa-clock"></i>
                </div>
                <div>
                    <p class="summary-card__label mb-1">{% trans "Last refreshed" %}</p>
                    <h5 class="summary-card__value mb-0">
                        {% if stats.latest_update %}
                            {{ stats.latest_update|timesince }} {% trans "ago" %}
                        {% else %}
                            {% trans "Never" %}
                        {% endif %}
                    </h5>
                    <small class="text-muted">{% trans "Update simulations from the craft tool" %}</small>
                </div>
            </div>
        </div>
    </div>

    <div class="simulations-toolbar d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3 mb-4">
        <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="toolbar-label text-muted text-uppercase fw-semibold">{% trans "Quick glance" %}</span>
            <span class="status-badge">
                <i class="fas fa-shopping-cart me-1"></i>{{ stats.total_buy_items|default:0|intcomma }} {% trans "to buy" %}
            </span>
            <span class="status-badge">
                <i class="fas fa-industry me-1"></i>{{ stats.total_prod_items|default:0|intcomma }} {% trans "to produce" %}
            </span>
            <span class="status-badge">
                <i class="fas fa-piggy-bank me-1"></i>{{ stats.total_profit|floatformat:0|intcomma }} ISK {% trans "net" %}
            </span>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{% url 'indy_hub:production_simulations' %}" class="btn btn-outline-secondary btn-slim">
                <i class="fas fa-table me-1"></i>{% trans "Compact view" %}
            </a>
            <a href="{% url 'indy_hub:production_simulations_list' %}?refresh=1" class="btn btn-outline-primary btn-slim">
                <i class="fas fa-sync-alt me-1"></i>{% trans "Refresh" %}
            </a>
        </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">
                        <h3 class="h6 mb-1">{{ simulation.display_name }}</h3>
                        <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 class="simulation-insights">
                    {% if simulation.profit_margin %}
                    <span class="insight-badge profit">
                        <i class="fas fa-percentage"></i>
                        {{ simulation.profit_margin|floatformat:1 }}%
                    </span>
                    {% endif %}
                    {% if simulation.active_tab %}
                    <span class="insight-badge tab">
                        <i class="fas fa-columns"></i>
                        {% trans "Last tab" %}: {{ simulation.active_tab|title }}
                    </span>
                    {% endif %}
                    <span class="insight-badge runs">
                        <i class="fas fa-cog"></i>
                        {{ simulation.runs|intcomma }} {% trans "cycles" %}
                    </span>
                </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>
        <h5 class="mb-2">{% trans "No Simulations Yet" %}</h5>
        <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 %}