package components

import (
	"tangled.org/oolong.social/oolong/internal/atproto"
	"tangled.org/oolong.social/oolong/internal/web/bff"
	"tangled.org/pdewey.com/atp"
)

templ AuthorByline(profile *atproto.Profile, fallbackDID string) {
	if profile != nil {
		<a href={ templ.SafeURL("/profile/" + authorProfileID(profile, fallbackDID)) } class="inline-flex items-center gap-2 min-w-0 hover:opacity-85 transition-opacity">
			@Avatar(AvatarProps{
				AvatarURL:   authorAvatar(profile),
				DisplayName: authorDisplay(profile, fallbackDID),
				Size:        "sm",
			})
			<span class="min-w-0 leading-tight">
				<span class="block text-sm font-semibold text-primary truncate">{ authorDisplay(profile, fallbackDID) }</span>
				<span class="block text-xs text-muted truncate">{ "@" + atp.DisplayHandle(authorProfileID(profile, fallbackDID)) }</span>
			</span>
		</a>
	} else if fallbackDID != "" {
		<a href={ templ.SafeURL("/profile/" + fallbackDID) } class="inline-flex items-center gap-2 min-w-0 hover:opacity-85 transition-opacity">
			@Avatar(AvatarProps{DisplayName: fallbackDID, Size: "sm"})
			<span class="min-w-0 leading-tight">
				<span class="block text-sm font-semibold text-primary truncate">{ fallbackDID }</span>
			</span>
		</a>
	}
}

func authorProfileID(profile *atproto.Profile, fallbackDID string) string {
	if profile != nil && profile.Handle != "" {
		return profile.Handle
	}
	if profile != nil && profile.DID != "" {
		return profile.DID
	}
	return fallbackDID
}

func authorDisplay(profile *atproto.Profile, fallbackDID string) string {
	if profile != nil && profile.DisplayName != nil && *profile.DisplayName != "" {
		return *profile.DisplayName
	}
	if profile != nil && profile.Handle != "" {
		return atp.DisplayHandle(profile.Handle)
	}
	if profile != nil && profile.DID != "" {
		return profile.DID
	}
	return fallbackDID
}

func authorAvatar(profile *atproto.Profile) string {
	if profile != nil && profile.Avatar != nil {
		return *profile.Avatar
	}
	return ""
}

// TypeBadge renders a colored pill with an icon and type label for record type identification.
templ TypeBadge(recordType string) {
	switch recordType {
		case "oolong-tea", "tea":
			<span class="type-badge type-badge-tea">@IconTea() Tea</span>
		case "oolong-brew", "brew":
			<span class="type-badge type-badge-brew">@IconTeapot() Brew</span>
		case "oolong-vendor", "vendor":
			<span class="type-badge type-badge-vendor">@IconStore() Vendor</span>
		case "oolong-infuser", "infuser":
			<span class="type-badge type-badge-infuser">@IconGear() Infuser</span>
		case "oolong-vessel", "vessel":
			<span class="type-badge type-badge-vessel">@IconVessel() Vessel</span>
	}
}

// RecordViewHeaderProps defines properties for the shared record view header.
type RecordViewHeaderProps struct {
	RecordType    string // "brew", "tea", "vendor", "infuser", "vessel", "brew"
	Title         string
	Timestamp     string // formatted date string
	TimestampISO  string // ISO 8601 for <time> element
	AuthorDID     string
	AuthorHandle  string
	AuthorDisplay string
	AuthorAvatar  string
}

// RecordViewHeader renders the tinted header region with author attribution and type badge.
templ RecordViewHeader(props RecordViewHeaderProps) {
	<div class={ "record-view-header", "record-view-header-" + props.RecordType }>
		if props.AuthorHandle != "" {
			<div class="record-view-author">
				<a href={ templ.SafeURL("/profile/" + props.AuthorHandle) } class="flex-shrink-0">
					@Avatar(AvatarProps{
						AvatarURL:   props.AuthorAvatar,
						DisplayName: props.AuthorDisplay,
						Size:        "md",
					})
				</a>
				<div class="record-view-author-info">
					<div class="record-view-author-names">
						if props.AuthorDisplay != "" {
							<a href={ templ.SafeURL("/profile/" + props.AuthorHandle) } class="record-view-author-displayname">
								{ props.AuthorDisplay }
							</a>
						}
						<a href={ templ.SafeURL("/profile/" + props.AuthorHandle) } class="record-view-author-handle">
							{ "@" + atp.DisplayHandle(props.AuthorHandle) }
						</a>
					</div>
					<div class="record-view-meta">
						<time datetime={ props.TimestampISO } data-local="long">{ props.Timestamp }</time>
					</div>
				</div>
				@TypeBadge(props.RecordType)
			</div>
		} else {
			<div class="record-view-meta mb-3">
				@TypeBadge(props.RecordType)
				<time datetime={ props.TimestampISO } data-local="long">{ props.Timestamp }</time>
			</div>
		}
		if props.Title != "" {
			<h2 class="record-view-title">{ props.Title }</h2>
		}
	</div>
}

