package templates

// Facet panel partial (faceted plan Phase 7): the filter drawer's
// value-list sections. The values are SERVER DATA — registry order,
// library-type scoped (Batch D), counts computed under the active
// filters — so templ renders them; the click behavior is the drawer's
// existing client-state flow (bookshelf.ts toggles the facet's filter
// value and re-applies the form). No JSON innerHTML anywhere.

import "strconv"

// FacetPanelValue is one browsable facet value.
type FacetPanelValue struct {
	Value   string // raw value (rides the filter param)
	Display string // display form (prettified/display name); falls back to Value
	Count   int64
	Active  bool // currently selected in this facet's filter
}

// FacetPanelSection is one facet's collapsible value list.
type FacetPanelSection struct {
	WireParam string // the facet's query param (genre_filter, ...)
	Title     string // human label
	Values    []FacetPanelValue
}

// facetPanelTitles maps a registry param to its section label (mirrors
// bookshelf.ts's facetChipLabel names).
var facetPanelTitles = map[string]string{
	"author":            "Author",
	"publisher":         "Publisher",
	"narrator":          "Narrator",
	"tags":              "Tags",
	"series":            "Series",
	"genre":             "Genre",
	"language":          "Language",
	"story_arc":         "Story arc",
	"imprint":           "Imprint",
	"edition":           "Edition",
	"age_rating":        "Age rating",
	"format_group":      "Format",
	"manga_type":        "Manga type",
	"reading_direction": "Reading direction",
}

// FacetPanelTitle is the section label for a registry param (the param
// itself when unmapped — same fallback the chips use).
func FacetPanelTitle(param string) string {
	if t, ok := facetPanelTitles[param]; ok {
		return t
	}
	return param
}

templ FacetPanel(sections []FacetPanelSection) {
	<div id="facet-panel-content" class="space-y-2">
		for _, sec := range sections {
			if len(sec.Values) > 0 {
				<details
					class="facet-section rounded-lg border overflow-hidden"
					style="border-color: var(--border);"
					data-param={ sec.WireParam }
				>
					<summary class="facet-section-summary flex items-center justify-between px-3 py-2 cursor-pointer select-none text-sm font-semibold" style="color: var(--text-primary); background-color: var(--bg-secondary);">
						<span>{ sec.Title }</span>
						<span class="text-xs font-normal" style="color: var(--text-secondary);">{ strconv.Itoa(len(sec.Values)) }</span>
					</summary>
					<div class="facet-values max-h-56 overflow-y-auto px-2 py-1.5 space-y-0.5">
						for _, v := range sec.Values {
							<button
								type="button"
								class={ "facet-value-btn w-full flex items-center justify-between gap-2 px-2.5 py-1.5 rounded text-left text-sm transition-colors", templ.KV("facet-value-active", v.Active) }
								data-param={ sec.WireParam }
								data-value={ v.Value }
							>
								<span class="truncate" style="color: var(--text-primary);">{ v.Display }</span>
								<span class="text-xs shrink-0 tabular-nums" style="color: var(--text-secondary);">{ strconv.FormatInt(v.Count, 10) }</span>
							</button>
						}
					</div>
				</details>
			}
		}
	</div>
}