// SPDX-License-Identifier: AGPL-3.0-or-later

package web

import "fmt"

// Home is the repository list.
templ Home(l Layout, p HomePage) {
	@Shell(l, nil) {
		<h1 class="sr">Repositories</h1>
		<div class="home" data-layout="cards">
			<section class="home-repos" aria-label="Repositories">
				<div class="home-bar">
					<div class="filter">
						<label for="home-filter" class="sr">filter</label>
						<input
							id="home-filter"
							type="search"
							data-filter="#repo-rows > li"
							placeholder="Filter repositories…"
							autocomplete="off"
							hx-on:input="ermite.filter(this)"
						/>
					</div>
					<nav class="sort" aria-label="Sort repositories">
						<span class="mute">sort</span>
						for _, s := range p.Sorts {
							<a
								href={ templ.SafeURL(s.Href) }
								if s.Mark != "" {
									aria-current="true"
								}
							>
								{ s.Label }
								if s.Mark != "" {
									<span aria-hidden="true">{ s.Mark }</span>
									<span class="sr">{ ", " + s.State }</span>
								}
							</a>
						}
					</nav>
					<div class="layout-switch" role="group" aria-label="Layout" data-js>
						<button type="button" class="btn icon" data-set-layout="cards" aria-pressed="true" title="Cards" aria-label="Cards">
							<span class="ico i-cards" aria-hidden="true"></span>
						</button>
						<button type="button" class="btn icon" data-set-layout="split" aria-pressed="false" title="Two columns" aria-label="Two columns">
							<span class="ico i-split" aria-hidden="true"></span>
						</button>
						<button type="button" class="btn icon" data-set-layout="compact" aria-pressed="false" title="Compact list" aria-label="Compact list">
							<span class="ico i-compact" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<ul class="repos" id="repo-rows" data-rows data-sort={ p.Sort } data-desc={ fmt.Sprint(p.Desc) }>
					for _, r := range p.Rows {
						@HomeRowView(r)
					}
				</ul>
				if len(p.Rows) == 0 {
					<p class="lede dim">no repositories yet.</p>
				}
			</section>
		</div>
	}
}

// Summary is the summary of a repository: the README reads in the main
// column at the reading measure; what one acts on sits in the rail.
templ Summary(l Layout, p SummaryPage) {
	@Shell(l, summaryRail(p)) {
		if p.Readme != nil {
			@ReadmeCard(*p.Readme, p.Docs...)
		}
	}
}

// latestTagFact is the "latest tag" row of About: the newest tag (its
// commit subject on hover), how old it is, and the count of tags, a link to
// all of them. With too many tags to date them, the count only.
templ latestTagFact(t LatestTag) {
	<dt>latest tag</dt>
	<dd class="latest-tag">
		if t.Name != "" {
			<a class="tag-name" href={ templ.SafeURL(t.Href) } title={ t.Subject }>{ t.Name }</a>
			if t.WhenAt != "" {
				{ " · " }<time datetime={ t.WhenAt } title={ t.WhenAt }>{ t.When }</time>
			}
			{ " · " }
		}
		<a class="all-tags" href={ templ.SafeURL(t.RefsHref) }>{ plural(t.Count, "tag", "tags") }</a>
	</dd>
}

templ summaryRail(p SummaryPage) {
	if p.Mirror != nil {
		<section aria-labelledby="r-mirror">
			<h2 id="r-mirror">Mirror</h2>
			<p>⚠ Mirror { p.Mirror.State }</p>
			if p.Mirror.Reason != "" {
				<p>{ p.Mirror.Reason }</p>
			}
			<p>Run <code>{ p.Mirror.Command }</code></p>
		</section>
	}

	<section aria-labelledby="r-clone"><h2 id="r-clone">Clone</h2>@CloneBlock(p.Clone)
</section>
	<section aria-labelledby="r-facts">
		<h2 id="r-facts">About</h2>
		<dl class="kv">
			for _, f := range p.Facts {
				<dt>{ f.Key }</dt>
				@FactValue(f)
			}
			if lic := p.License; lic != nil {
				<dt>license</dt>
				<dd><a href={ templ.SafeURL(lic.Href) }>{ lic.ID }</a></dd>
			}
			if p.Latest != nil {
				@latestTagFact(*p.Latest)
			}
			if r := p.Release; r != nil {
				<dt>release</dt>
				<dd>
					<a href={ templ.SafeURL(r.Href) }>{ r.Tag }</a>{ " · " }
					<time datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>{ " · " }
					<a href={ templ.SafeURL(r.AllHref) }>all releases</a>
				</dd>
			}
		</dl>
	</section>
	if len(p.Recent) > 0 {
		<section aria-labelledby="r-recent"><h2 id="r-recent">Recent commits <a href={ templ.SafeURL(p.AllHref) }>View all</a></h2>@CommitRows(p.Recent)
</section>
	}
	if p.Actions != nil {
		@RecentActionsBlock(*p.Actions)
	}
	if len(p.Outline) > 0 && p.Readme != nil {
		<section aria-labelledby="r-outline"><h2 id="r-outline">On this page</h2>@Outline(p.Outline)
</section>
	}
}

// Refs lists the branches and tags of a repository.
templ Refs(l Layout, p RefsPage) {
	@Shell(l, refsRail(p)) {
		<div class="filter">
			<label for="ref-filter" class="sr">filter</label>
			<input
				id="ref-filter"
				type="search"
				data-filter="#ref-rows > tr"
				placeholder="Filter branches and tags…"
				autocomplete="off"
				hx-on:input="ermite.filter(this)"
			/>
		</div>
		<table class="list refs" aria-label="Branches and tags">
			<thead>
				<tr><th class="c-kind">kind</th><th class="c-name">name</th><th class="c-sha">commit</th><th class="c-sub">subject</th><th class="c-when">date</th></tr>
			</thead>
			@RefsBody(p)
		</table>
		if p.Note != "" {
			<p class="note">{ p.Note }</p>
		}
	}
}