// EmptyStateProps defines properties for empty state messaging
type EmptyStateProps struct {
	Message    string
	SubMessage string
	ActionURL  string
	ActionText string
}

// EmptyState renders an empty state card
templ EmptyState(props EmptyStateProps) {
	@Card(CardProps{InnerCard: true, Class: "text-center"}, emptyStateContent(props))
}

templ emptyStateContent(props EmptyStateProps) {
	<p class="text-secondary text-lg mb-4 font-medium">{ props.Message }</p>
	if props.SubMessage != "" {
		<p class="text-sm text-emphasis mb-4">{ props.SubMessage }</p>
	}
	if props.ActionURL != "" && props.ActionText != "" {
		<a
			href={ templ.SafeURL(props.ActionURL) }
			class="inline-block btn-primary py-3 px-6 rounded-lg"
		>
			{ props.ActionText }
		</a>
	}
}

// DetailFieldProps defines properties for a labeled detail field
type DetailFieldProps struct {
	Label    string
	Value    string
	LinkHref string          // Optional: wraps value in a link
	Icon     templ.Component // Optional: icon rendered before the label
}

// DetailField renders a labeled value with a "Not specified" fallback
templ DetailField(props DetailFieldProps) {
	<div class="section-box">
		<h3 class="text-sm font-medium text-muted uppercase tracking-wider mb-2">
			if props.Icon != nil {
				<span class="inline-flex items-center gap-1">
					@props.Icon
					{ props.Label }
				</span>
			} else {
				{ props.Label }
			}
		</h3>
		if props.Value != "" && props.LinkHref != "" {
			<a href={ templ.SafeURL(props.LinkHref) } class="font-semibold text-primary hover:underline">{ props.Value }</a>
		} else if props.Value != "" {
			<div class="font-semibold text-primary">{ props.Value }</div>
		} else {
			<span class="text-placeholder">Not specified</span>
		}
	</div>
}

// DetailStackedProps defines properties for the typography-driven detail components.
type DetailStackedProps struct {
	Label    string
	Value    string
	LinkHref string          // Optional: wraps value in a link
	Icon     templ.Component // Optional: icon rendered before the label
	Large    bool            // Uses detail-value-lg for primary details
}

// DetailStacked renders a label above a value with no container box.
templ DetailStacked(props DetailStackedProps) {
	if props.Value != "" || props.LinkHref == "" {
		<div class="detail-stacked">
			<span class="detail-label">
				if props.Icon != nil {
					<span class="inline-flex items-center gap-1">
						@props.Icon
						{ props.Label }
					</span>
				} else {
					{ props.Label }
				}
			</span>
			if props.Value != "" && props.LinkHref != "" {
				<a
					href={ templ.SafeURL(props.LinkHref) }
					class={ templ.Classes(
						templ.KV("detail-value-lg", props.Large),
						templ.KV("detail-value", !props.Large),
					) }
				>
					{ props.Value }
				</a>
			} else if props.Value != "" {
				<span
					class={ templ.Classes(
						templ.KV("detail-value-lg", props.Large),
						templ.KV("detail-value", !props.Large),
					) }
				>
					{ props.Value }
				</span>
			} else {
				<span class="text-sm" style="color: var(--text-muted)">—</span>
			}
		</div>
	}
}

// DetailInline renders a label and value side by side on one line.
templ DetailInline(props DetailStackedProps) {
	if props.Value != "" {
		<div class="detail-inline">
			<span class="detail-label">
				if props.Icon != nil {
					<span class="inline-flex items-center gap-1">
						@props.Icon
						{ props.Label }
					</span>
				} else {
					{ props.Label }
				}
			</span>
			if props.LinkHref != "" {
				<a href={ templ.SafeURL(props.LinkHref) } class="detail-value">{ props.Value }</a>
			} else {
				<span class="detail-value">{ props.Value }</span>
			}
		</div>
	}
}

