{% extends "base.html" %}

{% block title %}{{ _('Sites List') }}{% endblock %}

{% block content %}
<div class="page-header">
    <h2><i class="fas fa-map-marked-alt"></i> {{ _('Archaeological Sites') }}</h2>
    <div>
        <a href="{{ url_for('sites_map') }}" class="btn btn-success">
            <i class="fas fa-map"></i> {{ _('Map View') }}
        </a>
        <a href="{{ url_for('create_site') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> {{ _('New Site') }}
        </a>
    </div>
</div>

<!-- Search Form -->
<form method="GET" class="mb-4">
    <div class="input-group">
        <input type="text" name="search" class="form-control" placeholder="{{ _('Search site...') }}" value="{{ search or '' }}">
        <button class="btn btn-outline-secondary" type="submit">{{ _('Search') }}</button>
        {% if search %}
        <a href="{{ url_for('sites_list') }}" class="btn btn-outline-secondary">{{ _('Reset') }}</a>
        {% endif %}
    </div>
</form>

<!-- Sites Table -->
{% if sites %}
<div class="table-responsive">
    <!-- Desktop/Tablet Table View -->
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>{{ _('Name') }}</th>
                <th>{{ _('Country') }}</th>
                <th>{{ _('Region') }}</th>
                <th>{{ _('Municipality') }}</th>
                <th class="text-center">US</th>
                <th class="text-center">{{ _('Materials') }}</th>
                <th>{{ _('Actions') }}</th>
            </tr>
        </thead>
        <tbody>
            {% for site in sites %}
            {% set counts = site_counts.get(site.sito, {'us': 0, 'inv': 0}) %}
            <tr>
                <td><a href="{{ url_for('view_site', site_id=site.id_sito) }}">{{ site.sito }}</a></td>
                <td>{{ site.nazione or '-' }}</td>
                <td>{{ site.regione or '-' }}</td>
                <td>{{ site.comune or '-' }}</td>
                <td class="text-center"><span class="badge bg-info">{{ counts.us }}</span></td>
                <td class="text-center"><span class="badge bg-secondary">{{ counts.inv }}</span></td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <a href="{{ url_for('view_site', site_id=site.id_sito) }}" class="btn btn-info">
                            <i class="fas fa-eye"></i> <span class="d-none d-lg-inline">{{ _('Details') }}</span>
                        </a>
                        <a href="{{ url_for('edit_site', site_id=site.id_sito) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> <span class="d-none d-lg-inline">{{ _('Edit') }}</span>
                        </a>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-project-diagram"></i> <span class="d-none d-lg-inline">Matrix</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('harris_matrix', site_name=site.sito) }}">
                                    <i class="fas fa-chart-bar"></i> Matplotlib
                                </a></li>
                                <li><a class="dropdown-item" href="{{ url_for('harris_matrix_graphviz', site_name=site.sito, grouping='period_area') }}">
                                    <i class="fas fa-project-diagram"></i> Graphviz
                                </a></li>
                            </ul>
                        </div>
                        <a href="{{ url_for('validate_stratigraphic', site_name=site.sito) }}" class="btn btn-warning" title="{{ _('Validate Relationships') }}">
                            <i class="fas fa-check-circle"></i> <span class="d-none d-lg-inline">{{ _('Validate') }}</span>
                        </a>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-file-pdf"></i> <span class="d-none d-lg-inline">PDF</span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('export_site_pdf', site_id=site.id_sito) }}">
                                    <i class="fas fa-file-alt"></i> {{ _('Site Report') }}
                                </a></li>
                                <li><a class="dropdown-item" href="{{ url_for('export_site_dossier', site_id=site.id_sito) }}">
                                    <i class="fas fa-book"></i> {{ _('Complete Dossier') }}
                                </a></li>
                                <li><a class="dropdown-item" href="{{ url_for('export_site_pdf_with_matrix', site_name=site.sito) }}">
                                    <i class="fas fa-project-diagram"></i> {{ _('Harris Matrix PDF') }}
                                </a></li>
                            </ul>
                        </div>
                        <button class="btn btn-danger btn-sm delete-site-btn"
                                data-site-id="{{ site.id_sito }}"
                                data-site-name="{{ site.sito }}"
                                title="{{ _('Delete Site') }}">
                            <i class="fas fa-trash"></i> <span class="d-none d-lg-inline">{{ _('Delete') }}</span>
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Mobile Card View -->
    {% for site in sites %}
    <div class="mobile-card">
        <div class="mobile-card-header">
            <i class="fas fa-map-marked-alt"></i> {{ site.sito }}
        </div>
        <div class="mobile-card-body">
            {% if site.nazione %}
            <div class="label">{{ _('Country') }}</div>
            <div class="value">{{ site.nazione }}</div>
            {% endif %}
            {% if site.regione %}
            <div class="label">{{ _('Region') }}</div>
            <div class="value">{{ site.regione }}</div>
            {% endif %}
            {% if site.comune %}
            <div class="label">{{ _('Municipality') }}</div>
            <div class="value">{{ site.comune }}</div>
            {% endif %}
            {% set counts = site_counts.get(site.sito, {'us': 0, 'inv': 0}) %}
            <div class="d-flex gap-3 mt-2">
                <span class="badge bg-info">US: {{ counts.us }}</span>
                <span class="badge bg-secondary">{{ _('Materials') }}: {{ counts.inv }}</span>
            </div>
        </div>
        <div class="mobile-card-actions">
            <a href="{{ url_for('view_site', site_id=site.id_sito) }}" class="btn btn-info btn-sm">
                <i class="fas fa-eye"></i> {{ _('View Details') }}
            </a>
            <a href="{{ url_for('edit_site', site_id=site.id_sito) }}" class="btn btn-primary btn-sm">
                <i class="fas fa-edit"></i> {{ _('Edit Site') }}
            </a>
            <a href="{{ url_for('harris_matrix', site_name=site.sito) }}" class="btn btn-success btn-sm">
                <i class="fas fa-project-diagram"></i> {{ _('Harris Matrix') }}
            </a>
            <a href="{{ url_for('validate_stratigraphic', site_name=site.sito) }}" class="btn btn-warning btn-sm">
                <i class="fas fa-check-circle"></i> {{ _('Validate Relationships') }}
            </a>
            <a href="{{ url_for('export_site_pdf', site_id=site.id_sito) }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-file-pdf"></i> {{ _('Export PDF') }}
            </a>
            <button class="btn btn-danger btn-sm delete-site-btn"
                    data-site-id="{{ site.id_sito }}"
                    data-site-name="{{ site.sito }}">
                <i class="fas fa-trash"></i> {{ _('Delete Site') }}
            </button>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
