import type { TokenPermissions } from "../token-scope";
import { TOKEN_AREAS } from "../token-scope";

const AREA_LABELS: Record<(typeof TOKEN_AREAS)[number], string> = {
  contents: "Repository contents (files, branches, commits)",
  issues: "Issues and comments",
  pulls: "Pull requests and reviews",
  actions: "CI runs and logs",
  admin: "Repository administration",
};

function escapeHtml(value: string): string {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

const STYLE = `body{font-family:"IBM Plex Sans",system-ui,sans-serif;background:#0d1117;color:#e6edf3;margin:0;display:flex;justify-content:center}
main{max-width:34rem;margin:4rem 1rem;padding:2rem;border:1px solid #30363d;border-radius:12px;background:#161b22}
h1{font-size:1.25rem;margin:0 0 .5rem}p,li{line-height:1.5;color:#c9d1d9}code{font-family:"IBM Plex Mono",monospace;font-size:.85em}
ul{padding-left:1.25rem}.warn{color:#f0b72f}.muted{color:#8b949e;font-size:.875rem}
.actions{display:flex;gap:.75rem;margin-top:1.5rem}button{font:inherit;padding:.5rem 1rem;border-radius:8px;border:1px solid #30363d;cursor:pointer}
.approve{background:#238636;color:#fff;border-color:#2ea043}.deny{background:#21262d;color:#e6edf3}a{color:#58a6ff}`;

function page(title: string, body: string, status = 200): Response {
  const html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>${escapeHtml(title)}</title><style>${STYLE}</style></head><body><main>${body}</main></body></html>`;
  return new Response(html, {
    status,
    headers: {
      "content-type": "text/html; charset=utf-8",
      "cache-control": "no-store",
      "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; frame-ancestors 'none'",
      "x-frame-options": "DENY",
    },
  });
}

export function errorPage(message: string, status = 400): Response {
  return page("Authorization error", `<h1>Authorization error</h1><p>${escapeHtml(message)}</p>`, status);
}

export function signInPage(returnTo: string): Response {
  return page(
    "Sign in to continue",
    `<h1>Sign in to continue</h1><p>An MCP client is asking to connect to your gitfor account.</p>
<p><a href="/login">Sign in</a>, then <a href="${escapeHtml(returnTo)}">return to this page</a> to review the request.</p>`,
    401,
  );
}

export type ConsentView = {
  requestId: string;
  clientName: string;
  clientId: string;
  redirectHost: string;
  viewerName: string;
  permissions: TokenPermissions;
  repos: string[];
  unavailable: string[];
  allRepos: boolean;
  expiresInMinutes: number;
  forgeRequested: boolean;
};

export function consentPage(view: ConsentView): Response {
  const areas = TOKEN_AREAS.flatMap((area) => {
    const access = view.permissions[area];
    if (!access) return [];
    return [`<li><strong>${access === "write" ? "Read and write" : "Read"}</strong>: ${AREA_LABELS[area]}</li>`];
  }).join("");
  const repos = view.allRepos
    ? `<p class="warn">All repositories you can access, including ones created later.</p>`
    : `<ul>${view.repos.map((repo) => `<li><code>${escapeHtml(repo)}</code></li>`).join("")}</ul>`;
  const skipped = view.unavailable.length
    ? `<p class="muted">Not found or not accessible, so not granted: ${view.unavailable.map(escapeHtml).join(", ")}</p>`
    : "";
  return page(
    "Authorize agent",
    `<h1>Authorize <strong>${escapeHtml(view.clientName)}</strong></h1>
<p class="warn">The name above is chosen by the client and is not verified. After you approve, your browser will be sent to
<strong><code>${escapeHtml(view.redirectHost)}</code></strong>; only continue if you recognise that address.</p>
<p>This agent wants to act as <strong>@${escapeHtml(view.viewerName)}</strong> through the gitfor MCP server.
It never gets more access than you have, and its commits and pull requests are attributed to it and to you.
By default its token only works through the MCP server.</p>
<h2 style="font-size:1rem">Repositories</h2>${repos}${skipped}
<h2 style="font-size:1rem">Permissions</h2><ul>${areas || "<li>None</li>"}</ul>
<p class="muted">Client <code>${escapeHtml(view.clientId)}</code> will be redirected to <code>${escapeHtml(view.redirectHost)}</code>.
Access tokens last one hour and refresh for up to ${view.expiresInMinutes / 60 / 24} days; revoke them any time in Settings, Tokens.</p>
<form method="post" action="/oauth/authorize"><input type="hidden" name="request_id" value="${escapeHtml(view.requestId)}">
<label style="display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem"><input type="checkbox" name="forge_access">
<span>Also allow git and REST API access with the same permissions${view.forgeRequested ? ' <span class="warn">(requested by this client)</span>' : ""}.
<span class="muted">Leave unchecked unless the agent needs to clone or push directly.</span></span></label>
<div class="actions"><button class="approve" name="decision" value="approve" type="submit">Authorize</button>
<button class="deny" name="decision" value="deny" type="submit">Deny</button></div></form>`,
  );
}