package views

import (
	"yoten.app/internal/server/views/layouts"
	"yoten.app/internal/server/views/partials"
)

templ IndexPage(params IndexPageParams) {
	@layouts.Base(layouts.BaseParams{Title: "home"}) {
		@partials.Header(partials.HeaderProps{User: params.User})
		<div class="container mx-auto max-w-2xl px-4 py-8">
			<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
				<div>
					<h1 class="text-3xl font-bold">Study Feed</h1>
					<p class="text-text-muted mt-1">See what the community is learning</p>
				</div>
				<a href="/session/new" class="btn btn-primary w-auto">
					<i class="w-4 h-4" data-lucide="plus"></i>
					<span>Log Session</span>
				</a>
			</div>
			<div x-data="{ mode: 'global' }" class="flex flex-col">
				<div class="flex p-1">
					<button
						type="button"
						hx-target="#study-feed"
						id="global-feed-button"
						hx-swap="innerHTML"
						hx-get="/feed?friends=false"
						hx-disabled-elt="#friends-feed-button,#global-feed-button"
						hx-indicator="#feed-spinner"
						@click="mode = 'global'"
						:disabled="mode === 'global'"
						:class="mode === 'global' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
						class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
					>
						Global
					</button>
					if params.User != nil {
						<button
							type="button"
							hx-target="#study-feed"
							id="friends-feed-button"
							hx-swap="innerHTML"
							hx-get="/feed?friends=true"
							hx-disabled-elt="#friends-feed-button,#global-feed-button"
							hx-indicator="#feed-spinner"
							@click="mode = 'friends'"
							:disabled="mode === 'friends'"
							:class="mode === 'friends' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
							class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
						>
							Friends
						</button>
					} else {
						<button
							type="button"
							disabled
							id="friends-feed-button"
							class="cursor-pointer text-text-muted disabled:cursor-not-allowed w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
							title="Login to see friends feed."
						>
							Friends
						</button>
					}
				</div>
				<div id="feed-spinner" class="htmx-indicator flex justify-center py-4">
					<i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
				</div>
			</div>
			<div>
				<div id="study-feed" hx-trigger="load" hx-get="/feed?friends=false" class="flex flex-col gap-6">
					<div class="flex justify-center py-4">
						<i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
					</div>
				</div>
			</div>
		</div>
	}
}