<%= content_for :page_title, t("recurring_transactions.title") %>
<%= content_for :page_actions do %>
  <% unless @family.recurring_transactions_disabled? %>
    <%= render DS::Menu.new do |menu| %>
      <% menu.with_item(
          variant: "button",
          text: t("recurring_transactions.cleanup_stale"),
          href: cleanup_recurring_transactions_path,
          method: :post,
          icon: "trash-2") %>
    <% end %>

    <%= render DS::Link.new(
      text: t("recurring_transactions.identify_patterns"),
      icon: "search",
      variant: "outline",
      href: identify_recurring_transactions_path,
      method: :post
    ) %>
  <% end %>
<% end %>

<div class="space-y-4 flex flex-col">
  <div class="bg-container rounded-xl shadow-border-xs p-4">
    <div class="flex items-center justify-between">
      <div>
        <p class="text-sm font-medium text-primary"><%= t("recurring_transactions.settings.enable_label") %></p>
        <p class="text-xs text-secondary"><%= t("recurring_transactions.settings.enable_description") %></p>
      </div>
      <%= form_with url: update_settings_recurring_transactions_path, method: :patch, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
        <%= f.hidden_field :recurring_transactions_disabled, value: @family.recurring_transactions_disabled? ? "false" : "true" %>
        <%= render DS::Toggle.new(
          id: "recurring_transactions_enabled",
          name: "toggle_display",
          checked: !@family.recurring_transactions_disabled?,
          data: { auto_submit_form_target: "auto" }
        ) %>
      <% end %>
    </div>
  </div>

  <% unless @family.recurring_transactions_disabled? %>
    <div class="p-4 bg-container-inset border border-secondary rounded-lg">
      <div class="flex items-start gap-2">
        <%= icon "info", class: "w-5 h-5 text-link mt-0.5 flex-shrink-0" %>
        <div>
          <p class="text-sm font-medium text-primary mb-2"><%= t("recurring_transactions.info.title") %></p>
          <p class="text-xs text-secondary mb-2"><%= t("recurring_transactions.info.manual_description") %></p>
          <p class="text-xs text-secondary mb-1"><%= t("recurring_transactions.info.automatic_description") %></p>
          <ul class="list-disc list-inside text-xs text-secondary space-y-0.5 ml-2">
            <% t("recurring_transactions.info.triggers").each do |trigger| %>
              <li><%= trigger %></li>
            <% end %>
          </ul>
        </div>
      </div>
    </div>

    <div class="bg-container rounded-xl shadow-border-xs p-4">
      <% if @recurring_transactions.empty? %>
        <div class="text-center py-12">
          <div class="flex justify-center text-secondary mb-4">
            <%= icon "repeat", size: "xl" %>
          </div>
          <p class="text-primary font-medium mb-2"><%= t("recurring_transactions.empty.title") %></p>
          <p class="text-secondary text-sm mb-4"><%= t("recurring_transactions.empty.description") %></p>
          <%= render DS::Link.new(
            text: t("recurring_transactions.identify_patterns"),
            icon: "search",
            variant: "primary",
            href: identify_recurring_transactions_path,
            method: :post
          ) %>
        </div>
      <% else %>
      <div class="rounded-xl bg-container-inset space-y-1 p-1">
        <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
          <p><%= t("recurring_transactions.title") %></p>
          <span class="text-subdued">&middot;</span>
          <p><%= @recurring_transactions.count %></p>
        </div>

        <div class="bg-container rounded-lg shadow-border-xs overflow-x-auto">
          <table class="w-full">
          <thead>
            <tr class="text-xs uppercase font-medium text-secondary border-b border-divider">
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.merchant") %></th>
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.amount") %></th>
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.expected_day") %></th>
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.next_date") %></th>
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.last_occurrence") %></th>
              <th class="text-left py-3 px-2"><%= t("recurring_transactions.table.status") %></th>
              <th class="text-right py-3 px-2"><%= t("recurring_transactions.table.actions") %></th>
            </tr>
          </thead>
          <tbody>
            <% @recurring_transactions.each do |recurring_transaction| %>
              <tr class="border-b border-subdued hover:bg-surface-hover <%= "opacity-60" unless recurring_transaction.active? %>">
                <td class="py-3 px-2 text-sm">
                  <div class="flex items-center gap-2">
                    <% if recurring_transaction.merchant.present? %>
                      <% if recurring_transaction.merchant.logo_url.present? %>
                        <%= image_tag recurring_transaction.merchant.logo_url,
                            class: "w-6 h-6 rounded-full",
                            loading: "lazy" %>
                      <% else %>
                        <%= render DS::FilledIcon.new(
                          variant: :text,
                          text: recurring_transaction.merchant.name,
                          size: "sm",
                          rounded: true
                        ) %>
                      <% end %>
                      <span class="text-primary font-medium"><%= recurring_transaction.merchant.name %></span>
                    <% else %>
                      <%= render DS::FilledIcon.new(
                        variant: :text,
                        text: recurring_transaction.name,
                        size: "sm",
                        rounded: true
                      ) %>
                      <span class="text-primary font-medium"><%= recurring_transaction.name %></span>
                    <% end %>
                    <% if recurring_transaction.manual? %>
                      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-tint-10 text-link">
                        <%= t("recurring_transactions.badges.manual") %>
                      </span>
                    <% end %>
                  </div>
                </td>
                <td class="py-3 px-2 text-sm font-medium privacy-sensitive <%= recurring_transaction.amount.negative? ? "text-success" : "text-primary" %>">
                  <% if recurring_transaction.manual? && recurring_transaction.has_amount_variance? %>
                    <div class="inline-flex items-center gap-1 cursor-help group" title="<%= t("recurring_transactions.amount_range", min: format_money(-recurring_transaction.expected_amount_min_money), max: format_money(-recurring_transaction.expected_amount_max_money)) %>">
                      <span class="text-xs text-secondary group-hover:text-primary transition-colors">~</span>
                      <span class="border-b border-dashed border-subdued group-hover:border-primary transition-colors privacy-sensitive"><%= format_money(-recurring_transaction.expected_amount_avg_money) %></span>
                    </div>
                  <% else %>
                    <%= format_money(-recurring_transaction.amount_money) %>
                  <% end %>
                </td>
                <td class="py-3 px-2 text-sm text-secondary">
                  <%= t("recurring_transactions.day_of_month", day: recurring_transaction.expected_day_of_month) %>
                </td>
                <td class="py-3 px-2 text-sm text-secondary">
                  <%= l(recurring_transaction.next_expected_date, format: :short) %>
                </td>
                <td class="py-3 px-2 text-sm text-secondary">
                  <%= l(recurring_transaction.last_occurrence_date, format: :short) %>
                </td>
                <td class="py-3 px-2 text-sm">
                  <% if recurring_transaction.active? %>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success">
                      <%= t("recurring_transactions.status.active") %>
                    </span>
                  <% else %>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-inset text-primary">
                      <%= t("recurring_transactions.status.inactive") %>
                    </span>
                  <% end %>
                </td>
                <td class="py-3 px-2 text-sm text-right">
                  <div class="flex items-center justify-end gap-2">
                    <%= link_to toggle_status_recurring_transaction_path(recurring_transaction),
                        data: { turbo_method: :post },
                        class: "text-secondary hover:text-primary" do %>
                      <%= icon recurring_transaction.active? ? "pause" : "play", size: "sm" %>
                    <% end %>
                    <%= link_to recurring_transaction_path(recurring_transaction),
                        data: { turbo_method: :delete, turbo_confirm: t("recurring_transactions.confirm_delete") },
                        class: "text-secondary hover:text-destructive" do %>
                      <%= icon "trash-2", size: "sm" %>
                    <% end %>
                  </div>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
        </div>
      </div>
    <% end %>
    </div>
  <% end %>
</div>
