package main

import (
	"errors"
	"fmt"
	"strings"

	"github.com/egoist/mygo/ui"

	mujica "mujicaui"
)

var displayPages = []page{
	{ID: "011", Name: "Text", ZhName: "文本", Category: "Display", Demo: textDemo, Code: textCode,
		Keys: "Selectable 文本：点击后 Cmd/Ctrl+A 全选、Cmd/Ctrl+C 复制。可编辑：Tab 聚焦，Enter 或双击开始编辑，Enter 确认，Escape 取消，移走焦点也确认。"},
	{ID: "012", Name: "Heading", ZhName: "标题", Category: "Display", Demo: headingDemo, Code: headingCode,
		Keys: "纯展示，不获取焦点。"},
	{ID: "013", Name: "Icon", ZhName: "图标", Category: "Display", Demo: iconDemo, Code: iconCode,
		Keys: "纯展示，不获取焦点。"},
	{ID: "014", Name: "Image", ZhName: "图片", Category: "Display", Demo: imageDemo, Code: imageCode,
		Keys: "错误状态的「重试」按钮可 Tab 聚焦，Enter 或 Space 触发。"},
	{ID: "015", Name: "Avatar", ZhName: "头像", Category: "Display", Demo: avatarDemo, Code: avatarCode,
		Keys: "纯展示，不获取焦点。"},
	{ID: "016", Name: "AvatarGroup", ZhName: "头像组", Category: "Display", Demo: avatarGroupDemo, Code: avatarGroupCode,
		Keys: "Tab 聚焦「+N」按钮，Enter 或 Space 展开完整名单，Escape 或点击外部关闭。"},
	{ID: "017", Name: "Badge", ZhName: "徽标", Category: "Display", Demo: badgeDemo, Code: badgeCode,
		Keys: "纯展示，不获取焦点；辅助技术朗读完整数值。"},
	{ID: "018", Name: "Tag", ZhName: "标签", Category: "Display", Demo: tagDemo, Code: tagCode,
		Keys: "可点击标签：Tab 聚焦，Enter 或 Space 点击，Delete 或 Backspace 关闭。关闭按钮是独立的 Tab 停靠点。"},
	{ID: "019", Name: "Link", ZhName: "链接", Category: "Display", Demo: linkDemo, Code: linkCode,
		Keys: "Tab 聚焦链接，Enter 激活。"},
	{ID: "020", Name: "Kbd", ZhName: "快捷键", Category: "Display", Demo: kbdDemo, Code: kbdCode,
		Keys: "纯展示，不注册快捷键，不获取焦点。"},
}

type textState struct {
	maxLines   float64
	selectable bool
	name       string
	saving     bool
	failNext   bool
	saveErr    string
}

func textDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "011", func() textState { return textState{maxLines: 0, selectable: true, name: "Coronation.md"} })
	mujica.Heading(c, "Text", mujica.HeadingOptions{Subtitle: "换行、省略、选择复制与可编辑模式", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Text(c, fmt.Sprintf("MaxLines %d", int(s.maxLines)))
			ui.StepSlider(c, &s.maxLines, 0, 4, 1).Width(160)
			ui.Checkbox(c, &s.selectable, "Selectable")
			ui.Checkbox(c, &s.saving, "Saving")
			ui.Checkbox(c, &s.failNext, "Next save fails")
		})
	})
	displaySection(c, "Display", func() {
		ui.Box(c).Width(360).Children(func() {
			mujica.Text(c, "Velvet curtains fall over the long gallery. Every candle leans toward the open door, and the quartet plays on while the guests take their places beneath the chandeliers.",
				mujica.TextOptions{MaxLines: int(s.maxLines), Selectable: s.selectable})
		})
	})
	displaySection(c, "Editable", func() {
		e := mujica.EditableText(c, &s.name, mujica.EditableTextOptions{Saving: s.saving, Error: s.saveErr, Label: "File name"})
		if e.Changed() {
			if s.failNext {
				s.saveErr = "Save failed: the name is already taken."
				log("save failed: " + s.name)
			} else {
				s.saveErr = ""
				log("saved: " + s.name)
			}
		}
	})
	displayCode(c, textCode, log)
}

const textCode = `mujica.Text(c, "Order ID: 4821-AX", mujica.TextOptions{Selectable: true})
mujica.Text(c, "A long note that stops after two lines.", mujica.TextOptions{MaxLines: 2})
if mujica.EditableText(c, &name, mujica.EditableTextOptions{Error: saveErr}).Changed() {
	saveErr = "" // save name here; set saveErr on failure
}`

