package views

import (
	"fmt"

	"github.com/sblinch/kdl-go/document"
)

func StringToVibrantHSL(s string) string {
	var sum int
	for _, char := range s {
		sum += int(char)
	}
	hue := sum % 360
	return fmt.Sprintf("hsl(%d, 80%%, 50%%)", hue)
}

templ renderLink(name string, url string) {
	<li class="col-span-1 grid grid-cols-subgrid">
		<a
			class="aspect-square bg-surface p-4 rounded-lg text-sm flex flex-col justify-between leading-none border border-muted/20"
			href={ templ.URL(url) }
			target="_blank"
			rele="noopener noreferrer"
		>
			<div class="flex items-center justify-between">
				<div class="w-4 h-4 rounded-full" style={fmt.Sprintf("background: %s", StringToVibrantHSL(name))}></div>
				<svg class="text-highlight-med" width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
			</div>
			<span class="block">{ name }</span>
		</a>
	</li>
}

templ renderGroup(name string, nodes []*document.Node) {
	<li class="col-span-full grid grid-cols-subgrid gap-4">
		<h2 class="text-lg font-bold col-span-full pt-4">{ name }</h2>
		<ul class="col-span-full grid grid-cols-subgrid gap-4">
			for _, node := range nodes {
				if node.Name.ValueString() == "group" {
					@renderGroup(node.Arguments[0].ValueString(), node.Children)
				} else if node.Name.String() == "link" {
					{{ url, _ := node.Properties.Get("url") }}
					@renderLink(node.Arguments[0].ValueString(), url.ValueString())
				}
			}
		</ul>
	</li>
}

templ Authenticate() {
	@Document("Log In") {
		<div class="w-screen h-screen flex items-center justify-center">
			<main class="w-full max-w-xs bg-surface rounded-lg p-4 border border-muted/20">
				<p class="mb-3 font-serif">Can I see some ID, please?</p>
				<a href="/login" class="block text-center text-sm rounded py-2 px-2 bg-foam/20 text-foam">Log In with OIDC</a>
			</main>
		</div>
	}
}

templ Links(username string, doc *document.Document) {
	@Document("Links") {
		<div class="flex items-center justify-between px-3 py-2 text-subtle text-xs mb-4">
			<div>Howdy, <span class="font-mono text-gold">{ username }</span></div>
			<a href="/logout" class="underline text-iris">Log Out</a>
		</div>
		<ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 px-3 gap-x-4 gap-y-8 max-w-screen-xs sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg mx-auto">
			for _, node := range doc.Nodes {
				if node.Name.ValueString() == "group" {
					@renderGroup(node.Arguments[0].ValueString(), node.Children)
				} else if node.Name.ValueString() == "link" {
					{{ url, _ := node.Properties.Get("url") }}
					@renderLink(node.Arguments[0].ValueString(), url.ValueString())
				}
			}
		</ul>
	}
}