<!--
  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 class="cr-content">
	<ion-refresher slot="fixed" (ionRefresh)="loadDashboard(); $event.target.complete()">
		<ion-refresher-content></ion-refresher-content>
	</ion-refresher>

	<!-- Barra controlli: data + aggiorna -->
	<div class="cr-toolbar">
		<button class="cr-date-btn" (click)="datePickerOpen = true">
			<ion-icon name="calendar-outline"></ion-icon>
			<span>{{ giornoIso | date: 'dd/MM/yyyy' }}</span>
		</button>
		<button class="cr-refresh-btn" (click)="loadDashboard()" [disabled]="loading">
			<ion-icon name="refresh-outline" [class.spin]="loading"></ion-icon>
		</button>
	</div>

	<ng-container *ngIf="dash">
		<!-- KPI -->
		<div class="cr-kpi-grid">
			<div class="kpi-tile">
				<div class="kpi-label">Ora</div>
				<div class="kpi-value">{{ dash.kpi.now_w | number: '1.0-0' }} <small>W</small></div>
			</div>
			<div class="kpi-tile">
				<div class="kpi-label">Oggi</div>
				<div class="kpi-value">{{ dash.kpi.today_kwh | number: '1.0-2' }} <small>kWh</small></div>
			</div>
			<div class="kpi-tile">
				<div class="kpi-label">Mese</div>
				<div class="kpi-value">{{ dash.kpi.month_kwh | number: '1.0-0' }} <small>kWh</small></div>
				<div class="kpi-sub" *ngIf="dash.kpi.expected_month_kwh">{{ expectedPct }}% dell'atteso</div>
			</div>
			<div class="kpi-tile">
				<div class="kpi-label">Anno</div>
				<div class="kpi-value">{{ dash.kpi.year_kwh | number: '1.0-0' }} <small>kWh</small></div>
			</div>
			<div class="kpi-tile">
				<div class="kpi-label">Totale</div>
				<div class="kpi-value">{{ dash.kpi.total_kwh | number: '1.0-0' }} <small>kWh</small></div>
			</div>
			<div class="kpi-tile">
				<div class="kpi-label">Inverter online</div>
				<div class="kpi-value">{{ dash.kpi.inverters_online }} / {{ dash.kpi.inverters_total }}</div>
			</div>
		</div>

		<!-- Curva potenza giornaliera -->
		<div class="cr-section">
			<h6>Potenza del giorno</h6>
			<div class="chart-box">
				<p-chart type="line" [data]="dayCurveData" [options]="dayCurveOptions"></p-chart>
			</div>
		</div>

		<!-- Energia per giorno (mese) -->
		<div class="cr-section">
			<h6>Energia del mese</h6>
			<div class="chart-box">
				<p-chart type="bar" [data]="monthData" [options]="monthOptions"></p-chart>
			</div>
		</div>

		<!-- Anno: prodotto vs atteso -->
		<div class="cr-section">
			<h6>Anno: prodotto vs atteso</h6>
			<div class="chart-box">
				<p-chart type="bar" [data]="yearData" [options]="yearOptions"></p-chart>
			</div>
		</div>

		<!-- Stato inverter -->
		<div class="cr-section">
			<h6>Stato inverter</h6>
			<div class="inv-list">
				<div class="inv-row inv-head">
					<span class="inv-name">Nome</span>
					<span class="inv-online">Online</span>
					<span class="inv-seen">Ultimo contatto</span>
				</div>
				<div class="inv-row" *ngFor="let i of dash.inverters">
					<span class="inv-name">
						{{ i.inv_name }}
						<small *ngIf="i.inv_last_status">{{ i.inv_last_status }}</small>
					</span>
					<span class="inv-online">
						<ion-badge [color]="i.online ? 'success' : 'danger'">{{ i.online ? 'Sì' : 'No' }}</ion-badge>
					</span>
					<span class="inv-seen">{{ i.inv_last_seen ? (i.inv_last_seen | date: 'dd/MM/yy HH:mm') : '-' }}</span>
				</div>
				<div class="inv-empty" *ngIf="!dash.inverters?.length">Nessun inverter configurato.</div>
			</div>
		</div>
	</ng-container>

	<div class="cr-loading" *ngIf="loading && !dash">
		<ion-spinner name="crescent"></ion-spinner>
	</div>
</ion-content>

<!-- Selettore data -->
<ion-modal [isOpen]="datePickerOpen" (didDismiss)="datePickerOpen = false" class="cr-date-modal">
	<ng-template>
		<ion-datetime
			presentation="date"
			[value]="giornoIso"
			[max]="todayMax"
			(ionChange)="onDayChange($event)"
			[showDefaultButtons]="true"
			doneText="OK"
			cancelText="Annulla"
		></ion-datetime>
	</ng-template>
</ion-modal>
