berrypod/lib/berrypod_web/live/admin/newsletter.ex

defmodule BerrypodWeb.Admin.Newsletter do
  use BerrypodWeb, :live_view

  alias Berrypod.Newsletter

  @impl true
  def mount(_params, _session, socket) do
    counts = Newsletter.count_subscribers_by_status()
    subscribers = Newsletter.list_subscribers()
    campaigns = Newsletter.list_campaigns()

    {:ok,
     socket
     |> assign(:page_title, "Newsletter")
     |> assign(:tab, "overview")
     |> assign(:newsletter_enabled, Newsletter.newsletter_enabled?())
     |> assign(:status_counts, counts)
     |> assign(:subscriber_count, length(subscribers))
     |> assign(:campaign_count, length(campaigns))
     |> assign(:status_filter, "all")
     |> assign(:search, "")
     |> stream(:subscribers, subscribers)
     |> stream(:campaigns, campaigns)}
  end

  @impl true
  def handle_params(%{"tab" => tab}, _uri, socket)
      when tab in ~w(overview subscribers campaigns) do
    socket = assign(socket, :tab, tab)

    socket =
      case tab do
        "subscribers" ->
          subscribers =
            Newsletter.list_subscribers(
              status: socket.assigns.status_filter,
              search: socket.assigns.search
            )

          socket
          |> assign(:subscriber_count, length(subscribers))
          |> stream(:subscribers, subscribers, reset: true)

        "campaigns" ->
          campaigns = Newsletter.list_campaigns()

          socket
          |> assign(:campaign_count, length(campaigns))
          |> stream(:campaigns, campaigns, reset: true)

        _ ->
          socket
      end

    {:noreply, socket}
  end

  def handle_params(_params, _uri, socket), do: {:noreply, socket}

  @impl true
  def handle_event("toggle_enabled", _params, socket) do
    new_value = !socket.assigns.newsletter_enabled
    Newsletter.set_newsletter_enabled(new_value)

    msg = if new_value, do: "Newsletter signups enabled", else: "Newsletter signups disabled"

    {:noreply,
     socket
     |> assign(:newsletter_enabled, new_value)
     |> put_flash(:info, msg)}
  end

  def handle_event("filter_subscribers", %{"status" => status}, socket) do
    subscribers = Newsletter.list_subscribers(status: status, search: socket.assigns.search)

    {:noreply,
     socket
     |> assign(:status_filter, status)
     |> assign(:subscriber_count, length(subscribers))
     |> stream(:subscribers, subscribers, reset: true)}
  end

  def handle_event("search_subscribers", %{"search" => term}, socket) do
    subscribers = Newsletter.list_subscribers(status: socket.assigns.status_filter, search: term)

    {:noreply,
     socket
     |> assign(:search, term)
     |> assign(:subscriber_count, length(subscribers))
     |> stream(:subscribers, subscribers, reset: true)}
  end

  def handle_event("delete_subscriber", %{"id" => id}, socket) do
    sub = Newsletter.get_subscriber!(id)
    {:ok, _} = Newsletter.delete_subscriber(sub)

    counts = Newsletter.count_subscribers_by_status()

    {:noreply,
     socket
     |> assign(:status_counts, counts)
     |> assign(:subscriber_count, socket.assigns.subscriber_count - 1)
     |> stream_delete(:subscribers, sub)
     |> put_flash(:info, "Subscriber deleted")}
  end

  def handle_event("delete_campaign", %{"id" => id}, socket) do
    campaign = Newsletter.get_campaign!(id)

    case Newsletter.delete_campaign(campaign) do
      {:ok, _} ->
        {:noreply,
         socket
         |> assign(:campaign_count, socket.assigns.campaign_count - 1)
         |> stream_delete(:campaigns, campaign)
         |> put_flash(:info, "Campaign deleted")}

      {:error, :not_draft} ->
        {:noreply, put_flash(socket, :error, "Only draft campaigns can be deleted")}
    end
  end

  @impl true
  def render(assigns) do
    ~H"""
    <.header>
      Newsletter
      <:subtitle>Manage subscribers and email campaigns</:subtitle>
    </.header>

    <div class="flex gap-2 mt-6 mb-6 border-b border-base-200">
      <.tab_link label="Overview" tab="overview" active={@tab} />
      <.tab_link
        label="Subscribers"
        tab="subscribers"
        active={@tab}
        count={total_subs(@status_counts)}
      />
      <.tab_link label="Campaigns" tab="campaigns" active={@tab} count={@campaign_count} />
    </div>

    <div :if={@tab == "overview"}>
      <.overview_tab
        newsletter_enabled={@newsletter_enabled}
        status_counts={@status_counts}
      />
    </div>

    <div :if={@tab == "subscribers"}>
      <.subscribers_tab
        streams={@streams}
        status_filter={@status_filter}
        status_counts={@status_counts}
        subscriber_count={@subscriber_count}
        search={@search}
      />
    </div>

    <div :if={@tab == "campaigns"}>
      <.campaigns_tab streams={@streams} campaign_count={@campaign_count} />
    </div>
    """
  end

  # ── Tab navigation ──────────────────────────────────────────────

  attr :label, :string, required: true
  attr :tab, :string, required: true
  attr :active, :string, required: true
  attr :count, :integer, default: nil

  defp tab_link(assigns) do
    ~H"""
    <.link
      patch={~p"/admin/newsletter?tab=#{@tab}"}
      class={[
        "px-3 py-2 text-sm font-medium border-b-2 -mb-px",
        if(@tab == @active,
          do: "border-base-content text-base-content",
          else:
            "border-transparent text-base-content/60 hover:text-base-content hover:border-base-300"
        )
      ]}
    >
      {@label}
      <span :if={@count} class="ml-1 text-xs text-base-content/40">{@count}</span>
    </.link>
    """
  end

  # ── Overview tab ────────────────────────────────────────────────

  attr :newsletter_enabled, :boolean, required: true
  attr :status_counts, :map, required: true

  defp overview_tab(assigns) do
    ~H"""
    <div class="space-y-6">
      <div class="flex items-center gap-4 p-4 rounded-lg border border-base-200">
        <div class="flex-1">
          <h3 class="font-medium">Newsletter signups</h3>
          <p class="text-sm text-base-content/60 mt-0.5">
            When enabled, the newsletter signup block on your shop pages will collect email addresses with double opt-in confirmation.
          </p>
        </div>
        <button
          phx-click="toggle_enabled"
          class={[
            "inline-flex items-center shrink-0 cursor-pointer rounded-full transition-colors",
            if(@newsletter_enabled, do: "bg-green-600", else: "bg-base-300")
          ]}
          style="width: 2.75rem; height: 1.5rem; padding: 0.125rem;"
          role="switch"
          aria-checked={to_string(@newsletter_enabled)}
          aria-label="Toggle newsletter signups"
        >
          <span
            class="pointer-events-none inline-block rounded-full bg-white shadow transition-transform"
            style={"width: 1.25rem; height: 1.25rem; transform: translateX(#{if @newsletter_enabled, do: "1.25rem", else: "0"})"}
          />
        </button>
      </div>

      <div class="grid grid-cols-3 gap-4">
        <div class="p-4 rounded-lg border border-base-200 text-center">
          <p class="text-2xl font-bold">{@status_counts["confirmed"] || 0}</p>
          <p class="text-sm text-base-content/60">Confirmed</p>
        </div>
        <div class="p-4 rounded-lg border border-base-200 text-center">
          <p class="text-2xl font-bold">{@status_counts["pending"] || 0}</p>
          <p class="text-sm text-base-content/60">Pending</p>
        </div>
        <div class="p-4 rounded-lg border border-base-200 text-center">
          <p class="text-2xl font-bold">{@status_counts["unsubscribed"] || 0}</p>
          <p class="text-sm text-base-content/60">Unsubscribed</p>
        </div>
      </div>

      <div class="flex gap-3">
        <.link navigate={~p"/admin/newsletter?tab=subscribers"} class="text-sm font-medium underline">
          View subscribers
        </.link>
        <.link navigate={~p"/admin/newsletter?tab=campaigns"} class="text-sm font-medium underline">
          View campaigns
        </.link>
      </div>
    </div>
    """
  end

  # ── Subscribers tab ─────────────────────────────────────────────

  attr :streams, :any, required: true
  attr :status_filter, :string, required: true
  attr :status_counts, :map, required: true
  attr :subscriber_count, :integer, required: true
  attr :search, :string, required: true

  defp subscribers_tab(assigns) do
    ~H"""
    <div>
      <div class="flex items-center justify-between mb-4">
        <div class="flex gap-2 flex-wrap">
          <.filter_pill
            status="all"
            label="All"
            count={total_subs(@status_counts)}
            active={@status_filter}
          />
          <.filter_pill
            status="confirmed"
            label="Confirmed"
            count={@status_counts["confirmed"]}
            active={@status_filter}
          />
          <.filter_pill
            status="pending"
            label="Pending"
            count={@status_counts["pending"]}
            active={@status_filter}
          />
          <.filter_pill
            status="unsubscribed"
            label="Unsubscribed"
            count={@status_counts["unsubscribed"]}
            active={@status_filter}
          />
        </div>
        <.link href={~p"/admin/newsletter/export"} class="admin-btn admin-btn-sm admin-btn-ghost">
          <.icon name="hero-arrow-down-tray" class="size-4" /> Export CSV
        </.link>
      </div>

      <form phx-change="search_subscribers" class="mb-4">
        <.input
          name="search"
          value={@search}
          type="search"
          placeholder="Search by email..."
          phx-debounce="300"
        />
      </form>

      <.table
        :if={@subscriber_count > 0}
        id="subscribers"
        rows={@streams.subscribers}
        row_item={fn {_id, sub} -> sub end}
      >
        <:col :let={sub} label="Email">{sub.email}</:col>
        <:col :let={sub} label="Status"><.subscriber_status status={sub.status} /></:col>
        <:col :let={sub} label="Subscribed">{format_date(sub.inserted_at)}</:col>
        <:col :let={sub} label="Source">{sub.source}</:col>
        <:action :let={sub}>
          <button
            phx-click="delete_subscriber"
            phx-value-id={sub.id}
            data-confirm="Permanently delete this subscriber? This cannot be undone."
            class="text-sm text-red-600 hover:text-red-800"
          >
            Delete
          </button>
        </:action>
      </.table>

      <div :if={@subscriber_count == 0} class="text-center py-12 text-base-content/60">
        <.icon name="hero-envelope" class="size-12 mx-auto mb-4" />
        <p class="text-lg font-medium">No subscribers yet</p>
        <p class="text-sm mt-1">Subscribers will appear here when people sign up via your shop.</p>
      </div>
    </div>
    """
  end

  # ── Campaigns tab ───────────────────────────────────────────────

  attr :streams, :any, required: true
  attr :campaign_count, :integer, required: true

  defp campaigns_tab(assigns) do
    ~H"""
    <div>
      <div class="flex justify-end mb-4">
        <.link navigate={~p"/admin/newsletter/campaigns/new"} class="admin-btn admin-btn-primary">
          <.icon name="hero-plus" class="size-4" /> New campaign
        </.link>
      </div>

      <.table
        :if={@campaign_count > 0}
        id="campaigns"
        rows={@streams.campaigns}
        row_item={fn {_id, c} -> c end}
        row_click={fn {_id, c} -> JS.navigate(~p"/admin/newsletter/campaigns/#{c.id}") end}
      >
        <:col :let={c} label="Subject">{c.subject}</:col>
        <:col :let={c} label="Status"><.campaign_status status={c.status} /></:col>
        <:col :let={c} label="Sent">{c.sent_count}</:col>
        <:col :let={c} label="Created">{format_date(c.inserted_at)}</:col>
        <:action :let={c}>
          <button
            :if={c.status == "draft"}
            phx-click="delete_campaign"
            phx-value-id={c.id}
            data-confirm="Delete this draft campaign?"
            class="text-sm text-red-600 hover:text-red-800"
          >
            Delete
          </button>
        </:action>
      </.table>

      <div :if={@campaign_count == 0} class="text-center py-12 text-base-content/60">
        <.icon name="hero-megaphone" class="size-12 mx-auto mb-4" />
        <p class="text-lg font-medium">No campaigns yet</p>
        <p class="text-sm mt-1">Create your first campaign to reach your subscribers.</p>
      </div>
    </div>
    """
  end

  # ── Components ──────────────────────────────────────────────────

  attr :status, :string, required: true
  attr :label, :string, required: true
  attr :count, :integer, default: nil
  attr :active, :string, required: true

  defp filter_pill(assigns) do
    count = assigns[:count] || 0
    active = assigns.status == assigns.active

    assigns = assign(assigns, count: count, active: active)

    ~H"""
    <button
      phx-click="filter_subscribers"
      phx-value-status={@status}
      class={[
        "admin-btn admin-btn-sm",
        @active && "admin-btn-primary",
        !@active && "admin-btn-ghost"
      ]}
    >
      {@label}
      <span :if={@count > 0} class="admin-badge admin-badge-sm ml-1">{@count}</span>
    </button>
    """
  end

  attr :status, :string, required: true

  defp subscriber_status(%{status: "confirmed"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1 text-sm text-green-700">
      <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Confirmed
    </span>
    """
  end

  defp subscriber_status(%{status: "pending"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1 text-sm text-amber-700">
      <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Pending
    </span>
    """
  end

  defp subscriber_status(%{status: "unsubscribed"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1 text-sm text-base-content/50">
      <span class="w-1.5 h-1.5 rounded-full bg-base-300"></span> Unsubscribed
    </span>
    """
  end

  defp subscriber_status(assigns) do
    ~H"""
    <span class="text-sm text-base-content/50">{@status}</span>
    """
  end

  attr :status, :string, required: true

  defp campaign_status(%{status: "draft"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1.5 text-sm text-base-content/60">
      <span class="w-1.5 h-1.5 rounded-full bg-base-300"></span> Draft
    </span>
    """
  end

  defp campaign_status(%{status: "scheduled"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1.5 text-sm text-blue-700">
      <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span> Scheduled
    </span>
    """
  end

  defp campaign_status(%{status: "sending"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1.5 text-sm text-amber-700">
      <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Sending
    </span>
    """
  end

  defp campaign_status(%{status: "sent"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1.5 text-sm text-green-700">
      <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Sent
    </span>
    """
  end

  defp campaign_status(%{status: "cancelled"} = assigns) do
    ~H"""
    <span class="inline-flex items-center gap-1.5 text-sm text-red-700">
      <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Cancelled
    </span>
    """
  end

  defp campaign_status(assigns) do
    ~H"""
    <span class="text-sm text-base-content/50">{@status}</span>
    """
  end

  # ── Helpers ─────────────────────────────────────────────────────

  defp total_subs(counts) do
    Enum.reduce(counts, 0, fn {_status, count}, acc -> acc + count end)
  end

  defp format_date(nil), do: "—"

  defp format_date(datetime) do
    Calendar.strftime(datetime, "%-d %b %Y")
  end
end