<%#
  Avatar

  Required locals:
    - alt: String - Accessible image description. Use "" only for decorative avatars.

  Optional locals:
    - src: String (default: nil) - Image URL. Falls back to initials when omitted.
    - fallback: String (default: nil) - Explicit fallback text.
    - size: String (default: "md") - "xs", "sm", "md", "lg", or "xl".
    - status: String (default: nil) - Currently supports "online".
    - status_label: String (default: "Online") - Screen-reader status label.
    - pulse: Boolean (default: true) - Whether the online indicator pulses.
    - classes: String (default: nil) - Additional wrapper classes.
    - html_options: Hash (default: {}) - Additional wrapper attributes.
    - image_options: Hash (default: {}) - Additional image attributes.
%>

<%
  alt = local_assigns.fetch(:alt)
  src = local_assigns[:src]
  fallback = local_assigns[:fallback]
  size = local_assigns.fetch(:size, "md").to_s
  status = local_assigns[:status].to_s
  status_label = local_assigns.fetch(:status_label, "Online")
  pulse = local_assigns.fetch(:pulse, true)
  classes = local_assigns[:classes]
  html_options = local_assigns.fetch(:html_options, {}).to_h.deep_dup.symbolize_keys
  image_options = local_assigns.fetch(:image_options, {}).to_h.deep_dup.symbolize_keys

  size = "md" unless %w[xs sm md lg xl].include?(size)

  size_classes = {
    "xs" => "size-6",
    "sm" => "size-8",
    "md" => "size-10",
    "lg" => "size-12",
    "xl" => "size-16"
  }
  fallback_text_classes = {
    "xs" => "text-[8px]",
    "sm" => "text-[10px]",
    "md" => "text-xs",
    "lg" => "text-sm",
    "xl" => "text-base"
  }
  status_size_classes = {
    "xs" => "size-2 ring-1",
    "sm" => "size-2 ring-1",
    "md" => "size-2.5 ring-2",
    "lg" => "size-3 ring-2",
    "xl" => "size-4 ring-2"
  }

  wrapper_classes = [
    "relative isolate inline-flex shrink-0 overflow-visible rounded-full bg-neutral-100 select-none",
    "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)]",
    "dark:bg-neutral-800 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]",
    size_classes.fetch(size),
    classes,
    html_options.delete(:class)
  ].compact.reject(&:blank?).join(" ")

  html_options[:class] = wrapper_classes
  unless src.present?
    html_options[:role] ||= "img"
    html_options[:aria] = { label: alt }.merge(html_options.fetch(:aria, {}).symbolize_keys) if alt.present?
  end

  fallback_text = fallback.presence || alt.to_s.split.filter_map { |word| word[0] }.first(2).join.upcase
  fallback_classes = "flex size-full items-center justify-center rounded-full font-medium uppercase text-neutral-600 #{fallback_text_classes.fetch(size)} dark:text-neutral-300"
  dot_size_class = status_size_classes.fetch(size).split.first
  status_wrapper_classes = "absolute right-0 bottom-0 z-20 flex #{dot_size_class}"
  status_dot_classes = "relative inline-flex rounded-full bg-green-500 ring-white #{status_size_classes.fetch(size)} dark:bg-green-400 dark:ring-neutral-950"

  image_options[:src] = src
  image_options[:alt] = alt
  image_options[:class] = ["size-full rounded-full object-cover", image_options[:class]].compact.reject(&:blank?).join(" ")
%>

<span <%= tag.attributes(html_options) %>>
  <% if src.present? %>
    <%= tag.img(**image_options) %>
  <% else %>
    <span class="<%= fallback_classes %>" aria-hidden="true"><%= fallback_text %></span>
  <% end %>

  <% if status == "online" %>
    <span class="<%= status_wrapper_classes %>">
      <% if pulse %>
        <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75 motion-reduce:animate-none dark:bg-green-300" aria-hidden="true"></span>
      <% end %>
      <span class="<%= status_dot_classes %>" aria-hidden="true"></span>
      <span class="sr-only"><%= status_label %></span>
    </span>
  <% end %>
</span>

<%#
  Avatar Group

  Required locals:
    - avatars: Array<Hash> - Avatar options. Each entry requires :alt.

  Optional locals:
    - size: String (default: "md") - Shared avatar size.
    - remaining_count: Integer (default: nil) - Number displayed after visible avatars.
    - label: String (default: "Avatar group") - Accessible group label.
    - animated: Boolean (default: false) - Expand compact overlap on hover.
    - classes: String (default: nil) - Additional wrapper classes.
    - html_options: Hash (default: {}) - Additional wrapper attributes.
