<div class="space-y-8">
    <%# Month-over-Month Trends %>
    <div>
      <h3 class="text-lg font-medium mb-4">
        <%= t("reports.trends.monthly_breakdown") %>
      </h3>

      <% if trends_data.any? %>
        <div class="bg-container-inset rounded-xl p-1 overflow-x-auto">
          <div class="w-max sm:w-full">
          <div class="rounded-lg shadow-border-xs bg-container overflow-hidden">
          <table class="w-full">
            <thead class="bg-container-inset">
              <tr class="uppercase text-xs font-medium text-secondary">
                <th class="px-4 py-2 text-left font-medium"><%= t("reports.trends.month") %></th>
                <th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.income") %></th>
                <th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.expenses") %></th>
                <th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.net") %></th>
                <th class="px-4 py-2 text-right font-medium"><%= t("reports.trends.savings_rate") %></th>
              </tr>
            </thead>
            <tbody class="text-secondary text-sm">
              <% trends_data.each_with_index do |trend, idx| %>
                <tr class="<%= idx < trends_data.size - 1 ? "table-divider" : "" %>">
                  <td class="py-3 px-4 lg:px-6">
                    <span class="flex items-center gap-2 <%= trend[:is_current_month] ? "font-medium" : "" %>">
                      <%= trend[:month] %>
                      <% if trend[:is_current_month] %>
                        <span class="text-xs text-subdued">(<%= t("reports.trends.current") %>)</span>
                      <% end %>
                    </span>
                  </td>
                  <td class="py-3 px-4 lg:px-6 text-right privacy-sensitive">
                    <%= Money.new(trend[:income], Current.family.currency).format %>
                  </td>
                  <td class="py-3 px-4 lg:px-6 text-right privacy-sensitive">
                    <%= Money.new(trend[:expenses], Current.family.currency).format %>
                  </td>
                  <td class="py-3 px-4 lg:px-6 text-right privacy-sensitive <%= trend[:net] >= 0 ? "text-success" : "text-destructive" %>">
                    <%= Money.new(trend[:net], Current.family.currency).format %>
                  </td>
                  <td class="py-3 px-4 lg:px-6 text-right <%= trend[:net] >= 0 ? "text-success" : "text-destructive" %>">
                    <% savings_rate = trend[:income] > 0 ? ((trend[:net].to_f / trend[:income].to_f) * 100).round(1) : 0 %>
                    <%= savings_rate %>%
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>
          </div>
          </div>
        </div>

        <%# Trend Insights %>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <% avg_income = trends_data.sum { |t| t[:income] } / trends_data.length %>
          <% avg_expenses = trends_data.sum { |t| t[:expenses] } / trends_data.length %>
          <% avg_net = trends_data.sum { |t| t[:net] } / trends_data.length %>

          <div class="p-4 bg-surface-inset rounded-lg">
            <p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_income") %></p>
            <p class="text-lg font-semibold text-success privacy-sensitive">
              <%= Money.new(avg_income, Current.family.currency).format %>
            </p>
          </div>

          <div class="p-4 bg-surface-inset rounded-lg">
            <p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_expenses") %></p>
            <p class="text-lg font-semibold text-destructive privacy-sensitive">
              <%= Money.new(avg_expenses, Current.family.currency).format %>
            </p>
          </div>

          <div class="p-4 bg-surface-inset rounded-lg">
            <p class="text-sm text-secondary mb-1"><%= t("reports.trends.avg_monthly_savings") %></p>
            <p class="text-lg font-semibold privacy-sensitive <%= avg_net >= 0 ? "text-success" : "text-destructive" %>">
              <%= Money.new(avg_net, Current.family.currency).format %>
            </p>
          </div>
        </div>
      <% else %>
        <div class="text-center py-8 text-subdued">
          <%= t("reports.trends.no_data") %>
        </div>
      <% end %>
    </div>
  </div>
