<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("Email Blocklist")}
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container flex-col mx-auto px-4 py-6">
    <.admin_page_header
      back={Routes.path("/admin/emails")}
      title={gettext("Email Blocklist")}
      subtitle={gettext("Manage blocked email addresses")}
    />

    <%!-- Statistics Cards --%>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@statistics[:total_blocks] || 0}
        title={gettext("Total Blocks")}
        subtitle={gettext("All blocked email addresses")}
      >
        <:icon>
          <.icon name="hero-no-symbol" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@statistics[:active_blocks] || 0}
        title={gettext("Active Blocks")}
        subtitle={gettext("Currently enforced blocks")}
      >
        <:icon>
          <.icon name="hero-shield-exclamation" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@statistics[:expired_today] || 0}
        title={gettext("Expired Today")}
        subtitle={gettext("Blocks that expired today")}
      >
        <:icon>
          <.icon name="hero-clock" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>
    </div>

    <%!-- Filters & Actions --%>
    <div class="bg-base-200 rounded-lg p-6 mb-6">
      <div class="flex flex-col lg:flex-row gap-4 justify-between">
        <%!-- Search & Filters --%>
        <div class="flex gap-2 flex-1">
          <%!-- Search --%>
          <input
            type="text"
            name="search"
            value={@search_term}
            placeholder={gettext("Search email...")}
            class="input input-bordered input-sm flex-1"
            phx-change="filter_search"
            phx-debounce="300"
          />

          <%!-- Reason Filter --%>
          <select
            phx-change="filter_reason"
            name="reason"
            class="select select-bordered select-sm"
          >
            <option value="">{gettext("All Reasons")}</option>
            <%= for {reason, _count} <- Map.to_list(@statistics[:by_reason] || %{}) do %>
              <option value={reason} selected={@reason_filter == reason}>
                {String.capitalize(String.replace(reason, "_", " "))}
              </option>
            <% end %>
          </select>

          <%!-- Status Filter --%>
          <select
            phx-change="filter_status"
            name="status"
            class="select select-bordered select-sm"
          >
            <option value="all" selected={@status_filter == "all"}>
              {gettext("Active Only")}
            </option>
            <option value="expired" selected={@status_filter == "expired"}>
              {gettext("Include Expired")}
            </option>
          </select>
        </div>

        <%!-- Action Buttons --%>
        <div class="flex gap-2">
          <button phx-click="toggle_add_form" class="btn btn-sm btn-success">
            <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Block")}
          </button>
          <button phx-click="toggle_import_form" class="btn btn-sm btn-info">
            <.icon name="hero-arrow-down-tray" class="w-4 h-4 mr-1" /> {gettext("Import CSV")}
          </button>
          <button
            phx-click="export_blocklist"
            phx-value-format="csv"
            class="btn btn-sm btn-outline"
          >
            <.icon name="hero-arrow-up-tray" class="w-4 h-4 mr-1" /> {gettext("Export CSV")}
          </button>
          <button phx-click="refresh" class="btn btn-sm btn-outline">
            <.icon name="hero-arrow-path" class="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>

    <%!-- Add Block Form Modal --%>
    <%= if @show_add_form do %>
      <div class="card bg-base-100 shadow-sm mb-6">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <h3 class="card-title">{gettext("Add Email to Blocklist")}</h3>
            <button phx-click="toggle_add_form" class="btn btn-sm btn-ghost">
              <.icon name="hero-x-mark" class="w-4 h-4" />
            </button>
          </div>

          <form phx-submit="add_block" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">{gettext("Email Address")}</span>
              </label>
              <input
                type="email"
                name="email"
                placeholder="blocked@example.com"
                class="input input-bordered"
                required
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">{gettext("Reason")}</span>
              </label>
              <select name="reason" class="select select-bordered" required>
                <option value="manual_block">{gettext("Manual Block")}</option>
                <option value="spam">{gettext("Spam")}</option>
                <option value="bounce_limit">{gettext("Bounce Limit Exceeded")}</option>
                <option value="complaint">{gettext("Complaint")}</option>
                <option value="abuse">{gettext("Abuse")}</option>
              </select>
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">{gettext("Expires At (Optional)")}</span>
              </label>
              <input type="date" name="expires_at" class="input input-bordered" />
            </div>

            <div class="col-span-full flex justify-end gap-2">
              <button type="button" phx-click="toggle_add_form" class="btn btn-ghost">
                {gettext("Cancel")}
              </button>
              <button type="submit" class="btn btn-success">
                <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add to Blocklist")}
              </button>
            </div>
          </form>
        </div>
      </div>
    <% end %>

    <%!-- Import CSV Form Modal --%>
    <%= if @show_import_form do %>
      <div class="card bg-base-100 shadow-sm mb-6">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <h3 class="card-title">{gettext("Import Blocklist from CSV")}</h3>
            <button phx-click="toggle_import_form" class="btn btn-sm btn-ghost">
              <.icon name="hero-x-mark" class="w-4 h-4" />
            </button>
          </div>

          <div class="alert alert-info mb-4">
            <.icon name="hero-information-circle" class="w-5 h-5" />
            <div class="text-sm">
              <p class="font-semibold">{gettext("CSV Format:")}</p>
              <p>email,reason,expires_at (optional)</p>
              <p class="mt-1 font-mono text-xs">
                spam@example.com,spam,2025-12-31
              </p>
            </div>
          </div>

          <form phx-submit="import_csv">
            <div class="form-control">
              <label class="label">
                <span class="label-text">{gettext("CSV Content")}</span>
              </label>
              <textarea
                name="csv_content"
                class="textarea textarea-bordered font-mono"
                rows="8"
                placeholder="email,reason,expires_at&#10;spam@example.com,spam,&#10;abuse@test.com,abuse,2025-12-31"
                required
              >
                  </textarea>
            </div>

            <div class="flex justify-end gap-2 mt-4">
              <button type="button" phx-click="toggle_import_form" class="btn btn-ghost">
                {gettext("Cancel")}
              </button>
              <button type="submit" class="btn btn-info">
                <.icon name="hero-arrow-down-tray" class="w-4 h-4 mr-1" /> {gettext("Import")}
              </button>
            </div>
          </form>
        </div>
      </div>
    <% end %>

    <%!-- Bulk Actions Bar --%>
    <%= if length(@selected_emails) > 0 do %>
      <div class="alert alert-warning mb-6">
        <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
        <div class="flex-1">
          <p class="font-semibold">
            {gettext("%{count} email(s) selected", count: length(@selected_emails))}
          </p>
        </div>
        <div class="flex gap-2">
          <%= if @bulk_action do %>
            <span class="text-sm">
              {gettext("Confirm: %{action}?", action: String.upcase(@bulk_action))}
            </span>
            <button phx-click="execute_bulk_action" class="btn btn-sm btn-warning">
              {gettext("Confirm")}
            </button>
            <button phx-click="clear_selection" class="btn btn-sm btn-ghost">
              {gettext("Cancel")}
            </button>
          <% else %>
            <button
              phx-click="set_bulk_action"
              phx-value-action="remove"
              class="btn btn-sm btn-error"
            >
              {gettext("Remove Selected")}
            </button>
            <button
              phx-click="set_bulk_action"
              phx-value-action="export"
              class="btn btn-sm btn-info"
            >
              {gettext("Export Selected")}
            </button>
            <button phx-click="clear_selection" class="btn btn-sm btn-ghost">
              {gettext("Clear")}
            </button>
          <% end %>
        </div>
      </div>
    <% end %>

    <%!-- Blocklist Table --%>
    <div class="bg-base-100">
      <div class="flex justify-between items-center mb-4 px-6 pt-6">
        <h2 class="text-lg font-semibold">
          {gettext("Blocked Emails (%{count})", count: @total_blocked)}
        </h2>
        <%= if length(@blocked_emails) > 0 do %>
          <button phx-click="select_all_visible" class="btn btn-xs btn-outline">
            {gettext("Select All on Page")}
          </button>
        <% end %>
      </div>

      <%= if @loading do %>
        <div class="flex justify-center items-center h-32">
          <span class="loading loading-spinner loading-md"></span>
          <span class="ml-2">{gettext("Loading blocklist...")}</span>
        </div>
      <% else %>
        <%= if length(@blocked_emails) > 0 do %>
          <.table_default
            id="blocklist-table"
            variant="zebra"
            size="sm"
            class="w-full"
            toggleable={true}
            items={@blocked_emails}
            card_title={fn b -> b.email end}
            card_fields={
              fn b ->
                is_expired =
                  b.expires_at &&
                    DateTime.compare(b.expires_at, DateTime.utc_now()) == :lt

                [
                  %{
                    label: gettext("Reason"),
                    value: String.replace(b.reason, "_", " ")
                  },
                  %{
                    label: gettext("Status"),
                    value: if(is_expired, do: gettext("Expired"), else: gettext("Active"))
                  },
                  %{
                    label: gettext("Added"),
                    value: UtilsDate.format_date_with_user_format(DateTime.to_date(b.inserted_at))
                  }
                ]
              end
            }
          >
            <:card_actions :let={blocked}>
              <button
                phx-click="remove_block"
                phx-value-email={blocked.email}
                class="btn btn-xs btn-outline btn-success"
              >
                <.icon name="hero-check" class="w-3 h-3 mr-1" />{gettext("Unblock")}
              </button>
            </:card_actions>
            <.table_default_header>
              <.table_default_row>
                <.table_default_header_cell>
                  <input type="checkbox" class="checkbox checkbox-sm" disabled />
                </.table_default_header_cell>
                <.table_default_header_cell>
                  {gettext("Email Address")}
                </.table_default_header_cell>
                <.table_default_header_cell>{gettext("Reason")}</.table_default_header_cell>
                <.table_default_header_cell>{gettext("Added")}</.table_default_header_cell>
                <.table_default_header_cell>{gettext("Expires")}</.table_default_header_cell>
                <.table_default_header_cell>{gettext("Status")}</.table_default_header_cell>
                <.table_default_header_cell>{gettext("Actions")}</.table_default_header_cell>
              </.table_default_row>
            </.table_default_header>

            <.table_default_body>
              <%= for blocked <- @blocked_emails do %>
                <% is_expired =
                  blocked.expires_at &&
                    DateTime.compare(blocked.expires_at, DateTime.utc_now()) == :lt %>
                <.table_default_row class={is_expired && "opacity-50"}>
                  <.table_default_cell>
                    <input
                      type="checkbox"
                      class="checkbox checkbox-sm"
                      checked={blocked.email in @selected_emails}
                      phx-click="toggle_email_selection"
                      phx-value-email={blocked.email}
                    />
                  </.table_default_cell>
                  <.table_default_cell class="font-mono text-xs">
                    {blocked.email}
                  </.table_default_cell>
                  <.table_default_cell>
                    <span class="badge badge-sm badge-outline">
                      {String.replace(blocked.reason, "_", " ")}
                    </span>
                  </.table_default_cell>
                  <.table_default_cell class="text-xs">
                    {UtilsDate.format_date_with_user_format(DateTime.to_date(blocked.inserted_at))}
                  </.table_default_cell>
                  <.table_default_cell class="text-xs">
                    <%= if blocked.expires_at do %>
                      {UtilsDate.format_date_with_user_format(
                        DateTime.to_date(blocked.expires_at)
                      )}
                    <% else %>
                      <span class="text-base-content/50">{gettext("Never")}</span>
                    <% end %>
                  </.table_default_cell>
                  <.table_default_cell>
                    <%= if is_expired do %>
                      <span class="badge badge-xs badge-ghost">{gettext("Expired")}</span>
                    <% else %>
                      <span class="badge badge-xs badge-error">{gettext("Active")}</span>
                    <% end %>
                  </.table_default_cell>
                  <.table_default_cell>
                    <button
                      phx-click="remove_block"
                      phx-value-email={blocked.email}
                      class="btn btn-xs btn-outline btn-success tooltip tooltip-bottom"
                      data-tip={gettext("Unblock")}
                    >
                      <.icon name="hero-check" class="w-3 h-3 hidden sm:inline" />
                      <span class="sm:hidden whitespace-nowrap">{gettext("Unblock")}</span>
                    </button>
                  </.table_default_cell>
                </.table_default_row>
              <% end %>
            </.table_default_body>
          </.table_default>

          <%!-- Pagination --%>
          <%= if @total_pages > 1 do %>
            <div class="flex justify-center p-4 border-t border-base-300">
              <div class="join">
                <%= if @page > 1 do %>
                  <button
                    phx-click="change_page"
                    phx-value-page={@page - 1}
                    class="join-item btn btn-sm"
                  >
                    «
                  </button>
                <% end %>

                <%= for page_num <- max(1, @page - 2)..min(@total_pages, @page + 2) do %>
                  <button
                    phx-click="change_page"
                    phx-value-page={page_num}
                    class={[
                      "join-item btn btn-sm",
                      page_num == @page && "btn-active"
                    ]}
                  >
                    {page_num}
                  </button>
                <% end %>

                <%= if @page < @total_pages do %>
                  <button
                    phx-click="change_page"
                    phx-value-page={@page + 1}
                    class="join-item btn btn-sm"
                  >
                    »
                  </button>
                <% end %>
              </div>
            </div>
          <% end %>
        <% else %>
          <%!-- Empty state --%>
          <div class="text-center py-12">
            <.icon name="hero-shield-check" class="w-16 h-16 mx-auto mb-4 opacity-30" />
            <h3 class="text-lg font-medium text-base-content mb-2">
              {gettext("No blocked emails found")}
            </h3>
            <p class="text-base-content/70 mb-4">
              <%= if @search_term != "" || @reason_filter != "" do %>
                {gettext("Try adjusting your filters")}
              <% else %>
                {gettext("Your blocklist is empty")}
              <% end %>
            </p>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