<div class="mt-3 d-flex justify-content-between align-items-center">
    <p class="text-muted mb-0">{{ _('Total sites') }}: {{ total }} — {{ _('Page') }} {{ page }}/{{ total_pages }}</p>
    {% if total_pages > 1 %}
    <nav aria-label="Page navigation">
        <ul class="pagination mb-0">
            <li class="page-item {% if page <= 1 %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for('sites_list', page=page-1, per_page=per_page, search=search) }}">{{ _('Previous') }}</a>
            </li>
            {% set start_page = [1, page - 3] | max %}
            {% set end_page = [total_pages, page + 3] | min %}
            {% if start_page > 1 %}
            <li class="page-item"><a class="page-link" href="{{ url_for('sites_list', page=1, per_page=per_page, search=search) }}">1</a></li>
            {% if start_page > 2 %}<li class="page-item disabled"><span class="page-link">...</span></li>{% endif %}
            {% endif %}
            {% for p in range(start_page, end_page + 1) %}
            <li class="page-item {% if p == page %}active{% endif %}">
                <a class="page-link" href="{{ url_for('sites_list', page=p, per_page=per_page, search=search) }}">{{ p }}</a>
            </li>
            {% endfor %}
            {% if end_page < total_pages %}
            {% if end_page < total_pages - 1 %}<li class="page-item disabled"><span class="page-link">...</span></li>{% endif %}
            <li class="page-item"><a class="page-link" href="{{ url_for('sites_list', page=total_pages, per_page=per_page, search=search) }}">{{ total_pages }}</a></li>
            {% endif %}
            <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for('sites_list', page=page+1, per_page=per_page, search=search) }}">{{ _('Next') }}</a>
            </li>
        </ul>
    </nav>
    {% endif %}
