@extends('layouts.app')

@section('content')
    <header class="page-header">
        <div>
            <h1>{{ $organization->name }}</h1>
            <p>{{ $organization->city }} @if($organization->country) - {{ $organization->country }} @endif</p>
        </div>
        <div class="actions">
            @if($organization->bestEmail())
                <a class="primary small" href="mailto:{{ $organization->bestEmail() }}">Envoyer un mail</a>
            @endif
            <a class="secondary small" href="{{ route('organizations.edit', $organization) }}">Modifier</a>
            <form method="post" action="{{ route('organizations.destroy', $organization) }}" onsubmit="return confirm('Supprimer cette fiche ?')">
                @csrf
                @method('delete')
                <button class="danger small">Supprimer</button>
            </form>
        </div>
    </header>

    <section class="two-columns">
        <article class="panel">
            <h2>Fiche</h2>
            <dl class="details">
                <dt>Type</dt><dd>{{ $organization->organizer_types ?: 'À compléter' }}</dd>
                <dt>Esthétiques</dt><dd>{{ $organization->aesthetics ?: 'À compléter' }}</dd>
                <dt>Formats</dt><dd>{{ $organization->formats ?: 'À compléter' }}</dd>
                <dt>Périodes</dt><dd>{{ $organization->periods ?: 'À compléter' }}</dd>
                <dt>Email</dt><dd>{{ $organization->bestEmail() ?: 'À vérifier' }}</dd>
                <dt>Contact</dt><dd>{{ $organization->contactLabel() }}</dd>
                <dt>Téléphone</dt><dd>{{ $organization->contact_phone ?: $organization->phone ?: 'À vérifier' }}</dd>
                <dt>Site</dt><dd>@if($organization->website)<a href="{{ $organization->website }}" target="_blank" rel="noopener">{{ $organization->website }}</a>@else À vérifier @endif</dd>
                <dt>Adresse</dt><dd>{{ $organization->address }} {{ $organization->postal_code }} {{ $organization->city }}</dd>
                <dt>GPS</dt>
                <dd>
                    @if($organization->hasCoordinates())
                        {{ $organization->latitude }}, {{ $organization->longitude }}
                    @else
                        Non géolocalisée
                    @endif
                    <form method="post" action="{{ route('organizations.geocode', $organization) }}" class="inline-form">
                        @csrf
                        <button class="secondary small">Géocoder cette fiche</button>
                    </form>
                </dd>
            </dl>
        </article>

        <article class="panel">
            <h2>Suivi</h2>
            <dl class="details">
                <dt>Statut</dt><dd>{{ $organization->commercial_status }}</dd>
                <dt>Priorité</dt><dd>{{ $organization->priority }}</dd>
                <dt>Relance</dt><dd>{{ $organization->follow_up_at ?: 'Non prévue' }}</dd>
                <dt>Notes</dt><dd>{{ $organization->notes ?: 'Aucune note' }}</dd>
            </dl>
        </article>
    </section>

    <section class="panel">
        <h2>Retours Brevo</h2>
        <div class="mail-stats">
            <article><strong>{{ $brevoStats['delivered'] }}</strong><span>Livré(s)</span></article>
            <article><strong>{{ $brevoStats['opened'] }}</strong><span>Ouverture(s)</span></article>
            <article><strong>{{ $brevoStats['clicked'] }}</strong><span>Clic(s)</span></article>
            <article><strong>{{ $brevoStats['bounced'] }}</strong><span>Erreur(s)</span></article>
        </div>

        @if($brevoStats['last_opened_at'] || $brevoStats['last_clicked_at'])
            <p class="muted">
                @if($brevoStats['last_opened_at'])
                    Dernière ouverture : {{ $brevoStats['last_opened_at'] }}.
                @endif
                @if($brevoStats['last_clicked_at'])
                    Dernier clic : {{ $brevoStats['last_clicked_at'] }}.
                @endif
            </p>
        @endif

        @if($brevoStats['clicked_links']->count())
            <h3>Liens cliqués</h3>
            <ul class="link-list">
                @foreach($brevoStats['clicked_links'] as $link)
                    <li><a href="{{ $link }}" target="_blank" rel="noopener">{{ $link }}</a></li>
                @endforeach
            </ul>
        @endif

        <h3>Derniers événements</h3>
        @forelse($brevoStats['events']->take(8) as $event)
            <div class="compact-row brevo-row">
                <strong>{{ $event->occurred_at ?: $event->created_at }}</strong>
                <span>{{ $event->event }}</span>
                <p>
                    {{ $event->subject ?: 'Sans objet' }}
                    @if($event->link)
                        <br><a href="{{ $event->link }}" target="_blank" rel="noopener">{{ $event->link }}</a>
                    @endif
                    @if($event->reason)
                        <br><span class="muted">{{ $event->reason }}</span>
                    @endif
                </p>
            </div>
        @empty
            <p class="muted">Aucun retour Brevo enregistré pour cette fiche pour le moment.</p>
        @endforelse
    </section>

    <section class="panel">
        <h2>Organisateurs à proximité</h2>
        <div id="organizer-map"></div>
        <p class="muted map-note">Rayon affiché : {{ $nearbyRadiusKm }} km. Point rouge : fiche ouverte. Points noirs : autres organisateurs à proximité.</p>
    </section>

    <section class="two-columns">
        <article class="panel">
            <h2>Ajouter une action</h2>
            <form method="post" action="{{ route('organizations.actions.store', $organization) }}" class="form-grid">
                @csrf
                <label>Date<input type="date" name="happened_at" value="{{ now()->format('Y-m-d') }}" required></label>
                <label>Type
                    <select name="type" required>
                        <option>Email</option>
                        <option>Téléphone</option>
                        <option>Rencontre</option>
                        <option>Autre</option>
                    </select>
                </label>
                <label>Prochaine action<input name="next_action"></label>
                <label>Date de relance<input type="date" name="follow_up_at"></label>
                <label class="full">Résumé<textarea name="summary" rows="4" required></textarea></label>
                <button class="primary">Ajouter</button>
            </form>
        </article>

        <article class="panel">
            <h2>Historique</h2>
            @forelse($organization->actions as $action)
                <div class="compact-row">
                    <strong>{{ $action->happened_at }}</strong>
                    <span>{{ $action->type }}</span>
                    <p>{{ $action->summary }}</p>
                </div>
            @empty
                <p class="muted">Aucune action enregistrée.</p>
            @endforelse
        </article>
    </section>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const currentId = {{ $organization->id }};
