{% extends 'base.html.twig' %}

{% block title %}Trailer-Schadensmeldungen{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .damage-report-text {
            max-width: 380px;
            white-space: normal;
        }

        .damage-thumb-list {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
            max-width: 172px;
        }

        .damage-thumb {
            width: 46px;
            height: 46px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .damage-action-stack {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            min-width: 170px;
        }

        .damage-action-stack .form-input {
            min-width: 160px;
        }

        .damage-filter-bar {
            gap: 0.6rem;
        }

        .damage-filter-bar .filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 0.55rem 1.15rem;
            border-radius: 10px;
            border: 1px solid #d8e1ee;
            background: #fff;
            color: #334155;
            text-decoration: none;
            font-weight: 600;
            line-height: 1;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            transition: all 0.16s ease;
        }

        .damage-filter-bar .filter-btn:hover {
            border-color: #a4bde6;
            background: #f8fbff;
            color: #1e293b;
            text-decoration: none;
        }

        .damage-filter-bar .filter-btn.active {
            border-color: #2563eb;
            background: linear-gradient(135deg, #2f73ff, #1250dc);
            color: #fff;
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
        }

        .damage-filter-bar .filter-btn:focus-visible {
            outline: 2px solid #93c5fd;
            outline-offset: 2px;
        }

        #damageDetailModal .modal-box {
            max-width: 860px;
        }

        .damage-modal-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .damage-modal-label {
            margin: 0 0 0.2rem;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #64748b;
            font-weight: 600;
        }

        .damage-modal-value {
            margin: 0;
            color: #111827;
        }

        .damage-modal-description {
            white-space: pre-wrap;
            margin: 0;
            color: #111827;
        }

        .damage-modal-photos {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.5rem;
        }

        .damage-modal-photo {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .damage-modal-empty {
            color: #64748b;
            font-size: 0.9rem;
        }

        @media (max-width: 900px) {
            .damage-modal-grid {
                grid-template-columns: 1fr;
            }

            .damage-modal-photos {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
    </style>
{% endblock %}

{% block content %}
{% set damageTypeLabels = {
    body: 'Karosserie',
    lighting: 'Beleuchtung',
    tire: 'Reifen/Fahrwerk',
    brake: 'Bremse',
    coupling: 'Kupplung',
    other: 'Sonstiges'
} %}
{% set severityLabels = {
    low: 'Niedrig',
    medium: 'Mittel',
    high: 'Hoch',
    critical: 'Kritisch'
} %}
{% set statusLabels = {
    new: 'Neu',
    in_progress: 'In Bearbeitung',
    resolved: 'Erledigt'
} %}
{% set severityBadgeClass = {
    low: 'badge-info',
    medium: 'badge-info',
    high: 'badge-warning',
    critical: 'badge-danger'
} %}
{% set statusBadgeClass = {
    new: 'badge-danger',
    in_progress: 'badge-warning',
    resolved: 'badge-success'
} %}

<div class="page-header">
    <div class="breadcrumbs">
        <a href="{{ path('app_dashboard') }}">Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <span>Trailer-Schadensmeldungen</span>
    </div>
    <div class="delivery-page-header">
        <h1><i class="fas fa-triangle-exclamation"></i> Trailer-Schadensmeldungen</h1>
    </div>
</div>

{% for message in app.flashes('success') %}
    <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ message }}</div>
{% endfor %}
{% for message in app.flashes('error') %}
    <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ message }}</div>
{% endfor %}

<div class="content-card mb-1">
    <form method="get" class="dashboard-controls mb-0">
        <div class="dashboard-filter damage-filter-bar">
            <a href="{{ path('app_trailer_damage_admin_list') }}" class="filter-btn {{ statusFilter == '' ? 'active' : '' }}">Alle</a>
            <a href="{{ path('app_trailer_damage_admin_list', {status: 'new'}) }}" class="filter-btn {{ statusFilter == 'new' ? 'active' : '' }}">Neu</a>
            <a href="{{ path('app_trailer_damage_admin_list', {status: 'in_progress'}) }}" class="filter-btn {{ statusFilter == 'in_progress' ? 'active' : '' }}">In Bearbeitung</a>
            <a href="{{ path('app_trailer_damage_admin_list', {status: 'resolved'}) }}" class="filter-btn {{ statusFilter == 'resolved' ? 'active' : '' }}">Erledigt</a>
        </div>
    </form>
</div>