</div>
{% else %}
<div class="alert alert-info">
    {{ _('No sites found.') }} <a href="{{ url_for('create_site') }}">{{ _('Create the first site') }}</a>
</div>
{% endif %}

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteSiteModal" tabindex="-1" aria-labelledby="deleteSiteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteSiteModalLabel">
                    <i class="fas fa-exclamation-triangle"></i> {{ _('Confirm Deletion') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-3">
                    <strong>{{ _('Are you sure you want to delete this site?') }}</strong>
                </p>
                <p class="text-danger">
                    <i class="fas fa-exclamation-circle"></i> {{ _('This action will permanently delete:') }}
                </p>
                <ul>
                    <li>{{ _('The site') }}: <strong id="modal-site-name"></strong></li>
                    <li>{{ _('All stratigraphic units (US)') }}</li>
                    <li>{{ _('All inventory records') }}</li>
                    <li>{{ _('All stratigraphic relationships') }}</li>
                    <li>{{ _('All periodization data') }}</li>
                </ul>
                <p class="text-danger fw-bold">
                    <i class="fas fa-warning"></i> {{ _('This action cannot be undone!') }}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> {{ _('Cancel') }}
                </button>
                <button type="button" class="btn btn-danger" id="confirm-delete-btn">
                    <i class="fas fa-trash"></i> {{ _('Delete Site') }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const deleteSiteModal = new bootstrap.Modal(document.getElementById('deleteSiteModal'));
    let siteIdToDelete = null;

    // Handle delete button clicks
    document.querySelectorAll('.delete-site-btn').forEach(button => {
        button.addEventListener('click', function() {
            siteIdToDelete = this.dataset.siteId;
            const siteName = this.dataset.siteName;

            // Update modal with site name
            document.getElementById('modal-site-name').textContent = siteName;

            // Show modal
            deleteSiteModal.show();
        });
    });

    // Handle confirm delete
    document.getElementById('confirm-delete-btn').addEventListener('click', async function() {
        if (!siteIdToDelete) return;

        const deleteBtn = this;
        const originalText = deleteBtn.innerHTML;

        // Disable button and show loading
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ _("Deleting...") }}';

        try {
            const response = await fetch(`/sites/${siteIdToDelete}/delete`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();

            if (data.success) {
                // Show success message
                const alertDiv = document.createElement('div');
                alertDiv.className = 'alert alert-success alert-dismissible fade show';
                alertDiv.innerHTML = `
                    <i class="fas fa-check-circle"></i> ${data.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.page-header').insertAdjacentElement('beforebegin', alertDiv);

                // Close modal
                deleteSiteModal.hide();

                // Reload page after short delay
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                // Show error message
                alert(`{{ _('Error') }}: ${data.message}`);
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = originalText;
            }
        } catch (error) {
            console.error('Delete error:', error);
            alert(`{{ _('Error deleting site') }}: ${error.message}`);
            deleteBtn.disabled = false;
            deleteBtn.innerHTML = originalText;
        }
    });

    // Reset state when modal is hidden
    document.getElementById('deleteSiteModal').addEventListener('hidden.bs.modal', function() {
        siteIdToDelete = null;
        document.getElementById('confirm-delete-btn').disabled = false;
        document.getElementById('confirm-delete-btn').innerHTML = '<i class="fas fa-trash"></i> {{ _("Delete Site") }}';
    });
});
</script>
{% endblock %}