<!--
  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>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- ========== BARRA COMPATTA MANAGER (visibile quando collapsed) ========== -->
  @if (isManager && managerHeaderCollapsed) {
    <div class="mgr-collapsed-bar" (click)="toggleManagerHeader()">
      <div class="mgr-collapsed-bar-info">
        <ion-icon name="business-outline"></ion-icon>
        <span class="mgr-collapsed-bar-name">{{ company?.name || 'Gestione' }}</span>
      </div>
      <div class="mgr-collapsed-bar-action">
        <span>Mostra</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </div>
    </div>
  }

  <!-- ========== HERO IMAGE ========== -->
  @if (!isManager || !managerHeaderCollapsed) {
    <div class="hero-section" [class.hero-fallback]="!heroImage" [ngClass]="heroBackgroundClass">
      @if (heroImage) {
        <div class="hero-image-bg" [style.background-image]="'url(' + heroImage + ')'"></div>
      }
      @if (!heroImage) {
        <div class="hero-image-bg hero-image-fallback">
          <ion-icon src="assets/icons/app/ombrellone.svg" class="hero-fallback-icon"></ion-icon>
        </div>
      }
      <div class="hero-dark-overlay" [style.opacity]="heroImage ? (1 - heroOpacity) : 0.25"></div>
      @if (activeCard) {
        <ion-button fill="clear" class="hero-favorite-btn" (click)="toggleFavorite()">
          <ion-icon [name]="isFavorite ? 'heart' : 'heart-outline'" [class.is-favorite]="isFavorite"></ion-icon>
        </ion-button>
      }
      @if (isManager) {
        <ion-button fill="clear" class="hero-collapse-btn" (click)="toggleManagerHeader()">
          <ion-icon name="chevron-up-outline"></ion-icon>
        </ion-button>
      }
    </div>
  }

  <div class="home-container" [class.has-hero]="!isManager || !managerHeaderCollapsed">

    <!-- ========== COMPANY HEADER ========== -->
    @if (company && (!isManager || !managerHeaderCollapsed)) {
      <div class="company-header">
        <h4 class="company-name">{{ company.name }}</h4>
        <p class="company-desc">{{ getServiceDescription() }}</p>
        <div class="info-chips-row">
          @if (getCompanyAddress()) {
            <div class="info-chip" (click)="getDirections()">
              <ion-icon name="location-outline"></ion-icon>
              <span>{{ getCompanyAddress() }}</span>
            </div>
          }
          @if (company?.cmp_phone_number) {
            <div class="info-chip" (click)="callCompany()">
              <ion-icon name="call-outline"></ion-icon>
              <span>{{ company.cmp_phone_number }}</span>
            </div>
          }
        </div>
      </div>
    }

    <!-- ========== ACTION BUTTONS ========== -->
    @if (!isManager || !managerHeaderCollapsed) {
      <div class="action-row">
        <div class="action-pill" (click)="onPrenotaClick()">
          <div class="action-pill-icon"><ion-icon name="add-circle-outline"></ion-icon></div>
          <span>Prenota</span>
        </div>
        <div class="action-pill" (click)="scanQrCode()">
          <div class="action-pill-icon"><ion-icon name="qr-code-outline"></ion-icon></div>
          <span>Scan QR</span>
        </div>
        @if (company?.cmp_phone_number) {
          <div class="action-pill" (click)="callCompany()">
            <div class="action-pill-icon"><ion-icon name="call-outline"></ion-icon></div>
            <span>Chiama</span>
          </div>
        }
        @if (getCompanyAddress()) {
          <div class="action-pill" (click)="getDirections()">
            <div class="action-pill-icon"><ion-icon name="navigate-outline"></ion-icon></div>
            <span>Direzioni</span>
          </div>
        }
        @if (company?.cmp_web) {
          <div class="action-pill" (click)="openWebsite()">
            <div class="action-pill-icon"><ion-icon name="globe-outline"></ion-icon></div>
            <span>Sito Web</span>
          </div>
        }
        <div class="action-pill" (click)="openChat()">
          <div class="action-pill-icon"><ion-icon name="chatbubble-ellipses-outline"></ion-icon></div>
          <span>Chat</span>
        </div>
      </div>
    }

    <!-- ========== MANAGER SEGMENT NAV ========== -->
    @if (isManager) {
      <div class="segment-wrap">
        <ion-segment [(ngModel)]="managerTab" (ionChange)="onManagerTabChange()" mode="md" class="home-segment manager-segment">
          <ion-segment-button value="lista">
            <ion-label>
              Lista@if (managerListBookings.length > 0) {
              <span class="seg-count">{{ managerListBookings.length }}</span>
            }
          </ion-label>
        </ion-segment-button>
        <ion-segment-button value="da-assegnare">
          <ion-label>
            Assegna@if (managerUnassignedBookings.length > 0) {
            <span class="seg-count seg-count--warn">{{ managerUnassignedBookings.length }}</span>
          }
        </ion-label>
      </ion-segment-button>
      <ion-segment-button value="ordini">
        <ion-label>Ordini</ion-label>
      </ion-segment-button>
      <ion-segment-button value="mappa">
        <ion-label>Mappa</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>
}