<div class="content-card">
    {% if reports is empty %}
        <div class="empty-state-card">
            <i class="fas fa-check-circle empty-state-icon-user"></i>
            <p>Keine Schadensmeldungen vorhanden.</p>
        </div>
    {% else %}
        <div class="table-container">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Zeit</th>
                    <th>Trailer</th>
                    <th>Typ / Priorität</th>
                    <th>Beschreibung</th>
                    <th>Fotos</th>
                    <th>Status</th>
                    <th>Aktion</th>
                </tr>
                </thead>
                <tbody>
                {% for report in reports %}
                    <tr>
                        <td class="font-mono text-sm">{{ report.reportedAt|date('d.m.Y H:i') }}</td>
                        <td>
                            <strong>{{ report.datalogger.name }}</strong><br>
                            <small class="text-secondary">{{ report.locationOnTrailer ?? 'Position nicht angegeben' }}</small>
                        </td>
                        <td>
                            <span class="badge badge-info">{{ damageTypeLabels[report.damageType] ?? report.damageType }}</span>
                            <span class="badge {{ severityBadgeClass[report.severity] ?? 'badge-info' }}">{{ severityLabels[report.severity] ?? report.severity }}</span>
                        </td>
                        <td class="damage-report-text">
                            {{ report.description|slice(0, 180) }}{% if report.description|length > 180 %}…{% endif %}
                            {% if report.reporterName %}
                                <br><small class="text-secondary">von {{ report.reporterName }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% set photos = report.photos %}
                            {% if photos is not empty %}
                                <div class="damage-thumb-list">
                                    {% for photo in photos %}
                                        <a href="{{ photo }}" target="_blank" rel="noopener">
                                            <img src="{{ photo }}" alt="Foto" class="damage-thumb">
                                        </a>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <span class="text-secondary">—</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge {{ statusBadgeClass[report.status] ?? 'badge-info' }}">
                                {{ statusLabels[report.status] ?? report.status }}
                            </span>
                        </td>
                        <td>
                            {% set modalPayload = {
                                id: report.id,
                                reportedAt: report.reportedAt|date('d.m.Y H:i') ~ ' Uhr',
                                trailer: report.datalogger.name,
                                locationOnTrailer: report.locationOnTrailer ?? '',
                                damageType: damageTypeLabels[report.damageType] ?? report.damageType,
                                severity: severityLabels[report.severity] ?? report.severity,
                                status: statusLabels[report.status] ?? report.status,
                                description: report.description,
                                reporterName: report.reporterName ?? '',
                                reporterEmail: report.reporterEmail ?? '',
                                reporterPhone: report.reporterPhone ?? '',
                                photos: report.photos ?? []
                            } %}
                            <div class="damage-action-stack">
                                <button
                                    type="button"
                                    class="btn btn-secondary btn-small js-open-damage-modal"
                                    data-report="{{ modalPayload|json_encode|e('html_attr') }}"
                                >
                                    <i class="fas fa-eye"></i> Details
                                </button>
                                <a href="{{ path('app_trailer_damage_public', {token: report.datalogger.qrPublicToken}) }}" target="_blank" rel="noopener" class="btn btn-primary btn-small">
                                    Formular öffnen
                                </a>
                                <form method="post" action="{{ path('app_trailer_damage_admin_status', {id: report.id}) }}" class="form-inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('damage_report_status_' ~ report.id) }}">
                                    <select name="status" class="form-input">
                                        <option value="new" {{ report.status == 'new' ? 'selected' : '' }}>Neu</option>
                                        <option value="in_progress" {{ report.status == 'in_progress' ? 'selected' : '' }}>In Bearbeitung</option>
                                        <option value="resolved" {{ report.status == 'resolved' ? 'selected' : '' }}>Erledigt</option>
                                    </select>
                                    <button type="submit" class="btn btn-secondary btn-small">Speichern</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>