const markers = @json($markers);
const radiusKm = {{ $nearbyRadiusKm }};
const current = markers.find(marker => marker.id === currentId);
const map = L.map('organizer-map').setView(current ? [current.latitude, current.longitude] : [46.7, 2.5], current ? 10 : 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);
const bounds = [];
let radiusCircle = null;
if (current) {
    const center = [Number(current.latitude), Number(current.longitude)];
    radiusCircle = L.circle(center, {
        radius: radiusKm * 1000,
        color: '#d33b2f',
        fillColor: '#d33b2f',
        fillOpacity: 0.06,
        opacity: 0.45,
        weight: 2
    }).addTo(map);
}
markers.forEach(marker => {
    const position = [Number(marker.latitude), Number(marker.longitude)];
    if (!Number.isFinite(position[0]) || !Number.isFinite(position[1])) {
        return;
    }
    bounds.push(position);
    const isCurrent = marker.id === currentId;
    const pin = L.circleMarker(position, {
        radius: isCurrent ? 11 : 8,
        color: '#ffffff',
        fillColor: isCurrent ? '#d33b2f' : '#111111',
        fillOpacity: isCurrent ? 0.98 : 0.82,
        opacity: 1,
        weight: isCurrent ? 3 : 2,
        bubblingMouseEvents: false
    }).addTo(map);
    const ficheUrl = `/organisateurs/${marker.id}`;
    const popup = document.createElement('div');
    popup.className = 'map-popup';
    const title = document.createElement('strong');
    title.textContent = marker.name || 'Organisateur';
    popup.appendChild(title);
    if (marker.city) {
        popup.appendChild(document.createElement('br'));
        popup.appendChild(document.createTextNode(marker.city));
    }
    if (marker.distance_km) {
        popup.appendChild(document.createElement('br'));
        popup.appendChild(document.createTextNode(`${Number(marker.distance_km).toFixed(1)} km`));
    }
    popup.appendChild(document.createElement('br'));
    const link = document.createElement('a');
    link.href = ficheUrl;
    link.textContent = 'Voir la fiche';
    popup.appendChild(link);
    pin.bindPopup(popup, {
        closeButton: true,
        autoClose: true,
        closeOnClick: true
    });
});
if (radiusCircle) {
    map.fitBounds(radiusCircle.getBounds(), { padding: [28, 28], maxZoom: 10 });
} else if (bounds.length > 1) {
    map.fitBounds(bounds, { padding: [28, 28], maxZoom: 10 });
} else if (bounds.length === 1) {
    map.setView(bounds[0], 10);
}
</script>
@endpush