{% extends 'autosrp/base.html' %}
{% load tz %}
{% load i18n %}
{% load humanize %}
{% block content %}
<div class="container-xxl py-3">
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-3 gap-2">
        <h2 class="m-0">
            {% if title_word and systems_list and submission.start_at %}
                {% if systems_list|length > 1 %}
                    {% trans "The Battles of" %} {{ systems_list|join:", " }} {% trans "on" %} {{ submission.start_at|date:"Y-m-d H:i:s T" }}
                {% else %}
                    {% trans "The Battle of" %} {{ systems_list.0 }} {% trans "on" %} {{ submission.start_at|date:"Y-m-d H:i:s T" }}
                {% endif %}
            {% else %}
                {% trans "Submission" %} #{{ submission.id }}
            {% endif %}
        </h2>
        <span class="badge bg-secondary">{{ submission.status|default:"unknown" }}</span>
    </div>
    <div class="row g-3 mb-3">
        <div class="col-12 col-lg-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-2">{% trans "Window (EVE/UTC)" %}</h5>
                    <div class="text-muted small">
                        <div><strong>{% trans "Start" %}:</strong> {{ submission.start_at|date:"Y-m-d H:i:s T" }}</div>
                        <div><strong>{% trans "Duration" %}:</strong> {{ submission.duration_minutes }} {% trans "minutes" %}</div>
                        <div><strong>{% trans "Created" %}:</strong> {{ submission.created|date:"Y-m-d H:i:s T" }}</div>
                        <div><strong>{% trans "Processed" %}:</strong> {{ submission.processed_at|default:"—" }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-2">{% trans "Summary" %}</h5>
                    <div class="text-muted small">
                        <div><strong>{% trans "Total Kills" %}:</strong> {{ totals.count }}</div>
                        <div><strong>{% trans "Fit Pass" %}:</strong> {{ totals.pass }}</div>
                        <div><strong>{% trans "Fit Fail" %}:</strong> {{ totals.fail }}</div>
                        <div><strong>{% trans "Total Suggested ISK" %}:</strong> {{ totals.sum_suggested|floatformat:2|intcomma }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if submission.error %}
    <div class="alert alert-warning">
        <strong>{% trans "Notes" %}:</strong> {{ submission.error }}
    </div>
    {% endif %}
    <div class="card">
        <div class="card-body">
            <div
                class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center justify-content-between gap-2 mb-2">
                <h5 class="card-title m-0">{% trans "Kills" %} ({{ totals.count }})</h5>
                <div class="d-flex align-items-center gap-2">
                    <form class="d-flex gap-2" method="post" action="{% url 'autosrp:review-kill-add' submission.id %}">
                        {% csrf_token %}
                        <input
                            type="url"
                            name="zkb_url"
                            class="form-control form-control-sm themable-input"
                            placeholder="{% trans 'Paste a zKill link…' %}"
                            required
                            pattern="https?://(zkillboard\.com|beta\.zkillboard\.com)/kill/[\d]+/?"
                            title="https://zkillboard.com/kill/<id>/"
                            style="min-width: 280px;">
                        <button type="submit" class="btn btn-sm btn-outline-success">{% trans "Add" %}</button>
                    </form>
                    <form method="post" action="{% url 'autosrp:export-srp' submission.id %}" id="csvForm">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-outline-primary">{% trans "Export CSV" %}</button>
                    </form>
                </div>
            </div>

            <form method="post" action="{% url 'autosrp:review-recheck' submission.id %}" class="mb-3">
                {% csrf_token %}
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span></span>
                        <button type="submit" class="btn btn-sm btn-primary">{% trans "Re-Run Fit Checks" %}</button>
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                <tr>
                                    <th>{% trans "Kill" %}</th>
                                    <th>{% trans "System" %}</th>
                                    <th>{% trans "Occurred (UTC)" %}</th>
                                    <th>{% trans "Victim" %}</th>
                                    <th>{% trans "Hull" %}</th>
                                    <th>{% trans "Details" %}</th>
                                    <th>{% trans "Force doctrine fit" %}</th>
                                    <th>{% trans "Suggested ISK" %}</th>
                                    <th>{% trans "Actual ISK" %}</th>
                                    <th>{% trans "Result" %}</th>
                                    <th colspan="2">{% trans "Actions" %}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for k in kills %}
                                <tr data-kill-id="{{ k.id }}">
                                    <td>
                                        {% if k.status == "approved" or k.status == "approved_with_comment" %}
                                        <i class="fa fa-check-circle text-success me-1" data-bs-toggle="tooltip"
                                           title="{% trans 'Approved' %}"></i>
                                        {% elif k.status == "rejected" %}
                                        <i class="fa fa-times-circle text-danger me-1" data-bs-toggle="tooltip"
                                           title="{% trans 'Rejected' %}"></i>
                                        {% else %}
                                        <i class="fa fa-clock text-secondary me-1" data-bs-toggle="tooltip"
                                           title="{% trans 'Pending' %}"></i>
                                        {% endif %}
                                        <a href="{{ k.zkb_url }}" target="_blank" rel="noopener">{{ k.killmail_id }}</a>
                                        {% if k.status_comment %}
                                        <i class="fa fa-comment-dots text-info ms-1"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="{{ k.status_comment|escape }}"></i>
                                        {% endif %}
                                    </td>
                                    <td>{{ k.system_name }}</td>
                                    <td>{% timezone "UTC" %}{{ k.occurred_at|date:"Y-m-d H:i" }}{% endtimezone %}</td>
                                    <td>{{ k.victim_char_name }}<br><small class="text-muted">{{ k.victim_corp_name }}{% if k.victim_all_name %} ({{ k.victim_all_name }}){% endif %}</small></td>
                                    <td>{{ k.ship_type_name }}</td>
                                    <td>
                                        <button type="button"
                                                class="btn btn-sm btn-info view-fit-btn"
                                                data-url="{% url 'autosrp:kill-fit-detail' k.id %}"
                                                data-title="{% trans 'Fit details' %} – {{ k.ship_type_name }} ({{ k.ship_type_id }})"
                                                data-bs-toggle="modal" data-bs-target="#fitDetailModal">
                                            {% trans "Details" %}
                                        </button>
                                    </td>
                                    <td>
                                        <select class="form-select form-select-sm themable-select"
                                                name="fit_for_{{ k.id }}">
                                            <option value="">{% trans "Auto (best match)" %}</option>
                                            {% for f in k.available_fits %}
                                            <option value="{{ f.id }}" {% if k.fitcheck and k.fitcheck.doctrine_fit_id == f.id %}selected{% endif %}>
                                                {{ f.name }} (ID {{ f.id }})
                                            </option>
                                            {% empty %}
                                            <option value="" disabled>{% trans "No matching fits" %}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td>
                                        {{ k.payout.suggested_isk|default_if_none:"0.00"|floatformat:2|intcomma }}
                                    </td>
                                    <td style="min-width: 140px">
                                        <input id="actual_for_{{ k.id }}" type="number" step="0.01"
                                               class="form-control form-control-sm themable-input"
                                               name="actual_for_{{ k.id }}" value="{{ k.prefill_actual_isk }}">
                                    </td>
                                    <td>
                                        {% if k.fitcheck %}
                                        {% if k.fitcheck.passed %}
                                        <span class="badge bg-success">{% trans "Pass" %}</span>
                                        {% else %}
                                        <span class="badge bg-danger">{% trans "Fail" %}</span>
                                        {% endif %}
                                        {% else %}
                                        <span class="badge bg-secondary">{% trans "Pending" %}</span>
                                        {% endif %}
                                    </td>
            </form>
            <td>
                <div class="btn-group" role="group">
                    <form method="post" action="{% url 'autosrp:review-kill-delete' submission.id k.id %}" onsubmit="return confirm('{% trans "Delete this kill from the fleet?" %}');">
                        {% csrf_token %}
                        <button type="submit"
                                class="btn btn-sm btn-outline-danger"
                                data-bs-toggle="tooltip"
                                title="{% trans 'Delete' %}">
                            <i class="fa fa-trash text-danger me-1"></i>
                        </button>
                    </form>

                    <form method="post"
                          action="{% url 'autosrp:review-save-status' submission.id k.id %}"
                          data-role="status-form">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="approve">
                        <input type="hidden" name="actual_for_{{ k.id }}" value="{{ k.prefill_actual_isk }}">
                        <button type="submit"
                                class="btn btn-outline-success btn-sm"
                                data-bs-toggle="tooltip"
                                title="{% trans 'Approve' %}">
                            <i class="fa fa-check text-success me-1"></i>
                        </button>
                    </form>

                    <button type="button"
                            class="btn btn-outline-warning btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#approvalModal"
                            data-mode="comment"
                            data-kill-id="{{ k.id }}"
                            data-status-url="{% url 'autosrp:review-save-status' submission.id k.id %}"
                            title="{% trans 'Approve with comment' %}">
                        <i class="fa fa-check-double text-warning me-1"></i>
                    </button>

                    <button type="button"
                            class="btn btn-outline-danger btn-sm"
                            data-bs-toggle="modal"
                            data-bs-target="#approvalModal"
                            data-mode="reject"
                            data-kill-id="{{ k.id }}"
                            data-status-url="{% url 'autosrp:review-save-status' submission.id k.id %}"
                            title="{% trans 'Reject' %}">
                        <i class="fa fa-x text-danger me-1"></i>
                    </button>
                </div>
            </td>
            </tr>
            {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="fitDetailModal" tabindex="-1" aria-labelledby="fitDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fitDetailModalLabel">{% trans "Fit details" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <div class="text-center py-5 text-muted" id="fitDetailLoading">
                    <div class="spinner-border" role="status" aria-hidden="true"></div>
                    <div class="mt-2">{% trans "Loading fit…" %}</div>
                </div>
                <div id="fitDetailContent" class="d-none"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="approvalModal" tabindex="-1" aria-labelledby="approvalModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="" id="approvalModalForm">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="approvalModalLabel">{% trans "Item Action" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="actionType" name="action" value="">
                    <input type="hidden" id="modalActualField" name="" value="">
                    <div class="mb-3">
                        <label for="commentText" class="form-label">{% trans "Reason/Comment" %}</label>
                        <textarea id="commentText" name="comment" class="form-control themable-input" rows="3"
                                  placeholder="{% trans 'Enter reason or comment (if required)…' %}"
                                  required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary">{% trans "Confirm" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .container-xxl { max-width: 90%; }

    [data-bs-theme="dark"] .themable-select {
      background-color: #212529;
      color: #f8f9fa;
      border-color: #495057;
    }
    [data-bs-theme="dark"] .themable-select:focus {
      background-color: #212529;
      color: #f8f9fa;
      border-color: #6c757d;
      box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }
    [data-bs-theme="dark"] .themable-input {
      background-color: #212529;
      color: #f8f9fa;
      border-color: #495057;
    }
    [data-bs-theme="dark"] .themable-input::placeholder {
      color: #adb5bd;
    }
    [data-bs-theme="dark"] .themable-input:focus {
      background-color: #212529;
      color: #f8f9fa;
      border-color: #6c757d;
      box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }
</style>

<script>
    (function () {
      const modal = document.getElementById('fitDetailModal');
      const titleEl = document.getElementById('fitDetailModalLabel');
      const loadingEl = document.getElementById('fitDetailLoading');
      const contentEl = document.getElementById('fitDetailContent');

      document.addEventListener('click', function (e) {
        const btn = e.target.closest('.view-fit-btn');
        if (!btn) return;
        const url = btn.getAttribute('data-url');
        const title = btn.getAttribute('data-title') || '';
        if (titleEl) titleEl.textContent = title;
        if (loadingEl) loadingEl.classList.remove('d-none');
        if (contentEl) { contentEl.classList.add('d-none'); contentEl.innerHTML = ''; }

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
          .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.text();
          })
          .then(html => {
            if (contentEl) {
              if (window.bootstrap) {
                contentEl.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                  try { bootstrap.Tooltip.getInstance(el)?.dispose(); } catch(e) {}
                });
              }

              contentEl.innerHTML = html;
              contentEl.classList.remove('d-none');

              if (window.bootstrap) {
                contentEl.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                  try {
                    new bootstrap.Tooltip(el, {
                      container: 'body',
                      boundary: 'viewport',
                      trigger: 'hover focus'
                    });
                  } catch(e) {}
                });
              }
            }
          })
          .catch(err => {
            if (contentEl) {
              contentEl.innerHTML = '<div class="alert alert-danger mb-0">' +
                (err?.message || 'Error loading fit') + '</div>';
              contentEl.classList.remove('d-none');
            }
          })
          .finally(() => {
            if (loadingEl) loadingEl.classList.add('d-none');
          });
      });

      modal?.addEventListener('hidden.bs.modal', () => {
        if (window.bootstrap && contentEl) {
          contentEl.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
            try { bootstrap.Tooltip.getInstance(el)?.dispose(); } catch(e) {}
          });
        }
        if (contentEl) contentEl.innerHTML = '';
        if (loadingEl) loadingEl.classList.remove('d-none');
        if (contentEl) contentEl.classList.add('d-none');
      });

      if (window.bootstrap) {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
          try {
            new bootstrap.Tooltip(el, {
              container: 'body',
              boundary: 'viewport',
              trigger: 'hover focus'
            });
          } catch(e) {}
        });
      }

      document.querySelectorAll('form[data-role="status-form"]').forEach(form => {
        form.addEventListener('submit', (ev) => {
          const tr = form.closest('tr');
          const visible = tr?.querySelector('input[name^="actual_for_"]');
          const hidden = form.querySelector('input[name^="actual_for_"]');
          if (visible && hidden) {
            hidden.value = visible.value || '0.00';
          }
        });
      });

      const approvalModal = document.getElementById('approvalModal');
      const modalForm = document.getElementById('approvalModalForm');
      const modalActualField = document.getElementById('modalActualField');

      approvalModal?.addEventListener('show.bs.modal', (event) => {
        const button = event.relatedTarget;
        const actionMode = button.getAttribute('data-mode');
        const statusUrl = button.getAttribute('data-status-url');
        const killId = button.getAttribute('data-kill-id');

        const modalInput = approvalModal.querySelector('#actionType');
        const modalLabel = approvalModal.querySelector('.modal-title');
        const commentField = approvalModal.querySelector('#commentText');

        if (actionMode === 'comment') {
          modalLabel.textContent = "{% trans 'Approve with Comment' %}";
          commentField.placeholder = "{% trans 'Enter approval comment (required)…' %}";
        } else if (actionMode === 'reject') {
          modalLabel.textContent = "{% trans 'Reject' %}";
          commentField.placeholder = "{% trans 'Enter rejection reason (required)…' %}";
        }

        modalInput.value = actionMode;
        if (modalForm && statusUrl) {
          modalForm.setAttribute('action', statusUrl);
        }

        // Set the hidden "actual" field name/value for this kill
        if (killId && modalActualField) {
          const visible = document.getElementById('actual_for_' + killId);
          modalActualField.name = 'actual_for_' + killId;
          modalActualField.value = visible ? (visible.value || '0.00') : '0.00';
          // Cache the kill id on the form for submit-time sync
          modalForm.dataset.killId = killId;
        }
      });

      modalForm?.addEventListener('submit', () => {
        const killId = modalForm?.dataset?.killId;
        if (!killId) return;
        const visible = document.getElementById('actual_for_' + killId);
        if (visible && modalActualField) {
          modalActualField.value = visible.value || '0.00';
        }
      });
    })();
</script>
{% endblock %}