package web

// The CI pages: the runs of a repository, a run with its jobs, a job with its
// steps and its log (actions.go). A state is always a word as well as a
// symbol and a colour.

// CheckIcon is the symbol of a state: a mark in the colour of its kind, with
// the state as its text for a screen reader.
templ CheckIcon(kind, state string) {
	<span class={ "ck", "ck-" + kind } role="img" aria-label={ state } title={ state }></span>
}

templ Actions(l Layout, p ActionsPage) {
	@Shell(l, nil) {
		if len(p.Disabled) > 0 {
			<p class="dim wf-off">disabled workflows (they start no run):
				for _, f := range p.Disabled {
					<span class="pill">{ f }</span>{ " " }
				}
			</p>
		}
		if len(p.Runs) == 0 {
			<p class="dim">no runs yet: a push that matches a workflow of .github/workflows starts one.</p>
		} else {
			<table class="list runs" aria-label="Runs">
				<thead>
					<tr><th class="c-st"></th><th class="c-name">workflow</th><th class="c-sub">commit</th><th class="c-ref">ref</th><th class="c-who">actor</th><th class="c-dur">time</th><th class="c-when">created</th></tr>
				</thead>
				<tbody id="run-rows" data-rows>
					for _, r := range p.Runs {
						@RunListRow(r)
					}
				</tbody>
			</table>
		}
		if p.More != "" {
			<p class="more"><a href={ templ.SafeURL(p.More) } rel="next">older runs</a></p>
		}
	}
}

// RunListRow is a row of the list of runs; its id is the target of the live
// updates.
templ RunListRow(r RunRow) {
	<tr id={ "run-" + r.ID }>
		<td class="c-st">@CheckIcon(r.Kind, r.State)</td>
		<td class="c-name">
			<a href={ templ.SafeURL(r.Href) }>{ r.Workflow }</a>
			<span class="mute">{ r.Number }</span>
			if r.Event != "" {
				<span class="pill">{ r.Event }</span>
			}
			if r.Attempt > 1 {
				<span class="pill">attempt { itoa(int(r.Attempt)) }</span>
			}
		</td>
		<td class="c-sub"><a href={ templ.SafeURL(r.CHref) }>{ r.Short }</a> { r.Title }</td>
		<td class="c-ref"><a href={ templ.SafeURL(r.RefHref) }>{ r.Ref }</a></td>
		<td class="c-who dim">{ r.Actor }</td>
		<td class="c-dur dim">{ r.State }{ " " }{ r.Duration }</td>
		<td class="c-when dim">
			if r.WhenAt != "" {
				<time datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>
			}
		</td>
	</tr>
}

// RecentActionsBlock is the "Recent actions" section of the summary rail; its
// id is the target of the live updates. Without a run it is hidden.
templ RecentActionsBlock(a RecentActions) {
	<section id="recent-actions" aria-labelledby="r-actions" hidden?={ len(a.Runs) == 0 }>
		<h2 id="r-actions">Recent actions <a href={ templ.SafeURL(a.AllHref) }>View all</a></h2>
		<ul class="rruns">
			for _, r := range a.Runs {
				<li>
					@CheckIcon(r.Kind, r.State)
					<a class="rr-name" href={ templ.SafeURL(r.Href) } title={ r.Workflow + " " + r.Number + " · " + r.State }>{ r.Workflow }</a>
					<span class="mute">{ r.Number }</span>
					<a class="rr-ref" href={ templ.SafeURL(r.RefHref) }>{ r.Ref }</a>
					if r.WhenAt != "" {
						<time class="dim" datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>
					}
				</li>
			}
		</ul>
	</section>
}

templ RunDetail(l Layout, p RunPage) {
	@Shell(l, runRail(p)) {
		@LiveSlot("run-notice")
		if p.WorkflowDisabled {
			<p class="dim wf-off"><span class="pill">disabled</span> this workflow is disabled: no event starts a run of it (<code>ermite workflow enable</code>).</p>
		}
		<div id="run-body">
			@RunBody(p)
		</div>
		if p.Artifacts != nil {
			@RunArtifacts(*p.Artifacts)
		}
		@RunSummaries(p.Summaries, p.SummariesMore)
	}
}

// runBodyFragment is the body of the run page as a live fragment.
templ runBodyFragment(p RunPage) {
	<div id="run-body">
		@RunBody(p)
	</div>
}

