<!--
  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
-->
<!-- ═══════════════════════════════════════════════════════════════
     BACHECA — solo EVENTI (i Luoghi sono nel servizio Turismo).
     ═══════════════════════════════════════════════════════════════ -->

<ion-content>

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

<!-- ═══════════════ EVENTI ═══════════════ -->
<div class="board">
	@if (lstLocandine.length > 0) {
		<div class="board-eyebrow">{{ 'In programma' | translate }}</div>
	}

	@for (loc of lstLocandine; track loc.bk_id) {
		<article class="ev-card">
			<!-- COVER: poster + overlay (tap = dettaglio, doppio tap = mi piace) -->
			<div class="cover" [class.is-empty]="!(loc?.photo?.length > 0)" (click)="onCoverClick($event, loc)">
				@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]="urlPhotoBakeka + (img.prph_path_photo_md || img.prph_path_photo_lg)" [srcset]="bakekaSrcset(img)" sizes="100vw" loading="lazy" alt="" />
							</swiper-slide>
						}
					</swiper-container>
				} @else {
					<ion-icon class="cover-watermark" name="calendar-clear-outline"></ion-icon>
				}

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

				<!-- Alto-sx: data evento (firma) + badge prenotazione -->
				<div class="cover-tl">
					@if (loc?.bk_date) {
						<div class="datestamp">
							@if (loc?.bk_date_to && (loc.bk_date_to | date: 'yyyyMMdd') !== (loc.bk_date | date: 'yyyyMMdd') && (loc.bk_date_to | date: 'MMyyyy') === (loc.bk_date | date: 'MMyyyy')) {
								<span class="ds-day">{{ loc.bk_date | date: 'd' }}–{{ loc.bk_date_to | date: 'd' }}</span>
								<span class="ds-my">{{ meseAbbr(loc.bk_date) }} {{ loc.bk_date | date: 'yyyy' }}</span>
							} @else if (loc?.bk_date_to && (loc.bk_date_to | date: 'yyyyMMdd') !== (loc.bk_date | date: 'yyyyMMdd')) {
								<span class="ds-range">{{ loc.bk_date | date: 'd' }} {{ meseAbbr(loc.bk_date) }} → {{ loc.bk_date_to | date: 'd' }} {{ meseAbbr(loc.bk_date_to) }}</span>
								<span class="ds-my">{{ loc.bk_date | date: 'yyyy' }}</span>
							} @else {
								<span class="ds-day">{{ loc.bk_date | date: 'd' }}</span>
								<span class="ds-my">{{ meseAbbr(loc.bk_date) }} {{ loc.bk_date | date: 'yyyy' }}</span>
							}
						</div>
					} @else {
						<div class="datestamp datestamp-empty"><ion-icon name="calendar-outline"></ion-icon></div>
					}

					@if (loc?.bk_reservation == true) {
						<span class="badge badge-booking badge-cover">
							<ion-icon name="ticket-outline"></ion-icon>
							{{ 'Ingresso su prenotazione' | translate }}
						</span>
					}
				</div>

				<!-- Azioni: menu unico (…) con mi piace / condividi / segnala -->
				<div class="cover-actions">
					<button class="ca-btn" (click)="openPostActions(loc); $event.stopPropagation()" aria-label="Altre opzioni">
						<ion-icon name="ellipsis-horizontal"></ion-icon>
					</button>
				</div>

				<!-- Cuore "burst" al doppio tap -->
				@if (heartBurstId === loc.bk_id) {
					<ion-icon class="heart-burst" name="heart"></ion-icon>
				}

				<!-- Organizzatore + titolo sopra lo scrim -->
				<div class="cover-head">
					<span class="cover-eyebrow">{{ loc?.cmp_name }}</span>
					<h2 class="cover-title">{{ loc?.bk_title }}</h2>
				</div>
			</div>

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

				@if (loc?.bk_reservation == true || loc?.likes > 0) {
					<div class="ev-foot">
						@if (loc?.bk_reservation == true) {
							<ion-button class="ev-reserve" expand="block" size="small" (click)="gotoReservation(loc.bk_id, loc.bk_cmp_id)">
								<ion-icon name="ticket-outline" slot="start"></ion-icon>
								{{ 'Prenota' | translate }}
							</ion-button>
						}
						@if (loc?.likes > 0) {
							<span class="ev-likes"><ion-icon name="heart"></ion-icon>{{ loc.likes }}</span>
						}
					</div>
				}

				@if (loc?.bk_link_sito || loc?.bk_link_instagram || loc?.bk_link_facebook || loc?.bk_link_x) {
					<div class="link-chips">
						@if (loc?.bk_link_sito) {
							<a class="link-chip" [href]="loc.bk_link_sito" target="_blank" rel="noopener" title="Sito web"><ion-icon name="globe-outline"></ion-icon></a>
						}
						@if (loc?.bk_link_instagram) {
							<a class="link-chip" [href]="loc.bk_link_instagram" target="_blank" rel="noopener" title="Instagram"><ion-icon name="logo-instagram"></ion-icon></a>
						}
						@if (loc?.bk_link_facebook) {
							<a class="link-chip" [href]="loc.bk_link_facebook" target="_blank" rel="noopener" title="Facebook"><ion-icon name="logo-facebook"></ion-icon></a>
						}
						@if (loc?.bk_link_x) {
							<a class="link-chip" [href]="loc.bk_link_x" target="_blank" rel="noopener" title="X"><ion-icon name="logo-twitter"></ion-icon></a>
						}
					</div>
				}

				@if (loc?.bk_dateins_d) {
					<div class="ev-published">{{ pubblicato(loc.bk_dateins_d) }}</div>
				}
			</div>
		</article>
	}

	@if (loadingEvents) {
		@for (i of [0, 1, 2]; track i) {
			<div class="ev-card sk-card">
				<div class="sk-block sk-cover"></div>
				<div class="ev-body">
					<div class="sk-block sk-line w-92"></div>
					<div class="sk-block sk-line w-70"></div>
					<div class="sk-foot">
						<div class="sk-block sk-chip"></div>
						<div class="sk-block sk-cta"></div>
					</div>
				</div>
			</div>
		}
	} @else if (lstLocandine.length === 0) {
		<div class="board-empty">
			<ion-icon name="calendar-outline"></ion-icon>
			<p class="empty-title">{{ 'Nessun evento' | translate }}</p>
			<p class="empty-sub">{{ 'Non ci sono eventi da mostrare al momento. Riprova più tardi o modifica i filtri.' | translate }}</p>
		</div>
	}

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

