package components

import (
	"fmt"
	"arabica/internal/web/bff"
)

// HeaderProps contains all properties for the header component
type HeaderProps struct {
	IsAuthenticated         bool
	UserProfile             *bff.UserProfile
	UserDID                 string
	IsModerator             bool // Show admin link in dropdown
	UnreadNotificationCount int  // Badge count for bell icon
}

templ Header(isAuthenticated bool, userProfile *bff.UserProfile, userDID string) {
	@HeaderWithProps(HeaderProps{
		IsAuthenticated: isAuthenticated,
		UserProfile:     userProfile,
		UserDID:         userDID,
	})
}

templ HeaderWithProps(props HeaderProps) {
	<nav class="sticky top-0 z-50 bg-gradient-to-br from-brown-800 to-brown-900 text-white shadow-xl border-b-2 border-brown-600" style="view-transition-name: header-nav;">
		<div class="container mx-auto px-4 py-4">
			<div class="flex items-center justify-between">
				<!-- Logo - always visible -->
				<a href="/" class="flex items-center gap-2 hover:opacity-80 transition">
					<h1 class="text-2xl font-bold">☕ Arabica</h1>
					<span class="text-xs bg-amber-400 text-brown-900 px-2 py-1 rounded-md font-semibold shadow-sm">ALPHA</span>
				</a>
				<!-- Navigation links -->
				<div class="flex items-center gap-4">
					if props.IsAuthenticated {
						<!-- Notification bell -->
						<a href="/notifications" class="relative hover:opacity-80 transition p-1" title="Notifications">
							<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"></path>
							</svg>
							if props.UnreadNotificationCount > 0 {
								<span class="absolute -top-1 -right-1 bg-amber-400 text-brown-900 text-xs font-bold rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1 shadow-sm">
									{ formatNotificationCount(props.UnreadNotificationCount) }
								</span>
							}
						</a>
						<!-- User profile dropdown -->
						<div x-data="{ open: false }" class="relative">
							<button @click="open = !open" @click.outside="open = false" class="flex items-center gap-2 hover:opacity-80 transition focus:outline-none">
								@Avatar(AvatarProps{
									AvatarURL:   getHeaderAvatarURL(props.UserProfile),
									DisplayName: getHeaderDisplayName(props.UserProfile),
									Size:        "sm",
								})
								<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
							<!-- Dropdown menu -->
							<div x-show="open" x-cloak x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="dropdown-menu">
								if props.UserProfile != nil && props.UserProfile.Handle != "" {
									<div class="dropdown-header">
										<p class="text-sm font-medium text-brown-900 truncate">
											if props.UserProfile.DisplayName != "" {
												{ props.UserProfile.DisplayName }
											} else {
												{ props.UserProfile.Handle }
											}
										</p>
										<p class="text-xs text-brown-500 truncate">{ "@" + props.UserProfile.Handle }</p>
									</div>
								}
								<a href={ templ.SafeURL("/profile/" + getProfileIdentifier(props.UserProfile, props.UserDID)) } class="dropdown-item">
									View Profile
								</a>
								<a href="/brews" class="dropdown-item">
									My Brews
								</a>
								<a href="/manage" class="dropdown-item">
									Manage Records
								</a>
								<a href="#" class="dropdown-item-disabled">
									Settings (coming soon)
								</a>
								if props.IsModerator {
									<div class="dropdown-divider"></div>
									<a href="/_mod" class="dropdown-item dropdown-item-mod">
										<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"></path>
										</svg>
										Moderation
									</a>
								}
								<div class="dropdown-divider">
									<form action="/logout" method="POST" @submit="if(window.ArabicaCache)window.ArabicaCache.invalidateCache()">
										<button type="submit" class="w-full text-left px-4 py-2 text-sm text-brown-700 hover:bg-brown-50 transition-colors">
											Logout
										</button>
									</form>
								</div>
							</div>
						</div>
					}
				</div>
			</div>
		</div>
	</nav>
}

// Helper function to get profile identifier (handle or DID)
// Prefers handle if available, falls back to DID
func getProfileIdentifier(userProfile *bff.UserProfile, userDID string) string {
	// Prefer handle if available (canonical URL format)
	if userProfile != nil && userProfile.Handle != "" {
		return userProfile.Handle
	}
	// Fall back to DID if handle not available
	if userDID != "" {
		return userDID
	}
	// Last resort: empty string (should not happen for authenticated users)
	return ""
}

// Helper functions for Avatar component
func getHeaderAvatarURL(userProfile *bff.UserProfile) string {
	if userProfile != nil {
		return userProfile.Avatar
	}
	return ""
}

func getHeaderDisplayName(userProfile *bff.UserProfile) string {
	if userProfile != nil {
		return userProfile.DisplayName
	}
	return ""
}

// formatNotificationCount formats the notification badge count (99+ for large numbers)
func formatNotificationCount(count int) string {
	if count > 99 {
		return "99+"
	}
	return fmt.Sprintf("%d", count)
}