<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 20px; }
    .container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; }
    .header { background: #2C2720; color: #D4CFC0; padding: 30px; text-align: center; }
    .header h1 { margin: 0; font-size: 24px; }
    .body { padding: 30px; color: #333; line-height: 1.6; }
    .summary-box { background: #f9f9f9; border-radius: 6px; padding: 20px; margin: 15px 0; }
    .summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
    .summary-row:last-child { border-bottom: none; }
    .positive { color: #3B6B4A; font-weight: bold; }
    .negative { color: #8B2E1F; font-weight: bold; }
    .category-list { list-style: none; padding: 0; }
    .category-list li { padding: 6px 0; border-bottom: 1px solid #eee; }
    .footer { padding: 20px 30px; background: #f9f9f9; color: #888; font-size: 12px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Monthly Summary — {{monthName}}</h1>
    </div>
    <div class="body">
      <p>Hi {{name}},</p>
      <p>Here's your financial summary for <strong>{{monthName}}</strong>:</p>

      <div class="summary-box">
        <div class="summary-row">
          <span>Total Expenses</span>
          <span class="negative">{{totalExpenses}}</span>
        </div>
        <div class="summary-row">
          <span>Total Revenue</span>
          <span class="positive">{{totalRevenue}}</span>
        </div>
        <div class="summary-row">
          <span>Net (Income - Expenses)</span>
          <span class="{{#if netPositive}}positive{{else}}negative{{/if}}">{{netAmount}}</span>
        </div>
      </div>

      {{#if categoryBreakdown}}
      <h3>Top Spending Categories</h3>
      <ul class="category-list">
        {{#each categoryBreakdown}}
        <li>{{this.name}} — {{this.amount}}</li>
        {{/each}}
      </ul>
      {{/if}}

      {{#if budgetInfo}}
      <div class="summary-box">
        <h3 style="margin-top:0;">Budget Status</h3>
        <div class="summary-row">
          <span>{{budgetInfo.ledger}} Budget</span>
          <span>{{budgetInfo.budget}}</span>
        </div>
        <div class="summary-row">
          <span>Spent</span>
          <span class="negative">{{budgetInfo.spent}}</span>
        </div>
        <div class="summary-row">
          <span>Remaining</span>
          <span class="{{#if budgetInfo.overBudget}}negative{{else}}positive{{/if}}">{{budgetInfo.remaining}}</span>
        </div>
      </div>
      {{/if}}

      <p>Log in to view your full dashboard and manage your finances.</p>
    </div>
    <div class="footer">
      <p>This is an automated monthly summary sent to {{email}}.</p>
    </div>
  </div>
</body>
</html>