<!-- ========== MANAGER TAB CONTENT ========== -->
@if (isManager) {
  <div class="tab-content">
    <!-- Filtri prenotazioni (Lista / Da assegnare) -->
    @if (managerTab === 'lista' || managerTab === 'da-assegnare') {
      <div class="mgr-filters">
        <div class="mgr-filter-row">
          <div class="mgr-filter-field">
            <label>Dal</label>
            <input type="date" [(ngModel)]="managerFilters.dateFrom" (change)="onManagerFilterChange()"/>
          </div>
          <div class="mgr-filter-field">
            <label>Al</label>
            <input type="date" [(ngModel)]="managerFilters.dateTo" (change)="onManagerFilterChange()"/>
          </div>
          <div class="mgr-filter-field">
            <label>Stato</label>
            <select [(ngModel)]="managerFilters.status" (change)="onManagerFilterChange()">
              <option value="">Tutti</option>
              <option value="PENDING">In attesa</option>
              <option value="CONFIRMED">Confermate</option>
              <option value="COMPLETED">Completate</option>
              <option value="CANCELLED">Annullate</option>
            </select>
          </div>
          <div class="mgr-filter-field">
            <label>Pagamento</label>
            <select [(ngModel)]="managerFilters.paymentStatus">
              <option value="">Tutti</option>
              <option value="PAID">Pagate</option>
              <option value="PARTIAL">Parziali</option>
              <option value="UNPAID">Non pagate</option>
            </select>
          </div>
          @if (managerResourceTypes.length > 0) {
            <div class="mgr-filter-field">
              <label>Risorsa</label>
              <select [(ngModel)]="managerFilters.typeId" (change)="onManagerTypeChange()">
                <option [ngValue]="0">Tutte</option>
                @for (t of managerResourceTypes; track t) {
                  <option [ngValue]="t.bkrt_id">{{ t.bkrt_name }}</option>
                }
              </select>
            </div>
          }
          @if (isRestaurantTypeSelected && managerTimeSlots.length > 0) {
            <div class="mgr-filter-field">
              <label>Fascia</label>
              <select [(ngModel)]="managerFilters.timeSlotId">
                <option [ngValue]="0">Tutte</option>
                @for (s of managerTimeSlots; track s) {
                  <option [ngValue]="s.bkts_id">{{ s.bkts_name }}</option>
                }
              </select>
            </div>
          }
          @if (hasNonDefaultManagerFilters()) {
            <ion-button fill="clear" size="small" class="mgr-filter-clear" (click)="clearManagerFilters()">
              <ion-icon name="close-outline" slot="icon-only"></ion-icon>
            </ion-button>
          }
        </div>
      </div>
    }
    <!-- TAB LISTA -->
    @if (managerTab === 'lista') {
      @if (loading) {
        <div class="loading-wrap"><ion-spinner name="crescent" color="primary"></ion-spinner></div>
      }
      @if (!loading && managerListBookings.length === 0) {
        <div class="empty-state">
          <div class="empty-icon-wrap"><ion-icon name="calendar-outline"></ion-icon></div>
          <p>Nessuna prenotazione</p>
        </div>
      }
      @if (!loading && managerListBookings.length > 0) {
        <div class="booking-list">
          @for (b of managerListBookings; track b) {
            <div class="booking-card mgr-card" (click)="showManagerBookingActions(b)">
              <div class="bc-accent" [style.background-color]="getStatusAccentColor(b.bkb_status)"></div>
              <div class="bc-body">
                <div class="bc-head">
                  <div class="bc-resource">
                    @if (b.bkrt_type !== 'RESTAURANT') {
                      <ion-icon src="assets/icons/app/ombrellone.svg" class="bc-resource-icon"></ion-icon>
                    }
                    @if (b.bkrt_type === 'RESTAURANT') {
                      <ion-icon name="restaurant-outline" class="bc-resource-icon"></ion-icon>
                    }
                    @if (b.bkrt_type === 'RESTAURANT') {
                      <span class="bc-resource-name">
                        {{ getBookingResourceLabel(b) || 'Tavolo' }} &bull; {{ b.bkb_guests_count }} posti
                      </span>
                    }
                    @if (b.bkrt_type !== 'RESTAURANT') {
                      <span class="bc-resource-name">{{ b.bkr_name || 'Risorsa' }}</span>
                    }
                  </div>
                  <span class="bc-status-badge" [style.background-color]="getStatusAccentColor(b.bkb_status)">{{ getStatusLabel(b.bkb_status) }}</span>
                </div>
                <div class="bc-info-row mgr-customer">
                  <ion-icon name="person-outline"></ion-icon>
                  <span>{{ b.bkb_customer_name || '—' }}@if (b.bkb_customer_phone) {
                    <span> &bull; {{ b.bkb_customer_phone }}</span>
                  }</span>
                </div>
                <div class="bc-info-row">
                  <ion-icon name="calendar-outline"></ion-icon>
                  <span>{{ formatDate(b.bkb_date) }}@if (b.bkb_date_to && toDateStr(b.bkb_date_to) !== toDateStr(b.bkb_date)) {
                    &rarr; {{ formatDate(b.bkb_date_to) }}
                  }</span>
                </div>
                @if (b.bkrt_type === 'RESTAURANT' && (b.bkts_name || b.bkb_start_time)) {
                  <div class="bc-info-row">
                    <ion-icon name="time-outline"></ion-icon>
                    <span>{{ b.bkts_name || (b.bkb_start_time + ' - ' + b.bkb_end_time) }}</span>
                  </div>
                }
                <div class="bc-footer">
                  <!-- Importo: bkb_total_amount se > 0, altrimenti paid_amount (ordini menu), altrimenti — -->
                  @if (b.bkb_total_amount > 0) {
                    <span class="bc-amount">€ {{ b.bkb_total_amount | number:'1.2-2' }}</span>
                  }
                  @if (!(b.bkb_total_amount > 0) && (b.bkb_paid_amount || 0) > 0) {
                    <span class="bc-amount bc-amount--secondary">
                      € {{ b.bkb_paid_amount | number:'1.2-2' }}
                      <small>ordini</small>
                    </span>
                  }
                  @if (!(b.bkb_total_amount > 0) && !((b.bkb_paid_amount || 0) > 0)) {
                    <span class="bc-amount bc-amount--none">—</span>
                  }
                  <span class="bc-pay-badge"
                    [class.is-paid]="getPaymentStatus(b) === 'PAID'"
                    [class.is-partial]="getPaymentStatus(b) === 'PARTIAL'"
                    [class.is-unpaid]="getPaymentStatus(b) === 'UNPAID'"
                    [class.is-none]="getPaymentStatus(b) === 'NONE'">
                    <ion-icon [name]="getPaymentStatusIcon(b)"></ion-icon>
                    {{ getPaymentStatusLabel(b) }}
                  </span>
                </div>
              </div>
            </div>
          }
        </div>
      }
    }
    <!-- TAB DA ASSEGNARE -->
    @if (managerTab === 'da-assegnare') {
      @if (loading) {
        <div class="loading-wrap"><ion-spinner name="crescent" color="primary"></ion-spinner></div>
      }
      @if (!loading && managerUnassignedBookings.length === 0) {
        <div class="empty-state">
          <div class="empty-icon-wrap"><ion-icon name="checkmark-circle-outline" color="success"></ion-icon></div>
          <p>Nessuna prenotazione in attesa di assegnazione</p>
        </div>
      }
      @if (!loading && managerUnassignedBookings.length > 0) {
        <div class="booking-list">
          <div class="da-assegnare-hint">
            <ion-icon name="information-circle-outline" color="primary"></ion-icon>
            <span>Apri il dettaglio per assegnare un tavolo e confermare la prenotazione.</span>
          </div>
          @for (b of managerUnassignedBookings; track b) {
            <div class="booking-card mgr-card mgr-card--warn" (click)="showManagerBookingActions(b)">
              <div class="bc-accent" style="background-color: var(--ion-color-warning)"></div>
              <div class="bc-body">
                <div class="bc-head">
                  <div class="bc-resource">
                    <ion-icon name="restaurant-outline" class="bc-resource-icon"></ion-icon>
                    <span class="bc-resource-name">
                      {{ getBookingResourceLabel(b) || 'Tavolo' }} &bull; {{ b.bkb_guests_count }} posti
                    </span>
                  </div>
                  <span class="bc-status-badge bc-status-badge--warn">DA ASSEGNARE</span>
                </div>
                <div class="bc-info-row mgr-customer">
                  <ion-icon name="person-outline"></ion-icon>
                  <span>{{ b.bkb_customer_name || '—' }}@if (b.bkb_customer_phone) {
                    <span> &bull; {{ b.bkb_customer_phone }}</span>
                  }</span>
                </div>
                <div class="bc-info-row">
                  <ion-icon name="calendar-outline"></ion-icon>
                  <span>{{ formatDate(b.bkb_date) }}</span>
                </div>
                @if (b.bkts_name || b.bkb_start_time) {
                  <div class="bc-info-row">
                    <ion-icon name="time-outline"></ion-icon>
                    <span>{{ b.bkts_name || (b.bkb_start_time + ' - ' + b.bkb_end_time) }}</span>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      }
    }
    <!-- TAB ORDINI -->
    @if (managerTab === 'ordini') {
      <!-- Filtri ordini: date + tipo risorsa + clear (lo stato è gestito dai chip sotto) -->
      <div class="mgr-filters mgr-filters--ordini">
        <div class="mgr-filter-row">
          <div class="mgr-filter-field">
            <label>Dal</label>
            <input type="date" [(ngModel)]="ordiniFilters.dateFrom" (change)="onOrdiniFilterChange()"/>
          </div>
          <div class="mgr-filter-field">
            <label>Al</label>
            <input type="date" [(ngModel)]="ordiniFilters.dateTo" (change)="onOrdiniFilterChange()"/>
          </div>
          <div class="mgr-filter-field">
            <label>Tipo</label>
            <select [(ngModel)]="ordiniTypeFilter">
              <option value="">Tutti ({{ ordiniList.length }})</option>
              <option value="BEACH">Spiaggia ({{ ordiniCountBeach }})</option>
              <option value="RESTAURANT">Ristorante ({{ ordiniCountRestaurant }})</option>
            </select>
          </div>
          <ion-button fill="clear" size="small" class="mgr-filter-clear" (click)="clearOrdiniFilters()">
            <ion-icon name="close-outline" slot="icon-only"></ion-icon>
          </ion-button>
        </div>
      </div>
      <!-- Filtro stato multi-select: 4 toggle in riga, click = aggiungi/rimuovi -->
      <div class="ordini-status-grid" role="group" aria-label="Filtra per stato (selezione multipla)">
        @for (f of ordiniStatusFamilies; track f) {
          <button type="button"
            class="ordini-status-btn"
            [class.selected]="isOrdiniStatusSelected(f.key)"
            [attr.data-color]="f.color"
            (click)="toggleOrdiniStatus(f.key)">
            <ion-icon [name]="isOrdiniStatusSelected(f.key) ? 'checkmark-circle' : f.icon" class="ordini-status-icon"></ion-icon>
            <span class="ordini-status-label">{{ f.label }}</span>
            <span class="ordini-status-count">{{ getOrdiniCountByStatus(f.key) }}</span>
          </button>
        }
      </div>
      <p class="ordini-status-hint">Tocca più stati per combinarli</p>
      <!-- Lista -->
      @if (ordiniLoading) {
        <div class="loading-wrap"><ion-spinner name="crescent" color="primary"></ion-spinner></div>
      }
      @if (!ordiniLoading && filteredOrdiniList.length === 0) {
        <div class="empty-state">
          <div class="empty-icon-wrap"><ion-icon name="receipt-outline" color="medium"></ion-icon></div>
          <p>Nessun ordine nel periodo selezionato</p>
        </div>
      }
      @if (!ordiniLoading && filteredOrdiniList.length > 0) {
        <div class="ordini-list">
          @for (g of groupedOrdiniList; track g.bookingId + '-' + g.sendSeq) {
            <div class="ordine-group">
              <!-- Header gruppo: risorsa + cliente + totale + azione rapida -->
              <div class="og-header" [style.border-left-color]="g.bkrtType === 'BEACH' ? 'var(--ion-color-tertiary)' : 'var(--ion-color-primary)'">
                <div class="og-header-main" (click)="openDetail(g.bookingId)">
                  <div class="og-resource">
                    @if (g.bkrtType === 'BEACH') {
                      <ion-icon src="assets/icons/app/ombrellone.svg" class="og-icon"></ion-icon>
                    }
                    @if (g.bkrtType === 'RESTAURANT') {
                      <ion-icon name="restaurant-outline" class="og-icon"></ion-icon>
                    }
                    @if (!g.bkrtType) {
                      <ion-icon name="help-circle-outline" class="og-icon"></ion-icon>
                    }
                    <span class="og-resource-name">{{ g.bkrName }}</span>
                    @if (g.sendSeq > 0) {
                      <span class="og-send-seq">#{{ g.sendSeq }}</span>
                    }
                  </div>
                  <div class="og-meta">
                    @if (g.customerName) {
                      <span class="og-customer">
                        <ion-icon name="person-outline"></ion-icon>{{ g.customerName }}
                      </span>
                    }
                    @if (g.createdAt) {
                      <span class="og-time">
                        <ion-icon name="time-outline"></ion-icon>{{ formatOrdineDate(g.createdAt) }}
                      </span>
                    }
                  </div>
                </div>
                <div class="og-header-right">
                  <span class="og-total">€ {{ g.total | number:'1.2-2' }}</span>
                  @if (g.allReady) {
                    <ion-button size="small" color="success" (click)="consegnaTutto(g.bookingId, g.sendSeq)">
                      <ion-icon name="paper-plane-outline" slot="start"></ion-icon>
                      Consegna
                    </ion-button>
                  }
                </div>
              </div>
              <!-- Items del gruppo -->
              <div class="og-items">
                @for (item of g.items; track item) {
                  <div class="og-item" (click)="showOrdineActions(item)">
                    <span class="oc-qty">×{{ item.bkbi_quantity }}</span>
                    <div class="og-item-info">
                      <span class="og-item-name">{{ item.bkmi_name }}</span>
                      <div class="og-item-meta">
                        @if (item.bkmc_name) {
                          <span class="og-item-cat">{{ item.bkmc_name }}</span>
                        }
                        @if (getItemPaymentMethodLabel(item.bkbi_notes)) {
                          <span class="og-item-method">
                            <ion-icon [name]="getItemPaymentMethodIcon(item.bkbi_notes)"></ion-icon>
                            {{ getItemPaymentMethodLabel(item.bkbi_notes) }}
                          </span>
                        }
                      </div>
                    </div>
                    <ion-badge [color]="getOrdineStatusColor(item.bkbi_notes)" class="og-item-badge">
                      {{ getOrdineStatusLabel(item.bkbi_notes) }}
                    </ion-badge>
                    <span class="og-item-price">€ {{ item.bkbi_total_price | number:'1.2-2' }}</span>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      }
    }
    <!-- TAB MAPPA -->
    @if (managerTab === 'mappa') {
      <!-- Filtri mappa: data + tipo risorsa + fascia oraria -->
      <div class="mgr-filters mgr-filters--ordini">
        <div class="mgr-filter-row">
          <div class="mgr-filter-field">
            <label>Data</label>
            <input type="date" [(ngModel)]="mappaDate" (change)="onMappaDateChange()"/>
          </div>
          <div class="mgr-filter-field">
            <label>Tipo</label>
            <select [(ngModel)]="mappaTypeId" (change)="onMappaTypeChange()">
              @for (t of mappaResourceTypes; track t) {
                <option [ngValue]="t.bkrt_id">{{ t.bkrt_name }}</option>
              }
            </select>
          </div>
          @if (mappaTimeSlots.length > 0) {
            <div class="mgr-filter-field">
              <label>Fascia</label>
              <select [(ngModel)]="selectedMappaSlotId" (change)="onMappaSlotChange()">
                @for (s of mappaTimeSlots; track s) {
                  <option [ngValue]="s.bkts_id">{{ s.bkts_name }}</option>
                }
              </select>
            </div>
          }
        </div>
      </div>
      <!-- Legenda -->
      <div class="mappa-legend">
        <span class="mappa-legend-item"><span class="legend-dot free"></span>Libera</span>
        <span class="mappa-legend-item"><span class="legend-dot pending"></span>In attesa</span>
        <span class="mappa-legend-item"><span class="legend-dot busy"></span>Occupata</span>
      </div>
      <!-- Loading -->
      @if (mappaLoading) {
        <div class="loading-wrap"><ion-spinner name="crescent" color="primary"></ion-spinner></div>
      }
      <!-- Mappa posizionata (componente condiviso con form-prenotazione) -->
      @if (!mappaLoading && mappaResourcesAll.length === 0) {
        <div class="empty-state">
          <div class="empty-icon-wrap"><ion-icon name="map-outline" color="medium"></ion-icon></div>
          <p>Nessuna risorsa configurata per questo tipo</p>
        </div>
      }
      @if (!mappaLoading && mappaResourcesAll.length > 0) {
        <app-resource-map
          [resources]="mappaResourcesAll"
          [bookedResourceIds]="mappaBookedResourceIds"
          [getBookingGroupInfo]="getMappaBookingGroupInfo"
          [displayPositions]="mappaDisplayPositions"
          (resourceClick)="showMappaResourceActions($event)">
        </app-resource-map>
      }
    }
  </div>
}

<!-- ========== SEGMENT NAV (cliente) ========== -->
@if (!isManager) {
  <div class="segment-wrap">
    <ion-segment [(ngModel)]="activeTab" mode="md" class="home-segment">
      <ion-segment-button value="active">
        <ion-label>
          Attive
          @if (activeBookings.length > 0) {
            <span class="seg-count">{{ activeBookings.length }}</span>
          }
        </ion-label>
      </ion-segment-button>
      <ion-segment-button value="past">
        <ion-label>
          Storico
          @if (pastBookings.length > 0) {
            <span class="seg-count">{{ pastBookings.length }}</span>
          }
        </ion-label>
      </ion-segment-button>
      <ion-segment-button value="cancelled">
        <ion-label>
          Annullate
          @if (cancelledBookings.length > 0) {
            <span class="seg-count">{{ cancelledBookings.length }}</span>
          }
        </ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>
}

<!-- ========== TAB CONTENT (cliente) ========== -->
@if (!isManager) {
  <div class="tab-content">
    <div class="bookings-section">
      <!-- Header con badge count -->
      <div class="section-header">
        <h6 class="section-title">
          @if (activeTab === 'active') {
            Le tue prenotazioni
          }
          @if (activeTab === 'past') {
            Prenotazioni passate
          }
          @if (activeTab === 'cancelled') {
            Annullate
          }
        </h6>
        <span class="section-count-badge">{{ currentList.length }}</span>
      </div>
      <!-- Loading -->
      @if (loading) {
        <div class="loading-wrap">
          <ion-spinner name="crescent" color="primary"></ion-spinner>
        </div>
      }
      <!-- Empty -->
      @if (!loading && currentList.length === 0) {
        <div class="empty-state">
          <div class="empty-icon-wrap">
            @if (activeTab === 'active') {
              <ion-icon src="assets/icons/app/ombrellone.svg"></ion-icon>
            }
            @if (activeTab === 'past') {
              <ion-icon name="time-outline"></ion-icon>
            }
            @if (activeTab === 'cancelled') {
              <ion-icon name="close-circle-outline"></ion-icon>
            }
          </div>
          <p>
            @if (activeTab === 'active') {
              Nessuna prenotazione attiva
            }
            @if (activeTab === 'past') {
              Nessuna prenotazione passata
            }
            @if (activeTab === 'cancelled') {
              Nessuna prenotazione annullata
            }
          </p>
        </div>
      }
      <!-- Lista card -->
      @if (!loading && currentList.length > 0) {
        <div class="booking-list">
          @for (b of currentList; track b) {
            <div
              class="booking-card"
              [class.is-cancelled]="activeTab === 'cancelled'"
              (click)="activeTab === 'cancelled' ? openDetail(b.bkb_id) : showBookingActions(b)">
              <div class="bc-accent" [style.background-color]="getStatusAccentColor(b.bkb_status)"></div>
              <div class="bc-body">
                <!-- Header: risorsa + stato -->
                <div class="bc-head">
                  <div class="bc-resource">
                    @if (b.bkrt_type !== 'RESTAURANT') {
                      <ion-icon src="assets/icons/app/ombrellone.svg" class="bc-resource-icon"></ion-icon>
                    }
                    @if (b.bkrt_type === 'RESTAURANT') {
                      <ion-icon name="restaurant-outline" class="bc-resource-icon"></ion-icon>
                    }
                    @if (b.bkrt_type === 'RESTAURANT') {
                      <span class="bc-resource-name">{{ getBookingResourceLabel(b) || 'Tavolo' }} &bull; {{ b.bkb_guests_count }} posti</span>
                    }
                    @if (b.bkrt_type !== 'RESTAURANT') {
                      <span class="bc-resource-name">{{ b.bkr_name || ('Ombrellone' + (b.bkb_resource_id ? ' #' + b.bkb_resource_id : '')) }}</span>
                    }
                  </div>
                  <span class="bc-status-badge" [style.background-color]="getStatusAccentColor(b.bkb_status)">
                    {{ getStatusLabel(b.bkb_status) }}
                  </span>
                </div>
                <!-- Info: data -->
                <div class="bc-info-row">
                  <ion-icon name="calendar-outline"></ion-icon>
                  <span>{{ formatDate(b.bkb_date) }}
                    @if (b.bkb_date_to && b.bkb_date_to !== b.bkb_date) {
                      &rarr; {{ formatDate(b.bkb_date_to) }}
                    }
                  </span>
                </div>
                <!-- Info: fascia oraria (ristorante) -->
                @if (b.bkrt_type === 'RESTAURANT' && (b.bkts_name || b.bkb_start_time)) {
                  <div class="bc-info-row">
                    <ion-icon name="time-outline"></ion-icon>
                    <span>{{ b.bkts_name || (b.bkb_start_time + ' - ' + b.bkb_end_time) }}</span>
                  </div>
                }
                <!-- Footer: importo + pagamento -->
                @if (b.bkb_total_amount > 0 || b.bkrt_type !== 'RESTAURANT') {
                  <div class="bc-footer">
                    <span class="bc-amount">€ {{ b.bkb_total_amount | number:'1.2-2' }}</span>
                    @if (activeTab !== 'cancelled') {
                      <span class="bc-pay-badge"
                        [class.is-paid]="b.bkb_payment_status === 'PAID'"
                        [class.is-unpaid]="b.bkb_payment_status !== 'PAID'">
                        <ion-icon [name]="b.bkb_payment_status === 'PAID' ? 'checkmark-circle' : 'alert-circle'"></ion-icon>
                        {{ b.bkb_payment_status === 'PAID' ? 'Pagato' : 'Da pagare' }}
                      </span>
                    }
                  </div>
                }
                <!-- Progress pagamento -->
                @if (activeTab !== 'cancelled' && b.bkb_total_amount > 0) {
                  <div class="bc-pay-progress">
                    <div class="bc-pay-bar" [style.width.%]="(b.bkb_paid_amount || 0) / b.bkb_total_amount * 100"></div>
                  </div>
                }
                <!-- Quick actions: solo per attive -->
                @if (activeTab === 'active') {
                  <div class="bc-actions" (click)="$event.stopPropagation()">
                    <button class="bc-action-btn" (click)="openDetail(b.bkb_id)">
                      <ion-icon name="information-circle-outline"></ion-icon>
                      <span>Dettaglio</span>
                    </button>
                    <button class="bc-action-btn bc-action-btn-accent" (click)="openMenu(b.bkb_id)">
                      <ion-icon name="restaurant-outline"></ion-icon>
                      <span>Menu</span>
                    </button>
                  </div>
                }
              </div>
            </div>
          }
        </div>
      }
    </div>
  </div>
}

<div style="height: 32px;"></div>
</div>
</ion-content>

<!-- ========== CHAT MODAL ========== -->
<ion-modal #chatModal [breakpoints]="[0, 1]" [initialBreakpoint]="1" [handle]="true" class="chat-init-modal">
  <ng-template>
    <div class="chat-modal-wrap">
      <div class="modal-handle-bar"></div>

      <div class="chat-modal-header">
        <div class="company-avatar-ring">
          <div class="company-avatar-circle" [style.background]="getCompanyAvatarGradient()">
            <span>{{ getCompanyInitials() }}</span>
          </div>
        </div>
        <div class="chat-modal-company-info">
          <h3 class="chat-company-name">{{ company?.name || company?.cmp_name }}</h3>
          <p class="chat-company-sub">Invia un messaggio</p>
        </div>
      </div>

      <div class="chat-modal-divider"></div>

      <div class="chat-textarea-wrap">
        <ion-textarea
          [(ngModel)]="chatMessage"
          placeholder="Scrivi qui la tua domanda o richiesta..."
          [autoGrow]="true"
          rows="4"
          maxlength="1000"
          class="chat-textarea">
        </ion-textarea>
        <div class="char-counter">{{ chatMessage.length }} / 1000</div>
      </div>

      <div class="chat-modal-actions">
        <button class="chat-send-btn" [class.sending]="chatSending" [disabled]="chatSending" (click)="sendChatMessage()">
          @if (!chatSending) {
            <span class="btn-label">
              <ion-icon name="send"></ion-icon>
              Apri Chat
            </span>
          }
          @if (chatSending) {
            <span class="btn-loading">
              <ion-spinner name="dots" color="light"></ion-spinner>
            </span>
          }
        </button>
        <button class="chat-cancel-btn" (click)="closeChatModal()" [disabled]="chatSending">
          Annulla
        </button>
      </div>
    </div>
  </ng-template>
</ion-modal>
