import { SlicePipe } from '@angular/common'
import { Component, inject } from '@angular/core'
import { DateUtils } from '@core/utils'
import { DefaultService, Review } from '@api-client/angular'
import { RatingComponent } from '@frontend/shared'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { format, subDays } from 'date-fns'
import { EChartsOption } from 'echarts'
import { range } from 'es-toolkit'
import { NgxEchartsDirective } from 'ngx-echarts'
import { LucideChevronDown, LucideChevronLeft, LucideChevronRight } from '@lucide/angular'

@UntilDestroy({ checkProperties: true })
/** Allows the user to see relevant statistical data, e.g. best selling items, payment, etc */
@Component({
	selector: 'kadi-statistics',
	templateUrl: './statistics.component.html',
	imports: [NgxEchartsDirective, RatingComponent, SlicePipe, LucideChevronLeft, LucideChevronRight, LucideChevronDown],
})
export class StatisticsComponent {
	customerEventsChart: EChartsOption | undefined = undefined
	rushHoursChart: EChartsOption | undefined = undefined
	topDishes: string[] = []
	reviews: Review[] = []
	ratings: {
		totalRatings: number
		averageRating: number
	} = { averageRating: 0, totalRatings: 0 }
	private readonly _apiService = inject(DefaultService)

	constructor() {
		this.loadData()
	}

	private loadData(): void {
		this._apiService
			.statisticsControllerFind()
			.pipe(untilDestroyed(this))
			.subscribe({
				next: (data) => {
					this.customerEventsChart = {
						tooltip: { trigger: 'axis' },
						grid: { containLabel: true, height: '250px' },
						legend: {
							orient: 'vertical',
							left: '2%',
							top: '20%',
							backgroundColor: '#fff',
							// @ts-ignore It works
							shadowColor: 'rgba(0, 0, 0, 0.1)',
							shadowBlur: 8,
							padding: 16,
							borderRadius: 12,
							data: data.customerEventsData.map((point) => point.label),
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							position: 'top',
							axisLine: { show: false },
							axisTick: { show: false },
							splitLine: {
								show: true,
								// @ts-ignore It works
								alignWithLabel: true,
								lineStyle: { color: '#000' },
							},
							data: DateUtils.rangeDates(subDays(new Date(), 6), new Date()).map((date) =>
								format(date, 'EEE, dd. LLL'),
							),
						},
						yAxis: { show: false, type: 'value' },
						series: data.customerEventsData.map((point) => ({
							type: 'line',
							stack: 'Total',
							name: point.label,
							data: point.data,
						})),
					}

					this.rushHoursChart = {
						grid: { height: '100px' },
						xAxis: {
							type: 'category',
							boundaryGap: false,
							offset: 8,
							axisLabel: { interval: 4 },
							axisTick: { alignWithLabel: true, interval: 4 },
							data: range(24).map((x) => `${x} O' Clock`),
						},
						yAxis: { show: false, type: 'value' },
						series: [
							{
								type: 'bar',
								barWidth: 16,
								itemStyle: { borderRadius: 12 },
								data: data.rushHourData?.[0]?.data ?? [],
							},
						],
					}

					this.topDishes = data.topDishes

					if (data.ratings) this.ratings = data.ratings
					if (data.reviews) this.reviews = data.reviews
				},
			})
	}
}