const esc = (s: string) => s.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!)

export interface LoginPageProps {
  request: string
  clientName: string | null
  storeName: string
  require2fa: boolean
  error?: string | undefined
  username?: string | undefined
}

/** Server-rendered sign-in page. No scripts; posts to /login. */
export function renderLoginPage(p: LoginPageProps): string {
  const client = p.clientName ? esc(p.clientName) : 'An AI assistant'
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in · ${esc(p.storeName)}</title>
<style>
  :root { color-scheme: light dark; --bg:#f5f5f4; --card:#fff; --text:#1c1917; --muted:#57534e; --line:#d6d3d1; --accent:#c2410c; --err-bg:#fef2f2; --err:#991b1b; }
  @media (prefers-color-scheme: dark) { :root { --bg:#1c1917; --card:#292524; --text:#f5f5f4; --muted:#a8a29e; --line:#44403c; --accent:#fb923c; --err-bg:#450a0a; --err:#fecaca; } }
  * { box-sizing: border-box; }
  body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 24px; }
  h1 { font-size:20px; margin:0 0 4px; }
  p.lead { margin:0 0 20px; color:var(--muted); font-size:14px; }
  label { display:block; font-size:14px; font-weight:600; margin:14px 0 6px; }
  input { width:100%; padding:10px 12px; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:8px; }
  input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
  button { margin-top:22px; width:100%; padding:11px; font:inherit; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:8px; cursor:pointer; }
  .error { background:var(--err-bg); color:var(--err); padding:10px 12px; border-radius:8px; font-size:14px; margin-bottom:6px; }
  .note { margin-top:18px; font-size:12px; color:var(--muted); }
</style>
</head>
<body>
<main>
  <h1>Sign in with Magento</h1>
  <p class="lead"><strong>${client}</strong> wants read-only access to <strong>${esc(p.storeName)}</strong>. Use your Magento admin account.</p>
  ${p.error ? `<div class="error" role="alert">${esc(p.error)}</div>` : ''}
  <form method="post" action="/login" autocomplete="on">
    <input type="hidden" name="request" value="${esc(p.request)}">
    <label for="username">Admin username</label>
    <input id="username" name="username" autocomplete="username" required value="${esc(p.username ?? '')}"${p.username ? '' : ' autofocus'}>
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required${p.username ? ' autofocus' : ''}>
    ${p.require2fa ? `<label for="otp">Authenticator code</label>
    <input id="otp" name="otp" inputmode="numeric" pattern="[0-9 ]{6,7}" autocomplete="one-time-code" required>` : ''}
    <button type="submit">Sign in</button>
  </form>
  <p class="note">Your password is checked by Magento and never stored. Access is read-only and every request is logged.</p>
</main>
</body>
</html>`
}
