import { NextRequest, NextResponse } from 'next/server';

// GET /api/adops/preview — render banner preview HTML (screenshot fallback)
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const bannerUrl = searchParams.get('bannerUrl') || '';
  const w = searchParams.get('w') || '728';
  const h = searchParams.get('h') || '90';
  const campaignId = searchParams.get('campaignId') || '';

  const html = `<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Banner Preview</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
    .site-header { background: #0f0f1a; border-bottom: 2px solid #333; padding: 16px 24px; display: flex; align-items: center; gap: 12px; }
    .site-logo { font-size: 22px; font-weight: bold; color: #e87722; }
    .site-nav { display: flex; gap: 16px; margin-left: 24px; }
    .site-nav a { color: #aaa; text-decoration: none; font-size: 14px; }
    .content { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; gap: 24px; }
    .main { flex: 1; }
    .sidebar { width: 300px; }
    .ad-wrapper { text-align: center; margin-bottom: 24px; }
    .ad-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
    .ad-frame { display: inline-block; border: 3px solid #e74c3c; position: relative; }
    .ad-badge { position: absolute; top: -1px; right: -1px; background: #e74c3c; color: white; font-size: 10px; padding: 2px 6px; font-weight: bold; }
    .article-card { background: #252535; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
    .article-card h2 { font-size: 18px; margin-bottom: 8px; color: #fff; }
    .article-card p { font-size: 14px; color: #aaa; line-height: 1.5; }
    .preview-info { background: #1e1e30; border: 1px solid #333; border-radius: 8px; padding: 16px; margin-bottom: 16px; font-size: 13px; }
    .preview-info h3 { color: #e87722; margin-bottom: 8px; font-size: 14px; }
    .preview-info table { width: 100%; }
    .preview-info td { padding: 4px 0; color: #aaa; }
    .preview-info td:first-child { color: #888; width: 120px; }
  </style>
</head>
<body>
  <div class="site-header">
    <div class="site-logo">AV Beat</div>
    <nav class="site-nav">
      <a href="#">News</a>
      <a href="#">Reviews</a>
      <a href="#">Features</a>
      <a href="#">Forum</a>
    </nav>
  </div>

  <div class="content">
    <div class="main">
      <div class="ad-wrapper">
        <div class="ad-label">Advertisement</div>
        <div class="ad-frame">
          <div class="ad-badge">AD PREVIEW</div>
          ${bannerUrl
            ? `<img src="${bannerUrl}" width="${w}" height="${h}" alt="Banner Ad" style="display:block;">`
            : `<div style="width:${w}px;height:${h}px;background:#2a2a3e;display:flex;align-items:center;justify-content:center;color:#666;font-size:14px;">Banner Image (${w}×${h})</div>`
          }
        </div>
      </div>

      <div class="article-card">
        <h2>Sample Article: Industry News Headline</h2>
        <p>This is a sample article to show how the banner appears in context on the publication page. The actual page will have real content from the publication's CMS.</p>
      </div>
      <div class="article-card">
        <h2>Another Recent Story</h2>
        <p>Additional content to demonstrate the banner placement in a realistic editorial environment.</p>
      </div>
    </div>

    <div class="sidebar">
      <div class="preview-info">
        <h3>Preview Info</h3>
        <table>
          <tr><td>Dimensions:</td><td>${w}×${h}px</td></tr>
          <tr><td>Campaign ID:</td><td style="font-size:11px;word-break:break-all;">${campaignId}</td></tr>
          <tr><td>Status:</td><td style="color:#f39c12;">Pending Approval</td></tr>
        </table>
      </div>
    </div>
  </div>
</body>
</html>`;

  return new NextResponse(html, {
    headers: { 'Content-Type': 'text/html' },
  });
}
