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

package web

// Commit is a commit: the message and facts, the diff tools, the diff.
templ Commit(l Layout, p CommitPage) {
	@Shell(l, commitRail(p)) {
		<header class="show">
			<h1>{ p.Subject }</h1>
			if p.Body != "" {
				<pre class="msg">{ p.Body }</pre>
			}
			<dl class="kv show-kv">
				<dt>commit</dt>
				<dd>{ p.SHA }</dd>
				<dt>author</dt>
				<dd>@personView(p.Author)</dd>
				if p.Committer != nil {
					<dt>committer</dt>
					<dd>@personView(*p.Committer)</dd>
				}
				<dt>
					if p.Merge {
						merge of
					} else {
						parent
					}
				</dt>
				<dd>
					if p.Root {
						none (root commit)
					}
					for i, par := range p.Parents {
						if i > 0 {
							{ " + " }
						}
						<a href={ templ.SafeURL(par.Href) }>{ par.Label }</a>
					}
					if p.Merge {
						{ " · diff against the first parent" }
					}
				</dd>
				if p.Sig != nil {
					<dt>signature</dt>
					<dd>
						@signaturePill(p.Sig)
						if p.Verification.Fingerprint != "" {
							<code>{ p.Verification.Fingerprint }</code>
						}
						if p.Verification.KeyTitle != "" {
							<span class="dim">{ "· " + visibleText(p.Verification.KeyTitle) }</span>
						}
						if p.Sig.Class != "sig-none" {
							<span class="sig-why dim">{ p.Sig.Reason }</span>
						}
					</dd>
				}
				if p.Checks.Total > 0 {
					<dt>checks</dt>
					<dd>@CommitChecks(p.Checks)</dd>
				}
				if len(p.Refs) > 0 {
					<dt>refs</dt>
					<dd>
						for _, r := range p.Refs {
							<span class="pill">{ r }</span>
						}
					</dd>
				}
			</dl>
		</header>
		<div class="diff-tools" role="group" aria-label="Diff view">
			<span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
			<span class="grow"></span>
			@diffViewMenu(p.DiffView)
		</div>
		if p.Invisible {
			<p class="notice">
				this diff holds invisible characters (direction controls, zero-width characters). They are shown as
				<span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
			</p>
		}
		if p.Note != "" {
			<p class="notice">{ p.Note }</p>
		}
		<div
			id="diffs"
			if p.Both {
				data-diff={ p.View }
			} else {
				data-view={ p.View }
			}
			if p.Both && !p.Pinned {
				hx-live="this.dataset.diff = sessionStorage.getItem('diff') || this.dataset.diff"
			}
		>
			for _, f := range p.Files {
				@DiffFileView(f, p.DiffView)
			}
			if len(p.Files) == 0 {
				<p class="note">no changed files{ " " }
					if p.Merge {
						against the first parent.
					} else {
						in this commit.
					}
				</p>
			}
		</div>
	}
}

// diffViewMenu is the layout of the diff (unified, the default, or split) and
// the fold of its files, in one menu: a <details> that works without scripts;
// u, d and x still act without opening it. Its button names the layout shown.
templ diffViewMenu(p DiffView) {
	<details class="menu vmenu">
		<summary class="btn" aria-label="Diff view">
			if p.Both {
				<span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
			} else {
				{ viewLabel(p.View) }
			}
		</summary>
		<div class="menu-pop" role="group" aria-label="Diff view">
			@viewLink(p, "unified", "Unified", "u", p.UnifiedHref)
			@viewLink(p, "split", "Split", "d", p.SplitHref)
			@collapseButton()
		</div>
	</details>
}

// viewLink is a button of the diff tools. It is a link, so that the split
// layout works without JavaScript; with it, and when both layouts are in the
// page, a click only flips the layout.
templ viewLink(p DiffView, view, label, key, href string) {
	<a
		href={ templ.SafeURL(href) }
		class="btn vbtn"
		data-view={ view }
		aria-keyshortcuts={ key }
		if p.View == view {
			aria-current="true"
		}
		if p.Both {
			data-fire={ view }
			:aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
		}
	>{ label }<kbd aria-hidden="true">{ key }</kbd></a>
}

// collapseButton folds every file of the diff, or opens them all again when
// none is open; its label follows the state.
templ collapseButton() {
	<button type="button" aria-keyshortcuts="x" data-js data-fire="collapse" class="btn">
		<span hx-live="this.textContent = q('[data-file][open]').count || !q('[data-file]').count ? 'Collapse all' : 'Expand all'">Collapse all</span><kbd aria-hidden="true">x</kbd>
	</button>
}

