{% extends "indy_hub/base.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{% trans "Production Tables" %}{% 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' %}?v=20260524-projects-plan-counters">
{% endblock extra_css %}

{% block content %}
<div
    class="container-fluid py-4 simulations-page projects-registry"
    data-market-groups='{{ market_group_map|escapejs }}'
    data-project-preview-url="{{ production_project_import_preview_url }}"
    data-project-create-url="{{ create_production_project_url }}"
>
    <div class="page-header mb-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <h2 class="h3 mb-1">
                    <i class="fas fa-clipboard-list me-2"></i>
                    {% trans "Production Tables" %}
                </h2>
                <p class="description mb-0 small">
                    {% trans "Industrial registry of every craft table — scope, production progress and last activity." %}
                </p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-outline-danger btn-action" id="projectsDeleteModeToggle" data-delete-label="{% trans 'Delete' %}" data-done-label="{% trans 'Done' %}">
                    <i class="fas fa-trash me-2"></i>{% trans "Delete" %}
                </button>
                <button type="button" class="btn btn-light btn-action" data-bs-toggle="modal" data-bs-target="#productionProjectImportModal">
                    <i class="fas fa-plus me-2"></i>{% trans "New craft table" %}
                </button>
                <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-sitemap header-bg"></i>
    </div>

    <div class="registry-summary mb-3">
        <span class="registry-summary__chip registry-summary__chip--draft">
            <i class="fas fa-pencil-ruler"></i>
            <strong>{{ project_stats.draft_projects|intcomma }}</strong>
            <span>{% trans "drafts" %}</span>
        </span>
        <span class="registry-summary__chip registry-summary__chip--saved">
            <i class="fas fa-bookmark"></i>
            <strong>{{ project_stats.saved_projects|intcomma }}</strong>
            <span>{% trans "saved" %}</span>
        </span>
        <span class="registry-summary__divider"></span>
        <span class="registry-summary__chip">
            <i class="fas fa-cubes"></i>
            <strong>{{ project_stats.selected_items|intcomma }}</strong>
            <span>{% trans "items" %}</span>
        </span>
        <span class="registry-summary__chip">
            <i class="fas fa-sort-amount-up"></i>
            <strong>{{ project_stats.selected_quantity|intcomma }}</strong>
            <span>{% trans "units" %}</span>
        </span>
        <span class="registry-summary__divider"></span>
        <span class="registry-summary__chip registry-summary__chip--prod">
            <i class="fas fa-hammer"></i>
            <strong>{{ project_stats.craftable_lines|intcomma }}</strong>
            <span>{% trans "prod lines planned" %}</span>
        </span>
        <span class="registry-summary__chip registry-summary__chip--buy">
            <i class="fas fa-shopping-cart"></i>
            <strong>{{ project_stats.buy_lines|intcomma }}</strong>
            <span>{% trans "buy lines planned" %}</span>
        </span>
        {% if project_stats.in_prod_jobs %}
        <span class="registry-summary__chip registry-summary__chip--running">
            <i class="fas fa-fire"></i>
            <strong>{{ project_stats.in_prod_jobs|intcomma }}</strong>
            <span>{% trans "jobs running" %}</span>
        </span>
        {% endif %}
    </div>

    <form method="post" action="{% url 'indy_hub:production_simulations_list' %}" id="projectsBulkDeleteForm" class="projects-bulk-delete-form">
        {% csrf_token %}
        <div class="projects-bulk-delete-toolbar d-none" id="projectsBulkDeleteToolbar">
            <div class="d-flex flex-wrap align-items-center gap-3">
                <div class="form-check mb-0">
                    <input class="form-check-input" type="checkbox" id="projectsBulkDeleteSelectAll">
                    <label class="form-check-label fw-semibold" for="projectsBulkDeleteSelectAll">
                        {% trans "Select all" %}
                    </label>
                </div>
                <span class="small text-muted" id="projectsBulkDeleteCount">{% trans "0 selected" %}</span>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <button type="submit" class="btn btn-danger" id="projectsBulkDeleteSubmit" disabled>
                    <i class="fas fa-trash me-2"></i>{% trans "Delete selected" %}
                </button>
                <button type="button" class="btn btn-outline-secondary" id="projectsBulkDeleteCancel">
                    {% trans "Cancel" %}
                </button>
            </div>
        </div>

    {# === DRAFTS === #}
    <section class="registry-section">
        <header class="registry-section__head">
            <h3>
                <i class="fas fa-pencil-ruler text-primary"></i>
                {% trans "In progress" %}
                <span class="registry-section__count">{{ draft_projects|length|intcomma }}</span>
            </h3>
        </header>
        {% if draft_projects %}
        <div class="registry-table-wrap">
            <table class="registry-table">
                <thead>
                    <tr>
                        <th class="col-select"></th>
                        <th class="col-status">{% trans "Status" %}</th>
                        <th class="col-name">{% trans "Project" %}</th>
                        <th class="col-scope">{% trans "Scope" %}</th>
                        <th class="col-progress">{% trans "Production" %}</th>
                        <th class="col-updated">{% trans "Updated" %}</th>
                        <th class="col-actions"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in draft_projects %}
                        {% include "indy_hub/industry/_project_card.html" %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="registry-empty">{% trans "No draft tables. Start with an EFT fitting or a manual list to create your first multi-item craft table." %}</p>
        {% endif %}
    </section>

    {# === SAVED === #}
    <section class="registry-section">
        <header class="registry-section__head">
            <h3>
                <i class="fas fa-bookmark text-success"></i>
                {% trans "Saved tables" %}
                <span class="registry-section__count">{{ saved_projects|length|intcomma }}</span>
            </h3>
        </header>
        {% if saved_projects %}
        <div class="registry-table-wrap">
            <table class="registry-table">
                <thead>
                    <tr>
                        <th class="col-select"></th>
                        <th class="col-status">{% trans "Status" %}</th>
                        <th class="col-name">{% trans "Project" %}</th>
                        <th class="col-scope">{% trans "Scope" %}</th>
                        <th class="col-progress">{% trans "Production" %}</th>
                        <th class="col-updated">{% trans "Updated" %}</th>
                        <th class="col-actions"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in saved_projects %}
                        {% include "indy_hub/industry/_project_card.html" %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="registry-empty">{% trans "No saved craft tables yet. Save a draft once the table name and scope are stable." %}</p>
        {% endif %}
    </section>

    {# === ARCHIVED === #}
    <section class="registry-section">
        <header class="registry-section__head registry-section__head--toggle">
            <button class="registry-section__toggle" type="button" data-bs-toggle="collapse" data-bs-target="#archivedProjectsSection" aria-expanded="false" aria-controls="archivedProjectsSection">
                <i class="fas fa-chevron-right registry-section__toggle-icon"></i>
                <i class="fas fa-box-archive text-secondary"></i>
                {% trans "Archived tables" %}
                <span class="registry-section__count">{{ archived_projects|length|intcomma }}</span>
            </button>
        </header>
        <div id="archivedProjectsSection" class="collapse">
            {% if archived_projects %}
            <div class="registry-table-wrap">
                <table class="registry-table">
                    <thead>
                        <tr>
                            <th class="col-select"></th>
                            <th class="col-status">{% trans "Status" %}</th>
                            <th class="col-name">{% trans "Project" %}</th>
                            <th class="col-scope">{% trans "Scope" %}</th>
                            <th class="col-progress">{% trans "Production" %}</th>
                            <th class="col-updated">{% trans "Updated" %}</th>
                            <th class="col-actions"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for project in archived_projects %}
                            {% include "indy_hub/industry/_project_card.html" %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="registry-empty">{% trans "No archived tables. Move a project to the Archived status from its workspace header to find it here." %}</p>
            {% endif %}
        </div>
    </section>

    </form>

</div>
<div class="modal fade" id="productionProjectImportModal" tabindex="-1" aria-labelledby="productionProjectImportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="productionProjectImportModalLabel">{% trans "Create a craft table" %}</h5>
                    <p class="small text-muted mb-0">{% trans "Paste an EFT fitting or a manual item list, preview the resolved items, then choose what enters the project." %}</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <div class="row g-4">
                    <div class="col-lg-5">
                        <div class="mb-3">
                            <label for="productionProjectSourceKind" class="form-label fw-semibold">{% trans "Input mode" %}</label>
                            <select id="productionProjectSourceKind" class="form-select">
                                <option value="eft">{% trans "EFT fitting" %}</option>
                                <option value="manual">{% trans "Manual item list" %}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="productionProjectName" class="form-label fw-semibold">{% trans "Project name" %}</label>
                            <input type="text" id="productionProjectName" class="form-control" placeholder="{% trans 'Fleet Vedmak - Week 1' %}">
                        </div>
                        <div class="mb-3">
                            <label for="productionProjectStatus" class="form-label fw-semibold">{% trans "Initial status" %}</label>
                            <select id="productionProjectStatus" class="form-select">
                                <option value="draft">{% trans "In progress" %}</option>
                                <option value="saved">{% trans "Saved" %}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="productionProjectSourceText" class="form-label fw-semibold">{% trans "Items" %}</label>
                            <textarea id="productionProjectSourceText" class="form-control" rows="14" placeholder="{% trans '[Vedmak, Fleet]

Thermal Armor Hardener II
Warp Disruptor II x2' %}"></textarea>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="productionProjectIncludeBuy" checked>
                            <label class="form-check-label" for="productionProjectIncludeBuy">{% trans "Add non-craftable items to the project as buy lines" %}</label>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-outline-primary" id="productionProjectPreviewBtn">
                                <i class="fas fa-search me-2"></i>{% trans "Preview items" %}
                            </button>
                            <button type="button" class="btn btn-primary d-none" id="productionProjectCreateBtn" disabled>
                                <i class="fas fa-industry me-2"></i>{% trans "Create table" %}
                            </button>
                        </div>
                        <div class="row g-2 mt-1" id="productionProjectPreviewSummary"></div>
                    </div>
                    <div class="col-lg-7">
                        <div id="productionProjectImportStatus" class="alert alert-secondary">{% trans "Preview the import to review craftable and non-craftable lines." %}</div>
                        <div id="productionProjectPreviewFits" class="d-grid gap-3 mb-3"></div>
                        <div id="productionProjectPreviewGroups" class="d-grid gap-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="productionProjectProgressModal" tabindex="-1" aria-labelledby="productionProjectProgressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content project-progress-modal">
            <div class="modal-header">
                <div class="project-progress-modal__title-wrap">
                    <div class="project-progress-modal__eyebrow" id="productionProjectProgressModalEyebrow">{% trans "Production tracking" %}</div>
                    <h5 class="modal-title" id="productionProjectProgressModalLabel">{% trans "Production tracking" %}</h5>
                    <p class="small text-muted mb-0" id="productionProjectProgressModalDescription">{% trans "Link one or more tracked industry jobs to each item to update coverage automatically from job output quantities." %}</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <div class="project-progress-modal-summary mb-4">
                    <div class="project-progress-modal-summary__head">
                        <div>
                            <div class="small text-uppercase text-muted fw-semibold">{% trans "Completion" %}</div>
                            <div class="project-progress-modal-summary__value fw-semibold" id="productionProjectProgressSummaryText">0%</div>
                        </div>
                        <div class="small text-muted project-progress-modal-summary__meta" id="productionProjectProgressSummaryMeta"></div>
                    </div>
                    <div class="progress project-progress-meter" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar" id="productionProjectProgressModalBar" style="width: 0%;">0%</div>
                    </div>
                    <div class="project-progress-modal-summary__stats" id="productionProjectProgressSummaryStats"></div>
                </div>
                <div id="productionProjectProgressRows" class="project-progress-modal-rows"></div>
                <div id="productionProjectProgressStatus" class="alert alert-secondary mt-4 mb-0">{% trans "Link tracked jobs when possible. Manual statuses remain available for lines without linked jobs." %}</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
                <button type="button" class="btn btn-primary" id="productionProjectProgressSaveBtn">{% trans "Save production tracking" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
<script src="{% static 'indy_hub/js/production_projects.js' %}?v=20260425-progress-modal-refresh2"></script>
{% endblock extra_javascript %}