package views

import (
	"fmt"
	"go.fifitido.net/ytdl-web/pkg/ytdl/metadata"
)

type DownloadsViewModel struct {
	Url  string
	Meta *metadata.Metadata
}

templ videoFormatView(vm *DownloadsViewModel, vidIndex int, format metadata.Format, label string) {
	{{ filename := fmt.Sprintf("%s-%s.%s", vm.Meta.ID, format.Resolution, format.Ext) }}
	<div style="font-size: smaller">{ label }</div>
	<div class="flex-grow-1 d-flex gap-3">
		<style>
		    .dl-direct:after {
		        content: 'Download (direct)';
		    }
		</style>
		<a
			class="btn btn-primary flex-grow-1 dl-direct"
			download={ filename }
			href={ templ.SafeURL(format.Url) }
			aria-label="Direct Download"
		>
			// Workaround for browsers that use the content of the link as the filename
			<span class="d-none">{ filename }</span>
		</a>
		<a
			class="btn btn-primary flex-grow-1"
			download={ filename }
			href={ pathTo(ctx, fmt.Sprintf("/download/proxy?url=%s&format=%s&index=%d", vm.Url, format.FormatID, vidIndex)) }
			aria-label="Proxied Download"
		>
			Download (proxied)
		</a>
	</div>
}

templ videoView(vm *DownloadsViewModel, index int, video *VideoViewModel) {
	if index != 0 {
		<hr class="mt-5"/>
	}
	<div class="d-flex flex-column flex-lg-row justify-content-center gap-5 mt-5">
		{{
			thumbnail := video.Meta.Thumbnail
			thumbnailAlt := video.Meta.ID
			if video.Meta.Title != nil {
				thumbnailAlt = *video.Meta.Title
			}
		}}
		if thumbnail != nil {
			<div class="d-flex justify-content-center">
				<img src={ *thumbnail } alt={ thumbnailAlt } style="max-height: 25rem; max-width: 100%; margin: 0 auto"/>
			</div>
		}
		<div class={ downloads(), "flex-lg-grow-1" }>
			for _, format := range video.Formats {
				@videoFormatView(vm, index, format, format.Format)
			}
		</div>
	</div>
	if len(video.OtherFormats) > 0 {
		{{ collapseId := fmt.Sprintf("collapse-%s-%d", vm.Meta.ID, index) }}
		<div class="d-grid my-3">
			<button
				type="button"
				class="btn btn-secondary"
				data-bs-toggle="collapse"
				data-bs-target={ "#" + collapseId }
				aria-expanded="false"
				aria-controls={ collapseId }
			>
				See More Formats
			</button>
		</div>
		<div id={ collapseId } class={ fullWidth(), "collapse" }>
			<div class={ downloads(), "d-flex d-md-grid flex-column" }>
				for _, format := range video.OtherFormats {
					{{ label := fmt.Sprintf("ext: %s, resolution: %s, filesize: %d, note: %s", format.Ext, format.Resolution, format.Filesize, format.FormatNote) }}
					@videoFormatView(vm, index, format, label)
				}
			</div>
		</div>
	}
}

css downloads() {
	display: grid;
	grid-template-columns: minmax(auto, max-content) auto;
	gap: 1.5rem;
	align-items: center;
}

css fullWidth() {
	grid-column: span 2;
}

templ Downloads(vm *DownloadsViewModel) {
	{{ videos := GetVideosFromMetadata(vm.Meta) }}
	@Layout() {
		<div class="d-flex flex-column align-items-center">
			<h1>Download Video</h1>
			<h2 class="fs-4 text-muted text-center">{ *vm.Meta.Title }</h2>
			<p style="font-size: 0.85rem">{ vm.Url }</p>
			<a
				href={ pathTo(ctx) }
				hx-get={ pathTo(ctx) }
				hx-trigger="click"
				class="btn btn-secondary btn-sm mt-3"
				style="width: 30rem; max-width: 100%"
			>
				Download Another Video
			</a>
		</div>
		for index, video := range videos {
			@videoView(vm, index, video)
		}
	}
}