<?php
/**
 * Email template: Single issue notification
 * Used when a new issue is detected by AI monitoring.
 *
 * @param array $data Associative array with keys:
 *   - site_name (string)
 *   - severity (string: 'critical', 'warning', 'info')
 *   - title (string)
 *   - diagnosis (string)
 *   - recommendation (string)
 *   - container_name (string)
 *   - raw_log_excerpt (string)
 *   - dashboard_url (string)
 * @return string Rendered HTML email
 */
function render_issue_notification(array $data): string {
    $site_name       = htmlspecialchars($data['site_name'] ?? '', ENT_QUOTES, 'UTF-8');
    $severity        = strtolower(trim($data['severity'] ?? 'info'));
    $title           = htmlspecialchars($data['title'] ?? '', ENT_QUOTES, 'UTF-8');
    $diagnosis       = htmlspecialchars($data['diagnosis'] ?? '', ENT_QUOTES, 'UTF-8');
    $recommendation  = htmlspecialchars($data['recommendation'] ?? '', ENT_QUOTES, 'UTF-8');
    $container_name  = htmlspecialchars($data['container_name'] ?? '', ENT_QUOTES, 'UTF-8');
    $raw_log_excerpt = htmlspecialchars($data['raw_log_excerpt'] ?? '', ENT_QUOTES, 'UTF-8');
    $dashboard_url   = htmlspecialchars($data['dashboard_url'] ?? '#', ENT_QUOTES, 'UTF-8');

    // Severity badge colors
    $severity_colors = [
        'critical' => ['bg' => '#dc3545', 'text' => '#ffffff'],
        'warning'  => ['bg' => '#fd7e14', 'text' => '#ffffff'],
        'info'     => ['bg' => '#0d6efd', 'text' => '#ffffff'],
    ];
    $badge = $severity_colors[$severity] ?? $severity_colors['info'];
    $severity_label = ucfirst($severity);

    $html = <<<HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Issue Detected - {$site_name}</title>
</head>
<body style="margin:0; padding:0; background-color:#f4f5f7; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f5f7;">
<tr><td align="center" style="padding:24px 16px;">

<!-- Main container -->
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px; width:100%; background-color:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08);">

<!-- Header -->
<tr>
<td style="background-color:#1a1a2e; padding:24px 32px;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="color:#ffffff; font-size:20px; font-weight:bold; letter-spacing:0.5px;">WHP AI Monitor</td>
        <td align="right" style="color:#a0a0b8; font-size:13px;">Issue Notification</td>
    </tr>
    </table>
</td>
</tr>

<!-- Site name bar -->
<tr>
<td style="background-color:#f0f1f3; padding:12px 32px; border-bottom:1px solid #e2e3e5;">
    <span style="font-size:13px; color:#6c757d;">Site:</span>
    <span style="font-size:13px; color:#212529; font-weight:600;">{$site_name}</span>
</td>
</tr>

<!-- Issue title and severity -->
<tr>
<td style="padding:28px 32px 16px 32px;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <span style="display:inline-block; padding:4px 12px; border-radius:4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:{$badge['text']}; background-color:{$badge['bg']};">{$severity_label}</span>
        </td>
    </tr>
    <tr>
        <td style="padding-top:12px;">
            <h1 style="margin:0; font-size:20px; font-weight:700; color:#212529; line-height:1.4;">{$title}</h1>
        </td>
    </tr>
    </table>
</td>
</tr>

<!-- Diagnosis -->
<tr>
<td style="padding:0 32px 20px 32px;">
    <h2 style="margin:0 0 8px 0; font-size:14px; font-weight:700; color:#495057; text-transform:uppercase; letter-spacing:0.3px;">Diagnosis</h2>
    <p style="margin:0; font-size:15px; color:#495057; line-height:1.6;">{$diagnosis}</p>
</td>
</tr>

<!-- Recommendation -->
<tr>
<td style="padding:0 32px 20px 32px;">
    <h2 style="margin:0 0 8px 0; font-size:14px; font-weight:700; color:#495057; text-transform:uppercase; letter-spacing:0.3px;">Recommendation</h2>
    <p style="margin:0; font-size:15px; color:#495057; line-height:1.6;">{$recommendation}</p>
</td>
</tr>

<!-- Container info -->
<tr>
<td style="padding:0 32px 20px 32px;">
    <h2 style="margin:0 0 8px 0; font-size:14px; font-weight:700; color:#495057; text-transform:uppercase; letter-spacing:0.3px;">Container</h2>
    <p style="margin:0; font-size:14px; color:#495057; font-family:'Courier New', Courier, monospace; background-color:#f8f9fa; padding:6px 10px; border-radius:4px; display:inline-block;">{$container_name}</p>
</td>
</tr>

<!-- Log excerpt -->
<tr>
<td style="padding:0 32px 28px 32px;">
    <h2 style="margin:0 0 8px 0; font-size:14px; font-weight:700; color:#495057; text-transform:uppercase; letter-spacing:0.3px;">Log Excerpt</h2>
    <pre style="margin:0; padding:14px 16px; background-color:#1e1e2e; color:#cdd6f4; font-size:12px; line-height:1.5; border-radius:6px; overflow-x:auto; white-space:pre-wrap; word-wrap:break-word; font-family:'Courier New', Courier, monospace;">{$raw_log_excerpt}</pre>
</td>
</tr>

<!-- Dashboard button -->
<tr>
<td align="center" style="padding:0 32px 32px 32px;">
    <a href="{$dashboard_url}" style="display:inline-block; padding:12px 28px; background-color:#1a1a2e; color:#ffffff; font-size:14px; font-weight:600; text-decoration:none; border-radius:6px;">View in Dashboard</a>
</td>
</tr>

<!-- Footer -->
<tr>
<td style="background-color:#f8f9fa; padding:20px 32px; border-top:1px solid #e9ecef;">
    <p style="margin:0; font-size:12px; color:#868e96; line-height:1.5; text-align:center;">You're receiving this because you enabled AI monitoring for {$site_name}.</p>
</td>
</tr>

</table>
<!-- /Main container -->

</td></tr>
</table>

</body>
</html>
HTML;

    return $html;
}
