package systemviews

import (
	"fmt"
	"github.com/bnema/dumber/internal/domain/entity"
)

templ FavoritesView(data favoritesRenderData) {
	@Alert("success", data.Notice)
	@Alert("error", data.Error)
	@Section("sv-favorites-controls", "Manage favorites") {
		@FavoritesControls(data)
	}
	@Section("sv-favorites-list", "Favorites") {
		@Meta(favoritesSummary(data))
		if len(data.Favorites) == 0 {
			@EmptyState("No favorites")
		} else {
			<ul class="sv-list">
				for _, favorite := range data.Favorites {
					if favorite != nil {
						@FavoriteItem(favorite, data.Tags)
					}
				}
			</ul>
		}
	}
	@Section("sv-tags-list", "Tags") {
		@Meta(tagsSummary(data))
		@TagCreateForm()
		if len(data.Tags) == 0 {
			@EmptyState("No tags")
		} else {
			<ul class="sv-list">
				for _, tag := range data.Tags {
					if tag != nil {
						@TagItem(tag)
					}
				}
			</ul>
		}
	}
}

templ FavoritesControls(data favoritesRenderData) {
	<form class="sv-card-form" data-sv-action="favorite.create">
		<label><span>URL</span><input name="url" type="url" placeholder="https://example.com" required/></label>
		<label><span>Title</span><input name="title" type="text" placeholder="Optional title"/></label>
		@FavoriteCreateTagPicker(data.Tags)
		<button class="sv-button" type="submit">@ButtonIconLabel(iconPlus, "Add favorite")</button>
	</form>
	<div class="sv-filter-panel">
		<div class="sv-button-row">
			<span class="sv-meta">Tags</span>
			<button type="button" class={ favoriteFilterClass(favoriteAllFilterActive(data)) } aria-pressed={ fmt.Sprintf("%t", favoriteAllFilterActive(data)) } data-sv-action="favorite.clearFilters">All</button>
			<button type="button" class={ favoriteFilterClass(favoriteUntaggedFilterActive(data)) } aria-pressed={ fmt.Sprintf("%t", favoriteUntaggedFilterActive(data)) } data-sv-action="favorite.filterUntagged">Untagged</button>
			for _, tag := range data.Tags {
				if tag != nil {
					<button type="button" class={ favoriteFilterClass(favoriteTagFilterActive(data, tag.ID)) } aria-pressed={ fmt.Sprintf("%t", favoriteTagFilterActive(data, tag.ID)) } data-sv-action="favorite.filterTag" data-tag-id={ fmt.Sprintf("%d", tag.ID) }>
						<span class="sv-tag-dot" style={ "background:" + safeTagColor(tag.Color) }></span>{ tag.Name }
					</button>
				}
			}
		</div>
	</div>
	<p class="sv-meta sv-key-hints">Keys: <kbd>j</kbd>/<kbd>k</kbd> move, <kbd>Enter</kbd> open, <kbd>e</kbd> edit title, <kbd>d</kbd> delete focused favorite.</p>
}

templ FavoriteCreateTagPicker(tags []*entity.Tag) {
	if len(tags) > 0 {
		<fieldset class="sv-tag-picker">
			<legend>Tags</legend>
			<div class="sv-tag-controls">
				for _, tag := range tags {
					if tag != nil {
						<label class="sv-tag-toggle">
							<input type="checkbox" name="tags" value={ fmt.Sprintf("%d", tag.ID) }/>
							<span><span class="sv-tag-dot" style={ "background:" + safeTagColor(tag.Color) }></span>{ tag.Name }</span>
						</label>
					}
				}
			</div>
		</fieldset>
	}
}

