<Layouts.app flash={@flash} current_user={@current_user}>
  <.header>
    {gettext("Members")}
    <:actions>
      <.live_component
        module={MvWeb.Components.ExportDropdown}
        id="export-dropdown"
        export_payload_json={@export_payload_json}
        selected_count={@selected_count}
      />
      <.button
        class="secondary"
        id="copy-emails-btn"
        phx-hook="CopyToClipboard"
        phx-click="copy_emails"
        disabled={not @any_selected?}
        aria-label={gettext("Copy email addresses of selected members")}
      >
        <.icon name="hero-clipboard-document" />
        {gettext("Copy email addresses")} ({@selected_count})
      </.button>
      <.button
        class="secondary"
        id="open-email-btn"
        href={"mailto:?bcc=" <> @mailto_bcc}
        disabled={not @any_selected?}
        aria-label={gettext("Open email program with BCC recipients")}
      >
        <.icon name="hero-envelope" />
        {gettext("Open in email program")}
      </.button>
      <%= if can?(@current_user, :create, Mv.Membership.Member) do %>
        <.button variant="primary" navigate={~p"/members/new"} data-testid="member-new">
          <.icon name="hero-plus" /> {gettext("New Member")}
        </.button>
      <% end %>
    </:actions>
  </.header>

  <div class="flex flex-wrap gap-4 items-center">
    <.live_component
      module={MvWeb.Components.SearchBarComponent}
      id="search-bar"
      query={@query}
      placeholder={gettext("Search...")}
    />
    <.live_component
      module={MvWeb.Components.MemberFilterComponent}
      id="member-filter"
      cycle_status_filter={@cycle_status_filter}
      groups={@groups}
      group_filters={@group_filters}
      boolean_custom_fields={@boolean_custom_fields}
      boolean_filters={@boolean_custom_field_filters}
      member_count={length(@members)}
    />
    <button
      type="button"
      phx-click="toggle_cycle_view"
      class={[
        "btn gap-2",
        @show_current_cycle && "btn-active"
      ]}
      aria-label={
        if(@show_current_cycle,
          do: gettext("Current Cycle Payment Status"),
          else: gettext("Last Cycle Payment Status")
        )
      }
      title={
        if(@show_current_cycle,
          do: gettext("Current Cycle Payment Status"),
          else: gettext("Last Cycle Payment Status")
        )
      }
    >
      <.icon name="hero-arrow-path" class="h-5 w-5" />
      <span class="hidden sm:inline">
        {if(@show_current_cycle,
          do: gettext("Current Cycle Payment Status"),
          else: gettext("Last Cycle Payment Status")
        )}
      </span>
    </button>
    <.live_component
      module={MvWeb.Components.FieldVisibilityDropdownComponent}
      id="field-visibility-dropdown"
      all_fields={@all_available_fields}
      custom_fields={@all_custom_fields}
      selected_fields={@user_field_selection}
    />
  </div>

  <.table
    id="members"
    rows={@members}
    row_id={fn member -> "row-#{member.id}" end}
    row_click={fn member -> JS.navigate(~p"/members/#{member}") end}
    dynamic_cols={@dynamic_cols}
    sort_field={@sort_field}
    sort_order={@sort_order}
  >
    
<!-- <:col :let={member} label="Id">{member.id}</:col> -->
    <:col
      :let={member}
      col_click={&MvWeb.MemberLive.Index.checkbox_column_click/1}
      label={
        ~H"""
        <.input
          type="checkbox"
          name="select_all"
          phx-click="select_all"
          checked={MapSet.equal?(@selected_members, @members |> Enum.map(& &1.id) |> MapSet.new())}
          aria-label={gettext("Select all members")}
          role="checkbox"
        />
        """
      }
    >
      <.input
        type="checkbox"
        name={member.id}
        checked={MapSet.member?(@selected_members, member.id)}
        aria-label={gettext("Select member")}
        role="checkbox"
      />
    </:col>
    <:col
      :let={member}
      :if={:first_name in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_first_name}
          field={:first_name}
          label={gettext("First name")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.first_name}
    </:col>
    <:col
      :let={member}
      :if={:last_name in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_last_name}
          field={:last_name}
          label={gettext("Last name")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.last_name}
    </:col>
    <:col
      :let={member}
      :if={:email in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_email}
          field={:email}
          label={gettext("Email")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.email}
    </:col>
    <:col
      :let={member}
      :if={:join_date in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_join_date}
          field={:join_date}
          label={gettext("Join Date")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {MvWeb.MemberLive.Index.format_date(member.join_date)}
    </:col>
    <:col
      :let={member}
      :if={:exit_date in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_exit_date}
          field={:exit_date}
          label={gettext("Exit Date")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {MvWeb.MemberLive.Index.format_date(member.exit_date)}
    </:col>
    <:col
      :let={member}
      :if={:notes in @member_fields_visible}
      label={gettext("Notes")}
    >
      {member.notes}
    </:col>
    <:col
      :let={member}
      :if={:city in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_city}
          field={:city}
          label={gettext("City")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.city}
    </:col>
    <:col
      :let={member}
      :if={:street in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_street}
          field={:street}
          label={gettext("Street")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.street}
    </:col>
    <:col
      :let={member}
      :if={:house_number in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_house_number}
          field={:house_number}
          label={gettext("House Number")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.house_number}
    </:col>
    <:col
      :let={member}
      :if={:postal_code in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_postal_code}
          field={:postal_code}
          label={gettext("Postal Code")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.postal_code}
    </:col>
    <:col
      :let={member}
      :if={:membership_fee_start_date in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_membership_fee_start_date}
          field={:membership_fee_start_date}
          label={gettext("Membership Fee Start Date")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {MvWeb.MemberLive.Index.format_date(member.membership_fee_start_date)}
    </:col>
    <:col
      :let={member}
      :if={:membership_fee_status in @member_fields_visible}
      label={gettext("Membership Fee Status")}
    >
      <%= if badge = MvWeb.MemberLive.Index.MembershipFeeStatus.format_cycle_status_badge(
        MvWeb.MemberLive.Index.MembershipFeeStatus.get_cycle_status_for_member(member, @show_current_cycle)
      ) do %>
        <span class={["badge", badge.color]}>
          <.icon name={badge.icon} class="size-4" />
          {badge.label}
        </span>
      <% else %>
        <span class="badge badge-ghost">{gettext("No cycle")}</span>
      <% end %>
    </:col>
    <:col
      :let={member}
      :if={:groups in @member_fields_visible}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_groups}
          field={:groups}
          label={gettext("Groups")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      <%= for group <- (member.groups || []) do %>
        <span
          class="badge badge-outline badge-primary"
          aria-label={gettext("Member of group %{name}", name: group.name)}
        >
          {group.name}
        </span>
      <% end %>
      <%= if (member.groups || []) == [] do %>
        <span class="text-base-content/50">—</span>
      <% end %>
    </:col>
    <:action :let={member}>
      <div class="sr-only">
        <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
      </div>

      <%= if can?(@current_user, :update, member) do %>
        <.link navigate={~p"/members/#{member}/edit"} data-testid="member-edit">
          {gettext("Edit")}
        </.link>
      <% end %>
    </:action>

    <:action :let={member}>
      <%= if can?(@current_user, :destroy, member) do %>
        <.link
          phx-click={JS.push("delete", value: %{id: member.id}) |> hide("#row-#{member.id}")}
          data-confirm={gettext("Are you sure?")}
          data-testid="member-delete"
        >
          {gettext("Delete")}
        </.link>
      <% end %>
    </:action>
  </.table>
</Layouts.app>
