import { Router, Response } from 'express';

const router = Router();


router.get('/dynamic', (_req, res) => {
  const now = new Date();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  const tenSecondBlock = Math.floor(second / 10);

  // Dynamic Pricing Logic - changes every 10 seconds
  const basicPrice = 9 + (tenSecondBlock % 5);
  const proPrice = 29 + (tenSecondBlock % 10);
  const enterprisePrice = 99 + (tenSecondBlock % 20);

  // Dynamic Features
  const features = [
    "Unlimited Projects",
    `Up to ${10 + (tenSecondBlock % 5)} team members`,
    "Advanced Analytics",
    tenSecondBlock % 2 === 0 ? "Priority Support" : "24/7 Live Chat Support",
    second % 2 === 0 ? "Real-time Monitoring" : "Custom Webhooks"
  ];

  // Dynamic Blog Posts
  const blogPosts = [
    {
      id: 1,
      title: tenSecondBlock % 3 === 0 ? "Scaling your SaaS in 2026" : "Growth Strategies for Modern Apps",
      author: "Jane Doe",
      date: "Jan 15, 2026"
    },
    {
      id: 2,
      title: "UI/UX Best Practices",
      author: second % 20 > 10 ? "John Smith" : "Alex Rivera",
      date: `Jan ${10 + (tenSecondBlock % 10)}, 2026`
    }
  ];

  const html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>CloudScale SaaS - Infrastructure for Growth</title>
      <style>
        body { font-family: 'Inter', -apple-system, sans-serif; line-height: 1.6; color: #333; max-width: 1000px; margin: 0 auto; padding: 40px; }
        header { text-align: center; margin-bottom: 50px; }
        .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
        .card { border: 1px solid #eee; border-radius: 12px; padding: 25px; text-align: center; transition: transform 0.2s; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .card.featured { border: 2px solid #3b82f6; background-color: #eff6ff; transform: scale(1.05); }
        .price { font-size: 3rem; font-weight: 800; margin: 20px 0; color: #111; }
        .price span { font-size: 1rem; color: #666; font-weight: normal; }
        ul { list-style: none; padding: 0; margin: 30px 0; text-align: left; }
        li { margin-bottom: 12px; display: flex; align-items: center; }
        li::before { content: "✓"; color: #10b981; font-weight: bold; margin-right: 10px; }
        .badge { background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 99px; font-size: 0.8rem; font-weight: 600; }
        .blog-section { margin-top: 60px; border-top: 1px solid #eee; padding-top: 40px; }
        .blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .post { background: #fafafa; padding: 20px; border-radius: 8px; }
        .meta { color: #888; font-size: 0.9rem; margin-bottom: 10px; }
        .footer { margin-top: 80px; text-align: center; color: #999; font-size: 0.9rem; }
      </style>
    </head>
    <body>
      <header>
        <h1>CloudScale <span class="badge">v2.4 Updated</span></h1>
        <p>Reliable infrastructure that scales with your business needs.</p>
        <p style="color: #6366f1; font-weight: 500;">Current Update: ${now.toLocaleTimeString()}</p>
      </header>

      <div class="pricing-section">
        <h2 style="text-align: center">Simple, Transparent Pricing</h2>
        <div class="grid">
          <div class="card">
            <h3>Basic</h3>
            <div class="price">$${basicPrice}<span>/mo</span></div>
            <ul>
              <li>5 Projects</li>
              <li>Basic Analytics</li>
              <li>Community Support</li>
            </ul>
          </div>
          <div class="card featured">
            <h3>Pro</h3>
            <div class="price">$${proPrice}<span>/mo</span></div>
            <ul>
              ${features.map(f => `<li>${f}</li>`).join('')}
            </ul>
          </div>
          <div class="card">
            <h3>Enterprise</h3>
            <div class="price">$${enterprisePrice}<span>/mo</span></div>
            <ul>
              <li>Everything in Pro</li>
              <li>Custom SLAs</li>
              <li>Dedicated Account Manager</li>
              <li>White-label Branding</li>
            </ul>
          </div>
        </div>
      </div>

      <section class="blog-section">
        <h2>From Our Blog</h2>
        <div class="blog-grid">
          ${blogPosts.map(p => `
            <div class="post">
              <div class="meta">By ${p.author} • ${p.date}</div>
              <h3>${p.title}</h3>
              <p>Discover how the latest trends in technology are shaping the future of digital products...</p>
            </div>
          `).join('')}
        </div>
      </section>

      <div class="footer">
        <p>&copy; 2026 CloudScale Platform. Serving ${1000 + (minute * 10)} active customers worldwide.</p>
      </div>
    </body>
    </html>
  `;

  res.send(html);
});

// Test endpoint that returns a 404 error for testing incident display
router.get('/error', (_req, res: Response) => {
  res.status(404).send(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>404 Not Found</title>
    </head>
    <body>
      <h1>404 - Page Not Found</h1>
      <p>This page intentionally returns a 404 error for testing.</p>
    </body>
    </html>
  `);
});

export default router;