// JournalField renders a ledger-style row: label left, value right, with a faint separator.
templ JournalField(props DetailStackedProps) {
	if props.Value != "" {
		<div class="journal-field">
			<span class="detail-label">
				if props.Icon != nil {
					<span class="inline-flex items-center gap-1">
						@props.Icon
						{ props.Label }
					</span>
				} else {
					{ props.Label }
				}
			</span>
			if props.LinkHref != "" {
				<a href={ templ.SafeURL(props.LinkHref) } class="detail-value hover:underline">{ props.Value }</a>
			} else {
				<span class="detail-value">{ props.Value }</span>
			}
		</div>
	}
}

type PageHeaderProps struct {
	Title       string
	BackURL     string
	ActionURL   string
	ActionText  string
	ActionClass string // Optional custom class for action button
}

templ PageHeader(props PageHeaderProps) {
	<div class="mb-6 flex items-center justify-between">
		<div class="flex items-center gap-3">
			if props.BackURL != "" {
				@BackButton()
			}
			<h2 class="page-title">{ props.Title }</h2>
		</div>
		if props.ActionURL != "" && props.ActionText != "" {
			<a
				href={ templ.SafeURL(props.ActionURL) }
				class={ templ.Classes(
						templ.KV("btn-primary", props.ActionClass == ""),
						templ.KV(props.ActionClass, props.ActionClass != ""),
					) }
			>
				{ props.ActionText }
			</a>
		}
	</div>
}

type WelcomeCardProps struct {
	IsAuthenticated bool
	UserDID         string
	AppName         string // "oolong" — selects Oolong copy and buttons
	Ready           bool
}

// WelcomeCard renders the authenticated welcome with action buttons (used on home page)
templ WelcomeCard(props WelcomeCardProps) {
	if props.IsAuthenticated {
		if props.AppName == "oolong" {
			@welcomeAuthenticatedOolong(props)
		} else {
			@welcomeAuthenticatedOolong(props)
		}
	}
}

// WelcomeAuthenticated is the legacy two-arg entry point retained for
// any caller still using it. New callers should pass WelcomeCardProps
// (with AppName) so the per-app variants render.
templ WelcomeAuthenticated(userDID string) {
	@welcomeAuthenticatedOolong(WelcomeCardProps{UserDID: userDID, Ready: true})
}

templ welcomeAuthenticatedOolong(props WelcomeCardProps) {
	<div class="text-center mb-8 pt-4">
		<h1 class="text-3xl sm:text-4xl font-semibold text-primary mb-6">Your tea journey, documented.</h1>
		if !props.Ready {
			<div class="alert-warning mb-6 max-w-xl mx-auto flex items-center justify-between gap-3 text-left">
				<div>
					<strong>Welcome!</strong>
					<span class="alert-warning-muted">A vendor, a vessel, and a tea — then you're ready to log steeps.</span>
				</div>
				<a href="/onboarding" class="btn-primary text-sm whitespace-nowrap">Get Started →</a>
			</div>
		}
		<div class="grid grid-cols-3 gap-3 max-w-xl mx-auto">
			if props.Ready {
				<a href="/brews/new" class="home-action-primary block text-center py-4 px-4 rounded-xl">
					<span class="text-base font-semibold">Log Steep</span>
				</a>
			} else {
				<a href="/onboarding" class="home-action-primary block text-center py-4 px-4 rounded-xl opacity-60" aria-disabled="true">
					<span class="text-base font-semibold">Log Steep — finish setup</span>
				</a>
			}
			<a href="/my-tea" class="home-action-secondary block text-center py-4 px-4 rounded-xl">
				<span class="text-base font-semibold">My Tea</span>
			</a>
			<a href={ templ.SafeURL("/profile/" + props.UserDID) } class="home-action-secondary block text-center py-4 px-4 rounded-xl">
				<span class="text-base font-semibold">Profile</span>
			</a>
		</div>
	</div>
}

// WelcomeHero renders the landing hero for unauthenticated users.
// Currently a single tea-flavored variant. Per-app messaging on
// the hero (and the per-app /about / /terms pages) lands in Phase 4e.
templ WelcomeHero() {
	<div class="text-center mb-8 pt-4">
		<h1 class="text-3xl sm:text-4xl font-semibold text-primary mb-3">Your tea journey, documented.</h1>
		<p class="text-lg text-emphasis max-w-xl mx-auto mb-3">Log every brew, track your tea and equipment, and share your tea story with the community.</p>
		<p class="text-sm text-faint">
			<a href="/atproto" class="hover:text-emphasis transition-colors">Built on AT Protocol</a> — you own your data.
		</p>
	</div>
}

