package webui

import (
	"strconv"

	"kjol/vdom"
)

// Port of web/kit/Icons.tsx. The TSX resolves FontAwesome glyphs from an
// app-generated registry (@appgen/faIcons). Here the registry is a package var
// seeded with a small common set; apps add their own with RegisterIcon. Each
// entry is the inner SVG markup for a 0 0 24 24 viewBox (Heroicons-style), so
// the outer <svg> just sizes it.
type iconDef struct {
	viewBox string
	content string
}

var iconRegistry = map[string]iconDef{}

// RegisterIcon registers (or overrides) an icon. viewBox is like "0 0 24 24";
// content is the inner SVG markup (e.g. one or more <path> elements).
func RegisterIcon(name, viewBox, content string) {
	iconRegistry[name] = iconDef{viewBox: viewBox, content: content}
}

// Icon renders a named icon at the given pixel size (0 => 16). Extra classes are
// appended. Unknown names render an empty, correctly-sized box (never blanks the
// layout). Mirrors Icons.tsx's <svg fill=currentColor width height>innerHTML</svg>.
func Icon(name string, size int, class string) *vdom.VNode {
	if size <= 0 {
		size = 16
	}
	def, ok := iconRegistry[name]
	vb := "0 0 24 24"
	content := ""
	if ok {
		vb = def.viewBox
		content = def.content
	}
	s := strconv.Itoa(size)
	return vdom.El("svg",
		vdom.Attr("xmlns", "http://www.w3.org/2000/svg"),
		vdom.Attr("viewBox", vb),
		vdom.Attr("fill", "currentColor"),
		vdom.Attr("width", s), vdom.Attr("height", s),
		vdom.Attr("aria-hidden", "true"),
		vdom.Attr("class", cx("shrink-0", class)),
		vdom.Raw(content),
	)
}

// IconInline is Icon with inline-block alignment (for use within text runs).
func IconInline(name string, size int, class string) *vdom.VNode {
	return Icon(name, size, cx("inline-block align-middle", class))
}

// IconSuccess / IconError are green/red inline convenience wrappers.
func IconSuccess(name string, size int, class string) *vdom.VNode {
	return Icon(name, size, cx("inline-block align-middle text-green-600", class))
}
func IconError(name string, size int, class string) *vdom.VNode {
	return Icon(name, size, cx("inline-block align-middle text-red-600", class))
}

// IconContainer is a flex row that vertically centers an icon + text.
func IconContainer(children ...*vdom.VNode) *vdom.VNode {
	return vdom.El("span", kids([]vdom.Mod{vdom.Attr("class", "flex flex-row items-center gap-2")}, children)...)
}

// A small default set of stroke-based icons (Heroicons outline, 24x24) so common
// components render out of the box. Apps register more via RegisterIcon.
func strokePath(d string) string {
	return `<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="` + d + `"/>`
}

func init() {
	reg := func(name, d string) { RegisterIcon(name, "0 0 24 24", strokePath(d)) }
	reg("chevron-left", "M15.75 19.5 8.25 12l7.5-7.5")
	reg("chevron-right", "m8.25 4.5 7.5 7.5-7.5 7.5")
	reg("chevron-down", "m19.5 8.25-7.5 7.5-7.5-7.5")
	reg("chevron-up", "m4.5 15.75 7.5-7.5 7.5 7.5")
	reg("check", "m4.5 12.75 6 6 9-13.5")
	reg("xmark", "M6 18 18 6M6 6l12 12")
	reg("x", "M6 18 18 6M6 6l12 12")
	reg("plus", "M12 4.5v15m7.5-7.5h-15")
	reg("minus", "M4.5 12h15")
	reg("bars", "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5")
	reg("arrow-right", "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3")
	reg("external-link", "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25")
	reg("info", "M11.25 11.25h1.5v4.5M12 8.25h.008M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z")
	reg("triangle-exclamation", "M12 9v3.75m0 3.75h.008M10.34 3.94 1.7 18a1.5 1.5 0 0 0 1.3 2.25h18a1.5 1.5 0 0 0 1.3-2.25L13.66 3.94a1.5 1.5 0 0 0-2.6 0Z")
	reg("circle-check", "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z")
}