// RunBody is the jobs of a run, replaced by the live updates.
templ RunBody(p RunPage) {
	<h2 class="run-h">@CheckIcon(p.Kind, p.State)<span>{ p.Workflow }</span> <span class="mute">{ p.Number }</span></h2>
	if p.Error != "" {
		<pre class="run-err">{ p.Error }</pre>
	}
	if len(p.Annotations) > 0 {
		<section class="annots" aria-labelledby="run-annots">
			<h3 id="run-annots">Annotations <span class="count">{ itoa(len(p.Annotations)) }</span></h3>
			@AnnotationList(p.Annotations, p.AnnotationsMore, false)
		</section>
	}
	<ul class="jobs">
		for _, j := range p.Jobs {
			<li id={ "job-" + j.ID }>
				<a class="job-h" href={ templ.SafeURL(j.Href) }>
					@CheckIcon(j.Kind, j.State)
					<span class="j-name">{ j.Name }</span>
					<span class="dim">{ j.State }{ " " }{ j.Duration }</span>
				</a>
				if j.Runner != "" {
					<span class="mute">on { runnerText(j) }</span>
				}
				if len(j.Needs) > 0 {
					<span class="mute">needs { joinWords(j.Needs) }</span>
				}
				if j.Error != "" {
					<p class="job-err">{ j.Error }</p>
				}
				if len(j.Steps) > 0 {
					<ol class="steps">
						for _, s := range j.Steps {
							<li>@CheckIcon(s.Kind, s.State) <span>{ s.Name }</span> <span class="dim">{ s.Duration }</span></li>
						}
					</ol>
				}
			</li>
		}
	</ul>
}

// AnnotationList is a list of annotations: the level as a mark with its word,
// the job and the step, the title and the message, and file:line. Everything
// comes from the workflow and is text. Without grouped, each item names its job (the
// run page); grouped lists the annotations by step instead (the job page).
templ AnnotationList(anns []AnnotationView, more bool, grouped bool) {
	<ul class="annot-list">
		for _, a := range anns {
			<li class={ "annot", "annot-" + a.Kind }>
				if grouped && a.StepHead {
					<p class="annot-step">
						if a.StepHref != "" {
							<a href={ templ.SafeURL(a.StepHref) }>{ a.Step }</a>
						} else {
							{ a.Step }
						}
					</p>
				}
				<span class={ "an", "an-" + a.Kind } role="img" aria-label={ a.Level } title={ a.Level }></span>
				<div class="annot-body">
					<p class="annot-head">
						<span class="annot-level">{ a.Level }</span>
						if !grouped {
							if a.JobHref != "" {
								<a href={ templ.SafeURL(a.JobHref) }>{ a.Job }</a>
							} else {
								<span>{ a.Job }</span>
							}
							<span class="mute">{ a.Step }</span>
						}
						if a.Title != "" {
							<strong>{ a.Title }</strong>
						}
					</p>
					<p class="annot-msg">{ a.Message }</p>
					if a.Where != "" {
						<p class="annot-where">
							if a.WhereHref != "" {
								<a href={ templ.SafeURL(a.WhereHref) }>{ a.Where }</a>
							} else {
								<span>{ a.Where }</span>
							}
						</p>
					}
				</div>
			</li>
		}
	</ul>
	if more {
		<p class="mute">more annotations exist than are shown.</p>
	}
}

// JobAnnotations is the annotations of the job page, replaced by the live
// updates; the element exists even when there is none, so that the first one
// has something to replace.
templ JobAnnotations(anns []AnnotationView, more bool) {
	<section id="job-annotations" class="annots" aria-label="Annotations">
		if len(anns) > 0 {
			<h3>Annotations <span class="count">{ itoa(len(anns)) }</span></h3>
			@AnnotationList(anns, more, true)
		}
	</section>
}

