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

export interface ProjectListItem {
  readonly id: string;
  readonly name: string;
  readonly repositoryUrl: string;
  readonly status: string;
}

const hrefFor = (project: ProjectListItem | undefined, suffix = ""): string =>
  project ? `/projects/${encodeURIComponent(project.id)}${suffix}` : "/projects";

const projectSidebar = (projects: readonly ProjectListItem[]): string => {
  const current = projects[0];
  const projectHref = hrefFor(current);
  const link = (label: string, href: string, icon: string, active = false): string =>
    `<a class="side-link${active ? " active" : ""}" href="${href}"${active ? ' aria-current="page"' : ""}><span class="si" aria-hidden="true">${icon}</span><span>${label}</span></a>`;
  return `<aside class="sidebar" aria-label="Primary navigation">
    <div class="brand"><span class="brand-mark" aria-hidden="true"></span><span>AWP</span></div>
    <nav class="side-scroll">
      <div class="side-group"><div class="side-label">Home</div>${link("Overview", projectHref, "▣")}${link("Needs your attention", current ? `${projectHref}#attention` : "/projects", "♧")}</div>
      <div class="side-divider"></div>
      <div class="side-group"><div class="side-label">Work</div>${link("Projects", "/projects", "▣", true)}${link("Plans", hrefFor(current, "?tab=plans"), "≋")}${link("Work Items", hrefFor(current, "?tab=work"), "≋")}${link("Queue (Next Up)", current ? `${projectHref}/queue` : "/projects", "≋")}</div>
      <div class="side-divider"></div>
      <div class="side-group"><div class="side-label">Execution</div>${link("FactoryRuns", hrefFor(current, "?tab=factory-runs"), "◷")}${link("Agents", hrefFor(current, "?tab=factory-runs"), "◉")}</div>
      <div class="side-divider"></div>
      <div class="side-group"><div class="side-label">Operations</div>${link("Accounts", current ? `/accounts?project=${encodeURIComponent(current.id)}` : "/projects", "◎")}${link("Queues", current ? `${projectHref}/queue` : "/projects", "≋")}</div>
      <div class="side-divider"></div>
      <div class="side-group"><div class="side-label">Settings</div>${link("Project Settings", hrefFor(current, "?tab=settings"), "⚙")}</div>
    </nav>
    <div class="sidebar-foot"><span>I1 dogfood</span><span aria-hidden="true">≪</span></div>
  </aside>`;
};

const topbar = (): string =>
  `<header class="topbar"><div class="breadcrumbs"><span class="root">WORK</span><span class="sep">/</span><span class="current">Projects</span></div><label class="search-box planned-search" title="Search activates in I3"><span aria-hidden="true">⌕</span><input aria-label="Search — planned for I3" aria-disabled="true" disabled placeholder="Search projects, plans, tasks, runs, decisions…"><span class="kbd">⌘K</span></label><div class="top-actions"><button class="top-icon" aria-label="Notifications" type="button">♧</button><button class="top-icon" aria-label="Help" type="button">?</button><div class="user"><span class="avatar" aria-hidden="true">O</span><span class="user-meta"><strong>Owner</strong><span>Product Owner</span></span><span class="chev" aria-hidden="true">⌄</span></div></div></header>`;

const projectRows = (projects: readonly ProjectListItem[]): string =>
  projects.length
    ? projects
        .map(
          (project) =>
            `<tr><td><a class="row-link project-list-name" href="/projects/${encodeURIComponent(project.id)}"><span class="project-list-icon" aria-hidden="true">${escapeHtml(project.name.slice(0, 1).toUpperCase() || "P")}</span><span><strong>${escapeHtml(project.name)}</strong><small>Canonical Project ${escapeHtml(project.id)}</small></span></a></td><td><span class="repository-cell">${escapeHtml(project.repositoryUrl)}</span></td><td><span class="state-text green">${titleCase(project.status)}</span></td><td><a class="hbtn" href="/projects/${encodeURIComponent(project.id)}">Open Project →</a></td></tr>`,
        )
        .join("")
    : '<tr><td colspan="4"><div class="quiet-state"><strong>No Projects yet</strong><span>Create the first Project above. The Project opens directly in the approved U1 workspace.</span></div></td></tr>';

export function renderProjectsPage(projects: readonly ProjectListItem[]): string {
  return `<div class="screen project-shell projects-collection-shell"><a class="skip-link" href="#main-content">Skip to main content</a>${projectSidebar(projects)}<main class="main" id="main-content">${topbar()}<section class="project-header projects-collection-header"><div class="project-main"><div class="project-identity"><div class="project-icon" aria-hidden="true"><span class="project-cube">P</span></div><div><div class="project-title-line"><span class="project-title">Projects</span></div><div class="project-subtitle">Agentic software delivery projects</div><div class="project-meta"><span>${projects.length} Project${projects.length === 1 ? "" : "s"}</span><span class="dot">•</span><span>Open a Project to enter its approved U1 workspace</span></div></div></div></div></section><div class="dashboard projects-dashboard"><section class="panel setup-panel"><div class="panel-head">Create Project</div><form class="projects-create-form" data-live-form action="/internal/projects"><label>Project name<input name="name" autocomplete="off" required></label><label>Repository URL<input name="repositoryUrl" type="url" placeholder="https://github.com/owner/repository.git" required></label><div class="setup-actions"><button class="hbtn primary" type="submit">＋ Create Project</button><div class="error" data-form-error role="alert"></div></div></form></section><section class="panel"><div class="panel-head">Projects<span class="head-spacer"></span><span class="count-badge">${projects.length}</span></div><div class="table-wrap"><table class="data-table projects-table"><caption class="sr-only">AWP Projects</caption><thead><tr><th>Project</th><th>Repository</th><th>Status</th><th></th></tr></thead><tbody>${projectRows(projects)}</tbody></table></div></section></div></main></div>`;
}