%>

<%
  avatars = local_assigns.fetch(:avatars)
  size = local_assigns.fetch(:size, "md").to_s
  remaining_count = local_assigns[:remaining_count]
  label = local_assigns.fetch(:label, "Avatar group")
  animated = local_assigns.fetch(:animated, false)
  classes = local_assigns[:classes]
  html_options = local_assigns.fetch(:html_options, {}).to_h.deep_dup.symbolize_keys

  size = "md" unless %w[xs sm md lg xl].include?(size)

  overlap_classes = {
    "xs" => "-space-x-2",
    "sm" => "-space-x-3",
    "md" => "-space-x-4",
    "lg" => "-space-x-5",
    "xl" => "-space-x-6"
  }
  compact_overlap_classes = {
    "xs" => "-space-x-4",
    "sm" => "-space-x-5",
    "md" => "-space-x-6",
    "lg" => "-space-x-7",
    "xl" => "-space-x-8"
  }
  size_classes = {
    "xs" => "size-6",
    "sm" => "size-8",
    "md" => "size-10",
    "lg" => "size-12",
    "xl" => "size-16"
  }
  fallback_text_classes = {
    "xs" => "text-[8px]",
    "sm" => "text-[10px]",
    "md" => "text-xs",
    "lg" => "text-sm",
    "xl" => "text-base"
  }

  wrapper_classes = [
    animated ? "group flex w-fit" : "flex w-fit",
    animated ? compact_overlap_classes.fetch(size) : overlap_classes.fetch(size),
    classes,
    html_options.delete(:class)
  ].compact.reject(&:blank?).join(" ")
  html_options[:class] = wrapper_classes
  html_options[:role] ||= "group"
  html_options[:aria] = { label: label }.merge(html_options.fetch(:aria, {}).symbolize_keys)

  item_wrapper_classes = if animated
    "inline-flex isolate transition-transform duration-200 ease-in-out group-hover:translate-x-[var(--avatar-offset)] motion-reduce:transform-none motion-reduce:transition-none"
  else
    "inline-flex isolate"
  end

  count_classes = [
    "relative isolate inline-flex shrink-0 items-center justify-center rounded-full bg-neutral-100 font-medium text-neutral-600 select-none",
    "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)]",
    "dark:bg-neutral-800 dark:text-neutral-300 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]",
    size_classes.fetch(size),
    fallback_text_classes.fetch(size)
  ].join(" ")
%>

<div <%= tag.attributes(html_options) %>>
  <% avatars.each_with_index do |avatar, index| %>
    <span class="<%= item_wrapper_classes %>" <% if animated %>style="--avatar-offset: <%= index * 0.5 %>rem"<% end %>>
      <%= render "shared/components/avatar/avatar",
        src: avatar[:src],
        alt: avatar.fetch(:alt),
        fallback: avatar[:fallback],
        size: size,
        status: avatar[:status],
        status_label: avatar.fetch(:status_label, "Online"),
        pulse: avatar.fetch(:pulse, true),
        classes: avatar[:classes],
        html_options: avatar.fetch(:html_options, {}),
        image_options: avatar.fetch(:image_options, {}) %>
    </span>
  <% end %>

  <% if remaining_count.to_i.positive? %>
    <span class="<%= item_wrapper_classes %>" <% if animated %>style="--avatar-offset: <%= avatars.size * 0.5 %>rem"<% end %>>
      <span class="<%= count_classes %>" role="img" aria-label="<%= remaining_count %> more">+<%= remaining_count %></span>
    </span>
  <% end %>
</div>

<%= content_tag(:span, **wrapper_attributes) do %>
  <% if image? %>
    <%= tag.img(**image_attributes) %>
  <% else %>
    <span class="<%= fallback_classes %>" aria-hidden="true"><%= fallback_text %></span>
  <% end %>

  <% if online? %>
    <span class="<%= status_wrapper_classes %>">
      <% if pulse %>
        <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75 motion-reduce:animate-none dark:bg-green-300" aria-hidden="true"></span>
      <% end %>
      <span class="<%= status_dot_classes %>" aria-hidden="true"></span>
      <span class="sr-only"><%= status_label %></span>
    </span>
  <% end %>
