<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<ion-content>

<!-- ═══ SEARCH ZONE (brand) ═══ -->
<div class="search-zone">
	<div class="search-row">
		<ion-searchbar
			placeholder="Cerca luoghi..."
			[(ngModel)]="cerca"
			(ionInput)="filterPlaces()"
			(ionClear)="onSearchClear()"
			[debounce]="400"
			showClearButton="focus"
			animated="true"
			class="search-input">
		</ion-searchbar>
		<button class="filter-btn" (click)="scanQrCode()" title="Scansiona QR">
			<ion-icon name="scan-outline"></ion-icon>
		</button>
	</div>
</div>

<div class="board">
	<div id="places-top"></div>

	<!-- Mappa luoghi -->
	@if (placeMarkers.length > 0) {
		<div class="map-wrap">
			<google-map height="240px" width="100%" [center]="mapCenter" [zoom]="mapZoom" [options]="mapOptions">
				@for (m of placeMarkers; track m) {
					<map-marker [position]="m.position" [title]="m.title" [options]="m.options" (mapClick)="onMarkerPlaceClick(m.plc_id)"></map-marker>
				}
				@if (myPosition) {
					<map-marker [position]="myPosition" [options]="myPositionOptions"></map-marker>
				}
			</google-map>
			<ion-button class="map-locate" size="small" color="light" (click)="centerOnMyPosition()" title="Vai alla mia posizione">
				<ion-icon name="locate" slot="icon-only"></ion-icon>
			</ion-button>
		</div>
	}

	@if (lstLocations.length > 0) {
		<div class="board-eyebrow">{{ 'Luoghi da scoprire' | translate }}</div>
	}

	@for (loc of lstLocations; track loc.plc_id) {
		<article class="ev-card" [id]="'place-' + loc.plc_id">
			<!-- COVER: foto luogo + overlay -->
			<div class="cover cover-place" [class.is-empty]="!(loc?.photo?.length > 0)">
				@if (loc?.photo?.length > 0) {
					<swiper-container class="cover-media" pagination="true" navigation="true" loop="true">
						@for (img of loc.photo; track img) {
							<swiper-slide>
								<img [src]="urlPhotoPlace + (img.plm_path_md || img.plm_path_lg)" [srcset]="placeSrcset(img)" sizes="100vw" loading="lazy" alt="" />
							</swiper-slide>
						}
					</swiper-container>
				} @else {
					<ion-icon class="cover-watermark" name="location-outline"></ion-icon>
				}

				<span class="cover-scrim"></span>

				@if (loc?.plc_city) {
					<div class="cover-tl">
						<div class="datestamp datestamp-geo">
							<ion-icon name="location"></ion-icon>
							<span>{{ loc.plc_city }}</span>
						</div>
					</div>
				}

				<div class="cover-head">
					<span class="cover-eyebrow">{{ 'Luogo' | translate }}</span>
					<h2 class="cover-title">{{ loc?.plc_name }}</h2>
				</div>
			</div>

			<!-- CORPO: descrizione + indirizzo + sotto-luoghi + audioguide -->
			<div class="ev-body">
				<div class="ev-desc" [class.is-clamped]="!espanseIds.has(loc.plc_id)" [innerHTML]="loc?.plc_desc"></div>
				@if (loc?.plc_desc?.length > 108) {
					@if (!espanseIds.has(loc.plc_id)) {
						<span class="read-toggle" (click)="SeeMore(loc.plc_id)">{{ 'altro' | translate }}</span>
					} @else {
						<span class="read-toggle" (click)="SeeLess(loc.plc_id)">{{ 'mostra meno' | translate }}</span>
					}
				}

				<div class="ev-address">
					<ion-icon name="navigate-outline"></ion-icon>
					<span>{{ loc?.plc_address }} {{ loc?.plc_number }}, {{ loc?.plc_city }} ({{ loc?.plc_codiceprovincia }})</span>
				</div>

				<!-- Sotto-luoghi: miniature; tap => popup -->
				@if (loc?.subPlaces?.length > 0) {
					<div class="sub-thumbs">
						@for (sub of loc.subPlaces; track sub.plc_id) {
							<button class="sub-thumb" (click)="openSub(sub)" [title]="sub.plc_name">
								@if (sub.photo?.length > 0) {
									<img [src]="urlPhotoPlace + (sub.photo[0].plm_path_sm || sub.photo[0].plm_path_lg)" loading="lazy" [alt]="sub.plc_name" />
								} @else {
									<span class="sub-thumb__noimg"><ion-icon name="image-outline"></ion-icon></span>
								}
								<span class="sub-thumb__name">{{ sub.plc_name }}</span>
							</button>
						}
					</div>
				}

				<!-- Audioguide del luogo -->
				@for (aud of loc.audio; track aud; let ai = $index) {
					<button class="audio-row" (click)="openAudio(aud.aud_uuid)">
						<span class="audio-ico"><ion-icon name="volume-medium-outline"></ion-icon></span>
						<span class="audio-label">{{ 'Audioguida' | translate }}{{ loc.audio.length > 1 ? ' ' + (ai + 1) : '' }}</span>
						<ion-icon class="audio-play" name="play"></ion-icon>
					</button>
				}

				<!-- Recensioni del luogo (solo utenti loggati; caricate al primo tap) -->
				@if (isLogged) {
					<button class="audio-row" (click)="toggleReviews(loc.plc_id)">
						<span class="audio-ico"><ion-icon name="star-outline"></ion-icon></span>
						<span class="audio-label">
							{{ 'Recensioni' | translate }}
							@if (placeStats[loc.plc_id] && placeStats[loc.plc_id].total_count > 0) {
								· {{ placeStats[loc.plc_id].avg_overall | number: '1.1-1' }}★ ({{ placeStats[loc.plc_id].total_count }})
							}
						</span>
						<ion-icon class="audio-play" [name]="reviewsOpen.has(loc.plc_id) ? 'chevron-up' : 'chevron-down'"></ion-icon>
					</button>
					@if (reviewsOpen.has(loc.plc_id)) {
						<div class="place-reviews">
							@if (placeStats[loc.plc_id] && placeStats[loc.plc_id].total_count > 0) {
								<div class="place-reviews-summary">
									<div class="review-stars">
										@for (s of stars; track s) {
											<ion-icon [name]="s <= placeStats[loc.plc_id].avg_overall! ? 'star' : 'star-outline'"></ion-icon>
										}
										<span class="review-overall">{{ placeStats[loc.plc_id].avg_overall | number: '1.1-1' }}</span>
									</div>
									<span class="place-reviews-count">{{ placeStats[loc.plc_id].total_count }} {{ placeStats[loc.plc_id].total_count === 1 ? 'recensione' : 'recensioni' }}</span>
								</div>
							} @else if (placeStats[loc.plc_id]) {
								<p class="place-reviews-empty">{{ 'Nessuna recensione: racconta per primo la tua esperienza.' | translate }}</p>
							}
							@for (r of placeReviews[loc.plc_id]; track r.rev_id) {
								<div class="place-review-item">
									<div class="review-stars">
										@for (s of stars; track s) {
											<ion-icon [name]="s <= r.rev_rating_overall ? 'star' : 'star-outline'"></ion-icon>
										}
										<span class="place-review-author">{{ r.client_firstname }} {{ r.client_lastname }}</span>
									</div>
									@if (r.rev_title) {
										<div class="place-review-title">{{ r.rev_title }}</div>
									}
									@if (r.rev_text) {
										<p class="place-review-text">{{ r.rev_text }}</p>
									}
								</div>
							}
							<app-review-cta source="LUOGO" [sourceId]="loc.plc_id" prompt="Sei stato qui? Racconta la tua esperienza." (reviewed)="loadPlaceReviews(loc.plc_id)"></app-review-cta>
						</div>
					}
				}
			</div>
		</article>
	}

	@if (loadingPlaces) {
		@for (i of [0, 1, 2]; track i) {
			<div class="ev-card sk-card">
				<div class="sk-block sk-cover sk-cover-place"></div>
				<div class="ev-body">
					<div class="sk-block sk-line w-92"></div>
					<div class="sk-block sk-line w-70"></div>
				</div>
			</div>
		}
	} @else if (lstLocations.length === 0) {
		<div class="board-empty">
			<ion-icon name="location-outline"></ion-icon>
			<p class="empty-title">{{ 'Nessun luogo' | translate }}</p>
			<p class="empty-sub">{{ 'Non ci sono luoghi da mostrare al momento.' | translate }}</p>
		</div>
	}

	<ion-infinite-scroll [disabled]="!placesHasMore" (ionInfinite)="onIonInfinite($event)">
		<ion-infinite-scroll-content loadingSpinner="dots"></ion-infinite-scroll-content>
	</ion-infinite-scroll>
