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

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>{{ fleet.name }}</h2>
            <p class="text-muted">
                <i class="fas fa-user"></i> {{ fleet.fleet_commander.username }}
                | <i class="fas fa-calendar"></i> {{ fleet.fleet_time|date:"Y-m-d H:i" }}
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_edit %}
                <form method="post" action="{% url 'aapayout:fleet_delete' fleet.pk %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger"
                            onclick="return confirm('{% translate "Are you sure you want to delete this fleet?" %}')">
                        <i class="fas fa-trash"></i> {% translate "Delete" %}
                    </button>
                </form>
            {% endif %}
        </div>
    </div>

    <!-- Fleet Info Card -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Fleet Information" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{% url 'aapayout:fleet_edit' fleet.pk %}" id="fleet-edit-form">
                        {% csrf_token %}
                        <table class="table table-sm">
                            <tr>
                                <th>{% translate "Fleet Name" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="text" name="name" value="{{ fleet.name }}"
                                           class="form-control form-control-sm">
                                    {% else %}
                                    {{ fleet.name }}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Fleet Time" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="datetime-local" name="fleet_time"
                                           value="{{ fleet.fleet_time|date:'Y-m-d\TH:i' }}"
                                           class="form-control form-control-sm">
                                    {% else %}
                                    {{ fleet.fleet_time|date:"Y-m-d H:i" }}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Battle Report" %}:</th>
                                <td>
                                    {% if can_edit %}
                                    <input type="url" name="battle_report"
                                           value="{{ fleet.battle_report|default:'' }}"
                                           class="form-control form-control-sm"
                                           placeholder="https://">
                                    {% else %}
                                    {% if fleet.battle_report %}
                                        <a href="{{ fleet.battle_report }}" target="_blank">{{ fleet.battle_report }}</a>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Status" %}:</th>
                                <td>
                                    {% if fleet.status == 'draft' %}
                                        <span class="badge bg-secondary">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'active' %}
                                        <span class="badge bg-primary">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'completed' %}
                                        <span class="badge bg-success">{{ fleet.get_status_display }}</span>
                                    {% elif fleet.status == 'paid' %}
                                        <span class="badge bg-info">{{ fleet.get_status_display }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>{% translate "Participants" %}:</th>
                                <td>{{ participants.count }}</td>
                            </tr>
                            <tr>
                                <th>{% translate "Total Loot Value" %}:</th>
                                <td><strong>{{ fleet.get_total_loot_value|isk_format_full }}</strong></td>
                            </tr>
                            <tr>
                                <th>{% translate "Created" %}:</th>
                                <td>{{ fleet.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                        </table>
                        <div class="mt-3">
                            <strong>{% translate "Notes" %}:</strong>
                            {% if can_edit %}
                            <textarea name="notes" class="form-control mt-2" rows="3">{{ fleet.notes|default:'' }}</textarea>
                            {% else %}
                            {% if fleet.notes %}
                                <p>{{ fleet.notes|linebreaks }}</p>
                            {% else %}
                                <p class="text-muted">—</p>
                            {% endif %}
                            {% endif %}
                        </div>
                        {% if can_edit %}
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="fas fa-save"></i> {% translate "Save Changes" %}
                            </button>
                        </div>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Loot" %}</h5>
                </div>
                <div class="card-body">
                    {% if loot_pools %}
                        {% with loot_pool=loot_pools.first %}
                        <p class="mb-2">
                            <strong>{{ loot_pool.items.count }} {% translate "items" %}</strong> {% translate "valued at" %}
                            <strong class="text-primary">{{ loot_pool.total_value|isk_format_full }}</strong>
                        </p>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}" class="btn btn-sm btn-info">
                                <i class="fas fa-eye"></i> {% translate "View Details" %}
                            </a>
                            {% if can_edit %}
                            <a href="{% url 'aapayout:loot_reappraise' loot_pool.pk %}" class="btn btn-sm btn-warning">
                                <i class="fas fa-sync"></i> {% translate "Reappraise" %}
                            </a>
                            {% if loot_pool.payouts.exists %}
                            <form method="post" action="{% url 'aapayout:regenerate_payouts' loot_pool.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-secondary"
                                        title="{% translate 'Manually recalculate all payouts based on current fleet composition' %}">
                                    <i class="fas fa-calculator"></i> {% translate "Recalculate Payouts" %}
                                </button>
                            </form>
                            {% if not fleet.finalized %}
                            <form method="post" action="{% url 'aapayout:fleet_verify_payouts' fleet.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-info"
                                        title="{% translate 'Check ESI wallet for completed payments' %}">
                                    <i class="fas fa-check-double"></i> {% translate "Verify Payouts" %}
                                </button>
                            </form>
                            <form method="post" action="{% url 'aapayout:fleet_finalize' fleet.pk %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-success"
                                        onclick="return confirm('{% translate "Finalize this fleet and verify all payments via ESI wallet? This action cannot be undone." %}')"
                                        title="{% translate 'Finalize fleet and verify payments via ESI wallet journal' %}">
                                    <i class="fas fa-flag-checkered"></i> {% translate "Finalize Fleet" %}
                                </button>
                            </form>
                            {% endif %}
                            {% endif %}
                            {% if fleet.finalized %}
                            <span class="badge bg-success" title="{% translate 'Finalized at' %} {{ fleet.finalized_at|date:'Y-m-d H:i' }} {% translate 'by' %} {{ fleet.finalized_by.username }}">
                                <i class="fas fa-check-circle"></i> {% translate "Finalized" %}
                            </span>
                            {% endif %}
                            {% endif %}
                        </div>
                        {% endwith %}
                    {% else %}
                        <p class="text-muted">{% translate "No loot added yet" %}</p>
                        {% if can_edit %}
                        <a href="{% url 'aapayout:loot_create' fleet.pk %}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> {% translate "Add Loot" %}
                        </a>
                        {% if participants.count == 0 %}
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-info-circle"></i> {% translate "Tip: Payouts will be calculated automatically whether you add participants before or after loot" %}
                        </small>
                        {% endif %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- User Guidance Messages -->
    {% if loot_pools %}
        {% with loot_pool=loot_pools.first %}
            {% if fleet.finalized %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-check-circle"></i> {% translate "Fleet Finalized" %}</h6>
                            <p class="mb-2">
                                {% translate "This fleet was finalized by" %} <strong>{{ fleet.finalized_by.username }}</strong>
                                {% translate "on" %} {{ fleet.finalized_at|date:"Y-m-d H:i" }}.
                            </p>
                            <p class="small mb-0">
                                {% translate "Wallet verification has been run to automatically verify payments. Check the 'Verified' badges in the Participants table below to see verification status." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count > 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-info-circle"></i> {% translate "Paying Out ISK" %}</h6>
                            <p class="mb-2">{% translate "To pay participants, use the action buttons in the Participants table below:" %}</p>
                            <ul class="small mb-0">
                                <li><strong>{% translate "Copy Name" %}:</strong> {% translate "Copy character name to clipboard" %}</li>
                                <li><strong>{% translate "Copy Amount" %}:</strong> {% translate "Copy ISK amount (whole number, no decimals)" %}</li>
                                <li><strong>{% translate "Open Window" %}:</strong> {% translate "Open character window in EVE client (requires ESI)" %}</li>
                            </ul>
                            <p class="small text-muted mb-2 mt-2">
                                <strong>{% translate "Note:" %}</strong> {% translate "Payouts are automatically recalculated when you add, remove, or change participants." %}
                            </p>
                            <p class="small mb-0 mt-2">
                                <strong>{% translate "Finalize Fleet:" %}</strong>
                                {% translate "When you're done making payments in EVE, click 'Finalize Fleet' above to automatically verify all payments via ESI wallet journal." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count == 0 and participants.count > 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle"></i> {% translate "Loot Below Minimum Threshold" %}</h6>
                            <p class="mb-0">
                                {% translate "The loot value results in individual shares below 100M ISK per participant. As per fleet policy, all ISK from this fleet will go to the corporation. No participant payouts will be distributed." %}
                            </p>
                        </div>
                    </div>
                </div>
            {% elif loot_pool.payouts.count == 0 and participants.count == 0 %}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle"></i> {% translate "No Payouts Generated" %}</h6>
                            <p class="mb-0">{% translate "Add participants to the fleet below to generate payouts. Payouts will be calculated automatically." %}</p>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endwith %}
    {% endif %}

    <!-- Participants Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{% translate "Fleet Participants" %}</h5>
                        {% if can_edit %}
                            <div>
                                {% if esi_status.enabled %}
                                    {% if not esi_status.fc_character_id %}
                                        {# No FC character selected #}
                                        <button class="btn btn-sm btn-secondary me-2" disabled
                                                title="{% translate 'Select an FC character from the dropdown in the navigation bar' %}">
                                            <i class="fas fa-user-slash"></i> {% translate "Select FC Character" %}
                                        </button>
                                    {% elif not esi_status.has_scope %}
                                        {# FC character selected but no ESI token #}
                                        <a href="{% url 'authentication:dashboard' %}" class="btn btn-sm btn-warning me-2"
                                           title="{% translate 'Click to add ESI token with fleet read permissions for' %} {{ esi_status.fc_character_name }}">
                                            <i class="fas fa-key"></i> {% translate "Grant ESI Access" %}
                                        </a>
                                    {% elif esi_status.can_import %}
                                        {# Everything ready - show enabled import button #}
                                        <form method="post" action="{% url 'aapayout:fleet_import' fleet.pk %}" style="display: inline;">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-success me-2"
                                                    title="{% translate 'Import current fleet from EVE Online' %}">
                                                <i class="fas fa-download"></i> {% translate "Import ESI Fleet" %}
                                            </button>
                                        </form>
                                    {% else %}
                                        {# Fallback - show disabled button #}
                                        <button type="button" class="btn btn-sm btn-secondary me-2" disabled
                                                title="{{ esi_status.message }}">
                                            <i class="fas fa-ban"></i> {% translate "Import Unavailable" %}
                                        </button>
                                    {% endif %}
                                {% endif %}
                                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                                    <i class="fas fa-plus"></i> {% translate "Add Manual" %}
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    {% if can_edit and esi_status.enabled %}
                        {# Show helpful hints based on current state #}
                        {% if not esi_status.fc_character_id %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Select your FC character from the dropdown in the top navigation bar to enable ESI fleet import" %}
                            </small>
                        {% elif not esi_status.has_scope %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Click 'Grant ESI Access' to add ESI token with fleet read permissions for" %} {{ esi_status.fc_character_name }}
                            </small>
                        {% elif esi_status.can_import %}
                            <small class="text-muted d-block mt-2">
                                <i class="fas fa-info-circle"></i> {% translate "Join a fleet in EVE Online, then click 'Import ESI Fleet' to automatically add all members" %}
                            </small>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if participants %}
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Main Character" %}</th>
                                    <th>{% translate "Characters in Fleet" %}</th>
                                    <th>{% translate "Status" %}</th>
                                    {% if payout_map %}
                                        <th class="text-end">{% translate "Payout Amount" %}</th>
                                    {% endif %}
                                    {% if can_edit %}
                                        <th class="text-center">
                                            <i class="fas fa-binoculars" title="{% translate 'Scout' %}"></i>
                                            {% translate "Scout" %}
                                        </th>
                                        <th class="text-center">
                                            <i class="fas fa-ban" title="{% translate 'Exclude from Payout' %}"></i>
                                            {% translate "Exclude" %}
                                        </th>
                                        <th>{% translate "Actions" %}</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for group in participant_groups.values %}
                                {% with main_char=group.main_character main_char_id=group.main_character.id first_participant=group.participants.0 %}
                                <tr class="{% if group.excluded %}table-secondary text-muted{% endif %}"
                                    id="participant-row-{{ first_participant.pk }}">
                                    <td>
                                        <strong class="copy-on-click" data-copy-text="{{ main_char.name }}" style="cursor: pointer;" title="{% translate 'Click to copy name' %}">
                                            {{ main_char.name }}
                                        </strong>
                                    </td>
                                    <td>
                                        {% if group.participants|length > 1 %}
                                            <span class="badge bg-secondary me-1">{{ group.participants|length }} {% translate "characters" %}</span>
                                            {% for p in group.participants %}
                                                <span class="small text-muted">{{ p.character.name }}{% if not forloop.last %}, {% endif %}</span>
                                            {% endfor %}
                                        {% else %}
                                            {{ first_participant.character.name }}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if first_participant.is_active %}
                                            <span class="badge bg-success">{% translate "Active" %}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{% translate "Left" %}</span>
                                        {% endif %}
                                    </td>
                                    {% if payout_map %}
                                        <td class="text-end">
                                            {% if main_char_id in payout_map %}
                                                <strong class="copy-on-click" data-copy-text="{{ payout_map|get_item:main_char_id }}" style="cursor: pointer;" title="{% translate 'Click to copy amount (no decimals)' %}">
                                                    {{ payout_map|get_item:main_char_id|isk_format_full }}
                                                </strong>
                                                {% if group.is_scout %}
                                                    <span class="badge bg-success ms-1">{% translate "Scout" %}</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                    {% if can_edit %}
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input scout-checkbox"
                                               data-participant-id="{{ first_participant.pk }}"
                                               {% if group.is_scout %}checked{% endif %}>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input exclude-checkbox"
                                               data-participant-id="{{ first_participant.pk }}"
                                               {% if group.excluded %}checked{% endif %}>
                                    </td>
                                    <td>
                                        {% if main_char_id in existing_payouts %}
                                            {% with payout_obj=existing_payouts|get_item:main_char_id %}
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <button class="btn btn-outline-primary copy-name-btn"
                                                            data-character-name="{{ main_char.name }}"
                                                            title="{% translate 'Copy character name' %}">
                                                        <i class="fas fa-user"></i>
                                                    </button>
                                                    <button class="btn btn-outline-primary copy-amount-btn"
                                                            data-amount="{{ payout_map|get_item:main_char_id }}"
                                                            title="{% translate 'Copy ISK amount (no decimals)' %}">
                                                        <i class="fas fa-coins"></i>
                                                    </button>
                                                    <button class="btn btn-outline-info open-window-btn"
                                                            data-payout-id="{{ payout_obj.pk }}"
                                                            data-character-id="{{ main_char_id }}"
                                                            title="{% translate 'Open character window in EVE' %}">
                                                        <i class="fas fa-external-link-alt"></i>
                                                    </button>
                                                    {% if not payout_obj.verified and not fleet.finalized %}
                                                    <button class="btn btn-outline-success mark-verified-btn"
                                                            data-payout-id="{{ payout_obj.pk }}"
                                                            title="{% translate 'Mark as verified (manual override)' %}">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                    {% endif %}
                                                </div>
                                                {% if payout_obj.verified %}
                                                    <span class="badge bg-success" title="{% translate 'Verified at' %} {{ payout_obj.verified_at|date:'Y-m-d H:i' }}">
                                                        <i class="fas fa-check-circle"></i> {% translate "Verified" %}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary" title="{% translate 'Not yet verified' %}">
                                                        <i class="fas fa-clock"></i> {% translate "Pending" %}
                                                    </span>
                                                {% endif %}
                                            </div>
                                            {% endwith %}
                                        {% else %}
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'aapayout:participant_edit' first_participant.pk %}" class="btn btn-warning" title="{% translate 'Edit' %}">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form method="post" action="{% url 'aapayout:participant_remove' first_participant.pk %}" style="display: inline;">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-danger btn-sm" title="{% translate 'Remove' %}"
                                                            onclick="return confirm('{% translate "Remove this participant?" %}')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endwith %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">{% translate "No participants added yet" %}</p>
                    {% if can_edit %}
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                        <i class="fas fa-plus"></i> {% translate "Add First Participant" %}
                    </button>
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Add Participant Modal -->
    {% if can_edit %}
    <div class="modal fade" id="addParticipantModal" tabindex="-1" aria-labelledby="addParticipantModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addParticipantModalLabel">{% translate "Add Participant" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{% url 'aapayout:participant_add' fleet.pk %}" id="participant-add-form">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="mb-3 position-relative">
                            <label for="character_name" class="form-label">{% translate "Character Name" %} *</label>
                            <input type="text" name="character_name" id="character_name"
                                   class="form-control character-autocomplete"
                                   placeholder="{% translate 'Start typing character name...' %}"
                                   autocomplete="off" required>
                            <div id="participant-suggestions" class="list-group position-absolute w-100"
                                 style="z-index: 9999; display: none; max-height: 300px; overflow-y: auto;"></div>
                            <small class="form-text text-muted">{% translate "Type to search for characters in Alliance Auth" %}</small>
                        </div>
                        <div class="mb-3">
                            <label for="role" class="form-label">{% translate "Role" %}</label>
                            <select name="role" id="role" class="form-select">
                                <option value="regular">{% translate "Regular" %}</option>
                                <option value="scout">{% translate "Scout" %}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                        <button type="submit" class="btn btn-primary">{% translate "Add Participant" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}