defmodule SimpleshopThemeWeb.ShopComponents.Layout do
  use Phoenix.Component

  import SimpleshopThemeWeb.ShopComponents.Cart
  import SimpleshopThemeWeb.ShopComponents.Content

  @doc """
  Renders the announcement bar.

  The bar displays promotional messaging at the top of the page.
  It uses CSS custom properties for theming.

  ## Attributes

  * `theme_settings` - Required. The theme settings map.
  * `message` - Optional. The announcement message to display.
    Defaults to "Free delivery on orders over £40".

  ## Examples

      <.announcement_bar theme_settings={@theme_settings} />
      <.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
  """
  attr :theme_settings, :map, required: true
  attr :message, :string, default: "Sample announcement – e.g. free delivery, sales, or new drops"

  def announcement_bar(assigns) do
    ~H"""
    <div
      class="announcement-bar"
      style="background-color: var(--t-accent-button, hsl(var(--t-accent-h) var(--t-accent-s) 42%)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
    >
      <p style="margin: 0;">{@message}</p>
    </div>
    """
  end

  @doc """
  Renders the skip link for keyboard navigation accessibility.

  This is a standard accessibility pattern that allows keyboard users
  to skip directly to the main content.
  """
  def skip_link(assigns) do
    ~H"""
    <a href="#main-content" class="skip-link">
      Skip to main content
    </a>
    """
  end

  # Keys accepted by shop_layout — used by layout_assigns/1 so page templates
  # can spread assigns without listing each one explicitly.
  @layout_keys ~w(theme_settings logo_image header_image mode cart_items cart_count
    cart_subtotal cart_drawer_open cart_status active_page error_page is_admin
    search_query search_results search_open categories)a

  @doc """
  Extracts the assigns relevant to `shop_layout` from a full assigns map.

  Page templates can use this instead of listing every attr explicitly:

      <.shop_layout {layout_assigns(assigns)} active_page="home">
        ...
      </.shop_layout>
  """
  def layout_assigns(assigns) do
    Map.take(assigns, @layout_keys)
  end

  @doc """
  Wraps page content in the standard shop shell: container, header, footer,
  cart drawer, search modal, and mobile bottom nav.

  Templates pass their unique `<main>` content as the inner block.
  The `error_page` flag disables the CartPersist hook and mobile bottom nav.
  """
  attr :theme_settings, :map, required: true
  attr :logo_image, :any, required: true
  attr :header_image, :any, required: true
  attr :mode, :atom, required: true
  attr :cart_items, :list, required: true
  attr :cart_count, :integer, required: true
  attr :cart_subtotal, :string, required: true
  attr :cart_drawer_open, :boolean, default: false
  attr :cart_status, :string, default: nil
  attr :active_page, :string, required: true
  attr :error_page, :boolean, default: false
  attr :is_admin, :boolean, default: false
  attr :search_query, :string, default: ""
  attr :search_results, :list, default: []
  attr :search_open, :boolean, default: false

  slot :inner_block, required: true

  def shop_layout(assigns) do
    ~H"""
    <div
      id={unless @error_page, do: "shop-container"}
      phx-hook={unless @error_page, do: "CartPersist"}
      class={["shop-container min-h-screen", !@error_page && "pb-20 md:pb-0"]}
      style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
    >
      <.skip_link />

      <%= if @theme_settings.announcement_bar do %>
        <.announcement_bar theme_settings={@theme_settings} />
      <% end %>

      <.shop_header
        theme_settings={@theme_settings}
        logo_image={@logo_image}
        header_image={@header_image}
        active_page={@active_page}
        mode={@mode}
        cart_count={@cart_count}
        is_admin={@is_admin}
      />

      {render_slot(@inner_block)}

      <.shop_footer
        theme_settings={@theme_settings}
        mode={@mode}
        categories={assigns[:categories] || []}
      />

      <.cart_drawer
        cart_items={@cart_items}
        subtotal={@cart_subtotal}
        cart_count={@cart_count}
        mode={@mode}
        open={@cart_drawer_open}
        cart_status={@cart_status}
      />

      <.search_modal
        hint_text={~s(Try a search – e.g. "mountain" or "notebook")}
        search_query={@search_query}
        search_results={@search_results}
        search_open={@search_open}
      />

      <.mobile_bottom_nav :if={!@error_page} active_page={@active_page} mode={@mode} />
    </div>
    """
  end

  @doc """
  Renders a mobile bottom navigation bar.

  This component provides thumb-friendly navigation for mobile devices,
  following modern UX best practices. It's hidden on larger screens where
  the standard header navigation is used.

  ## Attributes

  * `active_page` - Required. The current page identifier (e.g., "home", "collection", "about", "contact").
  * `mode` - Optional. Either `:live` (default) for real navigation or
    `:preview` for theme preview mode with phx-click handlers.
  * `cart_count` - Optional. Number of items in cart for badge display. Default: 0.

  ## Examples

      <.mobile_bottom_nav active_page="home" />
      <.mobile_bottom_nav active_page="collection" mode={:preview} />
  """
  attr :active_page, :string, required: true
  attr :mode, :atom, default: :live
  attr :cart_count, :integer, default: 0

  def mobile_bottom_nav(assigns) do
    ~H"""
    <nav
      class="mobile-bottom-nav md:hidden"
      style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px);"
      aria-label="Main navigation"
    >
      <ul
        class="flex justify-around items-center h-16"
        style="margin: 0; padding: 0; list-style: none;"
      >
        <.mobile_nav_item
          icon={:home}
          label="Home"
          page="home"
          href="/"
          active_page={@active_page}
          mode={@mode}
        />
        <.mobile_nav_item
          icon={:shop}
          label="Shop"
          page="collection"
          href="/collections/all"
          active_page={@active_page}
          active_pages={["collection", "pdp"]}
          mode={@mode}
        />
        <.mobile_nav_item
          icon={:about}
          label="About"
          page="about"
          href="/about"
          active_page={@active_page}
          mode={@mode}
        />
        <.mobile_nav_item
          icon={:contact}
          label="Contact"
          page="contact"
          href="/contact"
          active_page={@active_page}
          mode={@mode}
        />
      </ul>
    </nav>
    """
  end

  attr :icon, :atom, required: true
  attr :label, :string, required: true
  attr :page, :string, required: true
  attr :href, :string, required: true
  attr :active_page, :string, required: true
  attr :active_pages, :list, default: nil
  attr :mode, :atom, default: :live

  defp mobile_nav_item(assigns) do
    active_pages = assigns.active_pages || [assigns.page]
    is_current = assigns.active_page in active_pages
    assigns = assign(assigns, :is_current, is_current)

    ~H"""
    <li class="flex-1">
      <%= if @mode == :preview do %>
        <a
          href="#"
          phx-click="change_preview_page"
          phx-value-page={@page}
          class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
          style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
          aria-current={if @is_current, do: "page", else: nil}
        >
          <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
          <span class="text-xs">{@label}</span>
        </a>
      <% else %>
        <.link
          navigate={@href}
          class="flex flex-col items-center justify-center gap-1 py-2 mx-1 rounded-lg min-h-[56px]"
          style={"color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 15%))", else: "var(--t-text-secondary)"}; text-decoration: none; font-weight: #{if @is_current, do: "600", else: "500"}; background-color: #{if @is_current, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
          aria-current={if @is_current, do: "page", else: nil}
        >
          <.nav_icon icon={@icon} size={if @is_current, do: "w-6 h-6", else: "w-5 h-5"} />
          <span class="text-xs">{@label}</span>
        </.link>
      <% end %>
    </li>
    """
  end

  defp nav_icon(%{icon: :home} = assigns) do
    assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)

    ~H"""
    <svg
      class={@size}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
      <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>
    """
  end

  defp nav_icon(%{icon: :shop} = assigns) do
    assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)

    ~H"""
    <svg
      class={@size}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="3" width="7" height="7"></rect>
      <rect x="14" y="3" width="7" height="7"></rect>
      <rect x="14" y="14" width="7" height="7"></rect>
      <rect x="3" y="14" width="7" height="7"></rect>
    </svg>
    """
  end

  defp nav_icon(%{icon: :about} = assigns) do
    assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)

    ~H"""
    <svg
      class={@size}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="16" x2="12" y2="12"></line>
      <line x1="12" y1="8" x2="12.01" y2="8"></line>
    </svg>
    """
  end

  defp nav_icon(%{icon: :contact} = assigns) do
    assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)

    ~H"""
    <svg
      class={@size}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
      <polyline points="22,6 12,13 2,6"></polyline>
    </svg>
    """
  end

  @doc """
  Renders the search modal overlay with live search results.

  ## Attributes

  * `hint_text` - Hint text shown when no query is entered.
  * `search_query` - Current search query string.
  * `search_results` - List of Product structs matching the query.
  """
  attr :hint_text, :string, default: nil
  attr :search_query, :string, default: ""
  attr :search_results, :list, default: []
  attr :search_open, :boolean, default: false

  def search_modal(assigns) do
    alias SimpleshopTheme.Cart
    alias SimpleshopTheme.Products.{Product, ProductImage}

    assigns =
      assign(
        assigns,
        :results_with_images,
        assigns.search_results
        |> Enum.with_index()
        |> Enum.map(fn {product, idx} ->
          image = Product.primary_image(product)
          %{product: product, image_url: ProductImage.direct_url(image, 400), idx: idx}
        end)
      )

    ~H"""
    <div
      id="search-modal"
      class="search-modal"
      style={"position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: #{if @search_open, do: "flex", else: "none"}; align-items: flex-start; justify-content: center; padding-top: 10vh;"}
      phx-hook="SearchModal"
      phx-click={
        Phoenix.LiveView.JS.hide(to: "#search-modal")
        |> Phoenix.LiveView.JS.push("clear_search")
      }
    >
      <div
        class="search-modal-content w-full max-w-xl mx-4"
        style="background: var(--t-surface-raised); border-radius: var(--t-radius-card); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"
        onclick="event.stopPropagation()"
      >
        <div
          class="flex items-center gap-3 p-4"
          style="border-bottom: 1px solid var(--t-border-default);"
        >
          <svg
            class="w-5 h-5 flex-shrink-0"
            width="20"
            height="20"
            style="color: var(--t-text-tertiary);"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="M21 21l-4.35-4.35"></path>
          </svg>
          <input
            type="text"
            id="search-input"
            name="query"
            class="flex-1 text-lg bg-transparent border-none outline-none"
            style="font-family: var(--t-font-body); color: var(--t-text-primary);"
            placeholder="Search products..."
            value={@search_query}
            phx-keyup="search"
            phx-debounce="150"
            autocomplete="off"
            role="combobox"
            aria-expanded={to_string(@search_results != [])}
            aria-controls="search-results-list"
            aria-autocomplete="list"
          />
          <div
            class="hidden sm:flex items-center gap-1 text-xs px-1.5 py-0.5 rounded"
            style="color: var(--t-text-tertiary); border: 1px solid var(--t-border-default);"
            aria-hidden="true"
          >
            <kbd>⌘</kbd><kbd>K</kbd>
          </div>
          <button
            type="button"
            class="w-8 h-8 flex items-center justify-center transition-all"
            style="color: var(--t-text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
            phx-click={
              Phoenix.LiveView.JS.hide(to: "#search-modal")
              |> Phoenix.LiveView.JS.push("clear_search")
            }
            aria-label="Close search"
          >
            <svg
              class="w-5 h-5"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div class="search-results" style="max-height: 60vh; overflow-y: auto;">
          <%= cond do %>
            <% @search_results != [] -> %>
              <ul id="search-results-list" class="py-2" role="listbox" aria-label="Search results">
                <li
                  :for={item <- @results_with_images}
                  id={"search-result-#{item.idx}"}
                  role="option"
                  aria-selected="false"
                >
                  <.link
                    navigate={"/products/#{item.product.slug || item.product.id}"}
                    class="flex items-center gap-3 px-4 py-3 transition-colors"
                    style="text-decoration: none; color: inherit;"
                    onmouseenter="this.style.background='var(--t-surface-sunken)'"
                    onmouseleave="this.style.background='transparent'"
                    phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
                  >
                    <div
                      :if={item.image_url}
                      class="w-12 h-12 flex-shrink-0 rounded overflow-hidden"
                      style="background: var(--t-surface-sunken);"
                    >
                      <img
                        src={item.image_url}
                        alt={item.product.title}
                        class="w-full h-full object-cover"
                        loading="lazy"
                      />
                    </div>
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium truncate" style="color: var(--t-text-primary);">
                        {item.product.title}
                      </p>
                      <p class="text-xs" style="color: var(--t-text-tertiary);">
                        {item.product.category}
                        <span style="margin-left: 0.5rem;">
                          {Cart.format_price(item.product.cheapest_price)}
                        </span>
                      </p>
                    </div>
                  </.link>
                </li>
              </ul>
            <% String.length(@search_query) >= 2 -> %>
              <div class="p-6" style="color: var(--t-text-tertiary);">
                <p class="text-sm">No products found for "{@search_query}"</p>
              </div>
            <% @hint_text != nil -> %>
              <div class="p-6" style="color: var(--t-text-tertiary);">
                <p class="text-sm">{@hint_text}</p>
              </div>
            <% true -> %>
          <% end %>
        </div>
      </div>
    </div>
    """
  end

  @doc """
  Renders the shop footer with newsletter signup and links.

  ## Attributes

  * `theme_settings` - Required. The theme settings map containing site_name.
  * `mode` - Optional. Either `:live` (default) for real navigation or
    `:preview` for theme preview mode with phx-click handlers.

  ## Examples

      <.shop_footer theme_settings={@theme_settings} />
      <.shop_footer theme_settings={@theme_settings} mode={:preview} />
  """
  attr :theme_settings, :map, required: true
  attr :mode, :atom, default: :live
  attr :categories, :list, default: []

  def shop_footer(assigns) do
    assigns = assign(assigns, :current_year, Date.utc_today().year)

    ~H"""
    <footer style="background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default);">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
          <.newsletter_card variant={:inline} />
          
    <!-- Links -->
          <div class="grid grid-cols-2 gap-8">
            <div>
              <h4
                class="font-semibold mb-4 text-sm"
                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
              >
                Shop
              </h4>
              <ul class="flex flex-col gap-2 text-sm">
                <%= if @mode == :preview do %>
                  <li>
                    <a
                      href="#"
                      phx-click="change_preview_page"
                      phx-value-page="collection"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary); cursor: pointer;"
                    >
                      All products
                    </a>
                  </li>
                  <%= for category <- @categories do %>
                    <li>
                      <a
                        href="#"
                        phx-click="change_preview_page"
                        phx-value-page="collection"
                        class="transition-colors hover:opacity-80"
                        style="color: var(--t-text-secondary); cursor: pointer;"
                      >
                        {category.name}
                      </a>
                    </li>
                  <% end %>
                <% else %>
                  <li>
                    <.link
                      navigate="/collections/all"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary);"
                    >
                      All products
                    </.link>
                  </li>
                  <%= for category <- @categories do %>
                    <li>
                      <.link
                        navigate={"/collections/#{category.slug}"}
                        class="transition-colors hover:opacity-80"
                        style="color: var(--t-text-secondary);"
                      >
                        {category.name}
                      </.link>
                    </li>
                  <% end %>
                <% end %>
              </ul>
            </div>
            <div>
              <h4
                class="font-semibold mb-4 text-sm"
                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
              >
                Help
              </h4>
              <ul class="flex flex-col gap-2 text-sm">
                <%= if @mode == :preview do %>
                  <li>
                    <a
                      href="#"
                      phx-click="change_preview_page"
                      phx-value-page="delivery"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary); cursor: pointer;"
                    >
                      Delivery & returns
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      phx-click="change_preview_page"
                      phx-value-page="privacy"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary); cursor: pointer;"
                    >
                      Privacy policy
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      phx-click="change_preview_page"
                      phx-value-page="terms"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary); cursor: pointer;"
                    >
                      Terms of service
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      phx-click="change_preview_page"
                      phx-value-page="contact"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary); cursor: pointer;"
                    >
                      Contact
                    </a>
                  </li>
                <% else %>
                  <li>
                    <.link
                      navigate="/delivery"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary);"
                    >
                      Delivery & returns
                    </.link>
                  </li>
                  <li>
                    <.link
                      navigate="/privacy"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary);"
                    >
                      Privacy policy
                    </.link>
                  </li>
                  <li>
                    <.link
                      navigate="/terms"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary);"
                    >
                      Terms of service
                    </.link>
                  </li>
                  <li>
                    <.link
                      navigate="/contact"
                      class="transition-colors hover:opacity-80"
                      style="color: var(--t-text-secondary);"
                    >
                      Contact
                    </.link>
                  </li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
        
    <!-- Bottom Bar -->
        <div
          class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
          style="border-top: 1px solid var(--t-border-subtle);"
        >
          <p class="text-xs" style="color: var(--t-text-tertiary);">
            © {@current_year} {@theme_settings.site_name}
          </p>
          <.social_links />
        </div>
      </div>
    </footer>
    """
  end

  @doc """
  Renders the shop header with logo, navigation, and actions.

  ## Attributes

  * `theme_settings` - Required. The theme settings map.
  * `logo_image` - Optional. The logo image struct (with id, is_svg fields).
  * `header_image` - Optional. The header background image struct.
  * `active_page` - Optional. Current page for nav highlighting.
  * `mode` - Optional. Either `:live` (default) or `:preview`.
  * `cart_count` - Optional. Number of items in cart. Defaults to 0.

  ## Examples

      <.shop_header theme_settings={@theme_settings} />
      <.shop_header theme_settings={@theme_settings} mode={:preview} cart_count={2} />
  """
  attr :theme_settings, :map, required: true
  attr :logo_image, :map, default: nil
  attr :header_image, :map, default: nil
  attr :active_page, :string, default: nil
  attr :mode, :atom, default: :live
  attr :cart_count, :integer, default: 0
  attr :is_admin, :boolean, default: false

  def shop_header(assigns) do
    ~H"""
    <header
      class="shop-header px-2 py-2 sm:px-4 sm:py-3 md:px-8 md:py-4"
      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); display: flex; align-items: center;"
    >
      <%= if @theme_settings.header_background_enabled && @header_image do %>
        <div style={header_background_style(@theme_settings, @header_image)} />
      <% end %>

      <div
        class="shop-logo"
        style="display: flex; align-items: center; position: relative; z-index: 1;"
      >
        <.logo_content
          theme_settings={@theme_settings}
          logo_image={@logo_image}
          active_page={@active_page}
          mode={@mode}
        />
      </div>

      <nav class="shop-nav hidden md:flex md:gap-6" style="position: relative; z-index: 1;">
        <%= if @mode == :preview do %>
          <.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
          <.nav_item
            label="Shop"
            page="collection"
            active_page={@active_page}
            mode={:preview}
            active_pages={["collection", "pdp"]}
          />
          <.nav_item label="About" page="about" active_page={@active_page} mode={:preview} />
          <.nav_item label="Contact" page="contact" active_page={@active_page} mode={:preview} />
        <% else %>
          <.nav_item label="Home" href="/" active_page={@active_page} page="home" />
          <.nav_item
            label="Shop"
            href="/collections/all"
            active_page={@active_page}
            page="collection"
            active_pages={["collection", "pdp"]}
          />
          <.nav_item label="About" href="/about" active_page={@active_page} page="about" />
          <.nav_item label="Contact" href="/contact" active_page={@active_page} page="contact" />
        <% end %>
      </nav>

      <div class="shop-actions flex items-center" style="position: relative; z-index: 1;">
        <.link
          :if={@is_admin}
          href="/admin"
          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
          style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
          aria-label="Admin"
        >
          <svg
            class="w-5 h-5"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
            />
          </svg>
        </.link>
        <button
          type="button"
          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
          phx-click={
            Phoenix.LiveView.JS.push("open_search")
            |> Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex")
            |> Phoenix.LiveView.JS.focus(to: "#search-input")
          }
          aria-label="Search"
        >
          <svg
            class="w-5 h-5"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="M21 21l-4.35-4.35"></path>
          </svg>
        </button>
        <button
          type="button"
          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
          phx-click={open_cart_drawer_js()}
          aria-label="Cart"
        >
          <svg
            class="w-5 h-5"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <path d="M16 10a4 4 0 01-8 0"></path>
          </svg>
          <%= if @cart_count > 0 do %>
            <span
              class="cart-count"
              style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;"
            >
              {@cart_count}
            </span>
          <% end %>
          <span class="sr-only">Cart ({@cart_count})</span>
        </button>
      </div>
    </header>
    """
  end

  defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do
    clean_color = String.trim_leading(color, "#")
    "/images/#{logo_image.id}/recolored/#{clean_color}"
  end

  defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"

  # Logo content that links to home, except when already on home page.
  # This follows accessibility best practices - current page should not be a link.
  attr :theme_settings, :map, required: true
  attr :logo_image, :map, default: nil
  attr :active_page, :string, default: nil
  attr :mode, :atom, default: :live

  defp logo_content(assigns) do
    is_home = assigns.active_page == "home"
    assigns = assign(assigns, :is_home, is_home)

    ~H"""
    <%= if @is_home do %>
      <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
    <% else %>
      <%= if @mode == :preview do %>
        <a
          href="#"
          phx-click="change_preview_page"
          phx-value-page="home"
          style="display: flex; align-items: center; text-decoration: none;"
        >
          <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
        </a>
      <% else %>
        <.link navigate="/" style="display: flex; align-items: center; text-decoration: none;">
          <.logo_inner theme_settings={@theme_settings} logo_image={@logo_image} />
        </.link>
      <% end %>
    <% end %>
    """
  end

  attr :theme_settings, :map, required: true
  attr :logo_image, :map, default: nil

  defp logo_inner(assigns) do
    ~H"""
    <%= case @theme_settings.logo_mode do %>
      <% "text-only" -> %>
        <span
          class="shop-logo-text"
          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
        >
          {@theme_settings.site_name}
        </span>
      <% "logo-text" -> %>
        <%= if @logo_image do %>
          <img
            src={logo_url(@logo_image, @theme_settings)}
            alt={@theme_settings.site_name}
            style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
          />
        <% end %>
        <span
          class="shop-logo-text"
          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
        >
          {@theme_settings.site_name}
        </span>
      <% "logo-only" -> %>
        <%= if @logo_image do %>
          <img
            src={logo_url(@logo_image, @theme_settings)}
            alt={@theme_settings.site_name}
            style={"height: #{@theme_settings.logo_size}px; width: auto;"}
          />
        <% else %>
          <span
            class="shop-logo-text"
            style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
          >
            {@theme_settings.site_name}
          </span>
        <% end %>
      <% _ -> %>
        <span
          class="shop-logo-text"
          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
        >
          {@theme_settings.site_name}
        </span>
    <% end %>
    """
  end

  defp header_background_style(settings, header_image) do
    "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
      "background-image: url('/images/#{header_image.id}'); " <>
      "background-size: #{settings.header_zoom}%; " <>
      "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <>
      "background-repeat: no-repeat; z-index: 0;"
  end

  # Navigation item that renders as a span (not a link) when on the current page.
  # This follows accessibility best practices - current page should not be a link.
  attr :label, :string, required: true
  attr :page, :string, required: true
  attr :active_page, :string, required: true
  attr :href, :string, default: nil
  attr :mode, :atom, default: :live
  attr :active_pages, :list, default: nil

  defp nav_item(assigns) do
    # Allow matching multiple pages (e.g., "Shop" is active for both collection and pdp)
    active_pages = assigns.active_pages || [assigns.page]
    is_current = assigns.active_page in active_pages
    assigns = assign(assigns, :is_current, is_current)

    ~H"""
    <%= if @is_current do %>
      <span aria-current="page" style="color: var(--t-text-secondary); text-decoration: none;">
        {@label}
      </span>
    <% else %>
      <%= if @mode == :preview do %>
        <a
          href="#"
          phx-click="change_preview_page"
          phx-value-page={@page}
          style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;"
        >
          {@label}
        </a>
      <% else %>
        <.link navigate={@href} style="color: var(--t-text-secondary); text-decoration: none;">
          {@label}
        </.link>
      <% end %>
    <% end %>
    """
  end

  defp open_cart_drawer_js do
    Phoenix.LiveView.JS.push("open_cart_drawer")
  end
end