<div id="damageDetailModal" class="modal-overlay" aria-hidden="true">
    <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="damageDetailTitle">
        <div class="modal-header">
            <h3 id="damageDetailTitle"><i class="fas fa-triangle-exclamation"></i> Schadendetails</h3>
            <button type="button" id="closeDamageModal" class="modal-close-btn" aria-label="Schließen">&times;</button>
        </div>
        <div class="damage-modal-grid">
            <div>
                <p class="damage-modal-label">Zeit</p>
                <p class="damage-modal-value" id="modalDamageReportedAt">—</p>
            </div>
            <div>
                <p class="damage-modal-label">Trailer</p>
                <p class="damage-modal-value" id="modalDamageTrailer">—</p>
            </div>
            <div>
                <p class="damage-modal-label">Position am Trailer</p>
                <p class="damage-modal-value" id="modalDamageLocation">—</p>
            </div>
            <div>
                <p class="damage-modal-label">Status</p>
                <p class="damage-modal-value" id="modalDamageStatus">—</p>
            </div>
            <div>
                <p class="damage-modal-label">Schadentyp</p>
                <p class="damage-modal-value" id="modalDamageType">—</p>
            </div>
            <div>
                <p class="damage-modal-label">Priorität</p>
                <p class="damage-modal-value" id="modalDamageSeverity">—</p>
            </div>
        </div>
        <div class="mt-1">
            <p class="damage-modal-label">Beschreibung</p>
            <p class="damage-modal-description" id="modalDamageDescription">—</p>
        </div>
        <div class="mt-1">
            <p class="damage-modal-label">Rückmeldung</p>
            <p class="damage-modal-value" id="modalDamageContact">—</p>
        </div>
        <div class="mt-1">
            <p class="damage-modal-label">Fotos</p>
            <div id="modalDamagePhotos" class="damage-modal-photos"></div>
            <p id="modalDamageNoPhotos" class="damage-modal-empty" hidden>Keine Fotos vorhanden.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            var modal = document.getElementById('damageDetailModal');
            var closeBtn = document.getElementById('closeDamageModal');
            if (!modal || !closeBtn) {
                return;
            }

            var openButtons = document.querySelectorAll('.js-open-damage-modal');
            var elReportedAt = document.getElementById('modalDamageReportedAt');
            var elTrailer = document.getElementById('modalDamageTrailer');
            var elLocation = document.getElementById('modalDamageLocation');
            var elStatus = document.getElementById('modalDamageStatus');
            var elType = document.getElementById('modalDamageType');
            var elSeverity = document.getElementById('modalDamageSeverity');
            var elDescription = document.getElementById('modalDamageDescription');
            var elContact = document.getElementById('modalDamageContact');
            var photosWrap = document.getElementById('modalDamagePhotos');
            var noPhotos = document.getElementById('modalDamageNoPhotos');

            function setText(element, value, fallback) {
                if (!element) {
                    return;
                }
                element.textContent = value && String(value).trim() !== '' ? value : fallback;
            }

            function closeModal() {
                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
            }

            function openModal() {
                modal.classList.add('is-open');
                modal.setAttribute('aria-hidden', 'false');
            }

            function renderPhotos(photos) {
                if (!photosWrap || !noPhotos) {
                    return;
                }
                photosWrap.innerHTML = '';
                var validPhotos = Array.isArray(photos) ? photos.filter(Boolean) : [];
                if (!validPhotos.length) {
                    noPhotos.hidden = false;
                    return;
                }
                noPhotos.hidden = true;
                validPhotos.forEach(function (photoUrl) {
                    var link = document.createElement('a');
                    link.href = photoUrl;
                    link.target = '_blank';
                    link.rel = 'noopener';
                    var img = document.createElement('img');
                    img.src = photoUrl;
                    img.alt = 'Schadenfoto';
                    img.className = 'damage-modal-photo';
                    link.appendChild(img);
                    photosWrap.appendChild(link);
                });
            }

            openButtons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var payloadRaw = btn.getAttribute('data-report') || '{}';
                    var data;
                    try {
                        data = JSON.parse(payloadRaw);
                    } catch (e) {
                        data = {};
                    }

                    setText(elReportedAt, data.reportedAt, '—');
                    setText(elTrailer, data.trailer, '—');
                    setText(elLocation, data.locationOnTrailer, 'Nicht angegeben');
                    setText(elStatus, data.status, '—');
                    setText(elType, data.damageType, '—');
                    setText(elSeverity, data.severity, '—');
                    setText(elDescription, data.description, '—');

                    var contactParts = [data.reporterName, data.reporterEmail, data.reporterPhone]
                        .filter(function (entry) {
                            return entry && String(entry).trim() !== '';
                        });
                    setText(elContact, contactParts.join(' | '), 'Keine Rückmeldung angegeben');
                    renderPhotos(data.photos);
                    openModal();
                });
            });

            closeBtn.addEventListener('click', closeModal);
            modal.addEventListener('click', function (event) {
                if (event.target === modal) {
                    closeModal();
                }
            });
            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeModal();
                }
            });
        })();
    </script>
{% endblock %}