</ion-content>

<!-- ═══ MODALE FILTRI ═══ -->
<ion-modal [isOpen]="filtriModalOpen" (didDismiss)="filtriModalOpen = false">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="filtriModalOpen = false">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>{{ 'onlineshop.filters' | translate }}</ion-title>
				<ion-buttons slot="end">
					<ion-button id="reset-alert">
						<ion-icon name="trash-outline" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			<ion-alert trigger="reset-alert" [header]="'reset_header'" [message]="'reset_message'" [buttons]="resetButtons"></ion-alert>

			<div class="filter-section">
				<span class="filter-section-title">{{ 'onlineshop.filters.tipologia' | translate }}</span>
				<ion-select class="filter-select" [(ngModel)]="area_code" interface="action-sheet">
					<ion-select-option [value]="-1">
						{{ 'onlineshop.filters.seleziona' | translate }} {{ 'onlineshop.filters.tipologia' | translate }}
					</ion-select-option>
					@for (c of lstCompaniesArea; track c) {
						<ion-select-option [value]="c?.ar_code">{{ c?.ar_desc }}</ion-select-option>
					}
				</ion-select>
			</div>
		</ion-content>
		<ion-footer class="ion-no-border">
			<ion-toolbar>
				<ion-button class="modal-apply" expand="block" (click)="searchFilter()">
					<ion-icon name="search" slot="start"></ion-icon>
					{{ 'onlineshop.homepage.search' | translate }}
				</ion-button>
			</ion-toolbar>
		</ion-footer>
	</ng-template>
</ion-modal>

