package pages

import (
	"fmt"
	"net/http"
	"math/rand/v2"
	"time"

	"forge.capytal.company/capytalcode/project-comicverse/lib/router/rerrors"

	"keikos.work/templates/layouts"
	"keikos.work/assets"
)

type Home struct{}

func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	if err := p.page().Render(r.Context(), w); err != nil {
		rerrors.InternalError(err).ServeHTTP(w, r)
	}
}

templ (p *Home) head() {
	<meta name="description" content={ "Social and contact information for Helena \"Keiko\" Ayrim" }/>
}

templ (p *Home) page() {
	@layouts.Page(layouts.PageInfo{
		Heading:     p.head(),
		BodyClasses: "scroll-smooth snap-normal snap-y snap-mandatory",
	}) {
		<header
			class="fixed w-100% h-screen md:flex justify-center items-center overflow-x-hidden"
			id="header"
			aria-labelledby="header-title"
		>
			<h1
				id="header-title"
				class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
						"md:relative md:m-0 md:horizontal-tb md:w-fit" }
			>
				Keiko <span class="font-japanese text-8xl">稽古</span>
			</h1>
			<div class="absolute z-2 w-100% h-100% md:flex justify-center items-center top-0 left-0">
				<div
					class={ "absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent",
							"md:bg-gradient-to-t md:from-20% md:to-50% md:opacity-100" }
					aria-hidden="true"
				></div>
				<img
					class="absolute z-1 top-0 left-0 -translate-x-15% h-100% md:relative md:h-70% md:translate-x-0 md:rounded-xl"
					src={ fmt.Sprintf("/assets/img/%d.png", rand.IntN(4-1)+1) }
					alt="a beatiful drawing"
				/>
			</div>
		</header>
		<div
			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none snap-center"
			aria-hidden="true"
		></div>
		<main
			class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden snap-center"
			id="socials"
			aria-labelledby="socials-title"
		>
			<div class="relative w-full h-full flex flex-col justify-between md:w-fit md:h-fit">
				<h2
					class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent",
							"md:horizontal-tb md:text-center" }
					id="socials-title"
				>
					Socials
				</h2>
				<ul class="relative z-3 list-none text-4xl p-0 pr-5 underline md:flex md:gap-10">
					<li class="flex justify-end mb-4 md:m-0">
						<a
							class="relative flex items-center gap-2 text-current"
							href="https://www.instagram.com/keiko_drawn/"
							referrerpolicy="no-referrer"
							rel="external nofollow noopener noreferrer"
							target="_blank"
						>
							<img
								class="hidden i-pixelarticons:camera h-3rem md:inline-block"
								aria-hidden="true"
							/>
							Instagram
							<img
								class="inline-block i-pixelarticons:camera h-3rem md:hidden"
								aria-hidden="true"
							/>
							<img
								class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
										"md:translate-x-100% md:opacity-100" }
								alt="(Opens in new tab)"
							/>
						</a>
					</li>
					<li class="flex justify-end mb-4 md:m-0">
						<a
							class="relative flex items-center gap-2 text-current"
							href="https://www.tumblr.com/keikod"
							referrerpolicy="no-referrer"
							rel="external nofollow noopener noreferrer"
							target="_blank"
						>
							<img
								class="hidden i-pixelarticons:file-alt h-3rem md:inline-block"
								aria-hidden="true"
							/>
							Tumblr
							<img
								class="inline-block i-pixelarticons:file-alt h-3rem md:hidden"
								aria-hidden="true"
							/>
							<img
								class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
										"md:translate-x-100% md:opacity-100" }
								alt="(Opens in new tab)"
							/>
						</a>
					</li>
					<li
						class="flex justify-end"
					>
						<a
							class="relative flex items-center gap-2 text-current"
							href="https://bsky.app/profile/keikos.work"
							referrerpolicy="no-referrer"
							rel="external nofollow noopener noreferrer"
							target="_blank"
						>
							<img
								class="hidden i-pixelarticons:bug h-3rem md:inline-block"
								aria-hidden="true"
							/>
							BlueSky
							<img
								class="inline-block i-pixelarticons:bug h-3rem md:hidden"
								aria-hidden="true"
							/>
							<img
								class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
										"md:translate-x-100% md:opacity-100" }
								alt="(Opens in new tab)"
							/>
						</a>
					</li>
				</ul>
			</div>
			<span
				class="absolute z-2 top-0 left-0 w-full h-full bg-gradient-to-b from-black to-transparent"
				aria-hidden="true"
			></span>
			<span
				class="absolute z-1 top-0 left-0 w-full h-full bg-heropattern bg-bottom"
				aria-hidden="hidden"
			></span>
		</main>
		<section
			class="relative py-20 bg-heropattern bg-black bg-top w-full h-screen flex justify-between overflow-x-hidden snap-center"
			id="worldbuilding"
			aria-labelledby="worldbuilding-title"
		>
			<div class="relative w-full h-full flex md:flex-col justify-between md:justify-center md:items-center md:w-fit md:h-fit">
				<h2
					class={ "relative z-4 m-0 pt-4 text-8xl vertical-lr text-stroke-1px text-stroke-white text-transparent max-h-80%",
							"md:horizontal-tb md:text-center" }
					id="worldbuilding-title"
				>
					Worldbuilding
				</h2>
				<div class="relative z-3 list-none p-0 pr-5 md:p-0 flex flex-col justify-between md:items-center max-w-60% max-h-80% md:w-fit">
					<p class="text-2xl text-justify mt-3 md:text-center">
						Heaven is a wasteland filled with the ones we once prayed for.
						Now, the only place left for us is a broken underground hell, without
						faith of ever looking at the real starts.
					</p>
					<h3 class="m-0 mb-3 text-4xl text-right md:w-fit">
						<a
							class="relative flex items-center gap-2 text-current"
							href="https://tumblr.com/ak-worldbuilding"
							referrerpolicy="no-referrer"
							rel="external nofollow noopener noreferrer"
							target="_blank"
						>
							Lost Under The Night Sky
							<img
								class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-70% opacity-50",
									"md:translate-x-100% md:opacity-100" }
								alt="(Opens in new tab)"
							/>
						</a>
					</h3>
				</div>
			</div>
		</section>
		<footer
			class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden snap-center",
					"md:flex justify-center items-center" }
			id="footer"
			aria-label="contact"
		>
			<div class={ "relative z-3 md:flex flex-col items-end" }>
				<div class="hidden md:block" aria-label="Signature">
					<div class="w-15rem h-15rem" aria-hidden="true">
						@p.sign()
					</div>
				</div>
				<div class="relative w-full h-full flex justify-between md:w-fit md:h-fit md:gap-7">
					<h2
						class={ "relative z-4 m-4 mb-8 text-5xl vertical-rl rotate-180 text-white",
							"md:horizontal-tb md:text-center md:rotate-0 md:m-0 md:flex md:items-center" }
					>
						<a
							class="relative z-1 text-current no-underline"
							href="mailto:contact@keikos.work"
							rel="author"
						>
							contact@keikos.work
						</a>
					</h2>
					<div class="flex flex-col justify-end m-4 mb-4 text-right md:m-0 md:justify-center">
						<div class="w-full flex justify-end md:hidden" aria-label="Signature">
							<div class="w-15rem h-15rem" aria-hidden="true">
								@p.sign()
							</div>
						</div>
						<p class="mb-0">{ time.Now().Format("2006") } &copy; Helena "Keiko" Ayrim</p>
						<p class="text-xs opacity-50 md:mt-1">
							Made & managed with
							<span class="i-pixelarticons:heart h-0.75rem">love</span> by 
							<a
								class="relative text-current underline-offset-3"
								href="https://guz.one"
								referrerpolicy="no-referrer-when-downgrade"
								rel="external"
								target="_blank"
							>
								Gustavo "Guz" L Mello
								<img
									class={ "absolute inline-block i-pixelarticons:external-link",
										"w-0.5rem h-0.5rem top-0 right-0 translate-x-100% opacity-50",
										"md:translate-x-100% md:opacity-100" }
									alt="(Opens in new tab)"
								/>
							</a>
							<span class="inline-block md:hidden pl-3">(Work In Progress)</span>
							<span class="hidden md:inline-block pl-3">(WIP)</span>
						</p>
					</div>
				</div>
			</div>
			<span
				class="absolute z-2 top-0 left-0 w-full h-full bg-gradient-to-t from-black to-transparent"
				aria-hidden="true"
			></span>
		</footer>
	}
}

func (p *Home) sign() templ.Component {
	f, err := assets.ASSETS.ReadFile("img/sign.svg")
	if err != nil {
		return templ.Raw("<img src=\"/assets/img/sign.svg\"/>")
	}
	return templ.Raw(string(f))
}