<% end %>

<%= content_tag(:div, **wrapper_attributes) do %>
  <% avatars.each_with_index do |avatar, index| %>
    <span class="<%= item_wrapper_classes %>" <% if item_wrapper_style(index) %>style="<%= item_wrapper_style(index) %>"<% end %>>
      <%= avatar %>
    </span>
  <% end %>

  <% if remaining? %>
    <span class="<%= item_wrapper_classes %>" <% if item_wrapper_style(avatars.size) %>style="<%= item_wrapper_style(avatars.size) %>"<% end %>>
      <span class="<%= count_classes %>" role="img" aria-label="<%= remaining_label %>">+<%= @remaining_count %></span>
    </span>
  <% end %>
<% end %>

# frozen_string_literal: true

module Avatar
  class GroupComponent < ViewComponent::Base
    SIZES = Avatar::Component::SIZES

    OVERLAP_CLASSES = {
      xs: "-space-x-2",
      sm: "-space-x-3",
      md: "-space-x-4",
      lg: "-space-x-5",
      xl: "-space-x-6"
    }.freeze

    COMPACT_OVERLAP_CLASSES = {
      xs: "-space-x-4",
      sm: "-space-x-5",
      md: "-space-x-6",
      lg: "-space-x-7",
      xl: "-space-x-8"
    }.freeze

    renders_many :avatars, lambda { |alt:, src: nil, fallback: nil, status: nil, status_label: "Online", pulse: true, classes: nil, html_options: {}, image_options: {}|
      Avatar::Component.new(
        alt: alt,
        src: src,
        fallback: fallback,
        size: @size,
        status: status,
        status_label: status_label,
        pulse: pulse,
        classes: classes,
        html_options: html_options,
        image_options: image_options
      )
    }

    # @param size [Symbol] Size shared by every avatar: :xs, :sm, :md, :lg, :xl
    # @param remaining_count [Integer, nil] Number displayed after the visible avatars.
    # @param label [String] Accessible label for the group.
    # @param animated [Boolean] Whether the compact group expands to normal overlap on hover.
    # @param classes [String, nil] Additional wrapper classes.
    # @param html_options [Hash] Additional wrapper attributes such as data, aria, id, or title.
    def initialize(size: :md, remaining_count: nil, label: "Avatar group", animated: false, classes: nil, html_options: {})
      super()
      @size = normalize_size(size)
      @remaining_count = remaining_count
      @label = label
      @animated = animated
      @classes = classes
      @html_options = html_options.to_h
    end

    def wrapper_attributes
      attributes = @html_options.deep_dup.symbolize_keys
      attributes[:class] = [wrapper_classes, attributes[:class]].compact.reject(&:blank?).join(" ")
      attributes[:role] ||= "group"
      attributes[:aria] = { label: @label }.merge(attributes.fetch(:aria, {}).symbolize_keys)
      attributes
    end

    def wrapper_classes
      [
        @animated ? "group flex w-fit" : "flex w-fit",
        @animated ? COMPACT_OVERLAP_CLASSES.fetch(@size) : OVERLAP_CLASSES.fetch(@size),
        @classes
      ].compact.reject(&:blank?).join(" ")
    end

    def item_wrapper_classes
      return "inline-flex isolate" unless @animated

      "inline-flex isolate transition-transform duration-200 ease-in-out group-hover:translate-x-[var(--avatar-offset)] motion-reduce:transform-none motion-reduce:transition-none"
    end

    def item_wrapper_style(index)
      return nil unless @animated

      "--avatar-offset: #{index * 0.5}rem"
    end

    def remaining?
      @remaining_count.to_i.positive?
    end

    def remaining_label
      "#{@remaining_count} more"
    end

    def count_classes
      [
        "relative isolate inline-flex shrink-0 items-center justify-center rounded-full bg-neutral-100 font-medium text-neutral-600 select-none",
        "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)]",
        "dark:bg-neutral-800 dark:text-neutral-300 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]",
        Avatar::Component::SIZE_CLASSES.fetch(@size),
        Avatar::Component::FALLBACK_TEXT_CLASSES.fetch(@size)
      ].join(" ")
    end

    private

    def normalize_size(size)
      normalized = size.to_s.to_sym
      SIZES.include?(normalized) ? normalized : :md
    end
  end
end

# frozen_string_literal: true

