{% extends 'industry_reforged/base.html' %}
{% load i18n %}
{% load humanize %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h3><i class="fas fa-user"></i> {{ title }}</h3>
        </div>
    </div>

    <div class="card border-0 mb-4">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs-pane"
                        type="button" role="tab" aria-controls="jobs-pane" aria-selected="true">Industry Jobs</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pi-tab" data-bs-toggle="tab" data-bs-target="#pi-pane" type="button"
                        role="tab" aria-controls="pi-pane" aria-selected="false">Planetary Interaction</button>
                </li>
            </ul>
        </div>

        <div class="card-body">
            <div class="tab-content" id="custom-tabs-four-tabContent">
                <!-- Jobs Tab -->
                <div class="tab-pane fade show active" id="jobs-pane" role="tabpanel" aria-labelledby="jobs-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="card-title"><i class="fas fa-hammer"></i> {% trans "My Industry Jobs" %}</h4>
                        <div>
                            <a href="{% url 'industry_reforged:add_personal_token' %}" class="btn btn-success btn-sm"><i
                                    class="fas fa-key"></i> Add Personal Token</a>
                        </div>
                    </div>

                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-active-tab" data-bs-toggle="pill" data-bs-target="#pills-active" type="button" role="tab" aria-controls="pills-active" aria-selected="true">Active Jobs</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-history-tab" data-bs-toggle="pill" data-bs-target="#pills-history" type="button" role="tab" aria-controls="pills-history" aria-selected="false">History</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-active" role="tabpanel" aria-labelledby="pills-active-tab" tabindex="0">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover dataTable m-0" id="personal-jobs-active-table">
                                    <thead>
                                        <tr>
                                            <th>Activity</th>
                                            <th>Item</th>
                                            <th>Runs</th>
                                            <th>Success Probability</th>
                                            <th>Cost</th>
                                            <th>Status</th>
                                            <th>End Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for job in active_jobs %}
                                        <tr>
                                            <td><span class="badge bg-secondary">{{ job.activity_name }}</span></td>
                                            <td>
                                                {% if job.product_type %}
                                                <div class="d-flex align-items-center">
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ job.product_type.id }}/icon?size=32"
                                                        alt="{{ job.product_type.name }}" width="24" height="24" class="me-2 rounded">
                                                    <span>{{ job.product_type.name }}</span>
                                                </div>
                                                {% elif job.blueprint_type %}
                                                <div class="d-flex align-items-center">
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ job.blueprint_type.id }}/icon?size=32"
                                                        alt="{{ job.blueprint_type.name }}" width="24" height="24" class="me-2 rounded">
                                                    <span>{{ job.blueprint_type.name }}</span>
                                                </div>
                                                {% else %}
                                                <span class="text-muted">Unknown Item</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-end numeric">{{ job.runs }}</td>
                                            <td class="text-end numeric">{% if job.probability %}{{job.probability|floatformat:2}}%{% endif %}</td>
                                            <td class="text-end numeric text-warning">{{ job.cost|floatformat:2|intcomma}} ISK</td>
                                            <td>
                                                <span class="badge {% if job.is_ready %}bg-success{% elif job.status == 'active' %}bg-primary{% else %}bg-secondary{% endif %}">
                                                    {% if job.is_ready %}Ready{% else %}{{ job.status|title }}{% endif %}
                                                </span>
                                            </td>
                                            <td class="numeric">{{ job.end_date|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-history" role="tabpanel" aria-labelledby="pills-history-tab" tabindex="0">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover dataTable m-0" id="personal-jobs-history-table">
                                    <thead>
                                        <tr>
                                            <th>Activity</th>
                                            <th>Item</th>
                                            <th>Runs</th>
                                            <th>Successful Runs</th>
                                            <th>Cost</th>
                                            <th>Status</th>
                                            <th>End Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for job in history_jobs %}
                                        <tr>
                                            <td><span class="badge bg-secondary">{{ job.activity_name }}</span></td>
                                            <td>
                                                {% if job.product_type %}
                                                <div class="d-flex align-items-center">
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ job.product_type.id }}/icon?size=32"
                                                        alt="{{ job.product_type.name }}" width="24" height="24" class="me-2 rounded">
                                                    <span>{{ job.product_type.name }}</span>
                                                </div>
                                                {% elif job.blueprint_type %}
                                                <div class="d-flex align-items-center">
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ job.blueprint_type.id }}/icon?size=32"
                                                        alt="{{ job.blueprint_type.name }}" width="24" height="24" class="me-2 rounded">
                                                    <span>{{ job.blueprint_type.name }}</span>
                                                </div>
                                                {% else %}
                                                <span class="text-muted">Unknown Item</span>
                                                {% endif %}
                                            </td>
                                            <td class="text-end numeric">{{ job.runs }}</td>
                                            <td class="text-end numeric">{{ job.successful_runs|default_if_none:"-" }}</td>
                                            <td class="text-end numeric text-warning">{{ job.cost|floatformat:2|intcomma}} ISK</td>
                                            <td>
                                                <span class="badge {% if job.status == 'delivered' %}bg-primary{% elif job.status == 'cancelled' %}bg-danger{% else %}bg-secondary{% endif %}">
                                                    {{ job.status|title }}
                                                </span>
                                            </td>
                                            <td class="numeric">{{ job.end_date|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PI Tab -->
                <div class="tab-pane fade" id="pi-pane" role="tabpanel" aria-labelledby="pi-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="card-title"><i class="fas fa-globe"></i> Planetary Interaction</h3>
                        <div>
                            <a href="{% url 'industry_reforged:trigger_pi_sync' %}" class="btn btn-primary btn-sm show-loader"><i
                                    class="fas fa-sync"></i> Refresh PI Data</a>
                        </div>
                    </div>

                    {% if planets %}
                    {% regroup planets by character as char_planets %}
                    <div class="accordion" id="charAccordion">
                        {% for char_group in char_planets %}
                        <div class="accordion-item bg-transparent border-0 mb-4">
                            <h4 class="accordion-header" id="headingChar{{ char_group.grouper.character_id }}">
                                <button class="accordion-button collapsed bg-transparent border-bottom border-secondary ps-0 py-2 d-flex align-items-center shadow-none" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseChar{{ char_group.grouper.character_id }}" aria-expanded="false"
                                    aria-controls="collapseChar{{ char_group.grouper.character_id }}">
                                    <img src="https://images.evetech.net/characters/{{ char_group.grouper.character_id }}/portrait?size=32"
                                        alt="{{ char_group.grouper.character_name }}"
                                        class="rounded-circle border border-secondary me-3">
                                    <span class="text-primary fs-4">{{ char_group.grouper.character_name }}</span>
                                    {% if char_group.list.0.character_needs_attention %}
                                    <span class="badge bg-danger ms-auto"><i class="fas fa-exclamation-triangle"></i> Expired</span>
                                    {% endif %}
                                </button>
                            </h4>

                            <div id="collapseChar{{ char_group.grouper.character_id }}" class="accordion-collapse collapse"
                                aria-labelledby="headingChar{{ char_group.grouper.character_id }}" data-bs-parent="#charAccordion">
                                <div class="accordion-body px-0 pt-3 pb-0">
                                    <div class="accordion" id="piAccordion{{ char_group.grouper.character_id }}">
                                        {% for planet in char_group.list %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading{{ planet.planet_id }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapse{{ planet.planet_id }}" aria-expanded="false"
                                                    aria-controls="collapse{{ planet.planet_id }}">
                                                    {% if planet.planet_type %}
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ planet.planet_type.id }}/icon?size=32"
                                                        alt="{{ planet.planet_type.name }}" class="me-2">
                                                    {{ planet.planet_type.name }}
                                                    {% endif %}
                                                    &nbsp;- Command Center Level {{ planet.upgrade_level }} (Pins: {{ planet.num_pins }})
                                                    &nbsp;- Last Updated: {{ planet.last_update|date:"Y-m-d H:i" }}
                                                    {% if planet.has_expired_extractors %}
                                                    <span class="badge bg-danger ms-auto"><i class="fas fa-exclamation-triangle"></i> Expired</span>
                                                    {% endif %}
                                                </button>
                                            </h2>
                                            <div id="collapse{{ planet.planet_id }}" class="accordion-collapse collapse"
                                                aria-labelledby="heading{{ planet.planet_id }}" data-bs-parent="#piAccordion{{ char_group.grouper.character_id }}">
                                <div class="accordion-body">
                                    <div class="row">
                                        <!-- Extractors -->
                                        <div class="col-md-4">
                                            <h5 class="text-center border-bottom pb-2">⛏️ Extractors</h5>
                                            {% for pin in planet.pins.all %}
                                            {% if pin.is_extractor %}
                                            <div class="card mb-3 border-0 bg-dark">
                                                <div class="card-body p-2 text-center">
                                                    <div class="d-flex justify-content-center align-items-center mb-1">
                                                        {% if pin.type %}
                                                        <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                            src="https://images.evetech.net/types/{{ pin.type.id }}/icon?size=32"
                                                            alt="{{ pin.type.name }}" title="{{ pin.type.name }}">
                                                        {% endif %}

                                                        {% if pin.product_type %}
                                                        <i class="fas fa-arrow-right mx-2 text-muted"></i>
                                                        <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                            src="https://images.evetech.net/types/{{ pin.product_type.id }}/icon?size=32"
                                                            alt="{{ pin.product_type.name }}"
                                                            title="{{ pin.product_type.name }}">
                                                        {% endif %}
                                                    </div>

                                                    <div class="small fw-bold mt-1">
                                                        {% if pin.is_expired %}
                                                        <span class="text-danger">EXPIRED</span>
                                                        {% else %}
                                                        <span class="text-success">EXTRACTING</span>
                                                        {% endif %}
                                                    </div>

                                                    {% if pin.expiry_time %}
                                                    <div class="progress mt-2" style="height: 10px;">
                                                        <div class="progress-bar {% if pin.is_expired %}bg-danger{% elif pin.progress_percent > 80 %}bg-warning{% else %}bg-success progress-bar-striped progress-bar-animated{% endif %}"
                                                            role="progressbar"
                                                            style="width: {{ pin.progress_percent }}%;"
                                                            aria-valuenow="{{ pin.progress_percent }}" aria-valuemin="0"
                                                            aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="small text-muted mt-1">
                                                        {% if pin.is_expired %}
                                                        Finished
                                                        {% else %}
                                                        <span class="local-time" data-timestamp="{{ pin.expiry_time|date:'c' }}">
                                                            {{ pin.expiry_time|date:"Y-m-d H:i" }} UTC
                                                        </span>
                                                        <br>
                                                        <small>({{ pin.expiry_time|timeuntil }} left)</small>
                                                        {% endif %}
                                                    </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            {% endif %}
                                            {% endfor %}
                                        </div>

                                        <!-- Factories -->
                                        <div class="col-md-4 border-start border-secondary">
                                            <h5 class="text-center border-bottom pb-2">🏭 Factories</h5>
                                            {% for factory in planet.factory_summary %}
                                            <div class="card mb-2 border-0 bg-dark">
                                                <div class="card-body p-2 d-flex align-items-center justify-content-between">
                                                    <div class="d-flex align-items-center">
                                                        <span class="badge bg-secondary me-2 px-2 py-1 fs-6">{{ factory.count }}x</span>
                                                        {% if factory.type %}
                                                        <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                            src="https://images.evetech.net/types/{{ factory.type.id }}/icon?size=32"
                                                            alt="{{ factory.type.name }}" title="{{ factory.type.name }}"
                                                            class="me-2">
                                                        {% endif %}
                                                        {% if factory.product_type %}
                                                        <i class="fas fa-arrow-right mx-1 text-muted"></i>
                                                        <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                            src="https://images.evetech.net/types/{{ factory.product_type.id }}/icon?size=32"
                                                            alt="{{ factory.product_type.name }}"
                                                            title="{{ factory.product_type.name }}" class="ms-1">
                                                        {% endif %}
                                                    </div>
                                                    <span class="badge bg-success">Running</span>
                                                </div>
                                            </div>
                                            {% empty %}
                                            <div class="text-center text-muted small mt-2">No factories</div>
                                            {% endfor %}
                                        </div>

                                        <!-- Storage -->
                                        <div class="col-md-4 border-start border-secondary">
                                            <h5 class="text-center border-bottom pb-2">📦 Infrastructure</h5>
                                            <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
                                                {% for pin in planet.pins.all %}
                                                {% if pin.is_storage %}
                                                <div class="text-center" style="width: 64px;">
                                                    {% if pin.type %}
                                                    <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';"
                                                        src="https://images.evetech.net/types/{{ pin.type.id }}/icon?size=64"
                                                        alt="{{ pin.type.name }}" title="{{ pin.type.name }}"
                                                        class="img-thumbnail bg-dark border-secondary">
                                                    <div class="small mt-1 text-truncate" style="font-size: 0.7rem;"
                                                        title="{{ pin.type.name }}">{{ pin.type.name }}</div>
                                                    {% endif %}
                                                </div>
                                                {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle text-info"></i> No Planetary Interaction data found. Ensure your PI
                        characters are authorized with the <code>esi-planets.manage_planets.v1</code> scope via the
                        Tokens /
                        Services page, and click "Refresh PI Data".
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Convert all UTC times to local browser time
        document.querySelectorAll('.local-time').forEach(function(el) {
            const timestamp = el.getAttribute('data-timestamp');
            if (timestamp) {
                const date = new Date(timestamp);
                const options = {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                };
                el.textContent = date.toLocaleString(undefined, options);
            }
        });
    });

    $(document).ready(function () {
        $('#personal-jobs-active-table').DataTable({
            "order": [[6, "desc"]] // Sort by End Date
        });
        $('#personal-jobs-history-table').DataTable({
            "order": [[6, "desc"]] // Sort by End Date
        });
    });
</script>
{% endblock %}