// RunArtifacts is the artifacts of a run, with the space the artifacts of
// the repository use. Names come from the workflow and are text.
templ RunArtifacts(a ArtifactsView) {
	<section class="artifacts" aria-labelledby="run-artifacts">
		<h3 id="run-artifacts">Artifacts <span class="count">{ itoa(len(a.Rows)) }</span></h3>
		<table class="list" aria-label="Artifacts">
			<thead>
				<tr><th class="c-name">name</th><th class="c-sub">size</th><th class="c-who">job</th><th class="c-when">expires</th><th></th></tr>
			</thead>
			<tbody>
				for _, r := range a.Rows {
					<tr>
						<td class="c-name"><a href={ templ.SafeURL(r.Href) } download>{ r.Name }</a></td>
						<td class="c-sub dim">{ r.Size }</td>
						<td class="c-who">
							if r.JobHref != "" {
								<a href={ templ.SafeURL(r.JobHref) }>{ r.Job }</a>
							} else {
								<span class="dim">{ r.Job }</span>
							}
						</td>
						<td class="c-when dim">
							if r.ExpiresAt != "" {
								<time datetime={ r.ExpiresAt }>{ r.Expires }</time>
							} else {
								{ r.Expires }
							}
						</td>
						<td>
							if r.DeleteAction != "" {
								<form method="post" action={ templ.SafeURL(r.DeleteAction) }><button type="submit" class="btn" aria-label={ "Delete " + r.Name }>Delete</button></form>
							}
						</td>
					</tr>
				}
			</tbody>
		</table>
		<p class="mute">{ a.Usage }</p>
	</section>
}

// RunSummaries is the job summaries of a run, one block per step that wrote
// one. The Markdown is rendered by the README renderer: raw HTML dropped, URLs
// filtered, images shown as their alt text.
templ RunSummaries(sums []JobSummaries, more bool) {
	for _, j := range sums {
		<section class="summaries" aria-label={ "Summary of " + j.Job }>
			<h3>
				if j.JobHref != "" {
					<a href={ templ.SafeURL(j.JobHref) }>{ j.Job }</a>
				} else {
					{ j.Job }
				}
				<span class="mute">summary</span>
			</h3>
			for _, s := range j.Steps {
				<article class="prose summary" aria-label={ s.Step } hx-ignore>
					<h4 class="summary-step">{ s.Step }</h4>
					if s.Note != "" {
						<p class="dim">{ s.Note }</p>
					} else {
						@templ.Raw(s.HTML)
					}
				</article>
			}
			if j.More {
				<p class="mute">the job has more summaries than the first 20, which are shown.</p>
			}
		</section>
	}
	if more {
		<p class="mute">more summaries are not shown: the summaries of the page are over { humanSize(maxSummaryPageBytes) }.</p>
	}
}

templ runRail(p RunPage) {
	<section aria-labelledby="r-run">
		<h2 id="r-run">Run</h2>
		<dl class="kv">
			<dt>result</dt>
			<dd>{ p.State }</dd>
			<dt>event</dt>
			<dd>{ p.Event }</dd>
			<dt>commit</dt>
			<dd><a href={ templ.SafeURL(p.CHref) }>{ p.Short }</a></dd>
			<dt>ref</dt>
			<dd><a href={ templ.SafeURL(p.RefHref) }>{ p.Ref }</a></dd>
			<dt>actor</dt>
			<dd>{ p.Actor }</dd>
			<dt>attempt</dt>
			<dd>{ itoa(int(p.Attempt)) } of { itoa(int(p.Latest)) }</dd>
		</dl>
		if len(p.Attempts) > 0 {
			<ul class="attempts">
				for _, a := range p.Attempts {
					<li>
						if a.Current {
							<span aria-current="page">{ a.Label }</span>
						} else {
							<a href={ templ.SafeURL(a.Href) }>{ a.Label }</a>
						}
					</li>
				}
			</ul>
		}
	</section>
	if p.CancelAction != "" || p.RerunAction != "" {
		<section aria-labelledby="r-act" class="decide">
			<h2 id="r-act">Actions</h2>
			<div class="d-btns">
				if p.CancelAction != "" {
					<form method="post" action={ templ.SafeURL(p.CancelAction) }><button type="submit" class="btn">Cancel run</button></form>
				}
				if p.RerunAction != "" {
					<form method="post" action={ templ.SafeURL(p.RerunAction) }><button type="submit" class="btn primary">Re-run all jobs</button></form>
				}
				if p.CanRerunFailed {
					<form method="post" action={ templ.SafeURL(p.RerunFailedAction) }><button type="submit" class="btn">Re-run failed jobs</button></form>
				}
			</div>
		</section>
	}
}

// JobHead is the title of the job page with its state and its error, replaced
// by the live updates. total is the number of lines the log holds.
templ JobHead(j JobRow, total int64) {
	<div id="job-head" data-total={ itoa64(total) }>
		<h2 class="run-h">@CheckIcon(j.Kind, j.State)<span>{ j.Name }</span> <span class="dim">{ j.State }{ " " }{ j.Duration }</span></h2>
		if j.Error != "" {
			<p class="job-err">{ j.Error }</p>
		}
	</div>
}

