package pages

import (
	"fmt"
	"reichard.io/antholume/database"
	"reichard.io/antholume/ngtemplates/common"
	"reichard.io/antholume/ngtemplates/components"
)

templ Documents(settings common.Settings, documents []database.GetDocumentsWithStatsRow, nextPage, previousPage, totalPages, pageLimit int64) {
	@layout(settings, "Activity") {
		<div
			class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
		>
			<form
				class="flex gap-4 flex-col lg:flex-row mb-0"
				action="./documents"
				method="GET"
			>
				<div class="flex flex-col w-full grow">
					<div class="flex relative">
						<span
							class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
						>
							@components.Search2SVG("size-4")
						</span>
						<input
							type="text"
							id="search"
							name="search"
							class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
							placeholder="Search Author / Title"
						/>
					</div>
				</div>
				<div class="lg:w-60">
					@components.Button("Search", components.ButtonVariantSecondary)
				</div>
			</form>
		</div>
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
			for _, doc := range documents {
				@components.DocumentCard(doc)
			}
		</div>
		<div class="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
			if previousPage > 0 {
				<a
					href={ templ.SafeURL(fmt.Sprintf("./documents?page=%d&limit=%d", previousPage, pageLimit)) }
					class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
				>◄</a>
			}
			if nextPage <= totalPages {
				<a
					href={ templ.SafeURL(fmt.Sprintf("./documents?page=%d&limit=%d", nextPage, pageLimit)) }
					class="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
				>►</a>
			}
		</div>
		<div
			class="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
		>
			<input type="checkbox" id="upload-file-button" class="hidden css-button"/>
			<div
				class="absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2"
			>
				<form
					method="POST"
					enctype="multipart/form-data"
					action="./documents"
					class="flex flex-col gap-2 mb-0"
				>
					<input
						type="file"
						accept=".epub"
						id="document_file"
						name="document_file"
					/>
					<button
						class="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
						type="submit"
					>
						Upload File
					</button>
				</form>
				<label for="upload-file-button">
					<div
						class="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
					>
						Cancel Upload
					</div>
				</label>
			</div>
			<label
				class="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
				for="upload-file-button"
			>
				@components.UploadSVG("size-8")
			</label>
		</div>
	}
}