<?php
$objets_en_cours = $pdo->query("SELECT * FROM objets_trouves WHERE statut = 'Non réclamé' ORDER BY date_creation DESC")->fetchAll();
$objets_historique = $pdo->query("SELECT * FROM objets_trouves WHERE statut = 'Restitué' ORDER BY date_restitution DESC, date_creation DESC LIMIT 50")->fetchAll();

$placeholder = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNmOGY5ZmEiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiPkltYWdlIG1hbnF1YW50ZTwvdGV4dD48L3N2Zz4=";
?>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<div class="header-section">
    <h1 style="margin: 0; color: #333; font-size: 1.5em;">Objets trouvés sur la commune</h1>
    <?php if ($est_privilegie): ?>
        <button class="btn-ajouter" onclick="document.getElementById('addObjetModal').style.display='flex'; document.getElementById('map_add').style.display='none';">+ Déclarer un objet</button>
    <?php endif; ?>
</div>

<?php if (!$est_privilegie): ?>
    <div class="msg-avertissement">
        ℹ️ Si vous reconnaissez un de ces objets, merci de vous rapprocher de la mairie avec une preuve d'appartenance.
    </div>
<?php endif; ?>

<div class="grille-cartes">
    <?php foreach ($objets_en_cours as $obj): ?>
    <div class="carte">
        <div class="carte-lien carte-lien-inactif">
            <img src="images/objets_trouves/<?= htmlspecialchars($obj['image']) ?>" alt="<?= htmlspecialchars($obj['titre']) ?>" onerror="this.onerror=null; this.src='<?= $placeholder ?>';">
            
            <div class="carte-contenu">
                <h3><?= htmlspecialchars($obj['titre']) ?></h3>
                
                <p style="margin: 5px 0; font-size: 0.9em; color: #555;">
                    <strong>Trouvé le :</strong> <?= date('d/m/Y', strtotime($obj['date_creation'])) ?><br>
                    <strong>Lieu :</strong> <?= htmlspecialchars($obj['lieu']) ?>
                </p>
                
                <p style="font-size: 0.9em; color: #444; background: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 5px;">
                    <?= nl2br(htmlspecialchars($obj['description'])) ?>
                </p>
                
                <div style="text-align: center; margin-top: auto;">
                    <span class="badge bg-orange"><?= $obj['statut'] ?></span>
                </div>

                <div class="map-mobile-only">
                    <iframe loading="lazy" width="100%" height="150" frameborder="0" style="border:0;" 
                        src="https://maps.google.com/maps?q=<?= urlencode($obj['lieu'] . ', Saint-Vaast-en-Chaussée, France') ?>&t=&z=16&ie=UTF8&iwloc=&output=embed">
                    </iframe>
                </div>
            </div>
        </div>

        <?php if ($est_privilegie): ?>
        <?php $desc_js = htmlspecialchars(addslashes(str_replace(["\r", "\n"], ["", "\\n"], $obj['description']))); ?>
        <div class="carte-actions">
            <button onclick="openEditObjetModal(<?= $obj['id'] ?>, '<?= htmlspecialchars(addslashes($obj['titre'])) ?>', '<?= htmlspecialchars(addslashes($obj['lieu'])) ?>', '<?= $desc_js ?>')" style="flex: 1; padding: 6px 2px; background: #607d8b; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8em; text-align: center;">Modifier</button>

            <form method="POST" onsubmit="return confirm('Confirmer la restitution ?');" style="margin: 0; flex: 1; display: flex;">
                <input type="hidden" name="restituer_objet_id" value="<?= $obj['id'] ?>">
                <button type="submit" style="flex: 1; width: 100%; padding: 6px 2px; background: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8em; text-align: center;">Restituer</button>
            </form>

            <form method="POST" onsubmit="return confirm('Supprimer définitivement cette annonce ?');" style="margin: 0; flex: 1; display: flex;">
                <input type="hidden" name="delete_objet_id" value="<?= $obj['id'] ?>">
                <button type="submit" style="flex: 1; width: 100%; padding: 6px 2px; background: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.8em; text-align: center;">Supprimer</button>
            </form>
        </div>
        <?php endif; ?>
    </div>
    <?php endforeach; ?>
    
    <?php if (empty($objets_en_cours)): ?>
        <p style="grid-column: 1 / -1; text-align: center; color: #777; padding: 20px;">Aucun objet trouvé n'est actuellement signalé.</p>
    <?php endif; ?>
</div>