// WelcomeHeroFor returns the hero matching the running app. Unauth'd
// homepage callers pass the app name so the tea variant lands in
// oolong without an extra page-per-app.
templ WelcomeHeroFor(appName string) {
	if appName == "oolong" {
		<div class="text-center mb-8 pt-4">
			<h1 class="text-3xl sm:text-4xl font-semibold text-primary mb-3">Your tea journey, documented.</h1>
			<p class="text-lg text-emphasis max-w-xl mx-auto mb-3">Log every steep, track your teaware and vendors, and share your tea story with the community.</p>
			<p class="text-sm text-faint">
				<a href="/atproto" class="hover:text-emphasis transition-colors">Built on AT Protocol</a> — you own your data.
			</p>
		</div>
	} else {
		@WelcomeHero()
	}
}

// WelcomeLoginCard renders a compact login card for unauthenticated users
templ WelcomeLoginCard() {
	@WelcomeLoginCardWithScript()
}

templ WelcomeLoginCardWithScript() {
	<div class="card p-6 mb-8 max-w-md mx-auto">
		<h2 class="text-lg font-semibold text-primary mb-4 text-center">Log in to get started</h2>
		<form method="POST" action="/auth/login">
			<div class="relative" data-handle-autocomplete-root>
				<input
					type="text"
					id="handle"
					name="handle"
					placeholder="your-handle.bsky.social"
					autocomplete="off"
					required
					class="w-full form-input-lg"
				/>
				<div class="handle-dropdown" data-svelte-handle-autocomplete></div>
			</div>
			<button
				type="submit"
				class="btn-primary w-full mt-3 py-3 px-8 font-semibold"
			>
				Log In
			</button>
		</form>
		<div class="mt-4 text-sm text-muted text-center">
			<a href="/join/create" class="font-medium text-secondary hover:text-primary transition-colors hover:underline">Create an account</a>
			<span class="mx-1.5 text-placeholder">&middot;</span>
			<a href="/about" class="text-muted hover:text-secondary transition-colors hover:underline">Learn more</a>
		</div>
		<details class="mt-4">
			<summary class="text-faint text-sm cursor-pointer hover:text-emphasis transition-colors text-center">What's an Atmosphere account?</summary>
			<p class="text-muted mt-2 text-sm leading-relaxed">
				One account { "for" } the entire <a href="/atproto" class="link">AT Protocol</a> ecosystem. Sign up once and use it across Oolong, <a href="https://bsky.app" class="link" target="_blank" rel="noopener noreferrer">Bluesky</a>, <a href="https://leaflet.pub" class="link" target="_blank" rel="noopener noreferrer">Leaflet</a>, and more. Your data is portable — you own it.
			</p>
		</details>
	</div>
}

templ AboutInfoCard() {
	<div class="card p-6 mb-6">
		<h3 class="text-lg font-bold text-primary mb-3">About Oolong</h3>
		<ul class="text-secondary space-y-2 leading-relaxed mb-3">
			<li>Add tasting notes and ratings to each brew</li>
			<li>Track brewing variables like temperature, time, and grind size</li>
			<li>Organize tea by origin and vendor</li>
			<li><strong>Portable:</strong> Own your tea brewing history</li>
			<li><strong>Decentralized:</strong> Your data lives in your Personal Data Server (PDS)</li>
		</ul>
		<a href="/about" class="text-sm text-emphasis hover:text-primary transition-colors hover:underline">Learn more</a>
	</div>
}

// UserBadgeProps defines properties for user badge (avatar + name + handle)
type UserBadgeProps struct {
	ProfileURL  string // URL to link to (e.g., "/profile/handle")
	AvatarURL   string
	DisplayName string
	Handle      string
	TimeAgo     string // Optional timestamp to display
	Size        string // "sm" or "md" - defaults to "md"
}

