// Create schedules for websites to monitor
const websites = [
  {
    name: 'Competitor Pricing',
    url: 'https://competitor.com/pricing',
    schedule: '0 9 * * *', // Daily at 9 AM
  },
  {
    name: 'Partner Homepage',
    url: 'https://partner.com',
    schedule: '0 */4 * * *', // Every 4 hours
  },
  {
    name: 'Our Status Page',
    url: 'https://status.oursite.com',
    schedule: '*/15 * * * *', // Every 15 minutes
  },
];

async function setupMonitoring() {
  for (const site of websites) {
    const response = await fetch('https://api.allscreenshots.com/v1/schedules', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.ALLSCREENSHOTS_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: site.name,
        url: site.url,
        schedule: site.schedule,
        timezone: 'America/New_York',
        options: {
          viewport: { width: 1920, height: 1080 },
          fullPage: true,
          blockAds: true,
          blockCookieBanners: true,
        },
        webhookUrl: 'https://your-app.com/webhooks/screenshot',
        webhookSecret: process.env.WEBHOOK_SECRET,
        retentionDays: 90,
      }),
    });

    const schedule = await response.json();
    console.log(`Created schedule: ${schedule.scheduleId}`);
  }
}

// Webhook handler
app.post('/webhooks/screenshot', async (req, res) => {
  // Verify webhook signature
  const signature = req.headers['x-allscreenshots-signature'];
  if (!verifyWebhook(req.body, signature, process.env.WEBHOOK_SECRET)) {
    return res.status(401).send('Invalid signature');
  }

  const { scheduleId, captureId, result, timestamp } = req.body;

  // Store capture in database
  await db.captures.create({
    scheduleId,
    captureId,
    screenshotUrl: result.url,
    capturedAt: timestamp,
    width: result.width,
    height: result.height,
    size: result.size,
  });

  // Check for changes (optional)
  await detectChanges(scheduleId, captureId);

  res.sendStatus(200);
});

async function detectChanges(scheduleId, captureId) {
  // Get current and previous captures
  const [current, previous] = await db.captures.findMany({
    where: { scheduleId },
    orderBy: { capturedAt: 'desc' },
    take: 2,
  });

  if (!previous) return; // First capture, nothing to compare

  // Download both images
  const currentImage = await fetch(current.screenshotUrl).then(r => r.buffer());
  const previousImage = await fetch(previous.screenshotUrl).then(r => r.buffer());

  // Compare images
  const { diffPercentage, diffImage } = await compareImages(currentImage, previousImage);

  // If significant change detected, alert
  if (diffPercentage > 1) {
    await sendAlert({
      scheduleId,
      captureId,
      diffPercentage,
      diffImage,
      currentUrl: current.screenshotUrl,
      previousUrl: previous.screenshotUrl,
    });
  }
}

async function sendAlert({ scheduleId, diffPercentage, currentUrl, previousUrl }) {
  const schedule = await db.schedules.findUnique({ where: { id: scheduleId } });

  // Send Slack notification
  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text: `Visual change detected on ${schedule.name}`,
      attachments: [
        {
          color: 'warning',
          fields: [
            { title: 'Website', value: schedule.url, short: true },
            { title: 'Change', value: `${diffPercentage.toFixed(2)}%`, short: true },
          ],
          image_url: currentUrl,
        },
      ],
    }),
  });

  // Or send email
  await sendEmail({
    to: '[email protected]',
    subject: `Visual change detected: ${schedule.name}`,
    html: `
      <h2>Visual change detected</h2>
      <p><strong>Website:</strong> ${schedule.url}</p>
      <p><strong>Change:</strong> ${diffPercentage.toFixed(2)}%</p>
      <h3>Current</h3>
      <img src="${currentUrl}" style="max-width: 600px;" />
      <h3>Previous</h3>
      <img src="${previousUrl}" style="max-width: 600px;" />
    `,
  });
}

// Dashboard component
function MonitoringDashboard() {
  const { data: schedules } = useQuery('schedules', fetchSchedules);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {schedules?.map(schedule => (
        <WebsiteCard key={schedule.id} schedule={schedule} />
      ))}
    </div>
  );
}

function WebsiteCard({ schedule }) {
  const { data: captures } = useQuery(
    ['captures', schedule.id],
    () => fetchCaptures(schedule.id)
  );

  const latestCapture = captures?.[0];

  return (
    <div className="bg-white rounded-lg shadow p-4">
      <h3 className="font-semibold">{schedule.name}</h3>
      <p className="text-sm text-gray-500">{schedule.url}</p>

      {latestCapture && (
        <>
          <img
            src={latestCapture.screenshotUrl}
            alt={schedule.name}
            className="mt-4 rounded border"
          />
          <p className="text-xs text-gray-400 mt-2">
            Last captured: {formatDate(latestCapture.capturedAt)}
          </p>
        </>
      )}

      <button
        onClick={() => openHistory(schedule.id)}
        className="mt-4 text-blue-600 text-sm"
      >
        View history →
      </button>
    </div>
  );
}