<?php if (count($objets_historique) > 0): ?>
    <h2 style="margin-top: 50px; color: #888; font-size: 1.3em; border-bottom: 2px solid #eee; padding-bottom: 10px;">Historique des restitutions</h2>
    <table class="table-prets" style="width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9em; opacity: 0.85;">
        <thead>
            <tr>
                <th style="padding: 10px; text-align: left; border-bottom: 1px solid #ccc;">Objet</th>
                <th style="padding: 10px; text-align: left; border-bottom: 1px solid #ccc;">Détails de la découverte</th>
                <th style="padding: 10px; text-align: left; border-bottom: 1px solid #ccc;">Statut</th>
                <?php if ($est_privilegie): ?>
                    <th style="padding: 10px; text-align: right; border-bottom: 1px solid #ccc;">Actions</th>
                <?php endif; ?>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($objets_historique as $hist): ?>
            <tr>
                <td style="padding: 10px; border-bottom: 1px solid #eee; vertical-align: middle;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <img src="images/objets_trouves/<?= htmlspecialchars($hist['image']) ?>" onerror="this.onerror=null; this.src='<?= $placeholder ?>';" style="width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid #ccc;">
                        <strong><?= htmlspecialchars($hist['titre']) ?></strong>
                    </div>
                </td>
                <td style="padding: 10px; border-bottom: 1px solid #eee;">
                    Trouvé le <?= date('d/m/Y', strtotime($hist['date_creation'])) ?><br>
                    <small style="color: #666;">Lieu : <?= htmlspecialchars($hist['lieu']) ?></small>
                </td>
                <td style="padding: 10px; border-bottom: 1px solid #eee;">
                    <span class="badge bg-vert" style="padding: 3px 8px; font-size: 0.8em;"><?= $hist['statut'] ?></span><br>
                    <?php if (!empty($hist['date_restitution'])): ?>
                        <small style="color: #666; display: inline-block; margin-top: 4px;">Le <?= date('d/m/Y', strtotime($hist['date_restitution'])) ?></small>
                    <?php endif; ?>
                </td>
                
                <?php if ($est_privilegie): ?>
                <td style="padding: 10px; border-bottom: 1px solid #eee; text-align: right;">
                    <form method="POST" onsubmit="return confirm('Voulez-vous effacer cet objet de l\'historique ?');" style="margin: 0; display: inline-block;">
                        <input type="hidden" name="delete_objet_id" value="<?= $hist['id'] ?>">
                        <button type="submit" style="padding: 4px 8px; background: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8em;">Supprimer</button>
                    </form>
                </td>
                <?php endif; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php endif; ?>


<?php if ($est_privilegie): ?>
<div id="addObjetModal" class="modal">
    <div class="modal-content">
        <span class="close-btn" onclick="document.getElementById('addObjetModal').style.display='none'">×</span>
        <h2>Déclarer un objet trouvé</h2>
        <form method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label>Qu'est-ce que c'est ? (Titre)</label>
                <input type="text" name="titre_objet" placeholder="Ex: Trousseau de clés, Doudou ours..." required>
            </div>
            
            <div class="form-group">
                <label>Où l'avez-vous trouvé ?</label>
                <div style="display: flex; gap: 8px;">
                    <input type="text" name="lieu_objet" id="add_lieu_objet" placeholder="Adresse manuelle ou 📍..." required style="flex: 1;">
                    <button type="button" onclick="triggerGeolocate('map_add', 'add_lieu_objet')" style="background: #607d8b; color: white; border: none; border-radius: 8px; padding: 0 15px; cursor: pointer; font-size: 1.2em;" title="Me localiser / Ouvrir la carte">📍</button>
                </div>
                <div id="map_add" style="height: 200px; width: 100%; margin-top: 10px; border-radius: 8px; display: none; z-index: 1;"></div>
                <small style="color: #666; display: block; margin-top: 5px;">Utilisez le bouton 📍 pour vous géolocaliser. Vous pouvez déplacer le marqueur sur la carte pour ajuster l'adresse.</small>
            </div>

            <div class="form-group">
                <label>Description précise :</label>
                <textarea name="description_objet" rows="3" placeholder="Couleur, marque, signes particuliers..." required></textarea>
            </div>
            <div class="form-group">
                <label>Photo (Optionnel) :</label>
                <input type="file" name="image_objet" accept="image/png, image/jpeg, image/jpg, image/webp" capture="environment">
            </div>
            <button type="submit" name="add_objet" class="btn-submit" style="margin-top: 10px;">Enregistrer l'objet</button>
        </form>
    </div>
</div>