// JobSteps is the steps of the job in the rail, replaced by the live updates.
templ JobSteps(steps []StepView) {
	<ol class="steps" id="job-steps">
		for _, s := range steps {
			<li>
				@CheckIcon(s.Kind, s.State)
				if s.LogEnd > s.LogStart {
					<a href={ templ.SafeURL("#L" + itoa64(s.LogStart)) }>{ s.Name }</a>
				} else {
					<span>{ s.Name }</span>
				}
				<span class="dim">{ s.Duration }</span>
			</li>
		}
	</ol>
}

templ Job(l Layout, p JobPage) {
	@Shell(l, jobRail(p)) {
		@LiveSlot("job-notice")
		@JobHead(p.JobRow, p.Total)
		@JobAnnotations(p.Annotations, p.AnnotationsMore)
		<div id="job-log" class="joblog" data-total={ itoa64(p.Total) } data-follow?={ p.Follow } data-stream={ p.StreamHref } data-next={ itoa64(p.From + int64(len(p.Lines))) }>
			if p.Note != "" {
				<p class="dim">{ p.Note }</p>
			}
			if p.Prev != "" {
				<p class="more"><a href={ templ.SafeURL(p.Prev) } rel="prev">earlier lines</a></p>
			}
			<ol class="log" start={ itoa64(p.From + 1) }>
				for _, ln := range p.Lines {
					@LogLine(ln)
				}
			</ol>
			if p.Next != "" {
				<p class="more"><a href={ templ.SafeURL(p.Next) } rel="next">more lines</a></p>
			}
		</div>
	}
}

// LogLine is a line of the log. Group and error markers of the runner show as
// headings and errors, never as raw text.
templ LogLine(ln LogLineView) {
	<li id={ "L" + itoa64(ln.N) } class={ logClass(ln) } data-step={ itoa(int(ln.Step)) } data-cont?={ ln.Continued }><time>{ ln.Time }</time><span class="t">{ ln.Text }</span></li>
}

templ jobRail(p JobPage) {
	<section aria-labelledby="r-job">
		<h2 id="r-job">Steps</h2>
		@JobSteps(p.Steps)
	</section>
	<section aria-labelledby="r-jobf">
		<h2 id="r-jobf">Job</h2>
		<dl class="kv">
			<dt>run</dt>
			<dd><a href={ templ.SafeURL(p.RunHref) }>{ p.RunName }</a></dd>
			if p.Runner != "" {
				<dt>runner</dt>
				<dd>{ p.Runner }</dd>
			}
			if p.Isolation != "" {
				<dt>isolation</dt>
				<dd>{ p.Isolation }</dd>
			}
			<dt>lines</dt>
			<dd>{ itoa64(p.Total) }</dd>
		</dl>
		<p><a href={ templ.SafeURL(p.RawHref) }>raw log</a></p>
	</section>
}

// CommitChecks is the combined state of the checks of a commit, as a mark
// with a count, linking to the page that explains it.
templ CommitChecks(c ChecksSummary) {
	if c.Total > 0 {
		<a class="ck-sum" href={ templ.SafeURL(c.Href) } title={ c.Title }>
			@CheckIcon(c.Kind, c.State)
			<span class="mute">{ c.Label }</span>
		</a>
	}
}

// MRChecksSum is the state of the checks of a merge request in the bar above
// the diff, a link to the checks of the rail. The event stream replaces it
// with the checks section (same event, fragments.go).
templ MRChecksSum(c ChecksSummary) {
	<a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>
		if c.Total > 0 {
			@CheckIcon(c.Kind, c.State)
			<span>{ c.Label }</span>
		} else {
			<span class="mute">no checks</span>
		}
	</a>
}

// MRChecks is the checks section of the rail of a merge request.
templ MRChecks(c ChecksSection) {
	<section aria-labelledby="r-checks" id="mr-checks">
		<h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>
		if len(c.Rows) == 0 {
			<p class="dim">no checks</p>
		} else {
			<ul class="checks">
				for _, r := range c.Rows {
					<li>
						@CheckIcon(r.Kind, r.State)
						if r.Href != "" {
							<a href={ templ.SafeURL(r.Href) }>{ r.Name }</a>
						} else {
							<span>{ r.Name }</span>
						}
						<span class="dim">{ r.State }</span>
						if r.Waiting {
							<span class="mute">waiting for a runner</span>
						}
					</li>
				}
			</ul>
		}
		if c.Note != "" {
			<p class="rule-note"><span class="sr">note: </span>{ c.Note }</p>
		}
	</section>
}