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

  alias Berrypod.Analytics
  alias Berrypod.Cart

  @periods %{
    "today" => 0,
    "7d" => 6,
    "30d" => 29,
    "12m" => 364
  }

  @impl true
  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(:page_title, "Analytics")
     |> assign(:period, "30d")
     |> assign(:tab, "pages")
     |> load_analytics("30d")}
  end

  @impl true
  def handle_event("change_period", %{"period" => period}, socket)
      when is_map_key(@periods, period) do
    {:noreply,
     socket
     |> assign(:period, period)
     |> load_analytics(period)}
  end

  def handle_event("change_tab", %{"tab" => tab}, socket)
      when tab in ["pages", "sources", "countries", "devices", "funnel"] do
    {:noreply, assign(socket, :tab, tab)}
  end

  # ── Data loading ──

  defp load_analytics(socket, period) do
    range = date_range(period)

    socket
    |> assign(:visitors, Analytics.count_visitors(range))
    |> assign(:pageviews, Analytics.count_pageviews(range))
    |> assign(:bounce_rate, Analytics.bounce_rate(range))
    |> assign(:avg_duration, Analytics.avg_duration(range))
    |> assign(:visitors_by_date, Analytics.visitors_by_date(range))
    |> assign(:top_pages, Analytics.top_pages(range))
    |> assign(:top_sources, Analytics.top_sources(range))
    |> assign(:top_referrers, Analytics.top_referrers(range))
    |> assign(:top_countries, Analytics.top_countries(range))
    |> assign(:browsers, Analytics.device_breakdown(range, :browser))
    |> assign(:oses, Analytics.device_breakdown(range, :os))
    |> assign(:screen_sizes, Analytics.device_breakdown(range, :screen_size))
    |> assign(:funnel, Analytics.funnel(range))
    |> assign(:revenue, Analytics.total_revenue(range))
  end

  defp date_range(period) do
    days = Map.fetch!(@periods, period)
    today = Date.utc_today()
    start_date = Date.add(today, -days)
    end_date = Date.add(today, 1)

    {DateTime.new!(start_date, ~T[00:00:00], "Etc/UTC"),
     DateTime.new!(end_date, ~T[00:00:00], "Etc/UTC")}
  end

  # ── Render ──

  @impl true
  def render(assigns) do
    ~H"""
    <.header>Analytics</.header>

    <%!-- Period selector --%>
    <div class="analytics-periods" style="display: flex; gap: 0.25rem; margin-top: 1rem;">
      <button
        :for={period <- ["today", "7d", "30d", "12m"]}
        phx-click="change_period"
        phx-value-period={period}
        class={["admin-btn admin-btn-sm", @period == period && "admin-btn-primary"]}
      >
        {period_label(period)}
      </button>
    </div>

    <%!-- Stat cards --%>
    <div class="admin-stats-grid" style="margin-top: 1.5rem;">
      <.stat_card label="Unique visitors" value={format_number(@visitors)} icon="hero-users" />
      <.stat_card label="Total pageviews" value={format_number(@pageviews)} icon="hero-eye" />
      <.stat_card label="Bounce rate" value={"#{@bounce_rate}%"} icon="hero-arrow-uturn-left" />
      <.stat_card label="Visit duration" value={format_duration(@avg_duration)} icon="hero-clock" />
    </div>

    <%!-- Visitor trend chart --%>
    <div class="admin-card" style="margin-top: 1.5rem; padding: 1rem;">
      <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">
        Visitors over time
      </h3>
      <.bar_chart data={@visitors_by_date} />
    </div>

    <%!-- Detail tabs --%>
    <div style="display: flex; gap: 0.25rem; margin-top: 1.5rem; flex-wrap: wrap;">
      <button
        :for={
          tab <- [
            {"pages", "Pages"},
            {"sources", "Sources"},
            {"countries", "Countries"},
            {"devices", "Devices"},
            {"funnel", "Funnel"}
          ]
        }
        phx-click="change_tab"
        phx-value-tab={elem(tab, 0)}
        class={["admin-btn admin-btn-sm", @tab == elem(tab, 0) && "admin-btn-primary"]}
      >
        {elem(tab, 1)}
      </button>
    </div>

    <%!-- Tab content --%>
    <div class="admin-card" style="margin-top: 0.75rem; padding: 1rem;">
      <.tab_content tab={@tab} {assigns} />
    </div>
    """
  end

  # ── Stat card component ──

  attr :label, :string, required: true
  attr :value, :any, required: true
  attr :icon, :string, required: true

  defp stat_card(assigns) do
    ~H"""
    <div class="admin-card">
      <div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem;">
        <div style="background: var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 0.5rem;">
          <.icon name={@icon} class="size-5" />
        </div>
        <div>
          <p style="font-size: 1.5rem; font-weight: 700;">{@value}</p>
          <p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
            {@label}
          </p>
        </div>
      </div>
    </div>
    """
  end

  # ── Bar chart (server-rendered SVG) ──

  attr :data, :list, required: true

  defp bar_chart(assigns) do
    data = assigns.data
    max_val = data |> Enum.map(& &1.visitors) |> Enum.max(fn -> 1 end)
    chart_height = 120
    bar_count = max(length(data), 1)

    bars =
      data
      |> Enum.with_index()
      |> Enum.map(fn {%{date: date, visitors: visitors}, i} ->
        bar_height = if max_val > 0, do: visitors / max_val * chart_height, else: 0
        bar_width = max(800 / bar_count - 2, 1)
        x = i * (800 / bar_count) + 1

        %{
          x: x,
          y: chart_height - bar_height,
          width: bar_width,
          height: max(bar_height, 1),
          date: date,
          visitors: visitors
        }
      end)

    assigns = assign(assigns, bars: bars, chart_height: chart_height)

    ~H"""
    <div
      :if={@data == []}
      style="text-align: center; padding: 2rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
    >
      No data for this period
    </div>
    <svg
      :if={@data != []}
      viewBox={"0 0 800 #{@chart_height}"}
      style="width: 100%; height: auto; max-height: 160px;"
      aria-label="Visitor trend chart"
    >
      <rect
        :for={bar <- @bars}
        x={bar.x}
        y={bar.y}
        width={bar.width}
        height={bar.height}
        rx="2"
        fill="var(--color-primary, #4f46e5)"
        opacity="0.8"
      >
        <title>{bar.date}: {bar.visitors} visitors</title>
      </rect>
    </svg>
    """
  end

  # ── Tab content ──

  defp tab_content(%{tab: "pages"} = assigns) do
    ~H"""
    <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Top pages</h3>
    <.detail_table
      rows={@top_pages}
      empty_message="No page data yet"
      columns={[
        %{label: "Page", key: :pathname},
        %{label: "Visitors", key: :visitors, align: :right},
        %{label: "Pageviews", key: :pageviews, align: :right}
      ]}
    />
    """
  end

  defp tab_content(%{tab: "sources"} = assigns) do
    ~H"""
    <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Top sources</h3>
    <.detail_table
      rows={@top_sources}
      empty_message="No referrer data yet"
      columns={[
        %{label: "Source", key: :source},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    <h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">Top referrers</h3>
    <.detail_table
      rows={@top_referrers}
      empty_message="No referrer data yet"
      columns={[
        %{label: "Referrer", key: :referrer},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    """
  end

  defp tab_content(%{tab: "countries"} = assigns) do
    ~H"""
    <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Countries</h3>
    <.detail_table
      rows={Enum.map(@top_countries, fn c -> %{c | country_code: country_name(c.country_code)} end)}
      empty_message="No country data yet"
      columns={[
        %{label: "Country", key: :country_code},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    """
  end

  defp tab_content(%{tab: "devices"} = assigns) do
    ~H"""
    <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Browsers</h3>
    <.detail_table
      rows={@browsers}
      empty_message="No browser data yet"
      columns={[
        %{label: "Browser", key: :name},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    <h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">
      Operating systems
    </h3>
    <.detail_table
      rows={@oses}
      empty_message="No OS data yet"
      columns={[
        %{label: "OS", key: :name},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    <h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">Screen sizes</h3>
    <.detail_table
      rows={@screen_sizes}
      empty_message="No screen data yet"
      columns={[
        %{label: "Size", key: :name},
        %{label: "Visitors", key: :visitors, align: :right}
      ]}
    />
    """
  end

  defp tab_content(%{tab: "funnel"} = assigns) do
    ~H"""
    <h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">
      Conversion funnel
    </h3>
    <.funnel_chart funnel={@funnel} revenue={@revenue} />
    """
  end

  # ── Detail table ──

  attr :rows, :list, required: true
  attr :columns, :list, required: true
  attr :empty_message, :string, default: "No data"

  defp detail_table(assigns) do
    ~H"""
    <div
      :if={@rows == []}
      style="text-align: center; padding: 1.5rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
    >
      {@empty_message}
    </div>
    <table :if={@rows != []} class="admin-table" style="width: 100%;">
      <thead>
        <tr>
          <th
            :for={col <- @columns}
            style={col[:align] == :right && "text-align: right;"}
          >
            {col.label}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr :for={row <- @rows}>
          <td
            :for={col <- @columns}
            style={col[:align] == :right && "text-align: right; font-variant-numeric: tabular-nums;"}
          >
            {Map.get(row, col.key)}
          </td>
        </tr>
      </tbody>
    </table>
    """
  end

  # ── Funnel chart ──

  attr :funnel, :map, required: true
  attr :revenue, :integer, required: true

  defp funnel_chart(assigns) do
    steps = [
      {"Product views", assigns.funnel.product_views},
      {"Add to cart", assigns.funnel.add_to_carts},
      {"Checkout", assigns.funnel.checkouts},
      {"Purchase", assigns.funnel.purchases}
    ]

    top_count = assigns.funnel.product_views

    conversion_rate =
      if top_count > 0,
        do: Float.round(assigns.funnel.purchases / top_count * 100, 1),
        else: 0.0

    steps_with_rates =
      steps
      |> Enum.with_index()
      |> Enum.map(fn {{label, count}, i} ->
        overall_rate = if top_count > 0, do: Float.round(count / top_count * 100, 1), else: 0.0
        width_pct = if top_count > 0, do: max(count / top_count * 100, 5), else: 5

        %{label: label, count: count, overall_rate: overall_rate, width_pct: width_pct, index: i}
      end)

    assigns = assign(assigns, steps: steps_with_rates, conversion_rate: conversion_rate)

    ~H"""
    <div
      :if={@funnel.product_views == 0}
      style="text-align: center; padding: 1.5rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
    >
      No funnel data yet
    </div>
    <div :if={@funnel.product_views > 0} style="display: flex; flex-direction: column; gap: 0.5rem;">
      <div :for={step <- @steps} style="display: flex; align-items: center; gap: 0.75rem;">
        <div style="width: 7rem; font-size: 0.8125rem; text-align: right; flex-shrink: 0;">
          {step.label}
        </div>
        <div style={"flex: 0 0 #{step.width_pct}%; height: 2rem; background: var(--color-primary, #4f46e5); border-radius: 0.25rem; opacity: #{1 - step.index * 0.15}; display: flex; align-items: center; padding-left: 0.5rem;"}>
          <span style="font-size: 0.75rem; font-weight: 600; color: white;">
            {format_number(step.count)}
          </span>
        </div>
        <span
          :if={step.index > 0}
          style="font-size: 0.8125rem; font-weight: 600;"
        >
          {step.overall_rate}%
        </span>
      </div>
      <div style="margin-top: 0.75rem; font-size: 0.875rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
        <span style="font-weight: 600;">{@conversion_rate}% overall conversion</span>
        <span
          :if={@revenue > 0}
          style="color: color-mix(in oklch, var(--color-base-content) 60%, transparent);"
        >
          · Revenue: {Cart.format_price(@revenue)}
        </span>
      </div>
    </div>
    """
  end

  # ── Helpers ──

  defp period_label("today"), do: "Today"
  defp period_label("7d"), do: "7 days"
  defp period_label("30d"), do: "30 days"
  defp period_label("12m"), do: "12 months"

  defp format_number(n) when n >= 1_000_000, do: "#{Float.round(n / 1_000_000, 1)}M"
  defp format_number(n) when n >= 1_000, do: "#{Float.round(n / 1_000, 1)}k"
  defp format_number(n), do: to_string(n)

  defp format_duration(seconds) when seconds < 60, do: "#{seconds}s"

  defp format_duration(seconds) do
    mins = div(seconds, 60)
    secs = rem(seconds, 60)
    "#{mins}m #{secs}s"
  end

  @country_names %{
    "GB" => "United Kingdom",
    "US" => "United States",
    "CA" => "Canada",
    "AU" => "Australia",
    "DE" => "Germany",
    "FR" => "France",
    "NL" => "Netherlands",
    "IE" => "Ireland",
    "AT" => "Austria",
    "BE" => "Belgium",
    "IT" => "Italy",
    "ES" => "Spain",
    "PT" => "Portugal",
    "SE" => "Sweden",
    "NO" => "Norway",
    "DK" => "Denmark",
    "FI" => "Finland",
    "PL" => "Poland",
    "CH" => "Switzerland",
    "NZ" => "New Zealand",
    "JP" => "Japan",
    "IN" => "India",
    "BR" => "Brazil",
    "MX" => "Mexico"
  }

  defp country_name(code) do
    Map.get(@country_names, code, code)
  end
end