import type { FastifyReply, FastifyRequest } from 'fastify';

/** Static preview of official /pl/pl/checkout/order/created/ (no order session required). */
export const CHECKOUT_CREATED_PREVIEW_PATH = '/__preview/checkout-order-created';

export function handleCheckoutCreatedPreview(
  _request: FastifyRequest,
  reply: FastifyReply,
): void {
  reply.type('text/html; charset=utf-8').send(renderCheckoutCreatedPreviewHtml());
}

export function renderCheckoutCreatedPreviewHtml(): string {
  return `<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Zamówienie złożone – Sinsay (podgląd)</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f7f7f7;color:#111;min-height:100vh}
    .hdr{background:#fff;border-bottom:1px solid #e5e5e5;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
    .logo{font-weight:800;font-size:18px;letter-spacing:.12em;color:#111;text-decoration:none}
    .steps{display:flex;gap:20px;font-size:13px;color:#888}
    .steps span.done{color:#111;font-weight:600}
    .steps span.cur{color:#111;font-weight:700}
    .wrap{max-width:720px;margin:0 auto;padding:32px 16px 64px}
    .card{background:#fff;border:1px solid #e8e8e8;border-radius:4px;padding:40px 32px;text-align:center}
    .icon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:#ecfdf5;display:flex;align-items:center;justify-content:center}
    .icon svg{width:32px;height:32px}
    h1{font-size:22px;font-weight:700;margin-bottom:10px}
    .lead{font-size:15px;color:#444;line-height:1.55;margin-bottom:24px}
    .meta{font-size:14px;color:#666;background:#fafafa;border:1px solid #eee;border-radius:4px;padding:16px 20px;text-align:left;margin-bottom:24px}
    .meta dt{font-weight:600;color:#111;margin-top:10px}
    .meta dt:first-child{margin-top:0}
    .meta dd{margin:4px 0 0}
    .btn{display:inline-block;padding:14px 28px;background:#111;color:#fff;text-decoration:none;font-weight:700;font-size:14px;border-radius:4px}
    .btn:hover{background:#333}
    .note{margin-top:20px;font-size:12px;color:#888;line-height:1.5}
    .banner{margin-bottom:16px;padding:10px 14px;background:#fff8e6;border:1px solid #f0e0b0;border-radius:4px;font-size:13px;color:#6b5a2a;text-align:left}
  </style>
</head>
<body>
  <header class="hdr">
    <a class="logo" href="/pl/pl/">SINSAY</a>
    <nav class="steps" aria-label="Kroki zamówienia">
      <span class="done">Koszyk</span>
      <span class="done">Zamówienie</span>
      <span class="cur">Podsumowanie</span>
    </nav>
  </header>
  <main class="wrap">
    <p class="banner">Podgląd layoutu — to nie jest żywa sesja checkout. Prawdziwa strona: <a href="/pl/pl/checkout/order/created/">/pl/pl/checkout/order/created/</a> (wymaga złożonego zamówienia).</p>
    <div class="card">
      <div class="icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <h1>Dziękujemy!</h1>
      <p class="lead">Twoje zamówienie zostało złożone pomyślnie.</p>
      <dl class="meta">
        <dt>Numer zamówienia</dt>
        <dd>PL-2026-0001234</dd>
        <dt>E-mail z potwierdzeniem</dt>
        <dd>jan.kowalski@example.com</dd>
        <dt>Status</dt>
        <dd>Nowe (trwa przetwarzanie)</dd>
      </dl>
      <a class="btn" href="/pl/pl/">Kontynuuj zakupy</a>
      <p class="note">Na produkcji treść i numer zamówienia pochodzą z oficjalnego SPA Sinsay po udanym <code>createOrder</code>.</p>
    </div>
  </main>
</body>
</html>`;
}
