{{- $acctID := .Identity.Account.AccountID }}

{{- $platform := .Platform }}
{{- $parsedPlatform := "" }}
{{- if not $platform }}
	{{- $platform = .Request.URL.Query.Get "platform" }}
	{{- if $platform }}
		{{- $parsedPlatform = (parsePlatform $platform) }}
	{{- end }}
{{- end }}

{{- $shopID := .ShopID }}
{{- if not $shopID }}
	{{- $shopID = .Request.URL.Query.Get "shop-id" }}
{{- end }}

{{- $selectedShop := "" }}

{{- $listingID := .ListingID }}
{{- if not $listingID }}
	{{- $listingID = .Request.URL.Query.Get "listing-id" }}
{{- end }}

{{- $selectedListing := "" }}


{{/* sse handler */}}
<div
	hidden
	hx-trigger="sse:accounts_{{$acctID}}_simulations"
	hx-get="/ui/accounts/{{$acctID}}/reports/mock"
	hx-vals="js:{
		platform: (new URLSearchParams(window.location.search)).get('platform'),
		'shop-id': (new URLSearchParams(window.location.search)).get('shop-id'),
	}"
	hx-target="body"
>
</div>

{{/* shop selector */}}
<label for="shop-selector">
	Select a Shop
</label>
<select
	id="shop-selector"
	hx-get="/ui/accounts/{{$acctID}}/reports/mock"
	hx-vals="js:{
		platform: console.log(event.target.value.replace(/-.*/, '')) || event.target.value.replace(/-.*/, ''),
		'shop-id': console.log(event.target.value.replace(/[^-]*-/, '')) || event.target.value.replace(/[^-]*-/, ''),
	}"
	hx-push-url="true"
	hx-target="body"
>
{{- $shops := .Accounts.GetMockShops $acctID }}
{{- $shopOptionIsSelected := false }}
{{- range $shop := $shops }}
	{{- $shopOptionIsSelected = and (eq $parsedPlatform $shop.Platform) (eq $shopID $shop.ShopID) }}
	{{- if $shopOptionIsSelected }}
		{{ $selectedShop = $shop }}
		{{ break }}
	{{- end }}
{{- end }}
	<option disabled {{if not $shopOptionIsSelected}}selected{{end}}>
		- select a shop -
	</option>
{{- range $shop := $shops }}
	{{- $isSelected := and (eq $parsedPlatform $shop.Platform) (eq $shopID $shop.ShopID) }}
	<option
		value="{{ $shop.Platform }}-{{ $shop.ShopID }}"
		{{ if $isSelected }}selected{{end}}
	>
		{{ $shop.Name }}
	</option>
{{- end }}
</select>


{{/* platform label */}}
<h3 class="m-[1em]">
	Platform: {{ $platform }}
</h3>


{{/* raw event table */}}
{{- $evts := "" }}
{{- if and $platform $shopID }}
	{{- $evts = .Reports.GetRawShopEvents $acctID $parsedPlatform $shopID }}
{{- end }}

<table id="raw-event-table">
	<thead>
		<tr>
			<td>Time</td>
			{{/*<td>EventID</td>*/}}
			<td>Event</td>
		</tr>
	</thead>
	<tbody>
{{- if $evts }}
	{{- range $evt := $evts }}
		<tr>
			<td>{{$evt.EventTimestamp}}</td>
			{{/*<td>{{$evt.EventID}}</td>*/}}
			<td>{{prettyPrintJSON $evt.RawPayload}}</td>
		</tr>
	{{- end }}
{{- end }}

	</tbody>
</table>


{{/* TODO: implement listing chart */}}

{{- $displayListingReport := false }}
{{- if and $platform $shopID }}
	{{- $displayListingReport = true }}
{{- end }}

{{/* listing selector */}}
{{- if $displayListingReport }}
<label for="listing-selector">
	Select a Listing
</label>
<select
	id="listing-selector"
	hx-get="/ui/accounts/{{$acctID}}/reports/mock"
	hx-vals="js:{
		platform: event.target.value.replace(/-.*/, ''),
		'shop-id': event.target.value.replace(/[^-]*-/, '').replace(/\..*/, ''),
		'listing-id': event.target.value.replace(/.*\./, ''),
	}"
	hx-push-url="true"
	hx-target="body"