<!-- ═══ MODALE DETTAGLIO POST (immagine ingrandita + descrizione completa) ═══ -->
<ion-modal class="detail-modal" [isOpen]="detailModalOpen" (didDismiss)="detailModalOpen = false; detailTarget = null">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="detailModalOpen = false; detailTarget = null">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>{{ detailTarget?.cmp_name }}</ion-title>
				<ion-buttons slot="end">
					<ion-button (click)="openPostActions(detailTarget)">
						<ion-icon name="ellipsis-horizontal" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			@if (detailTarget?.photo?.length > 0) {
				<swiper-container class="detail-media" pagination="true" navigation="true" loop="true">
					@for (img of detailTarget.photo; track img) {
						<swiper-slide>
							<img [src]="urlPhotoBakeka + (img.prph_path_photo_lg || img.prph_path_photo_md)" alt="" />
						</swiper-slide>
					}
				</swiper-container>
			}

			<div class="detail-body">
				<span class="detail-eyebrow">{{ detailTarget?.cmp_name }}</span>
				<h2 class="detail-title">{{ detailTarget?.bk_title }}</h2>

				@if (detailTarget?.bk_date) {
					<div class="detail-date">
						<ion-icon name="calendar-outline"></ion-icon>
						{{ dataEvento(detailTarget) }}
					</div>
				}

				<!-- Descrizione sempre completa (nessun clamp) -->
				<div class="detail-desc" [innerHTML]="detailTarget?.bk_description"></div>

				@if (detailTarget?.bk_reservation == true || detailTarget?.likes > 0) {
					<div class="ev-foot">
						@if (detailTarget?.bk_reservation == true) {
							<ion-button class="ev-reserve" expand="block" size="small" (click)="detailModalOpen = false; gotoReservation(detailTarget.bk_id, detailTarget.bk_cmp_id)">
								<ion-icon name="ticket-outline" slot="start"></ion-icon>
								{{ 'Prenota' | translate }}
							</ion-button>
						}
						@if (detailTarget?.likes > 0) {
							<span class="ev-likes"><ion-icon name="heart"></ion-icon>{{ detailTarget.likes }}</span>
						}
					</div>
				}

				@if (detailTarget?.bk_link_sito || detailTarget?.bk_link_instagram || detailTarget?.bk_link_facebook || detailTarget?.bk_link_x) {
					<div class="link-chips">
						@if (detailTarget?.bk_link_sito) {
							<a class="link-chip" [href]="detailTarget.bk_link_sito" target="_blank" rel="noopener" title="Sito web"><ion-icon name="globe-outline"></ion-icon></a>
						}
						@if (detailTarget?.bk_link_instagram) {
							<a class="link-chip" [href]="detailTarget.bk_link_instagram" target="_blank" rel="noopener" title="Instagram"><ion-icon name="logo-instagram"></ion-icon></a>
						}
						@if (detailTarget?.bk_link_facebook) {
							<a class="link-chip" [href]="detailTarget.bk_link_facebook" target="_blank" rel="noopener" title="Facebook"><ion-icon name="logo-facebook"></ion-icon></a>
						}
						@if (detailTarget?.bk_link_x) {
							<a class="link-chip" [href]="detailTarget.bk_link_x" target="_blank" rel="noopener" title="X"><ion-icon name="logo-twitter"></ion-icon></a>
						}
					</div>
				}

				@if (detailTarget?.bk_dateins_d) {
					<div class="ev-published">{{ pubblicato(detailTarget.bk_dateins_d) }}</div>
				}
			</div>
		</ion-content>
	</ng-template>
</ion-modal>

<!-- ═══ MODALE SEGNALAZIONE ═══ -->
<ion-modal [isOpen]="reportModalOpen" (didDismiss)="reportModalOpen = false; reportTarget = null">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="reportModalOpen = false; reportTarget = null">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>{{ 'Segnala post' | translate }}</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			<div class="filter-section">
				<span class="filter-section-title">{{ reportTarget?.bk_title }}</span>
				<p>{{ 'Segnala questo post agli amministratori. Puoi aggiungere una nota (facoltativa).' | translate }}</p>
				<ion-textarea
					[(ngModel)]="reportNote"
					[autoGrow]="true"
					[counter]="true"
					maxlength="500"
					rows="4"
					fill="outline"
					[placeholder]="'Motivo della segnalazione (facoltativo)' | translate">
				</ion-textarea>
			</div>
		</ion-content>
		<ion-footer class="ion-no-border">
			<ion-toolbar>
				<ion-button class="modal-apply" expand="block" [disabled]="reportSending" (click)="submitReport()">
					<ion-icon name="flag-outline" slot="start"></ion-icon>
					{{ 'Invia segnalazione' | translate }}
				</ion-button>
			</ion-toolbar>
		</ion-footer>
	</ng-template>
</ion-modal>
