/**
 * Migration: Add email ingestion email templates
 * @ai-summary Extends email_templates CHECK constraint and seeds 3 receipt templates
 * @ai-context Templates for receipt processing confirmations, failures, and pending vehicle selection
 */

-- Extend template_key CHECK constraint to include email ingestion templates
ALTER TABLE email_templates
DROP CONSTRAINT IF EXISTS email_templates_template_key_check;

ALTER TABLE email_templates
ADD CONSTRAINT email_templates_template_key_check
CHECK (template_key IN (
  'maintenance_due_soon', 'maintenance_overdue',
  'document_expiring', 'document_expired',
  'payment_failed_immediate', 'payment_failed_7day', 'payment_failed_1day',
  'subscription_tier_change',
  'receipt_processed', 'receipt_failed', 'receipt_pending_vehicle'
));

-- Insert email ingestion templates
INSERT INTO email_templates (template_key, name, description, subject, body, variables, html_body) VALUES
  (
    'receipt_processed',
    'Receipt Processed Successfully',
    'Sent when an emailed receipt is successfully processed and recorded',
    'MotoVaultPro: Receipt Processed for {{vehicleName}}',
    'Hi {{userName}},

Your emailed receipt has been successfully processed.

Vehicle: {{vehicleName}}
Record Type: {{recordType}}
Merchant: {{merchantName}}
Date: {{date}}
Amount: ${{totalAmount}}

The record has been added to your vehicle history.

Best regards,
MotoVaultPro Team',
    '["userName", "vehicleName", "recordType", "merchantName", "totalAmount", "date"]',
    '<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Receipt Processed</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4; padding: 20px;">
    <tr>
      <td align="center">
        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
          <tr>
            <td style="background-color: #2e7d32; padding: 30px; text-align: center;">
              <h1 style="color: #ffffff; margin: 0; font-size: 24px;">Receipt Processed</h1>
            </td>
          </tr>
          <tr>
            <td style="padding: 40px 30px;">
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">Hi {{userName}},</p>
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">Your emailed receipt has been successfully processed.</p>
              <table cellpadding="0" cellspacing="0" style="margin: 20px 0; width: 100%;">
                <tr>
                  <td style="padding: 15px; background-color: #f9f9f9; border-left: 4px solid #2e7d32;">
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Vehicle:</strong> {{vehicleName}}</p>
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Record Type:</strong> {{recordType}}</p>
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Merchant:</strong> {{merchantName}}</p>
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Date:</strong> {{date}}</p>
                    <p style="margin: 0; color: #666666; font-size: 14px;"><strong>Amount:</strong> ${{totalAmount}}</p>
                  </td>
                </tr>
              </table>
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 20px 0;">The record has been added to your vehicle history.</p>
            </td>
          </tr>
          <tr>
            <td style="padding: 20px 30px; background-color: #f9f9f9; border-top: 1px solid #e0e0e0;">
              <p style="color: #666666; font-size: 14px; line-height: 1.6; margin: 0;">Best regards,<br>MotoVaultPro Team</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>'
  ),
  (
    'receipt_failed',
    'Receipt Processing Failed',
    'Sent when an emailed receipt fails OCR processing or validation',
    'MotoVaultPro: Unable to Process Your Receipt',
    'Hi {{userName}},

We were unable to process the receipt you emailed to us.

Error: {{errorReason}}

{{guidance}}

Best regards,
MotoVaultPro Team',
    '["userName", "errorReason", "guidance"]',
    '<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Receipt Processing Failed</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4; padding: 20px;">
    <tr>
      <td align="center">
        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
          <tr>
            <td style="background-color: #d32f2f; padding: 30px; text-align: center;">
              <h1 style="color: #ffffff; margin: 0; font-size: 24px;">Processing Failed</h1>
            </td>
          </tr>
          <tr>
            <td style="padding: 40px 30px;">
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">Hi {{userName}},</p>
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">We were unable to process the receipt you emailed to us.</p>
              <table cellpadding="0" cellspacing="0" style="margin: 20px 0; width: 100%;">
                <tr>
                  <td style="padding: 15px; background-color: #f9f9f9; border-left: 4px solid #d32f2f;">
                    <p style="margin: 0; color: #666666; font-size: 14px;"><strong>Error:</strong> {{errorReason}}</p>
                  </td>
                </tr>
              </table>
              <div style="background-color: #f5f5f5; padding: 20px; border-radius: 4px; margin: 20px 0;">
                <p style="color: #333333; font-size: 14px; font-weight: bold; margin: 0 0 10px 0;">What to do next:</p>
                <p style="color: #666666; font-size: 14px; line-height: 1.8; margin: 0;">{{guidance}}</p>
              </div>
            </td>
          </tr>
          <tr>
            <td style="padding: 20px 30px; background-color: #f9f9f9; border-top: 1px solid #e0e0e0;">
              <p style="color: #666666; font-size: 14px; line-height: 1.6; margin: 0;">Best regards,<br>MotoVaultPro Team</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>'
  ),
  (
    'receipt_pending_vehicle',
    'Receipt Pending Vehicle Selection',
    'Sent when a multi-vehicle user needs to select which vehicle a receipt belongs to',
    'MotoVaultPro: Select Vehicle for Your Receipt',
    'Hi {{userName}},

Your emailed receipt has been processed, but we need your help to complete the record.

Since you have multiple vehicles, please log in to MotoVaultPro and select which vehicle this receipt belongs to.

Record Type: {{recordType}}
Merchant: {{merchantName}}
Date: {{date}}
Amount: ${{totalAmount}}

You can find the pending receipt in your notifications.

Best regards,
MotoVaultPro Team',
    '["userName", "recordType", "merchantName", "totalAmount", "date"]',
    '<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Vehicle for Receipt</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f4; padding: 20px;">
    <tr>
      <td align="center">
        <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
          <tr>
            <td style="background-color: #f57c00; padding: 30px; text-align: center;">
              <h1 style="color: #ffffff; margin: 0; font-size: 24px;">Vehicle Selection Needed</h1>
            </td>
          </tr>
          <tr>
            <td style="padding: 40px 30px;">
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">Hi {{userName}},</p>
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 20px 0;">Your emailed receipt has been processed, but we need your help to complete the record.</p>
              <div style="background-color: #fff3e0; border-left: 4px solid #f57c00; padding: 20px; margin: 20px 0;">
                <p style="color: #e65100; font-size: 16px; font-weight: bold; margin: 0 0 10px 0;">Action Required</p>
                <p style="color: #333333; font-size: 14px; margin: 0;">Since you have multiple vehicles, please select which vehicle this receipt belongs to.</p>
              </div>
              <table cellpadding="0" cellspacing="0" style="margin: 20px 0; width: 100%;">
                <tr>
                  <td style="padding: 15px; background-color: #f9f9f9; border-left: 4px solid #f57c00;">
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Record Type:</strong> {{recordType}}</p>
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Merchant:</strong> {{merchantName}}</p>
                    <p style="margin: 0 0 10px 0; color: #666666; font-size: 14px;"><strong>Date:</strong> {{date}}</p>
                    <p style="margin: 0; color: #666666; font-size: 14px;"><strong>Amount:</strong> ${{totalAmount}}</p>
                  </td>
                </tr>
              </table>
              <p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 20px 0;">You can find the pending receipt in your notifications.</p>
              <div style="text-align: center; margin: 30px 0;">
                <a href="https://motovaultpro.com/notifications" style="display: inline-block; padding: 14px 28px; background-color: #f57c00; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: bold;">Select Vehicle</a>
              </div>
            </td>
          </tr>
          <tr>
            <td style="padding: 20px 30px; background-color: #f9f9f9; border-top: 1px solid #e0e0e0;">
              <p style="color: #666666; font-size: 14px; line-height: 1.6; margin: 0;">Best regards,<br>MotoVaultPro Team</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>'
  )
ON CONFLICT (template_key) DO UPDATE SET
  name = EXCLUDED.name,
  description = EXCLUDED.description,
  subject = EXCLUDED.subject,
  body = EXCLUDED.body,
  variables = EXCLUDED.variables,
  html_body = EXCLUDED.html_body,
  updated_at = NOW();