templ personView(pr Person) {
	{ pr.Name }
	if pr.WhenAt != "" {
		{ " · " }<time datetime={ pr.WhenAt } title={ pr.Abs }>{ pr.When }</time>{ " · " + pr.Abs }
	}
}

templ commitRail(p CommitPage) {
	<section aria-labelledby="r-files">
		<h2 id="r-files">Files <span class="count">{ itoa(len(p.Files)) }</span></h2>
		@FileList(p.Files)
	</section>
}

// FileList is the table of contents of a diff: status letter, path, +n -m
// and an ASCII bar. The row of the file in view is marked.
templ FileList(files []DiffFile) {
	if len(files) > fileFilterMin {
		<div class="ffilter">
			<label for="files-filter" class="sr">filter the changed files</label>
			<input
				id="files-filter"
				type="search"
				placeholder="Filter files…"
				autocomplete="off"
				data-pick=".files > li"
				hx-on:input="ermite.filter(this)"
			/>
		</div>
	}
	<ol class="files" aria-label="Changed files">
		for _, f := range files {
			<li>
				<a
					href={ templ.SafeURL("#" + f.ID) }
					title={ f.Path }
					hx-on:click="(window.ermiteMR?.openFile || ermite.openFile)(this.hash.slice(1))"
				>
					<span class="st" data-st={ f.Status } title={ statusName(f.Status) }>{ f.Status }</span>
					<span class="nm"><span class="p">{ f.Name }</span>{ " " }<span class="d"><bdi>{ f.Dir }</bdi></span></span>
					if f.OpenNotes > 0 {
						<span class="cn" title={ plural(f.OpenNotes, "open comment", "open comments") }>{ itoa(f.OpenNotes) }</span>
					} else if f.Notes > 0 {
						<span class="cn done" title={ plural(f.Notes, "resolved comment", "resolved comments") }>{ itoa(f.Notes) }</span>
					}
					if f.Bin {
						<span class="n mute">bin</span>
					} else {
						<span class="n"><span class="plus">+{ itoa(f.Add) }</span> <span class="minus">-{ itoa(f.Del) }</span></span>
					}
				</a>
			</li>
		}
	</ol>
}

// DiffFileView is one file of the diff: a <details> (per-file collapse). The
// unified and the split tables are both in it; #diffs[data-diff] shows one.
// Every changed line keeps its +/- marker, so a change is never conveyed by
// colour alone.
templ DiffFileView(f DiffFile, p DiffView) {
	<details
		class={ "dfile", "lnw-" + itoa(f.Digits) }
		id={ f.ID }
		data-file={ f.Key }
		if f.Open {
			open
		}
	>
		<summary>
			<span class="st">{ f.Status }</span>{ " " }<span class="p">{ f.Path }</span>{ " " }<span class="plus">+{ itoa(f.Add) }</span>{ " " }<span class="minus">-{ itoa(f.Del) }</span>
			if f.Note != "" {
				{ " " }<span class="note">{ f.Note }</span>
			}
		</summary>
		if f.Lazy {
			// A placeholder: mr.js fetches the window of the file when it comes
			// near the screen and swaps the files of the window in. Without
			// scripts the link opens the page of that window.
			<div class={ "dlazy", "dlazy-" + itoa(f.Height) } data-src={ f.Src } data-notes={ f.Comments }>
				<a href={ templ.SafeURL("?from=" + itoa(f.From) + "#" + f.ID) }>show this file</a>
			</div>
		} else if len(f.Hunks) > 0 {
			<div class="dscroll">
				if p.ShowUnified {
					<table class="dt uni" aria-label={ f.Path + ", unified" }>
						for _, h := range f.Hunks {
							<tbody>
								if h.Gap != nil {
									@gapRow(*h.Gap, 4)
								}
								<tr class="hunk"><td colspan="4">{ h.Header }</td></tr>
								for _, ln := range h.Lines {
									<tr class={ ln.Kind, templ.KV("sel", ln.Selected) }>
										<td class="ln">@gutter(ln.Old, ln.OldHref)</td>
										<td class="ln">@gutter(ln.New, ln.NewHref)</td>
										<td class="m">{ ln.Mark }</td>
										<td class="tx chroma">@codeLine(ln)</td>
									</tr>
									if len(ln.Notes) > 0 || ln.Form != nil {
										<tr class="fnote">
											<td colspan="3"></td>
											<td>@lineNotes(ln.Notes, ln.Form, "")</td>
										</tr>
									}
								}
							</tbody>
						}
						if f.Tail != nil {
							<tbody>
								@gapRow(*f.Tail, 4)
							</tbody>
						}
					</table>
				}
				if p.ShowSplit {
					<table class="dt spl" aria-label={ f.Path + ", split" }>
						<colgroup><col class="c-ln"/><col class="c-m"/><col/><col class="c-ln"/><col class="c-m"/><col/></colgroup>
						for _, h := range f.Hunks {
							<tbody>
								if h.Gap != nil {
									@gapRow(*h.Gap, 6)
								}
								<tr class="hunk"><td colspan="6">{ h.Header }</td></tr>
								for _, row := range h.Split {
									<tr>
										@splitSide(row.L, true)
										@splitSide(row.R, false)
									</tr>
									if notes, form := row.Notes(), row.Form(); len(notes) > 0 || form != nil {
										<tr class="fnote">
											<td colspan="6">@lineNotes(notes, form, "-s")</td>
										</tr>
									}
								}
							</tbody>
						}
						if f.Tail != nil {
							<tbody>
								@gapRow(*f.Tail, 6)
							</tbody>
						}
					</table>
				}
			</div>
		} else {
			<p class="note pad">
				if f.Note != "" {
					{ f.Note }
				} else {
					no textual change.
				}
			</p>
		}
		if len(f.Loose) > 0 {
			<div class="dloose">
				for _, c := range f.Loose {
					@commentView(c, "")
				}
			</div>
		}
	</details>
}