>
{{- $listings := .Accounts.ListMockListingsForShop $acctID $parsedPlatform $shopID }}
{{- $listingOptionIsSelected := false }}
{{- range $listing := $listings }}
	{{- $listingOptionIsSelected = and (eq $parsedPlatform $selectedShop.Platform) (eq $shopID $selectedShop.ShopID) | and (eq $listingID $listing.ListingID) }}
	{{- if $listingOptionIsSelected }}
		{{ $selectedListing = $listing }}
		{{ break }}
	{{- end }}
{{- end }}
	<option disabled {{if not $listingOptionIsSelected}}selected{{end}}>
		- select a listing -
	</option>
{{- range $listing := $listings }}
	{{- $isSelected := and (eq $parsedPlatform $listing.Platform) (eq $shopID $listing.ShopID) | and (eq $listingID $listing.ListingID) }}
	<option
		value="{{ $listing.Platform }}-{{ $listing.ShopID }}.{{ $listing.ListingID }}"
		{{ if $isSelected }}selected{{end}}
	>
		{{ $listing.Name }} - {{ $listing.ListingID }}
	</option>
{{- end }}
</select>


{{- $report := "" }}
{{- if $displayListingReport | and $listingID }}
	{{- $report = .Reports.GetListingCountsReport $acctID $parsedPlatform $shopID $listingID }}
{{- end }}

{{- if $report }}
	{{- $minCount := $report.MinCount.Count }}
	{{- $maxCount := $report.MaxCount.Count }}
	{{- $countRange := subInt64 $maxCount $minCount }}
	{{- $numCounts := len $report.Counts }}


	<div
		class="h-[min(100cqw,75vh)] p-[1em]"
	>
		<div
			hx-get="/api/accounts/{{$acctID}}/platforms/{{$platform}}/shops/mocks/{{$shopID}}/listings/{{$listingID}}/charts/counts"
			hx-trigger="load,resize"
			hx-resize-debounce="500"
			hx-vals="js:{
				width: this.getBoundingClientRect().width,
				height: this.getBoundingClientRect().height,
				timezone: Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone,
			}"
			class="h-full w-full"
		>
			{{/* will get replaced after loaded and upon resizing */}}
			<svg width="100%" height="100%">
			</svg>
		</div>
	</div>


	{{/*
	<div
		id="listing-counts-chart"
		class="
			w-full
			h-[30em]
			bg-card
		"
		style="contain: layout;"
	>
	{{- range $i, $count := $report.Counts }}
		{{- $height := multFloat (divFloat (subFloat (int64ToFloat $count.Count) (int64ToFloat $minCount)) (int64ToFloat $countRange)) 100 }}
		{{- $width := subFloat (divFloat 100 (intToFloat $numCounts)) 1 }}
		{{- $left := divFloat (intToFloat (multInt $i 100)) (intToFloat $numCounts) }}
		{{- $bottom := 0 }}
		<div
			class="
				bg-accent
				rounded-sm
				border-black
			"
			style="
				position: absolute;
				bottom: {{$bottom}}%;
				left: {{$left}}%;
				height: {{$height}}%;
				width: {{$width}}%;
			"
		>
			<div
				style="
					position: absolute;
					top: 10%;
					text-align: center;
				"
			>
				{{$count.Count}}
			</div>
		</div>
	{{- end }}
	</div>

	<svg
		version="1.1"
		width="500" height="500"
		style="width: 100%; height: auto;"
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 100 100"
	>
	{{- range $i, $count := $report.Counts }}
		{{- $height := multFloat (divFloat (subFloat (int64ToFloat $count.Count) (int64ToFloat $minCount)) (int64ToFloat $countRange)) 100 }}
		{{- $y := subFloat 100 (multFloat (divFloat (subFloat (int64ToFloat $count.Count) (int64ToFloat $minCount)) (int64ToFloat $countRange)) 100) }}
		{{- $width := subFloat (divFloat 100 (intToFloat $numCounts)) 1 }}
		{{- $x := divFloat (intToFloat (multInt $i 100)) (intToFloat $numCounts) }}

		<rect x="{{$x}}" y="{{$y}}" width="{{$width}}" height="{{$height}}" class="fill-accent" />
		<text x="{{$x}}" y="{{$y}}" width="{{$width}}" height="10" class="fill-white stroke-2 text-[4px]">
			{{$count.Count}}
		</text>
	{{- end }}
	</svg>
	*/}}

{{- end }}

<table id="listing-counts-table">
	<thead>
		<tr>
			<td>Time</td>
			{{/*<td>EventID</td>*/}}
			<td>Count</td>
		</tr>
	</thead>
	<tbody>
{{- if $report }}
	{{- range $count := $report.Counts }}
		<tr>
			<td>{{if $count.EventTimestamp}}{{$count.EventTimestamp}}{{end}}</td>
			<td>{{$count.Count}}</td>
		</tr>
	{{- end }}
{{- end }}

	</tbody>
</table>
{{- end }}