package pages

import (
	"fmt"

	"atmoquest/features/common/layouts"
)

// AdminBadgesView is the data for /admin/badges.
type AdminBadgesView struct {
	Badges []AdminBadgeRow
}

// AdminBadgeRow is one badge definition in the admin list.
type AdminBadgeRow struct {
	ID           int
	Slug         string
	Name         string
	Description  string
	Shape        string
	PrimaryColor string
	AccentColor  string
	RibbonColor  string
	Label        string
	Trigger      string
	SVGPreview   string
}

// AdminBadgeEditView is the data for /admin/badges/{id}/edit.
type AdminBadgeEditView struct {
	Badge   AdminBadgeRow
	Shapes  []string
	Primary []string
	Accent  []string
	Ribbon  []string
	Saved   bool
	Error   string
}

templ AdminBadges(v AdminBadgesView) {
	@layouts.Base("admin · badges", "Manage app-wide badge definitions.") {
		@adminShell("badges", "") {
			<h2 class="admin-section-title">App badges</h2>
			<p class="settings-sub" style="margin-bottom:16px">
				These are the app-wide badge definitions. Click a badge to edit its design.
			</p>

			if len(v.Badges) == 0 {
				<p class="admin-empty">no badge definitions found.</p>
			} else {
				<div class="admin-badges-grid">
					for _, b := range v.Badges {
						<a href={ templ.SafeURL("/admin/badges/" + badgeIDStr(b.ID) + "/edit") } class="admin-badge-card">
							<div class="admin-badge-card-svg">
								@templ.Raw(b.SVGPreview)
							</div>
							<div class="admin-badge-card-info">
								<div class="admin-badge-card-name">{ b.Name }</div>
								<div class="admin-badge-card-desc muted">{ b.Description }</div>
								if b.Trigger != "" {
									<div class="admin-badge-card-trigger"><code>{ b.Trigger }</code></div>
								}
							</div>
						</a>
					}
				</div>
			}
		}
	}
}

templ AdminBadgeEdit(v AdminBadgeEditView) {
	@layouts.Base("admin · edit badge", "Edit a badge definition.") {
		@adminShell("badges", "") {
			<h2 class="admin-section-title">edit badge — { v.Badge.Name }</h2>

			if v.Saved {
				<div class="settings-success" role="status" style="margin-bottom:16px">
					<span class="settings-success-icon">✓</span> badge design saved.
				</div>
			}
			if v.Error != "" {
				<div class="auth-error" role="alert" style="margin-bottom:16px">
					<span class="auth-error-prefix">error:</span> { v.Error }
				</div>
			}

			<div class="admin-badge-layout">
				<div class="admin-badge-preview" id="badge-preview">
					@templ.Raw(v.Badge.SVGPreview)
					<p class="muted" style="margin-top:8px"><code>{ v.Badge.Slug }</code></p>
					if v.Badge.Trigger != "" {
						<p class="muted"><small>trigger: <code>{ v.Badge.Trigger }</code></small></p>
					}
				</div>

				<form class="admin-form admin-badge-form" method="post" action={ templ.SafeURL("/admin/badges/" + badgeIDStr(v.Badge.ID) + "/edit") }>
					<div class="admin-form-row">
						<label for="badge-name">name</label>
						<input id="badge-name" name="name" type="text" required maxlength="80" value={ v.Badge.Name }/>
					</div>
					<div class="admin-form-row">
						<label for="badge-desc">description</label>
						<input id="badge-desc" name="description" type="text" maxlength="200" value={ v.Badge.Description }/>
					</div>
					<div class="admin-form-row">
						<label for="badge-shape">shape</label>
						<select id="badge-shape" name="shape" required>
							for _, s := range v.Shapes {
								if s == v.Badge.Shape {
									<option value={ s } selected>{ s }</option>
								} else {
									<option value={ s }>{ s }</option>
								}
							}
						</select>
					</div>
					@colorSwatchField("primary_color", "primary color", v.Primary, v.Badge.PrimaryColor)
					@colorSwatchField("accent_color", "accent color", v.Accent, v.Badge.AccentColor)
					@colorSwatchField("ribbon_color", "ribbon color", v.Ribbon, v.Badge.RibbonColor)
					<div class="admin-form-row">
						<label for="badge-label">label</label>
						<input id="badge-label" name="label" type="text" required maxlength="40" value={ v.Badge.Label }/>
					</div>
					<div class="ctas">
						<button type="submit" class="btn btn-primary">▸ save badge</button>
						<a href="/admin/badges" class="btn btn-ghost">← all badges</a>
					</div>
				</form>
			</div>
			<script src="/static/js/badge-designer.js" defer></script>
		}
	}
}

func badgeIDStr(id int) string {
	return fmt.Sprintf("%d", id)
}