templ refRow(kind string, r RefRow) {
	<tr data-cursor?={ r.Cursor }>
		<td class="c-kind mute">{ kind }</td>
		<td class="c-name">
			<a href={ templ.SafeURL(r.Href) }>{ r.Name }</a>
			if r.Default {
				<span class="pill">default</span>
			}
		</td>
		<td class="c-sha">
			if r.CHref != "" {
				<a href={ templ.SafeURL(r.CHref) }>{ r.Short }</a>
			} else {
				{ r.Short }
			}
			@CommitChecks(r.Checks)
		</td>
		<td class="c-sub">{ r.Subject }</td>
		<td class="c-when dim">
			if r.WhenAt != "" {
				<time datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>
			}
		</td>
	</tr>
}

templ refsRail(p RefsPage) {
	<section aria-labelledby="r-refs">
		<h2 id="r-refs">Overview</h2>
		@RefsKV(p)
	</section>
}

// State is a 404, 500 or empty-repository page inside the normal shell.
templ State(l Layout, p StatePage) {
	@Shell(l, nil) {
		<section class="state" aria-labelledby="state-title">
			<p class="eyebrow">{ p.Code }</p>
			<h1 id="state-title">{ p.Title }</h1>
			for _, line := range p.Lines {
				<p class="dim">{ line }</p>
			}
			if p.Clone != nil {
				@CloneBlock(*p.Clone)
			}
			<p class="state-back">
				for _, b := range p.Back {
					<a href={ templ.SafeURL(b.Href) }>{ b.Label }</a>
				}
			</p>
		</section>
	}
}

// Login signs the browser in with a login link. Opening the link consumes
// nothing; only this form does. ermite.js submits it as soon as a browser
// shows the page (data-autosubmit): link previews and prefetchers run no
// script, so they still cannot use the link. Without scripts the owner
// clicks the button.
templ Login(l Layout, p LoginPage) {
	@Shell(l, nil) {
		<section class="state" aria-labelledby="state-title">
			<h1 id="state-title">{ p.Title }</h1>
			for _, line := range p.Lines {
				<p class="dim">{ line }</p>
			}
			<form class="state-act" method="post" action={ templ.SafeURL(p.Action) } data-autosubmit>
				<button type="submit" class="btn primary">{ p.Button }</button>
			</form>
			<p class="state-back"><a href="/">Back to home</a></p>
		</section>
	}
}

// PasskeyLogin is the sign-in page: a button the script (passkey.js) drives.
// Without script the button is hidden and the page says what to do instead.
templ PasskeyLogin(l Layout, p PasskeyLoginPage) {
	@Shell(l, nil) {
		<section class="state" aria-labelledby="state-title">
			<h1 id="state-title">{ p.Title }</h1>
			<form class="state-act" data-js data-passkey-form>
				<button type="submit" class="btn primary" data-passkey="login" data-begin={ p.Begin } data-finish={ p.Finish }>{ p.Button }</button>
			</form>
			<p class="dim" role="status" aria-live="polite" data-passkey-status></p>
			for _, line := range p.Lines {
				<p class="dim">{ line }</p>
			}
			<p class="state-back"><a href="/">Back to home</a></p>
		</section>
	}
}

// Passkeys lists the owner's passkeys, removes them and adds one.
templ Passkeys(l Layout, p PasskeysPage) {
	@Shell(l, nil) {
		<h2 class="rule-h"><span>Passkeys</span><span class="count">{ itoa(len(p.Rows)) }</span></h2>
		<p class="dim">A passkey signs you in from this device or your phone, without a terminal. Removing one signs every browser out.</p>
		if len(p.Rows) > 0 {
			<table class="list passkeys" aria-label="Passkeys">
				<thead>
					<tr>
						<th class="c-name">Name</th>
						<th class="c-when">Created</th>
						<th class="c-when">Last used</th>
						<th class="c-sync">Synced</th>
						<th class="c-act"><span class="sr">Remove</span></th>
					</tr>
				</thead>
				<tbody>
					for _, r := range p.Rows {
						<tr>
							<td class="c-name">{ r.Name }</td>
							<td class="c-when nowrap">
								<time
									if r.CreatedAt != "" {
										datetime={ r.CreatedAt }
									}
								>{ r.Created }</time>
							</td>
							<td class="c-when nowrap">
								<time
									if r.LastUsedAt != "" {
										datetime={ r.LastUsedAt }
									}
								>{ r.LastUsed }</time>
							</td>
							<td class="c-sync">
								if r.Synced {
									yes
								} else {
									no
								}
							</td>
							<td class="c-act">
								<form method="post" action={ templ.SafeURL(r.Remove) }>
									<button type="submit" class="btn danger" aria-label={ "Remove passkey " + r.Name }>Remove</button>
								</form>
							</td>
						</tr>
					}
				</tbody>
			</table>
		} else {
			<p class="lede dim">no passkeys yet.</p>
		}
		if p.Full {
			<p class="dim">{ itoa(p.Max) } passkeys are registered, the most there can be. Remove one to add another.</p>
		} else {
			<form class="passkey-add" data-js data-passkey-form>
				<label for="passkey-name" class="sr">Name of the new passkey</label>
				<input id="passkey-name" type="text" placeholder="Name, for example Pixel 9" autocomplete="off" data-passkey-name/>
				<button type="submit" class="btn primary" data-passkey="register" data-begin={ p.Begin } data-finish={ p.Finish }>Add a passkey</button>
			</form>
		}
		<p class="dim" role="status" aria-live="polite" data-passkey-status></p>
	}
}