</div>

<!-- FAB: torna alla mappa -->
@if (placeMarkers.length > 0) {
	<ion-button class="fab-map" (click)="scrollToMap()" title="Torna alla mappa">
		<ion-icon name="map" slot="icon-only"></ion-icon>
	</ion-button>
}

</ion-content>

<!-- ═══ MODALE SOTTO-LUOGO (nome + immagine + descrizione + audioguida) ═══ -->
<ion-modal [isOpen]="subModalOpen" (didDismiss)="subModalOpen = false">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="subModalOpen = false">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>{{ selectedSub?.plc_name }}</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			@if (selectedSub) {
				@if (selectedSub.photo?.length > 0) {
					<swiper-container class="sub-media" pagination="true" navigation="true" loop="true">
						@for (img of selectedSub.photo; track img) {
							<swiper-slide>
								<img [src]="urlPhotoPlace + (img.plm_path_md || img.plm_path_lg)" [srcset]="placeSrcset(img)" sizes="100vw" loading="lazy" alt="" />
							</swiper-slide>
						}
					</swiper-container>
				}
				@if (selectedSub.plc_desc) {
					<div class="sub-desc" [innerHTML]="selectedSub.plc_desc"></div>
				}
				@for (aud of selectedSub.audio; track aud; let ai = $index) {
					<button class="audio-row" (click)="openAudio(aud.aud_uuid)">
						<span class="audio-ico"><ion-icon name="volume-medium-outline"></ion-icon></span>
						<span class="audio-label">{{ 'Audioguida' | translate }}{{ selectedSub.audio.length > 1 ? ' ' + (ai + 1) : '' }}</span>
						<ion-icon class="audio-play" name="play"></ion-icon>
					</button>
				}
			}
		</ion-content>
	</ng-template>
</ion-modal>

<!-- ═══ MODALE AUDIO ═══ -->
<ion-modal [isOpen]="audioModalOpen" (didDismiss)="audioModalOpen = false">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="audioModalOpen = false">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>{{ 'MediaPlayer' | translate }}</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			<div class="audio-shell">
				<div class="audio-disc">
					<ion-icon name="musical-notes-outline"></ion-icon>
				</div>
				<audio controls [src]="urlAudio + audio?.aud_url_path"></audio>
			</div>
		</ion-content>
	</ng-template>
</ion-modal>
