import { escapeHtml } from "./html.js";

interface LiveProject {
  readonly id: string;
  readonly name: string;
  readonly repositoryUrl: string;
  readonly status: string;
}
const shell = (title: string, body: string): string => `<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>${escapeHtml(title)} — AWP</title><style>
:root{color-scheme:dark;font:16px/1.45 system-ui;background:#07111f;color:#e8edf6}body{margin:0}header,main{max-width:1100px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26344a}a{color:#a9b8ff}section{background:#101d30;border:1px solid #2a3951;border-radius:10px;padding:18px;margin:16px 0}form{display:grid;gap:10px;max-width:720px}input,textarea,select,button{font:inherit;padding:10px;border-radius:6px;border:1px solid #40516d;background:#0b1728;color:inherit}button{background:#6559e8;border-color:#7b71f0;cursor:pointer}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.task{padding:12px;border-top:1px solid #2a3951}.blocked{color:#ffbd66}.ready{color:#78d6a6}.error{color:#ff8f9b;min-height:1.5em}.muted{color:#9ba9bc}.repository{font-family:ui-monospace,monospace}.badge{padding:2px 8px;border-radius:99px;background:#263650}.badge.failure{background:#55252d;border:1px solid #a54a59;color:#ffd9de}.failure-summary{border-left:4px solid #d45b6c;padding:8px 12px;background:#281923}.failure-summary strong,.failure-summary span{display:block}.tool-log{list-style:none;padding:0}.tool-call{border-left:3px solid #7b71f0;padding:6px 10px;margin:8px 0}.tool-call strong,.tool-call span{display:block}.diff{overflow:auto;font:14px/1.5 ui-monospace,monospace}.diff-line{display:block;white-space:pre;padding:0 8px}.diff-line.added{background:#123525;color:#b8f5d1}.diff-line.removed{background:#3d1d24;color:#ffd0d6}.diff-line.meta{color:#a9b8ff}
</style></head><body><header><a href="/"><strong>AWP</strong></a><span data-live-connection role="status" aria-live="polite">Live control plane</span></header><main>${body}</main><div class="toast-region" aria-live="polite" aria-atomic="true"></div><script type="module" src="/client.js"></script></body></html>`;

export function renderLiveProjectList(projects: readonly LiveProject[]): string {
  return shell(
    "Projects",
    `<h1>Projects</h1><section><h2>Create Project</h2><form data-live-form action="/internal/projects">
<label>Name<input name="name" required></label><label>Repository URL<input name="repositoryUrl" type="url" required></label>
<button type="submit">Create Project</button><div class="error" data-form-error role="alert"></div></form></section>
<section><h2>Project list</h2>${projects.length ? projects.map((project) => `<p><a href="/projects/${encodeURIComponent(project.id)}">${escapeHtml(project.name)}</a> <span class="repository">${escapeHtml(project.repositoryUrl)}</span></p>`).join("") : '<p class="muted">No Projects yet.</p>'}</section>`,
  );
}

// I1 Project/FactoryRun/ChangeSet detail routes intentionally use the approved-live
// read-model renderers. This module is limited to the top-level Project list/create
// surface so obsolete pre-I1 manual Review/Merge controls cannot become reachable
// through a future import by accident.