type headingState struct {
	level            float64
	subtitle, divide bool
}

func headingDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "012", func() headingState { return headingState{level: 1, subtitle: true, divide: true} })
	mujica.Heading(c, "Heading", mujica.HeadingOptions{Subtitle: "三级衬线标题、副标题与装饰分隔线", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Text(c, fmt.Sprintf("Level %d", int(s.level)))
			if ui.StepSlider(c, &s.level, 1, 3, 1).Width(120).Changed() {
				log(fmt.Sprintf("level %d", int(s.level)))
			}
			ui.Checkbox(c, &s.subtitle, "Subtitle")
			ui.Checkbox(c, &s.divide, "Divider")
		})
	})
	displaySection(c, "Preview", func() {
		sub := ""
		if s.subtitle {
			sub = "Ceremonies of the winter season"
		}
		mujica.Heading(c, "The Grand Hall", mujica.HeadingOptions{Level: int(s.level), Subtitle: sub, Divider: s.divide})
	})
	displaySection(c, "Levels", func() {
		for l := 1; l <= 3; l++ {
			mujica.Heading(c, fmt.Sprintf("Level %d · 宫廷", l), mujica.HeadingOptions{Level: l})
		}
	})
	displayCode(c, headingCode, log)
}

const headingCode = `mujica.Heading(c, "The Grand Hall", mujica.HeadingOptions{Subtitle: "Winter ceremonies", Divider: true})
mujica.Heading(c, "Guest Ledger", mujica.HeadingOptions{Level: 2})`

type iconState struct {
	name  string
	size  string
	tone  string
	label bool
}

var iconTones = map[string]mujica.IconTone{"Inherit": mujica.IconInherit, "Muted": mujica.IconMuted, "Accent": mujica.IconAccent,
	"Success": mujica.IconSuccess, "Warning": mujica.IconWarning, "Danger": mujica.IconDanger, "Info": mujica.IconInfo}

func iconDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "013", func() iconState { return iconState{name: "star", size: "24", tone: "Accent"} })
	mujica.Heading(c, "Icon", mujica.HeadingOptions{Subtitle: "按名称取图标；尺寸与语义颜色；缺失时可见回退", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			if ui.Select(c, &s.name, []string{"star", "bell", "settings", "moon", "sun", "no-such-icon"}).Changed() {
				log("name " + s.name)
			}
			if ui.Select(c, &s.size, []string{"16", "20", "24"}).Changed() {
				log("size " + s.size)
			}
			if ui.Select(c, &s.tone, []string{"Inherit", "Muted", "Accent", "Success", "Warning", "Danger", "Info"}).Changed() {
				log("tone " + s.tone)
			}
			ui.Checkbox(c, &s.label, "Label")
		})
	})
	displaySection(c, "Preview", func() {
		var size float32
		fmt.Sscan(s.size, &size)
		label := ""
		if s.label {
			label = "Preview icon"
		}
		mujica.Icon(c, s.name, mujica.IconOptions{Size: size, Tone: iconTones[s.tone], Label: label})
	})
	displaySection(c, "Tones and fallback", func() {
		ui.Row(c).Gap(14).Children(func() {
			for _, t := range []string{"Inherit", "Muted", "Accent", "Success", "Warning", "Danger", "Info"} {
				mujica.Icon(c, "circle-check", mujica.IconOptions{Size: 20, Tone: iconTones[t]}).Key(t)
			}
			mujica.Icon(c, "missing-name", mujica.IconOptions{Size: 20})
		})
	})
	displayCode(c, iconCode, log)
}

const iconCode = `ui.Row(c).Gap(8).Children(func() {
	mujica.Icon(c, "star", mujica.IconOptions{})
	mujica.Icon(c, "circle-check", mujica.IconOptions{Size: 20, Tone: mujica.IconSuccess, Label: "Done"})
})`

type imageState struct {
	crop, loading, fail, empty bool
	err                        error
}

var displayPicture = func() *ui.SVG {
	return ui.MustParseSVG([]byte(`<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160" viewBox="0 0 240 160">
<rect width="240" height="160" fill="#2B2126"/><rect x="20" y="20" width="200" height="120" fill="none" stroke="#BDA172" stroke-width="2"/>
<path d="M120 40 L150 80 L120 120 L90 80 Z" fill="#7D2034"/><circle cx="120" cy="80" r="8" fill="#F2EBDD"/></svg>`))
}()

func imageDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "014", func() imageState { return imageState{crop: true} })
	mujica.Heading(c, "Image", mujica.HeadingOptions{Subtitle: "位图与 SVG；包含或裁切；占位、加载、错误；替代说明", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Checkbox(c, &s.crop, "Crop")
			ui.Checkbox(c, &s.empty, "No source")
			ui.Checkbox(c, &s.loading, "Loading")
			if ui.Checkbox(c, &s.fail, "Error").Changed() {
				s.err = nil
				if s.fail {
					s.err = errors.New("connection reset")
				}
			}
		})
	})
	displaySection(c, "Preview", func() {
		var src ui.ImageSource = displayPicture
		if s.empty {
			src = nil
		}
		v := mujica.Image(c, src, mujica.ImageOptions{Width: 200, Height: 200, Crop: s.crop, Alt: "Gothic emblem", Loading: s.loading, Err: s.err})
		if v.Retry {
			s.fail, s.err = false, nil
			log("retry")
		}
	})
	displaySection(c, "States", func() {
		ui.Row(c).Gap(12).Wrap().Children(func() {
			mujica.Image(c, displayPicture, mujica.ImageOptions{Width: 120, Height: 120})
			mujica.Image(c, displayPicture, mujica.ImageOptions{Width: 120, Height: 120, Crop: true})
			mujica.Image(c, nil, mujica.ImageOptions{Width: 120, Height: 120})
			mujica.Image(c, nil, mujica.ImageOptions{Width: 120, Height: 120, Loading: true})
			if mujica.Image(c, nil, mujica.ImageOptions{Width: 160, Height: 140, Err: errors.New("404")}).Retry {
				log("retry (static example)")
			}
		})
	})
	displayCode(c, imageCode, log)
}

const imageCode = `img := mujica.Image(c, photo, mujica.ImageOptions{
	Width: 160, Height: 120, Crop: true, Alt: "Hall of mirrors",
	Loading: loading, Err: loadErr,
})
if img.Retry {
	loading, loadErr = true, nil // start loading again here
}`

type avatarState struct {
	name string
	size float64
	img  bool
}

var displayBitmap = func() *ui.Bitmap {
	return ui.NewBitmap(ui.Render(func(c *ui.Context) {
		mujica.Use(c, mujica.Settings{Mode: mujica.Dark})
		ui.Box(c).Fill().Background(ui.Hex("#7D2034"))
	}, 64, 64, 1))
}()

func avatarDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "015", func() avatarState { return avatarState{name: "Sakiko Togawa", size: 48} })
	mujica.Heading(c, "Avatar", mujica.HeadingOptions{Subtitle: "图片、姓名首字母与默认图标回退", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			if ui.TextInput(c, &s.name).Width(200).Changed() {
				log("name " + s.name)
			}
			ui.Text(c, fmt.Sprintf("Size %d", int(s.size)))
			ui.StepSlider(c, &s.size, 24, 80, 4).Width(160)
			ui.Checkbox(c, &s.img, "Image")
		})
	})
	displaySection(c, "Preview", func() {
		var img *ui.Bitmap
		if s.img {
			img = displayBitmap
		}
		mujica.Avatar(c, s.name, mujica.AvatarOptions{Size: float32(s.size), Image: img})
	})
	displaySection(c, "Fallbacks", func() {
		ui.Row(c).Gap(12).AlignItems(ui.Center).Children(func() {
			mujica.Avatar(c, "Photo", mujica.AvatarOptions{Image: displayBitmap, Size: 40})
			mujica.Avatar(c, "Uika Misumi", mujica.AvatarOptions{Size: 40})
			mujica.Avatar(c, "若叶睦", mujica.AvatarOptions{Size: 40})
			mujica.Avatar(c, "", mujica.AvatarOptions{Size: 40})
		})
	})
	displayCode(c, avatarCode, log)
}

const avatarCode = `ui.Row(c).Gap(8).Children(func() {
	mujica.Avatar(c, "Sakiko Togawa", mujica.AvatarOptions{Size: 40})
	mujica.Avatar(c, "", mujica.AvatarOptions{})
})`

var displayPeople = []mujica.AvatarItem{
	{Name: "Sakiko Togawa"}, {Name: "Uika Misumi"}, {Name: "Mutsumi Wakaba"}, {Name: "Umiri Yahata"},
	{Name: "Nyamu Yutenji"}, {Name: "Tomori Takamatsu"}, {Name: "Anon Chihaya"}, {Name: "Rana Kaname"},
}

type avatarGroupState struct{ max, count float64 }

func avatarGroupDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "016", func() avatarGroupState { return avatarGroupState{max: 3, count: 6} })
	mujica.Heading(c, "AvatarGroup", mujica.HeadingOptions{Subtitle: "最大显示数量、剩余数量与完整名单", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Text(c, fmt.Sprintf("Max %d", int(s.max)))
			if ui.StepSlider(c, &s.max, 1, 8, 1).Width(160).Changed() {
				log(fmt.Sprintf("max %d", int(s.max)))
			}
			ui.Text(c, fmt.Sprintf("People %d", int(s.count)))
			if ui.StepSlider(c, &s.count, 1, 8, 1).Width(160).Changed() {
				log(fmt.Sprintf("people %d", int(s.count)))
			}
		})
	})
	displaySection(c, "Preview", func() {
		for i, g := range []mujica.AvatarGroupView{
			mujica.AvatarGroup(c, displayPeople[:int(s.count)], mujica.AvatarGroupOptions{Max: int(s.max)}),
			mujica.AvatarGroup(c, displayPeople, mujica.AvatarGroupOptions{Max: 4, Size: 24}),
		} {
			if g.Toggled {
				log(fmt.Sprintf("group %d open=%v", i+1, g.Open))
			}
		}
	})
	displayCode(c, avatarGroupCode, log)
}

const avatarGroupCode = `mujica.AvatarGroup(c, people, mujica.AvatarGroupOptions{Max: 3})`

type badgeState struct {
	count, max float64
	text       string
	tone, pos  string
}

var badgeTones = map[string]mujica.BadgeTone{"Accent": mujica.BadgeAccent, "Neutral": mujica.BadgeNeutral, "Success": mujica.BadgeSuccess,
	"Warning": mujica.BadgeWarning, "Danger": mujica.BadgeDanger, "Info": mujica.BadgeInfo}
var badgePositions = map[string]mujica.BadgePosition{"TopRight": mujica.BadgeTopRight, "TopLeft": mujica.BadgeTopLeft,
	"BottomRight": mujica.BadgeBottomRight, "BottomLeft": mujica.BadgeBottomLeft}

func badgeDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "017", func() badgeState { return badgeState{count: 120, max: 99, tone: "Accent", pos: "TopRight"} })
	mujica.Heading(c, "Badge", mujica.HeadingOptions{Subtitle: "文字或计数、上限、位置与完整朗读", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Text(c, fmt.Sprintf("Count %d", int(s.count)))
			ui.StepSlider(c, &s.count, 0, 200, 1).Width(160)
			ui.Text(c, fmt.Sprintf("Max %d", int(s.max)))
			ui.StepSlider(c, &s.max, 9, 999, 10).Width(120)
			ui.TextInput(c, &s.text).Placeholder("Text overrides count").Width(180)
			if ui.Select(c, &s.tone, []string{"Accent", "Neutral", "Success", "Warning", "Danger", "Info"}).Changed() {
				log("tone " + s.tone)
			}
			if ui.Select(c, &s.pos, []string{"TopRight", "TopLeft", "BottomRight", "BottomLeft"}).Changed() {
				log("position " + s.pos)
			}
		})
	})
	opts := mujica.BadgeOptions{Text: s.text, Count: int(s.count), Max: int(s.max), Tone: badgeTones[s.tone], Label: "Unread"}
	displaySection(c, "Inline", func() {
		ui.Row(c).Gap(8).AlignItems(ui.Center).Children(func() {
			ui.Text(c, "Inbox")
			mujica.Badge(c, opts, nil)
		})
	})
	displaySection(c, "Corner", func() {
		opts.Position = badgePositions[s.pos]
		ui.Box(c).Padding(10).Children(func() {
			mujica.Badge(c, opts, func() { mujica.Avatar(c, "Sakiko Togawa", mujica.AvatarOptions{Size: 40}) })
		})
	})
	displayCode(c, badgeCode, log)
}

const badgeCode = `mujica.Badge(c, mujica.BadgeOptions{Text: "New", Tone: mujica.BadgeNeutral}, nil)
mujica.Badge(c, mujica.BadgeOptions{Count: unread, Label: "Unread", Position: mujica.BadgeTopRight}, func() {
	mujica.Avatar(c, "Sakiko Togawa", mujica.AvatarOptions{})
})`

type tagState struct {
	tags                           []string
	icon, clickable, closable, dis bool
}

func tagDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "018", func() tagState {
		return tagState{tags: []string{"Baroque", "Gothic", "Rococo", "Court"}, icon: true, clickable: true, closable: true}
	})
	mujica.Heading(c, "Tag", mujica.HeadingOptions{Subtitle: "标签文字、图标；点击与关闭分离", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.Checkbox(c, &s.icon, "Icon")
			ui.Checkbox(c, &s.clickable, "Clickable")
			ui.Checkbox(c, &s.closable, "Closable")
			ui.Checkbox(c, &s.dis, "Disabled")
			if mujica.Button(c, "Reset tags", mujica.ButtonOptions{Variant: mujica.Ghost}).Clicked() {
				s.tags = []string{"Baroque", "Gothic", "Rococo", "Court"}
				log("reset")
			}
		})
	})
	displaySection(c, "Preview", func() {
		icon := ""
		if s.icon {
			icon = "star"
		}
		ui.Row(c).Gap(8).Wrap().Children(func() {
			for i := 0; i < len(s.tags); i++ {
				t := s.tags[i]
				v := mujica.Tag(c, t, mujica.TagOptions{Icon: icon, Clickable: s.clickable, Closable: s.closable, Disabled: s.dis})
				v.Element.Key(t)
				if v.Clicked {
					log("clicked " + t)
				}
				if v.Closed {
					log("closed " + t)
					s.tags = append(s.tags[:i:i], s.tags[i+1:]...)
					i--
				}
			}
		})
	})
	displayCode(c, tagCode, log)
}

const tagCode = `for i, t := range tags {
	v := mujica.Tag(c, t, mujica.TagOptions{Icon: "star", Clickable: true, Closable: true})
	v.Element.Key(t)
	if v.Closed {
		tags = append(tags[:i:i], tags[i+1:]...)
	}
}`

type linkState struct {
	url      string
	external string
}

func linkDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "019", func() linkState { return linkState{url: "https://example.com/charter"} })
	mujica.Heading(c, "Link", mujica.HeadingOptions{Subtitle: "外部地址或应用内动作；键盘激活；打开失败反馈", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			ui.TextInput(c, &s.url).Placeholder("URL (empty = in-app action)").Width(320)
			if mujica.Button(c, "Simulate open failure", mujica.ButtonOptions{Variant: mujica.Secondary}).Clicked() {
				s.external = "No application can open this link."
				log("open failure set")
			}
			if mujica.Button(c, "Clear error", mujica.ButtonOptions{Variant: mujica.Ghost}).Clicked() {
				s.external = ""
			}
		})
	})
	displaySection(c, "Preview", func() {
		if mujica.Link(c, "Read the court charter", mujica.LinkOptions{URL: s.url, Error: s.external}).Clicked() {
			log("activated " + s.url)
		}
		if mujica.Link(c, "Show the guest list", mujica.LinkOptions{}).Clicked() {
			log("in-app action")
		}
	})
	displayCode(c, linkCode, log)
}

const linkCode = `mujica.Link(c, "Read the charter", mujica.LinkOptions{URL: "https://example.com/charter"})
if mujica.Link(c, "Show details", mujica.LinkOptions{}).Clicked() {
	details = !details
}`

type kbdState struct{ combo string }

func kbdDemo(c *ui.Context, log func(string)) {
	s := ui.Local(c.Root(), "020", func() kbdState { return kbdState{combo: "Mod+Shift+P"} })
	mujica.Heading(c, "Kbd", mujica.HeadingOptions{Subtitle: "单键与组合键；按平台显示 Command 或 Ctrl", Divider: true})
	displaySection(c, "Parameters", func() {
		displayControls(c, func() {
			if ui.TextInput(c, &s.combo).Placeholder("Keys joined by +").Width(220).Changed() {
				log("keys " + s.combo)
			}
		})
	})
	displaySection(c, "Preview", func() {
		var keys []string
		for _, k := range strings.Split(s.combo, "+") {
			if k = strings.TrimSpace(k); k != "" {
				keys = append(keys, k)
			}
		}
		if len(keys) > 0 {
			mujica.Kbd(c, keys...)
		}
	})
	displaySection(c, "Common", func() {
		for _, row := range [][]string{{"Mod", "K"}, {"Mod", "Shift", "P"}, {"Alt", "Up"}, {"Esc"}, {"Ctrl", "Tab"}} {
			ui.Row(c).Gap(12).AlignItems(ui.Center).Children(func() {
				mujica.Kbd(c, row...)
				ui.Text(c, strings.Join(row, " + ")).TextColor(mujica.Tokens(c).TextMuted)
			})
		}
	})
	displayCode(c, kbdCode, log)
}

const kbdCode = `ui.Row(c).Gap(6).Children(func() {
	mujica.Text(c, "Command palette", mujica.TextOptions{})
	mujica.Kbd(c, "Mod", "Shift", "P")
})`