package templates

import (
	"fmt"

	"git.ma-al.com/goc_marek/ps_shop/internal/viewmodel"
)

templ ProductPage(data viewmodel.ProductPageData, cssPath string, jsPath string) {
	@Layout(data.Product.Name, cssPath, jsPath, data.Menu, data.Locale) {
		<main class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.28),_transparent_40%),linear-gradient(180deg,#0c0a09,#1c1917)]">
			<div class="mx-auto flex max-w-6xl flex-col gap-12 px-6 py-10 lg:px-8">
				<header class="flex items-center justify-between border-b border-stone-800 pb-6">
					<a class="text-sm uppercase tracking-[0.32em] text-amber-300" href={ data.ShopBaseURL }>Prestashop Proxy</a>
					<div class="text-right text-sm text-stone-400">
						if data.Customer != nil {
							<p>{ fmt.Sprintf("%s %s", data.Customer.FirstName, data.Customer.LastName) }</p>
						} else {
							<p>Guest session</p>
						}
						if data.CartSummary != nil {
							<p>{ fmt.Sprintf("Cart items: %d", data.CartSummary.TotalItems) }</p>
						}
					</div>
				</header>

				<section class="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
					<div class="rounded-3xl border border-stone-800 bg-stone-900/70 p-8 shadow-2xl shadow-amber-950/20">
						<p class="text-xs uppercase tracking-[0.28em] text-stone-500">Product</p>
						if data.CategoryURL != "" && data.Product.CategoryName != "" {
							<a class="mt-4 inline-flex text-sm uppercase tracking-[0.24em] text-amber-300 underline underline-offset-4" href={ data.CategoryURL }>{ data.Product.CategoryName }</a>
						}
						<h1 class="mt-4 font-serif text-4xl text-stone-50">{ data.Product.Name }</h1>
						<p class="mt-6 max-w-2xl text-lg leading-8 text-stone-300">{ data.Product.ShortDescription }</p>
						<div class="prose prose-invert mt-8 max-w-none text-stone-300">
							@templ.Raw(data.Product.Description)
						</div>
					</div>

					<aside class="flex flex-col justify-between rounded-3xl border border-amber-500/30 bg-amber-400/10 p-8">
						<div>
							<p class="text-xs uppercase tracking-[0.28em] text-amber-200">Price</p>
							<p class="mt-4 text-5xl font-semibold text-stone-50">{ fmt.Sprintf("%.2f", data.Product.Price) }</p>
							<p class="mt-2 text-sm text-stone-300">Live data loaded from PrestaShop storage, rendered by Go.</p>
						</div>
						<form class="mt-10 flex flex-col gap-4" method="post" action={ data.ShopBaseURL + "/cart" }>
							<input type="hidden" name="id_product" value={ fmt.Sprintf("%d", data.Product.ID) }/>
							<button class="rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold uppercase tracking-[0.2em] text-stone-950 transition hover:bg-amber-200" type="submit">
								Add to cart in PrestaShop
							</button>
							<a class="text-sm text-stone-300 underline underline-offset-4" href={ data.ShopBaseURL + "/login" }>Account and login remain on PrestaShop</a>
						</form>
					</aside>
				</section>

				if data.Session != nil {
					<section class="rounded-3xl border border-stone-800 bg-stone-950/80 p-8">
						<p class="text-xs uppercase tracking-[0.28em] text-stone-500">Go Cookie Debug</p>
						<div class="mt-6 grid gap-6 lg:grid-cols-2">
							<div>
								<p class="text-sm font-semibold text-stone-200">Raw Cookie</p>
								<pre class="mt-3 overflow-x-auto rounded-2xl bg-black/30 p-4 text-xs leading-6 text-stone-300">{ data.Session.RawCookie }</pre>
							</div>
							<div>
								<p class="text-sm font-semibold text-stone-200">Decoded Values</p>
								<pre class="mt-3 overflow-x-auto rounded-2xl bg-black/30 p-4 text-xs leading-6 text-stone-300">
									for _, line := range sessionCookieLines(data.Session) {
										{ line }
										{"\n"}
									}
								</pre>
							</div>
						</div>
					</section>
				}
			</div>
		</main>
	}
}