<%# locals: (budget_category:) %>

<%= turbo_frame_tag dom_id(budget_category), class: "w-full block" do %>
  <%= link_to budget_budget_category_path(budget_category.budget, budget_category), class: "group block w-full p-4 bg-container hover:bg-surface-inset transition-colors", data: { turbo_frame: "drawer" } do %>

    <% if budget_category.initialized? %>
      <%# Category Header with Status Badge %>
      <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
        <div class="flex items-center gap-2 min-w-0">
          <div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <%= budget_category.category.color %>"></div>
          <h3 class="font-medium text-primary truncate"><%= budget_category.category.name %></h3>
        </div>

        <div class="flex items-center gap-3 flex-shrink-0">
          <% if budget_category.over_budget? %>
            <span class="inline-flex items-center gap-1 px-2 py-1 bg-danger/10 text-danger text-xs font-medium rounded-full whitespace-nowrap">
              <%= icon("alert-circle", class: "w-3 h-3") %>
              <%= t("reports.budget_performance.status.over") %>
            </span>
          <% elsif budget_category.near_limit? %>
            <span class="inline-flex items-center gap-1 px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-full whitespace-nowrap">
              <%= icon("alert-triangle", class: "w-3 h-3") %>
              <%= t("reports.budget_performance.status.warning") %>
            </span>
          <% else %>
            <span class="inline-flex items-center gap-1 px-2 py-1 bg-success/10 text-success text-xs font-medium rounded-full whitespace-nowrap">
              <%= icon("check-circle", class: "w-3 h-3") %>
              <%= t("reports.budget_performance.status.good") %>
            </span>
          <% end %>

          <span class="text-sm font-semibold text-primary whitespace-nowrap">
            <%= budget_category.percent_of_budget_spent.round(0) %>%
          </span>
        </div>
      </div>

      <%# Progress Bar %>
      <div class="mb-3">
        <div class="h-3 bg-container-inset rounded-full overflow-hidden">
          <% bar_color = budget_category.over_budget? ? "bg-danger" : (budget_category.near_limit? ? "bg-warning" : "bg-success") %>
          <div class="h-full <%= bar_color %> rounded-full transition-all duration-500"
               style="width: <%= budget_category.bar_width_percent %>%"></div>
        </div>
      </div>

      <%# Budget Details %>
      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
        <div class="whitespace-nowrap">
          <span class="text-tertiary"><%= t("reports.budget_performance.spent") %>:</span>
          <span class="font-medium text-primary">
            <%= format_money(budget_category.actual_spending_money) %>
          </span>
        </div>
        <div class="whitespace-nowrap">
          <span class="text-tertiary"><%= t("reports.budget_performance.budgeted") %>:</span>
          <span class="font-medium text-secondary">
            <%= format_money(budget_category.budgeted_spending_money) %>
          </span>
        </div>
        <div class="whitespace-nowrap ml-auto">
          <% if budget_category.available_to_spend >= 0 %>
            <span class="text-tertiary"><%= t("reports.budget_performance.remaining") %>:</span>
            <span class="font-medium text-success">
              <%= format_money(budget_category.available_to_spend_money) %>
            </span>
          <% else %>
            <span class="text-tertiary"><%= t("reports.budget_performance.over_by") %>:</span>
            <span class="font-medium text-danger">
              <%= format_money(budget_category.available_to_spend_money.abs) %>
            </span>
          <% end %>
        </div>
      </div>

      <%# Suggested Daily Limit (if remaining days in month) %>
      <% if budget_category.suggested_daily_spending.present? %>
        <% daily_info = budget_category.suggested_daily_spending %>
        <div class="mt-3 pt-3 border-t border-tertiary">
          <p class="text-xs text-tertiary break-words">
            <%= t("reports.budget_performance.suggested_daily",
                  amount: daily_info[:amount].format,
                  days: daily_info[:days_remaining]) %>
          </p>
        </div>
      <% end %>

    <% else %>
      <%# Uninitialized budget - show simple view %>
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 flex-shrink-0 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" style="color: <%= budget_category.category.color %>">
          <% if budget_category.category.lucide_icon %>
            <%= icon(budget_category.category.lucide_icon, color: "current") %>
          <% else %>
            <%= render DS::FilledIcon.new(
              variant: :text,
              hex_color: budget_category.category.color,
              text: budget_category.category.name,
              size: "sm",
              rounded: true
            ) %>
          <% end %>
        </div>

        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-primary truncate"><%= budget_category.category.name %></p>
          <p class="text-sm text-secondary font-medium">
            <%= budget_category.median_monthly_expense_money.format %> avg
          </p>
        </div>

        <div class="ml-auto text-right flex-shrink-0">
          <p class="text-sm font-medium text-primary whitespace-nowrap"><%= format_money(budget_category.actual_spending_money) %></p>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>