// UserBadge renders a user avatar with display name and handle, properly aligned
templ UserBadge(props UserBadgeProps) {
	<div class="flex items-center gap-3">
		<a href={ templ.SafeURL(props.ProfileURL) } class="flex-shrink-0">
			@Avatar(AvatarProps{
				AvatarURL:   props.AvatarURL,
				DisplayName: props.DisplayName,
				Size:        props.Size,
			})
		</a>
		<div class="flex-1 min-w-0">
			<div
				class={ templ.Classes(
				"flex items-center gap-2",
				templ.KV("flex-wrap", props.Size == "sm"),
			) }
			>
				if props.DisplayName != "" {
					<a
						href={ templ.SafeURL(props.ProfileURL) }
						class={ templ.Classes(
							"text-primary truncate",
							templ.KV("font-medium hover:text-emphasis", props.Size == "sm"),
							templ.KV("link-bold", props.Size == "md" || props.Size == ""),
						) }
					>
						{ props.DisplayName }
					</a>
				}
				<a
					href={ templ.SafeURL(props.ProfileURL) }
					class={ templ.Classes(
						"truncate",
						templ.KV("text-sm text-muted hover:text-secondary", props.Size == "sm"),
						templ.KV("link text-sm", props.Size == "md" || props.Size == ""),
					) }
				>
					{ "@" + atp.DisplayHandle(props.Handle) }
				</a>
				if props.Size == "sm" && props.TimeAgo != "" {
					<span class="text-faint text-sm">{ props.TimeAgo }</span>
				}
			</div>
			if (props.Size == "md" || props.Size == "") && props.TimeAgo != "" {
				<span class="text-faint text-sm">{ props.TimeAgo }</span>
			}
		</div>
	</div>
}

// AvatarProps defines properties for avatar rendering
type AvatarProps struct {
	AvatarURL   string
	DisplayName string
	Size        string // "sm", "md", "lg" - defaults to "md" if empty
}

// Avatar renders a user avatar with safety checks and fallback
// Supports three sizes: sm (w-8 h-8), md (w-12 h-12), lg (w-20 h-20)
templ Avatar(props AvatarProps) {
	if props.AvatarURL != "" && bff.SafeAvatarURL(props.AvatarURL) != "" {
		<img
			src={ bff.SafeAvatarURL(props.AvatarURL) }
			alt=""
			class={ avatarClass(props.Size) }
			loading="lazy"
			width={ avatarDimension(props.Size) }
			height={ avatarDimension(props.Size) }
		/>
	} else {
		<div class={ avatarPlaceholderClass(props.Size) }>
			<span class={ avatarTextClass(props.Size) }>
				if props.DisplayName != "" && len(props.DisplayName) > 0 {
					{ props.DisplayName[:1] }
				} else {
					?
				}
			</span>
		</div>
	}
}

// avatarClass returns the CSS class for avatar images based on size
func avatarClass(size string) string {
	switch size {
	case "sm":
		return "avatar-sm"
	case "lg":
		return "avatar-lg"
	default:
		return "avatar-md"
	}
}

// avatarDimension returns the pixel dimension string for avatar images based on size
func avatarDimension(size string) string {
	switch size {
	case "sm":
		return "32"
	case "lg":
		return "80"
	default:
		return "48"
	}
}

// avatarPlaceholderClass returns the CSS class for avatar placeholders based on size
func avatarPlaceholderClass(size string) string {
	switch size {
	case "sm":
		return "avatar-placeholder-sm"
	case "lg":
		return "avatar-placeholder-lg"
	default:
		return "avatar-placeholder-md"
	}
}

// avatarTextClass returns the CSS class for avatar text based on size
func avatarTextClass(size string) string {
	switch size {
	case "sm":
		return "avatar-text-sm"
	case "lg":
		return "avatar-text-lg"
	default:
		return "avatar-text-md"
	}
}

// BrewAlphaWarning displays a warning banner about brews being in early alpha.
// TODO: remove this later once brews are stable
templ BrewAlphaWarning() {
	<div class="alert-warning mb-6">
		<div class="flex items-start gap-3">
			<span class="text-xl leading-none mt-0.5">&#9888;&#65039;</span>
			<div class="text-sm">
				<p class="font-bold text-base mb-1">Brews are in early alpha</p>
				<p class="mb-2">
					The brew format may change significantly as we figure out what works best (e.g. it
					may be completely redesigned from the ground up with a more powerful brew creator system).
					If that happens, your brews won't break &ndash; brew fields are
					filled in from the brew at creation time, so they stand on their own. Only the
					brew record itself would need to be recreated.
				</p>
				<p class="mb-2">
					Feedback is very welcome! Oolong has had a pourover bias so far (due to its developer's preferences),
					so input from espresso folks is especially appreciated.
				</p>
				<p class="text-xs alert-warning-muted">
					If you have feedback or suggestions (or comments) reach out on Bluesky or open an issue on Tangled or GitHub.
				</p>
			</div>
		</div>
	</div>
}