<div id="editObjetModal" class="modal">
    <div class="modal-content">
        <span class="close-btn" onclick="document.getElementById('editObjetModal').style.display='none'">×</span>
        <h2>Modifier un objet trouvé</h2>
        <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="edit_objet_id" id="edit_objet_id">
            <div class="form-group">
                <label>Titre :</label>
                <input type="text" name="edit_titre_objet" id="edit_titre_objet" required>
            </div>
            
            <div class="form-group">
                <label>Lieu exact :</label>
                <div style="display: flex; gap: 8px;">
                    <input type="text" name="edit_lieu_objet" id="edit_lieu_objet" required style="flex: 1;">
                    <button type="button" onclick="triggerGeolocate('map_edit', 'edit_lieu_objet')" style="background: #607d8b; color: white; border: none; border-radius: 8px; padding: 0 15px; cursor: pointer; font-size: 1.2em;" title="Ouvrir la carte">📍</button>
                </div>
                <div id="map_edit" style="height: 200px; width: 100%; margin-top: 10px; border-radius: 8px; display: none; z-index: 1;"></div>
            </div>

            <div class="form-group">
                <label>Description précise :</label>
                <textarea name="edit_description_objet" id="edit_description_objet" rows="3" required></textarea>
            </div>
            <div class="form-group">
                <label>Remplacer l'image (Optionnel) :</label>
                <input type="file" name="edit_image_objet" accept="image/png, image/jpeg, image/jpg, image/webp" capture="environment">
            </div>
            <button type="submit" class="btn-submit" style="margin-top: 10px;">Enregistrer les modifications</button>
        </form>
    </div>
</div>

<script>
    var mapAdd = null, markerAdd = null;
    var mapEdit = null, markerEdit = null;

    function initLeafletMap(mapContainerId, inputId, lat, lng) {
        var mapElem = document.getElementById(mapContainerId);
        mapElem.style.display = 'block';

        var isAdd = (mapContainerId === 'map_add');
        var map = isAdd ? mapAdd : mapEdit;
        var marker = isAdd ? markerAdd : markerEdit;

        if (!map) {
            // Initialisation de la carte si elle n'existe pas encore
            map = L.map(mapContainerId).setView([lat, lng], 16);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap'
            }).addTo(map);

            marker = L.marker([lat, lng], {draggable: true}).addTo(map);

            // Quand on lâche le marqueur, on récupère la nouvelle adresse
            marker.on('dragend', function(e) {
                var pos = marker.getLatLng();
                reverseGeocode(pos.lat, pos.lng, inputId);
            });

            // Quand on clique sur la carte, on déplace le marqueur
            map.on('click', function(e) {
                marker.setLatLng(e.latlng);
                reverseGeocode(e.latlng.lat, e.latlng.lng, inputId);
            });

            if (isAdd) { mapAdd = map; markerAdd = marker; }
            else { mapEdit = map; markerEdit = marker; }
        } else {
            // Si la carte existe déjà, on la recentre simplement
            map.setView([lat, lng], 16);
            marker.setLatLng([lat, lng]);
        }

        // Corrige un bug d'affichage des cartes dans les fenêtres modales
        setTimeout(function() { map.invalidateSize(); }, 300);
    }

    function reverseGeocode(lat, lng, inputId) {
        document.getElementById(inputId).value = "Recherche de l'adresse...";
        fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lng)
            .then(response => response.json())
            .then(data => {
                if (data && data.display_name) {
                    // On nettoie un peu l'adresse récupérée pour qu'elle soit lisible
                    var road = data.address.road || '';
                    var city = data.address.village || data.address.town || data.address.city || 'Saint-Vaast-en-Chaussée';
                    var address = road ? (road + ", " + city) : city;
                    document.getElementById(inputId).value = address;
                }
            })
            .catch(error => {
                // Si pas d'internet ou erreur, on met les coordonnées GPS brutes
                document.getElementById(inputId).value = "Coordonnées : " + lat.toFixed(4) + ", " + lng.toFixed(4);
            });
    }

    function triggerGeolocate(mapContainerId, inputId) {
        // Coordonnées par défaut (Mairie de Saint-Vaast-en-Chaussée environ)
        var defLat = 49.9712;
        var defLng = 2.2036;

        if ("geolocation" in navigator) {
            // Demande l'autorisation au téléphone/navigateur
            navigator.geolocation.getCurrentPosition(function(position) {
                initLeafletMap(mapContainerId, inputId, position.coords.latitude, position.coords.longitude);
                reverseGeocode(position.coords.latitude, position.coords.longitude, inputId);
            }, function(error) {
                // Si l'utilisateur refuse le GPS, on ouvre la carte au centre du village
                initLeafletMap(mapContainerId, inputId, defLat, defLng);
            });
        } else {
            initLeafletMap(mapContainerId, inputId, defLat, defLng);
        }
    }

    function openEditObjetModal(id, titre, lieu, description) {
        document.getElementById('edit_objet_id').value = id;
        document.getElementById('edit_titre_objet').value = titre;
        document.getElementById('edit_lieu_objet').value = lieu;
        document.getElementById('edit_description_objet').value = description.replace(/\\n/g, '\n');
        document.getElementById('map_edit').style.display = 'none'; // On cache la carte par défaut pour ne pas surcharger visuellement
        document.getElementById('editObjetModal').style.display = 'flex';
    }
</script>

<?php endif; ?>