defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
  use Phoenix.Component

  embed_templates "preview_pages/*"

  @doc """
  Renders the skip link for keyboard navigation accessibility.
  """
  def skip_link(assigns) do
    ~H"""
    <a href="#main-content" class="skip-link">
      Skip to main content
    </a>
    """
  end

  @doc """
  Renders the announcement bar.
  """
  attr :theme_settings, :map, required: true

  def announcement_bar(assigns) do
    ~H"""
    <div
      class="announcement-bar"
      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
    >
      <p style="margin: 0;">Free delivery on orders over £40</p>
    </div>
    """
  end

  @doc """
  Renders the shop header with logo based on logo_mode setting.
  """
  attr :theme_settings, :map, required: true
  attr :logo_image, :map, default: nil
  attr :header_image, :map, default: nil
  attr :active_page, :string, default: nil

  def shop_header(assigns) do
    ~H"""
    <header
      class="shop-header"
      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; 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;">
        <%= 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 %>
      </div>

      <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
        <a href="#" phx-click="change_preview_page" phx-value-page="home" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
        <a href="#" phx-click="change_preview_page" phx-value-page="collection" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
        <a href="#" phx-click="change_preview_page" phx-value-page="about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
        <a href="#" phx-click="change_preview_page" phx-value-page="contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
      </nav>

      <div class="shop-actions flex items-center gap-1" style="position: relative; z-index: 1;">
        <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.show(to: "#search-modal", display: "flex") |> Phoenix.LiveView.JS.focus(to: "#search-input")}
          aria-label="Search"
        >
          <svg class="w-5 h-5" 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={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
          aria-label="Cart"
        >
          <svg class="w-5 h-5" 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>
          <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;">2</span>
          <span class="sr-only">Cart (2)</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}"

  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

  @doc """
  Renders the shop footer with newsletter and links.
  """
  attr :theme_settings, :map, required: true

  def shop_footer(assigns) do
    ~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 -->
          <div>
            <h3 class="text-xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
              Stay in touch
            </h3>
            <p class="mb-4 text-sm" style="color: var(--t-text-secondary);">
              Get 10% off your first order and be the first to know about new designs.
            </p>
            <form class="flex flex-wrap gap-2">
              <input
                type="email"
                placeholder="your@email.com"
                class="flex-1 min-w-0 px-4 py-2 text-sm"
                style="background-color: var(--t-surface-base); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input); min-width: 150px;"
              />
              <button
                type="submit"
                class="px-6 py-2 font-medium transition-all text-sm whitespace-nowrap"
                style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button);"
              >
                Subscribe
              </button>
            </form>
          </div>

          <!-- 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="space-y-2 text-sm">
                <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>
                <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;">New arrivals</a></li>
                <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;">Best sellers</a></li>
              </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="space-y-2 text-sm">
                <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Delivery</a></li>
                <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Returns</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>
              </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);">
            © 2025 <%= @theme_settings.site_name %>
          </p>
          <div class="flex gap-2">
            <a
              href="#"
              class="social-link 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="Instagram"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
            </a>
            <a
              href="#"
              class="social-link 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="Pinterest"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
                <line x1="12" y1="16" x2="9" y2="21"></line>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
    """
  end

  @doc """
  Renders the cart drawer (floating sidebar).
  """
  attr :cart_items, :list, default: []

  def cart_drawer(assigns) do
    ~H"""
    <!-- Cart Drawer -->
    <div
      id="cart-drawer"
      class="cart-drawer"
      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
    >
      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">Your basket</h2>
        <button
          type="button"
          class="cart-drawer-close"
          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
          aria-label="Close cart"
        >
          <svg class="w-5 h-5" 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="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
        <%= for item <- @cart_items do %>
          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
            <div class="cart-drawer-item-details" style="flex: 1;">
              <h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
                <%= item.name %>
              </h3>
              <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
                <%= item.variant %>
              </p>
              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
                <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;">
                  <%= item.price %>
                </p>
                <button type="button" style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;">
                  Remove
                </button>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
        <div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
          <span>Delivery</span>
          <span>Calculated at checkout</span>
        </div>
        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
          <span>Subtotal</span>
          <span>£72.00</span>
        </div>
        <button
          type="submit"
          class="cart-drawer-checkout w-full mb-2"
          style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition-all; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
        >
          Checkout
        </button>
        <a
          href="#"
          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay") |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})}
          class="cart-drawer-link"
          style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
        >
          View basket
        </a>
      </div>
    </div>

    <!-- Cart Drawer Overlay -->
    <div
      id="cart-drawer-overlay"
      class="cart-drawer-overlay"
      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
    >
    </div>

    <style>
      .cart-drawer.open {
        right: 0 !important;
      }
      .cart-drawer-overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
      }
    </style>
    """
  end

  @doc """
  Renders the search modal overlay.
  """
  def search_modal(assigns) do
    ~H"""
    <div
      id="search-modal"
      class="search-modal"
      style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; display: none; align-items: flex-start; justify-content: center; padding-top: 10vh;"
      phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
    >
      <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);"
        phx-click-away={Phoenix.LiveView.JS.hide(to: "#search-modal")}
      >
        <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" 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"
            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..."
            phx-click={Phoenix.LiveView.JS.dispatch("stop-propagation")}
          />
          <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")}
            aria-label="Close search"
          >
            <svg class="w-5 h-5" 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="p-6" style="color: var(--t-text-tertiary);">
          <p class="text-sm">Try searching for "mountain", "forest", or "ocean"</p>
        </div>
      </div>
    </div>
    """
  end
end
