package playersview

import "git.haelnorr.com/h/oslstats/internal/db"
import "fmt"

templ SlapIDSection(player *db.Player, isOwner bool) {
	<div id="slap-id-section">
		if player.SlapID == nil && isOwner {
			@slapIDLinkPrompt(player)
		}
	</div>
}

templ slapIDLinkPrompt(player *db.Player) {
	<div class="bg-yellow/10 border border-yellow/30 rounded-lg p-6">
		<div class="flex items-start gap-4">
			<svg class="w-6 h-6 text-yellow shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
				></path>
			</svg>
			<div class="flex-1">
				<h3 class="text-lg font-semibold text-yellow mb-2">Slapshot ID Not Linked</h3>
				<p class="text-subtext0 mb-4">
					Your Slapshot ID is not linked. Please link your Steam account to your Discord account, then click the button below to connect your Slapshot ID.
				</p>
				<p class="text-subtext1 text-sm mb-4">
					Need help linking Steam to Discord?
					<a
						href="https://support.discord.com/hc/en-us/articles/32330173689623-Account-Connections-on-Discord-FAQ#h_01JVZBVNC1HYWX4BTPFN9B4B1V"
						target="_blank"
						rel="noopener noreferrer"
						class="text-blue hover:text-blue/80 underline transition"
					>
						Follow this guide
					</a>
				</p>
				<button
					hx-post={ fmt.Sprintf("/players/%d/link-slapid", player.ID) }
					hx-target="#slap-id-section"
					hx-swap="outerHTML"
					class="px-4 py-2 bg-green hover:bg-green/75 text-mantle rounded font-medium transition hover:cursor-pointer"
				>
					Link Slapshot ID
				</button>
			</div>
		</div>
	</div>
}