// MRFiles is a window of files of a merge request, for the placeholders of
// the page: the files only, which replace the placeholders of the same ids.
templ MRFiles(p MRFilesPage) {
	for _, f := range p.Files {
		@DiffFileView(f, p.DiffView)
	}
}

// MRFilesMoved answers a window of a diff that is not the one of the page any
// more: the placeholder shows it instead of a file of another diff.
templ MRFilesMoved() {
	<p class="notice" data-moved>this merge request changed since the page was loaded — <a href="">reload</a></p>
}

// gapRow is the row of the hidden lines before a hunk, or of the rest of the
// file: a button that loads them in their place (ermite.js, ermite.expand).
// Without scripts nothing loads them: hidden.
templ gapRow(g DiffGap, cols int) {
	<tr class="gap" data-js data-gap={ g.Key }>
		<td colspan={ itoa(cols) }>
			<button type="button" data-src={ g.Src }>
				<span aria-hidden="true">⋯</span> { g.Label() }
			</button>
		</td>
	</tr>
}

// DiffContext is the hidden lines of a gap, for /context: one body a layout,
// whose rows replace the rows of the gap in the table of that layout.
templ DiffContext(c ContextRows) {
	<table>
		<tbody data-for="uni">
			for _, ln := range c.Lines {
				<tr class="ctx">
					<td class="ln">{ ln.Old }</td>
					<td class="ln">{ ln.New }</td>
					<td class="m">{ ln.Mark }</td>
					<td class="tx chroma">@codeLine(ln)</td>
				</tr>
			}
			if c.More != nil {
				@gapRow(*c.More, 4)
			}
		</tbody>
		<tbody data-for="spl">
			for i := range c.Lines {
				<tr>
					@splitSide(&c.Lines[i], true)
					@splitSide(&c.Lines[i], false)
				</tr>
			}
			if c.More != nil {
				@gapRow(*c.More, 6)
			}
		</tbody>
	</table>
}

// splitSide is one half of a row of the split view; a side without a line is
// an empty cell.
templ splitSide(ln *DiffLine, old bool) {
	if ln == nil {
		<td class="ln none"></td>
		<td class="m none"></td>
		<td class="tx none"></td>
	} else {
		<td class={ "ln", ln.Kind, templ.KV("sel", ln.Selected) }>
			if old {
				@gutter(ln.Old, ln.OldHref)
			} else {
				@gutter(ln.New, ln.NewHref)
			}
		</td>
		<td class={ "m", ln.Kind, templ.KV("sel", ln.Selected) }>{ ln.Mark }</td>
		<td class={ "tx", "chroma", ln.Kind, templ.KV("sel", ln.Selected) }>@codeLine(*ln)</td>
	}
}

// gutter is a line number of the gutter. On a merge request that can be
// commented on, it links to the form that comments on that line.
templ gutter(n, href string) {
	if href != "" {
		<a href={ templ.SafeURL(href) } title="comment on this line">{ n }</a>
	} else {
		{ n }
	}
}