package ui

import (
	"github.com/fserg/md-to-html/internal/ui/components/button"
	"github.com/fserg/md-to-html/internal/ui/components/card"
)

templ Result(previewID, downloadID string, fullHTML string, filename string) {
	@card.Card(card.Props{Class: "section-card border-primary/20 bg-background/90"}) {
		@card.Content(card.ContentProps{Class: "space-y-4"}) {
			<div class="flex flex-wrap items-center gap-3">
				@button.Button(button.Props{
					Href:    "/preview/" + previewID,
					Target:  "_blank",
					Class:   "rounded-2xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90",
					Variant: button.VariantDefault,
				}) {
					Открыть превью
				}
				@button.Button(button.Props{
					Href:    "/download/" + downloadID,
					Class:   "rounded-2xl border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted/60",
					Variant: button.VariantOutline,
				}) {
					Скачать HTML
				}
				<span class="text-sm text-muted-foreground">Файл: <span class="font-medium text-foreground">{ filename }</span></span>
			</div>
			<p class="text-sm leading-6 text-muted-foreground">
				Ссылки одноразовые: после первого успешного открытия соответствующий UUID удаляется из preview-store.
			</p>
			<details class="group overflow-hidden rounded-[1.25rem] border border-border bg-card/80">
				<summary class="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-foreground">
					<span class="inline-flex items-center gap-2">
						<span class="inline-flex size-6 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground">i</span>
						Inline-превью в изолированном iframe
					</span>
				</summary>
				<div class="border-t border-border/70 px-4 pb-4 pt-3">
					<iframe
						class="result-frame"
						sandbox=""
						referrerpolicy="no-referrer"
						srcdoc={ fullHTML }
					></iframe>
				</div>
			</details>
		}
	}
}

templ Error(msg string) {
	<div class="rounded-[1.25rem] border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
		{ msg }
	</div>
}