templ FavoriteItem(favorite *entity.Favorite, tags []*entity.Tag) {
	<li class="sv-list-row">
		<article class="sv-favorite-item" data-sv-favorite-row data-favorite-id={ fmt.Sprintf("%d", favorite.ID) }>
			<div class="sv-favorite-header">
				<div>
					<a class="sv-link sv-favorite-open" href={ templ.SafeURL(sanitizeHref(favorite.URL)) }>{ favoriteItemLabel(favorite) }</a>
					<p class="sv-history-url">{ favorite.URL }</p>
					if favoriteMetaText(favorite) != "" {
						<p class="sv-meta">{ favoriteMetaText(favorite) }</p>
					}
				</div>
				<div class="sv-history-row-actions">
					<a class="sv-button sv-button-secondary" href={ templ.SafeURL(sanitizeHref(favorite.URL)) }>@ButtonIconLabel(iconExternal, "Open")</a>
					<button type="button" class="sv-button sv-button-secondary sv-button-danger sv-button-icon-only" data-sv-action="favorite.delete" data-id={ fmt.Sprintf("%d", favorite.ID) } data-sv-confirm="Delete this favorite?" aria-label="Delete this favorite">@IconOnly(iconTrash, "Delete this favorite")</button>
				</div>
			</div>
			@FavoriteEditForm(favorite)
			@FavoriteTagControls(favorite, tags)
		</article>
	</li>
}

templ FavoriteEditForm(favorite *entity.Favorite) {
	<form class="sv-inline-form" data-sv-action="favorite.update">
		<input type="hidden" name="id" value={ fmt.Sprintf("%d", favorite.ID) }/>
		<label><span>Title</span><input name="title" type="text" value={ favorite.Title }/></label>
		<label><span>Favicon</span><input name="favicon_url" type="url" value={ favorite.FaviconURL }/></label>
		@ShortcutSelect(favorite.ShortcutKey)
		<button class="sv-button sv-button-secondary" type="submit">@ButtonIconLabel(iconSave, "Save")</button>
	</form>
}

templ FavoriteTagControls(favorite *entity.Favorite, tags []*entity.Tag) {
	if len(tags) > 0 {
		<div class="sv-tag-controls">
			<span class="sv-meta">Tags</span>
			for _, tag := range tags {
				if tag != nil {
					<button type="button" class={ favoriteTagButtonClass(favorite, tag) } data-sv-action={ favoriteTagButtonAction(favorite, tag) } data-favorite-id={ fmt.Sprintf("%d", favorite.ID) } data-tag-id={ fmt.Sprintf("%d", tag.ID) }>
						<span class="sv-tag-dot" style={ "background:" + safeTagColor(tag.Color) }></span>{ favoriteTagButtonLabel(favorite, tag) }
					</button>
				}
			}
		</div>
	}
}

templ TagCreateForm() {
	<form class="sv-inline-form" data-sv-action="tag.create">
		<label><span>Name</span><input name="name" type="text" required/></label>
		<label><span>Color</span><input name="color" type="text" placeholder="#808080"/></label>
		<button class="sv-button sv-button-secondary" type="submit">@ButtonIconLabel(iconTag, "Create tag")</button>
	</form>
}

templ TagItem(tag *entity.Tag) {
	<li class="sv-list-row">
		<form class="sv-inline-form" data-sv-action="tag.update">
			<input type="hidden" name="id" value={ fmt.Sprintf("%d", tag.ID) }/>
			<span class="sv-tag-dot" style={ "background:" + safeTagColor(tag.Color) }></span>
			<label><span>Name</span><input name="name" type="text" value={ tag.Name } required/></label>
			<label><span>Color</span><input name="color" type="text" value={ tag.Color }/></label>
			<button class="sv-button sv-button-secondary" type="submit">@ButtonIconLabel(iconSave, "Save")</button>
			<button type="button" class="sv-button sv-button-secondary sv-button-danger sv-button-icon-only" data-sv-action="tag.delete" data-id={ fmt.Sprintf("%d", tag.ID) } data-sv-confirm="Delete this tag?" aria-label="Delete this tag">@IconOnly(iconTrash, "Delete this tag")</button>
		</form>
	</li>
}

templ ShortcutSelect(selected *int) {
	<label><span>Shortcut</span><select name="shortcut_key">
		<option value="">None</option>
		for i := 1; i <= 9; i++ {
			<option value={ fmt.Sprintf("%d", i) } selected?={ shortcutSelected(selected, i) }>{ fmt.Sprintf("%d", i) }</option>
		}
	</select></label>
}