module Avatar
  class Component < ViewComponent::Base
    SIZES = %i[xs sm md lg xl].freeze
    STATUSES = %i[online].freeze

    SIZE_CLASSES = {
      xs: "size-6",
      sm: "size-8",
      md: "size-10",
      lg: "size-12",
      xl: "size-16"
    }.freeze

    FALLBACK_TEXT_CLASSES = {
      xs: "text-[8px]",
      sm: "text-[10px]",
      md: "text-xs",
      lg: "text-sm",
      xl: "text-base"
    }.freeze

    STATUS_SIZE_CLASSES = {
      xs: "size-2 ring-1",
      sm: "size-2 ring-1",
      md: "size-2.5 ring-2",
      lg: "size-3 ring-2",
      xl: "size-4 ring-2"
    }.freeze

    # @param alt [String] Accessible image description. Use an empty string only for decorative avatars.
    # @param src [String, nil] Image URL. When omitted, fallback initials are rendered.
    # @param fallback [String, nil] Explicit fallback text. Defaults to initials derived from alt.
    # @param size [Symbol] Avatar size: :xs, :sm, :md, :lg, :xl
    # @param status [Symbol, nil] Optional status. Currently supports :online.
    # @param status_label [String] Screen-reader label for the status indicator.
    # @param pulse [Boolean] Whether the online status indicator pulses.
    # @param classes [String, nil] Additional wrapper classes.
    # @param html_options [Hash] Additional wrapper attributes such as data, aria, id, or title.
    # @param image_options [Hash] Additional image attributes.
    def initialize(
      alt:,
      src: nil,
      fallback: nil,
      size: :md,
      status: nil,
      status_label: "Online",
      pulse: true,
      classes: nil,
      html_options: {},
      image_options: {}
    )
      super()
      @alt = alt.to_s
      @src = src
      @fallback = fallback
      @size = normalize_size(size)
      @status = normalize_status(status)
      @status_label = status_label
      @pulse = pulse
      @classes = classes
      @html_options = html_options.to_h
      @image_options = image_options.to_h
    end

    def wrapper_attributes
      attributes = @html_options.deep_dup.symbolize_keys
      attributes[:class] = [wrapper_classes, attributes[:class]].compact.reject(&:blank?).join(" ")

      unless image?
        attributes[:role] ||= "img"
        attributes[:aria] = { label: @alt }.merge(attributes.fetch(:aria, {}).symbolize_keys) if @alt.present?
      end

      attributes
    end

    def image_attributes
      attributes = @image_options.deep_dup.symbolize_keys
      attributes[:src] = @src
      attributes[:alt] = @alt
      attributes[:class] = ["size-full rounded-full object-cover", attributes[:class]].compact.reject(&:blank?).join(" ")
      attributes
    end

    def wrapper_classes
      [
        "relative isolate inline-flex shrink-0 overflow-visible rounded-full bg-neutral-100 select-none",
        "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-full after:content-[''] after:shadow-[inset_0_0_0_1px_rgb(0_0_0_/_10%)]",
        "dark:bg-neutral-800 dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_10%)]",
        SIZE_CLASSES.fetch(@size),
        @classes
      ].compact.reject(&:blank?).join(" ")
    end

    def fallback_classes
      [
        "flex size-full items-center justify-center rounded-full font-medium uppercase text-neutral-600 dark:text-neutral-300",
        FALLBACK_TEXT_CLASSES.fetch(@size)
      ].join(" ")
    end

    def fallback_text
      return @fallback.to_s if @fallback.present?

      @alt.split.filter_map { |word| word[0] }.first(2).join.upcase
    end

    def status_wrapper_classes
      "absolute right-0 bottom-0 z-20 flex #{STATUS_SIZE_CLASSES.fetch(@size).split.first}"
    end

    def status_dot_classes
      [
        "relative inline-flex rounded-full bg-green-500 ring-white dark:bg-green-400 dark:ring-neutral-950",
        STATUS_SIZE_CLASSES.fetch(@size)
      ].join(" ")
    end

    def image?
      @src.present?
    end

    def online?
      @status == :online
    end

    attr_reader :status_label, :pulse

    private

    def normalize_size(size)
      normalized = size.to_s.to_sym
      SIZES.include?(normalized) ? normalized : :md
    end

    def normalize_status(status)
      normalized = status.to_s.to_sym
      STATUSES.include?(normalized) ? normalized : nil
    end
  end
end