package views

import (
	"fmt"
	"github.com/dominicf2001/comfychan/internal/database"
	"github.com/dominicf2001/comfychan/internal/util"
	"github.com/dominicf2001/comfychan/web/views/shared"
	"strconv"
)

templ PostAdminDialog(post database.Post) {
	{{ elPostId := fmt.Sprintf("post-%d", post.Id) }}
	<dialog
		id={ elPostId + "-dialog" }
		class="admin-dialog"
	>
		<h1>{ elPostId }</h1>
		<button
			class="link-button"
			hx-delete={ fmt.Sprintf("/admin/posts/%d", post.Id) }
			hx-swap="none"
			_="on htmx:afterRequest trigger refreshPosts on body"
			hx-confirm="Are you sure you wish to delete this post?"
		>Delete</button>
		<button
			class="link-button"
			_={ fmt.Sprintf(`on click call #%s-dialog-2.showModal()`, elPostId) }
		>IP ban</button>
		<button
			class="admin-dialog-close-btn link-button"
			_={ fmt.Sprintf("on click call #%s-dialog.close()", elPostId) }
		>Close</button>
	</dialog>
	<dialog
		id={ elPostId + "-dialog-2" }
		class="admin-dialog"
	>
		<h1>Ban info</h1>
		<form
			hx-post={ fmt.Sprintf("/admin/ban/%d", post.Id) }
			hx-swap="none"
			_="on htmx:afterRequest trigger refreshPosts on body"
			hx-confirm="Are you sure you wish to ban this post's ip?"
		>
			<div style="margin-bottom: 5px;">
				<span>Reason: </span>
				<input name="reason"/>
			</div>
			<div>
				<span>Days: </span>
				<input type="datetime-local" name="expiration"/>
			</div>
			<button
				type="submit"
				class="link-button"
			>Ban</button>
		</form>
		<button
			class="admin-dialog-close-btn link-button"
			_={ fmt.Sprintf("on click call #%s-dialog-2.close()", elPostId) }
		>Cancel</button>
	</dialog>
}

templ PostOriginal(post database.Post, thread database.Thread) {
	<article id={ fmt.Sprintf("post-%d", post.Number) } class="post-op">
		<div>
			<span
				class="link-button"
				onclick="togglePostFile(this)"
				class="link-button"
				style=" display: none;"
			>[close]</span>
			File:
			<a href={ templ.URL("/static/media/posts/full/" + post.MediaPath) } class="post-filename">
				{ post.MediaPath }
			</a>
			<div class="post-img-info">
				<span>{ util.FormatFileInfo(util.GetPostFileInfo(post.MediaPath)) }</span>
			</div>
		</div>
		<img
			onclick="togglePostFile(this)"
			loading="lazy"
			src={ fmt.Sprintf("/static/media/posts/thumb/%s", post.ThumbPath) }
			data-full={ post.MediaPath }
			data-thumb={ post.ThumbPath }
			class="post-img"
		/>
		<video controls style="display: none;" class="post-vid"></video>
		<header style="margin-top: 10px;" class="post-header">
			<h1 class="thread-subject">{ thread.Subject } -</h1>
			<span class="post-author">{ post.Author }</span>
			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
			<span
				_={ fmt.Sprintf("on click set #newPostBody.value to #newPostBody.value + '>>%d\n'", post.Number) }
				class=" post-num"
			>
				No.{ strconv.Itoa(post.Number) }
			</span>
			<span class="post-replies"></span>
		</header>
		<p class="post-body">
			@templ.Raw(util.EnrichPost(post.Body))
		</p>
	</article>
}

templ PostReply(post database.Post, threadContext ThreadContext) {
	{{ elPostId := fmt.Sprintf("post-%d", post.Id) }}
	<article id={ fmt.Sprintf("post-%d", post.Number) } class="post">
		<header class="post-header">
			if threadContext.IsAdmin {
				<span
					id={ fmt.Sprintf("%s-admintoggle", elPostId) }
					class="link-button"
					style="float: left;"
					_={ fmt.Sprintf(`on click call #%s-dialog.showModal()`, elPostId) }
				>
					M
				</span>
			}
			<span class="post-author">{ post.Author }</span>
			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
			<span
				_={ fmt.Sprintf("on click set #newPostBody.value to #newPostBody.value + '>>%d\n'", post.Number) }
				class=" post-num"
			>
				No.{ strconv.Itoa(post.Number) }
			</span>
			<span class="post-replies"></span>
		</header>
		if post.MediaPath != "" {
			<div>
				<div style="margin-bottom: 2px;">
					<span
						class="link-button"
						onclick="togglePostFile(this)"
						class="link-button"
						style=" display: none;"
					>[close]</span>
					File:
					<a href={ templ.URL("/static/media/posts/full/" + post.MediaPath) } class="post-filename">
						{ post.MediaPath }
					</a>
					<div class="post-img-info">
						<span>{ util.FormatFileInfo(util.GetPostFileInfo(post.MediaPath)) }</span>
					</div>
				</div>
				<img
					onclick="togglePostFile(this)"
					loading="lazy"
					src={ fmt.Sprintf("/static/media/posts/thumb/%s",
			post.ThumbPath) }
					data-full={ post.MediaPath }
					data-thumb={ post.ThumbPath }
					class="post-img"
				/>
				<video controls style="display: none;" class="post-vid"></video>
			</div>
		}
		<p class="post-body">
			@templ.Raw(util.EnrichPost(post.Body))
			if post.Banned {
				<strong class="post-banned-message">(USER WAS BANNED FOR THIS POST)</strong>
			}
		</p>
		@PostAdminDialog(post)
	</article>
}

templ Posts(posts []database.Post, thread database.Thread, threadContext ThreadContext) {
	@PostOriginal(posts[0], thread)
	<div>
		for _, post := range (posts[1:]) {
			@PostReply(post, threadContext)
			<br/>
		}
	</div>
}

type ThreadContext struct {
	IsAdmin bool
}

templ Thread(board database.Board, thread database.Thread, posts []database.Post, threadContext ThreadContext) {
	@shared.Layout() {
		<script src="/static/thread.js" defer></script>
		@BoardHeader(board)
		<div class="new-post-container">
			@shared.NewPostForm(board, fmt.Sprintf("/%s/threads/%d", board.Slug, thread.Id), false)
		</div>
		<hr/>
		<div style="margin-left: 25px;">
			<a href={ templ.URL("/" + thread.BoardSlug) } style="margin-right: 5px;" class="link-button">[Catalog]</a>
			<a _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a>
		</div>
		<hr/>
		<div
			class="thread"
			hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", thread.BoardSlug, thread.Id) }
			hx-trigger="refreshPosts from:body"
			_="on htmx:afterSwap call insertHeaderReplies()"
		>
			@Posts(posts, thread, threadContext)
		</div>
	}
}