defmodule ToweropsWeb.Components.CookieConsent do
  @moduledoc """
  Cookie consent banner component for GDPR compliance.

  Only displays to users from EU/EEA countries and for users who haven't
  yet accepted the cookie policy.

  Since we only use essential cookies (session, CSRF), the banner is
  informational and provides an "Acknowledge" button.
  """
  use Phoenix.Component

  import ToweropsWeb.CoreComponents, only: [icon: 1]

  @doc """
  Renders a cookie consent banner at the bottom of the page.

  ## Attributes
    * `requires_consent` - boolean, whether to show the banner (EU/EEA users)

  Note: The banner is always rendered if requires_consent is true.
  JavaScript will hide it immediately if the consent cookie exists.
  """
  attr :requires_consent, :boolean, required: true

  def banner(assigns) do
    ~H"""
    <%= if @requires_consent do %>
      <div
        id="cookie-consent-banner"
        class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg"
        role="dialog"
        aria-live="polite"
        aria-label="Cookie consent"
      >
        <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
          <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <div class="flex-1 flex items-start gap-3">
              <.icon
                name="hero-information-circle"
                class="h-6 w-6 text-blue-600 dark:text-blue-400 flex-shrink-0"
              />
              <div class="text-sm text-gray-700 dark:text-gray-300">
                <p class="font-medium mb-1">We respect your privacy</p>
                <p>
                  We use essential cookies to maintain your session and ensure the security of our service. We do not use tracking or advertising cookies.
                  <a
                    href="/privacy"
                    class="underline hover:text-gray-900 dark:hover:text-gray-100 font-medium"
                  >
                    Learn more
                  </a>
                </p>
              </div>
            </div>

            <div class="flex gap-2 w-full sm:w-auto">
              <button
                type="button"
                data-cookie-consent="accept"
                class="flex-1 sm:flex-none px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900"
              >
                Accept
              </button>
            </div>
          </div>
        </div>
      </div>
    <% end %>
    """
  end
end