defmodule MvWeb.CoreComponents do
  @moduledoc """
  Provides core UI components.

  At first glance, this module may seem daunting, but its goal is to provide
  core building blocks for your application, such as tables, forms, and
  inputs. The components consist mostly of markup and are well-documented
  with doc strings and declarative assigns. You may customize and style
  them in any way you want, based on your application growth and needs.

  The foundation for styling is Tailwind CSS, a utility-first CSS framework,
  augmented with daisyUI, a Tailwind CSS plugin that provides UI components
  and themes. Here are useful references:

    * [daisyUI](https://daisyui.com/docs/intro/) - a good place to get
      started and see the available components.

    * [Tailwind CSS](https://tailwindcss.com) - the foundational framework
      we build on. You will use it for layout, sizing, flexbox, grid, and
      spacing.

    * [Heroicons](https://heroicons.com) - see `icon/1` for usage.

    * [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
      the component system used by Phoenix. Some components, such as `<.link>`
      and `<.form>`, are defined there.

  """
  use Phoenix.Component
  use Gettext, backend: MvWeb.Gettext

  alias Phoenix.LiveView.JS

  # WCAG 2.4.7 / 2.4.11: Shared focus ring for buttons and dropdown (trigger + items)
  @button_focus_classes [
    "focus-visible:outline-none",
    "focus-visible:ring-2",
    "focus-visible:ring-offset-2",
    "focus-visible:ring-offset-base-100",
    "focus-visible:ring-base-content/60"
  ]

  @doc """
  Returns the shared focus ring class list for buttons and dropdown items (WCAG 2.4.7).
  Use when building custom dropdown item buttons so they match <.button> and dropdown trigger.
  """
  def button_focus_classes, do: @button_focus_classes

  @doc """
  Renders flash notices.

  ## Examples

      <.flash kind={:info} flash={@flash} />
      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
  """
  attr :id, :string, doc: "the optional id of flash container"
  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
  attr :title, :string, default: nil

  attr :kind, :atom,
    values: [:info, :error, :success, :warning],
    doc: "used for styling and flash lookup"

  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"

  slot :inner_block, doc: "the optional inner block that renders the flash message"

  def flash(assigns) do
    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)

    ~H"""
    <div
      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
      id={@id}
      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
      role="alert"
      class="pointer-events-auto"
      {@rest}
    >
      <div class={[
        "alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
        @kind == :info && "alert-info",
        @kind == :error && "alert-error",
        @kind == :success && "alert-success",
        @kind == :warning && "alert-warning"
      ]}>
        <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
        <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
        <.icon :if={@kind == :success} name="hero-check-circle" class="size-5 shrink-0" />
        <.icon :if={@kind == :warning} name="hero-information-circle" class="size-5 shrink-0" />
        <div>
          <p :if={@title} class="font-semibold">{@title}</p>
          <p>{msg}</p>
        </div>
        <div class="flex-1" />
        <button type="button" class="self-start cursor-pointer group" aria-label={gettext("close")}>
          <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
        </button>
      </div>
    </div>
    """
  end

  @doc """
  Renders a button with navigation support.

  ## Variants (Design Guidelines §5.2)
  - primary (main CTA)
  - secondary (supporting)
  - neutral (cancel/back)
  - ghost (low emphasis; table/toolbars)
  - outline (alternative CTA)
  - danger (destructive)
  - link (inline; rare)
  - icon (icon-only)

  ## Sizes
  - sm, md (default), lg

  ## Examples

      <.button>Send!</.button>
      <.button phx-click="go" variant="primary">Send!</.button>
      <.button navigate={~p"/"} variant="secondary">Home</.button>
      <.button variant="ghost" size="sm">Edit</.button>
      <.button disabled={true}>Disabled</.button>
  """
  attr :rest, :global, include: ~w(href navigate patch method data-testid form)

  attr :variant, :string,
    values: ~w(primary secondary neutral ghost outline danger link icon),
    default: "primary"

  attr :size, :string, values: ~w(sm md lg), default: "md"
  attr :disabled, :boolean, default: false, doc: "Whether the button is disabled"
  slot :inner_block, required: true

  def button(assigns) do
    rest = assigns.rest
    variant = assigns[:variant] || "primary"
    size = assigns[:size] || "md"

    variant_classes = %{
      "primary" => "btn-primary",
      "secondary" => "btn-secondary",
      "neutral" => "btn-neutral",
      "ghost" => "btn-ghost",
      "outline" => "btn-outline",
      "danger" => "btn-error",
      "link" => "btn-link",
      "icon" => "btn-ghost btn-square"
    }

    size_classes = %{
      "sm" => "btn-sm",
      "md" => "",
      "lg" => "btn-lg"
    }

    base_class = Map.fetch!(variant_classes, variant)
    size_class = size_classes[size]
    btn_class = [base_class, size_class] |> Enum.reject(&(&1 == "")) |> Enum.join(" ")

    assigns =
      assigns
      |> assign(:btn_class, btn_class)
      |> assign(:button_focus_classes, @button_focus_classes)

    if rest[:href] || rest[:navigate] || rest[:patch] do
      link_class =
        if assigns[:disabled],
          do: ["btn", btn_class, "btn-disabled"] ++ @button_focus_classes,
          else: ["btn", btn_class] ++ @button_focus_classes

      link_attrs =
        if assigns[:disabled] do
          rest
          |> Map.drop([:href, :navigate, :patch])
          |> Map.merge(%{tabindex: "-1", "aria-disabled": "true"})
        else
          rest
        end

      assigns =
        assigns
        |> assign(:link_class, link_class)
        |> assign(:link_attrs, link_attrs)

      ~H"""
      <.link class={@link_class} {@link_attrs}>
        {render_slot(@inner_block)}
      </.link>
      """
    else
      ~H"""
      <button
        class={["btn", @btn_class] ++ @button_focus_classes}
        disabled={@disabled}
        {@rest}
      >
        {render_slot(@inner_block)}
      </button>
      """
    end
  end

  @doc """
  Renders a non-interactive badge with WCAG-compliant contrast.

  Use for status labels, counts, or tags. For clickable elements (e.g. filter chips),
  use a button or link component instead, not this badge.

  ## Variants and styles

  - **variant:** `:neutral`, `:primary`, `:info`, `:success`, `:warning`, `:error`
  - **style:** `:soft` (default, tinted background), `:solid`, `:outline`
  - **size:** `:sm`, `:md` (default)

  Outline and soft styles always use a visible background so the badge remains
  readable on base-200/base-300 surfaces (WCAG 2.2 AA). Ghost style is not exposed
  by default to avoid low-contrast on gray backgrounds.

  ## Examples

      <.badge variant="success">Paid</.badge>
      <.badge variant="error" style="solid">Unpaid</.badge>
      <.badge variant="neutral" size="sm">Custom</.badge>
      <.badge variant="primary" style="outline">Label</.badge>
      <.badge variant="success" sr_label="Paid">
        <.icon name="hero-check-circle" class="size-4" />
      </.badge>
  """
  attr :variant, :any,
    default: "neutral",
    doc: "Color variant: neutral | primary | info | success | warning | error (string or atom)"

  attr :style, :any,
    default: "soft",
    doc: "Visual style: soft | solid | outline; :outline gets bg-base-100 for contrast"

  attr :size, :any,
    default: "md",
    doc: "Badge size: sm | md"

  attr :sr_label, :string,
    default: nil,
    doc: "Optional screen-reader label for icon-only content"

  attr :rest, :global, doc: "Arbitrary HTML attributes (e.g. id, class, data-testid)"

  slot :inner_block, required: true, doc: "Badge text (and optional icon)"
  slot :icon, doc: "Optional leading icon slot"

  def badge(assigns) do
    # Normalize so both HEEx strings (variant="neutral") and helper atoms (variant={:neutral}) work
    variant = to_string(assigns.variant || "neutral")
    style = to_string(assigns.style || "soft")
    size = to_string(assigns.size || "md")

    variant_class = "badge-#{variant}"
    style_class = badge_style_class(style)
    size_class = "badge-#{size}"
    # Outline has transparent bg in DaisyUI; add bg so it stays visible on base-200/base-300
    outline_bg = if style == "outline", do: "bg-base-100", else: nil

    rest = assigns.rest || []
    rest = if is_list(rest), do: rest, else: Map.to_list(rest)
    extra_class = Keyword.get(rest, :class)
    rest = Keyword.drop(rest, [:class])
    rest = if assigns.sr_label, do: Keyword.put(rest, :"aria-label", assigns.sr_label), else: rest

    class =
      ["badge", variant_class, style_class, size_class, outline_bg, extra_class]
      |> List.flatten()
      |> Enum.reject(&is_nil/1)
      |> Enum.join(" ")

    assigns =
      assigns
      |> assign(:class, class)
      |> assign(:rest, rest)
      |> assign(:has_icon, assigns.icon != [])

    ~H"""
    <span class={@class} {@rest}>
      <%= if @has_icon do %>
        {render_slot(@icon)}
      <% end %>
      {render_slot(@inner_block)}
      <%= if @sr_label do %>
        <span class="sr-only">{@sr_label}</span>
      <% end %>
    </span>
    """
  end

  defp badge_style_class("soft"), do: "badge-soft"
  defp badge_style_class("solid"), do: nil
  defp badge_style_class("outline"), do: "badge-outline"
  defp badge_style_class(_), do: nil

  @doc """
  Renders a visually empty table cell with screen-reader-only text (WCAG).

  Use when a table cell has no value so that:
  - The cell appears empty (no dash, no "n/a").
  - Screen readers still get a meaningful label (e.g. "No cycle", "No group assignment").

  See CODE_GUIDELINES §8 (Empty table cells) and Design Guidelines §8.6.

  ## Examples

      <.empty_cell sr_text={gettext("No cycle")} />
      <.empty_cell sr_text={gettext("No group assignment")} />
      <.empty_cell sr_text={gettext("Not specified")} />
  """
  attr :sr_text, :string,
    required: true,
    doc: "Text read by screen readers when the cell is visually empty"

  def empty_cell(assigns) do
    ~H"""
    <span class="sr-only">{@sr_text}</span>
    """
  end

  @doc """
  Renders content when value is present, otherwise an accessible empty cell.

  Use in table cells for optional fields: when `value` is blank, only the
  screen-reader text is shown (visually empty). Otherwise the inner block is rendered.

  Blank check: `nil`, `false`, `[]`, `""`, whitespace-only string, or `%Ash.NotLoaded{}` count as empty.

  See CODE_GUIDELINES §8 (Empty table cells) and Design Guidelines §8.6.

  ## Examples

      <.maybe_value value={member.membership_fee_type} empty_sr_text={gettext("No fee type")}>
        {member.membership_fee_type.name}
      </.maybe_value>
      <.maybe_value value={member.groups} empty_sr_text={gettext("No group assignment")}>
        <%= for g <- member.groups do %>
          <.badge variant="primary" style="outline">{g.name}</.badge>
        <% end %>
      </.maybe_value>
  """
  attr :value, :any, doc: "Value to check; if blank, empty_cell is rendered"

  attr :empty_sr_text, :string,
    default: nil,
    doc: "Screen-reader text when value is blank (default: gettext \"Not specified\")"

  slot :inner_block, required: true

  def maybe_value(assigns) do
    empty_sr = assigns.empty_sr_text || gettext("Not specified")
    assigns = assign(assigns, :empty_sr_text, empty_sr)
    assigns = assign(assigns, :blank?, value_blank?(assigns.value))

    ~H"""
    <%= if @blank? do %>
      <.empty_cell sr_text={@empty_sr_text} />
    <% else %>
      {render_slot(@inner_block)}
    <% end %>
    """
  end

  defp value_blank?(nil), do: true
  defp value_blank?(false), do: true
  defp value_blank?([]), do: true
  defp value_blank?(%Ash.NotLoaded{}), do: true
  defp value_blank?(v) when is_binary(v), do: String.trim(v) == ""
  defp value_blank?(_), do: false

  @doc """
  Wraps content with a DaisyUI tooltip. Use for icon-only actions, truncated content,
  or status badges that need explanation (Design Guidelines §8.2).

  ## Examples

      <.tooltip content={gettext("Edit")}>
        <.button variant="icon" size="sm"><.icon name="hero-pencil" /></.button>
      </.tooltip>

      <.tooltip content={@full_name} position="top">
        <span class="truncate max-w-32">{@full_name}</span>
      </.tooltip>
  """
  attr :content, :string, required: true, doc: "Tooltip text (data-tip)"

  attr :position, :string,
    values: ~w(top bottom left right),
    default: "bottom"

  attr :wrap_class, :string, default: nil, doc: "Additional classes for the wrapper"
  slot :inner_block, required: true

  def tooltip(assigns) do
    position_class = "tooltip tooltip-#{assigns.position}"
    wrap_class = [position_class, assigns.wrap_class] |> Enum.reject(&is_nil/1) |> Enum.join(" ")

    assigns = assign(assigns, :wrap_class, wrap_class)

    ~H"""
    <div class={@wrap_class} data-tip={@content}>
      {render_slot(@inner_block)}
    </div>
    """
  end

  @doc """
  Renders a dropdown menu.

  ## Examples

      <.dropdown_menu items={@items} open={@open} phx_target={@myself} />

  When using custom content (e.g., forms), use the inner_block slot:

      <.dropdown_menu button_label="Export" icon="hero-arrow-down-tray" open={@open} phx_target={@myself}>
        <li role="none">
          <form>...</form>
        </li>
      </.dropdown_menu>
  """
  attr :id, :string, default: "dropdown-menu"
  attr :items, :list, default: [], doc: "List of %{label: string, value: any} maps"
  attr :button_label, :string, default: "Dropdown"
  attr :icon, :string, default: nil
  attr :checkboxes, :boolean, default: false
  attr :selected, :map, default: %{}
  attr :open, :boolean, default: false, doc: "Whether the dropdown is open"
  attr :show_select_buttons, :boolean, default: false, doc: "Show select all/none buttons"
  attr :phx_target, :any, required: true, doc: "The LiveView/LiveComponent target for events"
  attr :menu_class, :string, default: nil, doc: "Additional CSS classes for the menu"
  attr :menu_width, :string, default: "w-64", doc: "Width class for the menu (default: w-64)"

  attr :button_class, :string,
    default: nil,
    doc: "Additional CSS classes for the button (e.g., btn-secondary)"

  attr :menu_align, :string,
    default: "right",
    doc: "Menu alignment: 'left' or 'right' (default: right)"

  attr :testid, :string, default: "dropdown-menu", doc: "data-testid for the dropdown container"
  attr :button_testid, :string, default: "dropdown-button", doc: "data-testid for the button"

  attr :menu_testid, :string,
    default: nil,
    doc: "data-testid for the menu (defaults to testid + '-menu')"

  slot :inner_block, doc: "Custom content for the dropdown menu (e.g., forms)"

  def dropdown_menu(assigns) do
    menu_testid = assigns.menu_testid || "#{assigns.testid}-menu"

    assigns =
      assigns
      |> assign(:menu_testid, menu_testid)
      |> assign(:button_focus_classes, @button_focus_classes)

    ~H"""
    <div
      class="relative"
      phx-click-away="close_dropdown"
      phx-target={@phx_target}
      phx-window-keydown="close_dropdown"
      phx-key="Escape"
      data-testid={@testid}
    >
      <button
        type="button"
        tabindex="0"
        role="button"
        aria-haspopup="menu"
        aria-expanded={@open}
        aria-controls={@id}
        aria-label={@button_label}
        class={["btn"] ++ @button_focus_classes ++ [@button_class]}
        phx-click="toggle_dropdown"
        phx-target={@phx_target}
        data-testid={@button_testid}
      >
        <%= if @icon do %>
          <.icon name={@icon} />
        <% end %>
        <span>{@button_label}</span>
      </button>

      <ul
        :if={@open}
        id={@id}
        role="menu"
        class={[
          "absolute mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box max-h-96 overflow-y-auto border border-base-300",
          if(@menu_align == "left", do: "left-0", else: "right-0"),
          @menu_width,
          @menu_class
        ]}
        tabindex="0"
        phx-target={@phx_target}
        data-testid={@menu_testid}
      >
        <%= if assigns.inner_block != [] do %>
          {render_slot(@inner_block)}
        <% else %>
          <li :if={@show_select_buttons} role="none">
            <div class="flex justify-between items-center mb-2 px-2">
              <span class="font-semibold">{gettext("Options")}</span>
              <div class="flex gap-1">
                <button
                  type="button"
                  role="menuitem"
                  aria-label={gettext("Select all")}
                  phx-click="select_all"
                  phx-target={@phx_target}
                  class="btn btn-xs btn-ghost"
                >
                  {gettext("All")}
                </button>
                <button
                  type="button"
                  role="menuitem"
                  aria-label={gettext("Select none")}
                  phx-click="select_none"
                  phx-target={@phx_target}
                  class="btn btn-xs btn-ghost"
                >
                  {gettext("None")}
                </button>
              </div>
            </div>
          </li>

          <li :if={@show_select_buttons} role="separator" class="divider my-1"></li>

          <%= for item <- @items do %>
            <li role="none">
              <button
                type="button"
                role={if @checkboxes, do: "menuitemcheckbox", else: "menuitem"}
                aria-label={item.label}
                aria-checked={
                  if @checkboxes, do: to_string(Map.get(@selected, item.value, true)), else: nil
                }
                tabindex="0"
                class={
                  [
                    "flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-base-200 w-full text-left",
                    "focus-visible:ring-inset"
                  ] ++ @button_focus_classes
                }
                phx-click="select_item"
                phx-keydown="select_item"
                phx-key="Enter"
                phx-value-item={item.value}
                phx-target={@phx_target}
              >
                <%= if @checkboxes do %>
                  <input
                    type="checkbox"
                    checked={Map.get(@selected, item.value, true)}
                    class="checkbox checkbox-sm checkbox-primary pointer-events-none"
                    tabindex="-1"
                    aria-hidden="true"
                  />
                <% end %>
                <span>{item.label}</span>
              </button>
            </li>
          <% end %>
        <% end %>
      </ul>
    </div>
    """
  end

  @doc """
  Renders a section in with a border similar to cards.


  ## Examples

      <.form_section title={gettext("Personal Data")}>
        <p>input</p>
      </form_section>
  """
  attr :title, :string, required: true
  slot :inner_block, required: true

  def form_section(assigns) do
    ~H"""
    <section class="mb-6">
      <h2 class="text-lg font-semibold mb-3">{@title}</h2>
      <div class="border border-base-300 rounded-lg p-4 bg-base-100">
        {render_slot(@inner_block)}
      </div>
    </section>
    """
  end

  @doc """
  Renders an input with label and error messages.

  A `Phoenix.HTML.FormField` may be passed as argument,
  which is used to retrieve the input name, id, and values.
  Otherwise all attributes may be passed explicitly.

  ## Types

  This function accepts all HTML input types, considering that:

    * You may also set `type="select"` to render a `<select>` tag

    * `type="checkbox"` is used exclusively to render boolean values

    * For live file uploads, see `Phoenix.Component.live_file_input/1`

  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  for more information. Unsupported types, such as hidden and radio,
  are best written directly in your templates.

  ## Examples

      <.input field={@form[:email]} type="email" />
      <.input name="my-input" errors={["oh no!"]} />
  """
  attr :id, :any, default: nil
  attr :name, :any
  attr :label, :string, default: nil
  attr :value, :any

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file month number password
               search select tel text textarea time url week)

  attr :field, Phoenix.HTML.FormField,
    doc: "a form field struct retrieved from the form, for example: @form[:email]"

  attr :errors, :list, default: []
  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
  attr :class, :string, default: nil, doc: "the input class to use over defaults"
  attr :error_class, :string, default: nil, doc: "the input error class to use over defaults"

  attr :rest, :global,
    include:
      ~w(accept autocomplete aria-required capture cols disabled form list max maxlength min minlength
                multiple pattern placeholder readonly required rows size step)

  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, Enum.map(errors, &translate_error(&1)))
    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
    |> assign_new(:value, fn -> field.value end)
    |> input()
  end

  def input(%{type: "checkbox"} = assigns) do
    assigns =
      assign_new(assigns, :checked, fn ->
        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
      end)

    # For checkboxes, we don't use HTML required attribute (means "must be checked")
    # Instead, we use aria-required for screen readers (WCAG 2.1, Success Criterion 3.3.2)
    # Extract required from rest and remove it, but keep aria-required if provided
    rest = assigns.rest || %{}
    is_required = Map.get(rest, :required, false)
    aria_required = Map.get(rest, :aria_required, if(is_required, do: "true", else: nil))

    # Remove required from rest (we don't want HTML required on checkbox)
    rest_without_required = Map.delete(rest, :required)
    # Ensure aria-required is set if field is required
    rest_final =
      if aria_required,
        do: Map.put(rest_without_required, :aria_required, aria_required),
        else: rest_without_required

    assigns = assign(assigns, :rest, rest_final)
    assigns = assign(assigns, :is_required, is_required)

    ~H"""
    <fieldset class="mb-2 fieldset">
      <label>
        <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
        <span class="label">
          <input
            type="checkbox"
            id={@id}
            name={@name}
            value="true"
            checked={@checked}
            class={@class || "checkbox checkbox-sm"}
            {@rest}
          />{@label}<span
            :if={@is_required}
            class="text-error tooltip tooltip-right"
            data-tip={gettext("This field is required")}
          >*</span>
        </span>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </fieldset>
    """
  end

  def input(%{type: "select"} = assigns) do
    assigns = ensure_aria_required_for_input(assigns)

    ~H"""
    <fieldset class="mb-2 fieldset">
      <label>
        <span :if={@label} class="mb-1 label">
          {@label}<span
            :if={@rest[:required]}
            class="text-error tooltip tooltip-right"
            data-tip={gettext("This field cannot be empty")}
          >*</span>
        </span>
        <select
          id={@id}
          name={@name}
          class={[@class || "w-full select", @errors != [] && (@error_class || "select-error")]}
          multiple={@multiple}
          {@rest}
        >
          <option :if={@prompt} value="">{@prompt}</option>
          {Phoenix.HTML.Form.options_for_select(@options, @value)}
        </select>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </fieldset>
    """
  end

  def input(%{type: "textarea"} = assigns) do
    assigns = ensure_aria_required_for_input(assigns)

    ~H"""
    <fieldset class="mb-2 fieldset">
      <label>
        <span :if={@label} class="mb-1 label">
          {@label}<span
            :if={@rest[:required]}
            class="text-error tooltip tooltip-right"
            data-tip={gettext("This field cannot be empty")}
          >*</span>
        </span>
        <textarea
          id={@id}
          name={@name}
          class={[
            @class || "w-full textarea",
            @errors != [] && (@error_class || "textarea-error")
          ]}
          {@rest}
        >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </fieldset>
    """
  end

  # All other inputs text, datetime-local, url, password, etc. are handled here...
  def input(assigns) do
    assigns = ensure_aria_required_for_input(assigns)

    ~H"""
    <fieldset class="mb-2 fieldset">
      <label>
        <span :if={@label} class="mb-1 label">
          {@label}<span
            :if={@rest[:required]}
            class="text-error tooltip tooltip-right"
            data-tip={gettext("This field cannot be empty")}
          >*</span>
        </span>
        <input
          type={@type}
          name={@name}
          id={@id}
          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
          class={[
            @class || "w-full input",
            @errors != [] && (@error_class || "input-error")
          ]}
          {@rest}
        />
      </label>
      <.error :for={msg <- @errors}>{msg}</.error>
    </fieldset>
    """
  end

  # WCAG 2.1: set aria-required when required is true so screen readers announce required state
  defp ensure_aria_required_for_input(assigns) do
    rest = assigns.rest || %{}

    rest =
      if rest[:required],
        do: Map.put(rest, :aria_required, "true"),
        else: rest

    assign(assigns, :rest, rest)
  end

  # Helper used by inputs to generate form errors
  defp error(assigns) do
    ~H"""
    <p class="mt-1.5 flex gap-2 items-center text-sm text-error">
      <.icon name="hero-exclamation-circle" class="size-5" />
      {render_slot(@inner_block)}
    </p>
    """
  end

  @doc """
  Renders a header with title.

  Use the `:leading` slot for the Back button (left side, consistent with data fields).
  Use the `:actions` slot for primary actions (e.g. Save) on the right.
  """
  attr :class, :string, default: nil

  slot :leading, doc: "Content on the left (e.g. Back button)"
  slot :inner_block, required: true
  slot :subtitle
  slot :actions

  def header(assigns) do
    ~H"""
    <header class={["flex items-center gap-6 pb-4", @class]}>
      <div :if={@leading != []} class="shrink-0">
        {render_slot(@leading)}
      </div>
      <div class="min-w-0 flex-1">
        <h1 class="text-xl font-semibold leading-8">
          {render_slot(@inner_block)}
        </h1>
        <p :if={@subtitle != []} class="text-sm text-base-content/70">
          {render_slot(@subtitle)}
        </p>
      </div>
      <div :if={@actions != []} class="shrink-0 flex gap-4 justify-end">
        {render_slot(@actions)}
      </div>
    </header>
    """
  end

  @doc ~S"""
  Renders a table with generic styling.

  When `row_click` is set, clicking a row (or a data cell) triggers the handler.
  Rows with `row_click` get a subtle hover and focus-within outline (theme-friendly ring).
  For keyboard accessibility (WCAG 2.1.1), the first column without `col_click` gets
  `tabindex="0"` and `role="button"`; the TableRowKeydown hook triggers the row action on Enter/Space.
  When `selected_row_id` is set and matches a row's id (via `row_value_id` or `row_item.(row).id`),
  that row gets a stronger selected outline (ring-primary) for accessibility (not color-only).

  The action column has no phx-click on its `<td>`, so action buttons do not trigger row navigation.
  For interactive elements inside other columns (e.g. checkboxes, buttons), use
  `Phoenix.LiveView.JS.stop_propagation()` in the element's phx-click so the row click is not fired.

  ## Examples

      <.table id="users" rows={@users}>
        <:col :let={user} label="id">{user.id}</:col>
        <:col :let={user} label="username">{user.username}</:col>
      </.table>

      <.table id="members" rows={@members} row_click={fn m -> JS.navigate(~p"/members/#{m}") end} selected_row_id={@selected_member_id}>
        <:col :let={m} label="Name">{m.name}</:col>
      </.table>
  """
  attr :id, :string, required: true
  attr :rows, :list, required: true
  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"

  attr :selected_row_id, :any,
    default: nil,
    doc:
      "when set, the row whose id equals this value gets selected styling (single row, e.g. from URL)"

  attr :row_selected?, :any,
    default: nil,
    doc:
      "optional; function (row_item) -> boolean to mark multiple rows as selected (e.g. checkbox selection); overrides selected_row_id when set"

  attr :row_tooltip, :string,
    default: nil,
    doc:
      "optional; when row_click is set, tooltip text for the row (e.g. gettext(\"Click to view\")). Shown as title on hover and as sr-only for screen readers."

  attr :row_value_id, :any,
    default: nil,
    doc:
      "optional; function (row) -> id for comparing with selected_row_id; defaults to row_item.(row).id"

  attr :row_item, :any,
    default: &Function.identity/1,
    doc: "the function for mapping each row before calling the :col and :action slots"

  attr :dynamic_cols, :list,
    default: [],
    doc: "list of dynamic column definitions with :custom_field and :render functions"

  attr :sort_field, :any, default: nil, doc: "current sort field"
  attr :sort_order, :atom, default: nil, doc: "current sort order"

  attr :sticky_header, :boolean,
    default: false,
    doc:
      "when true, thead th get lg:sticky lg:top-0 bg-base-100 z-10 for use inside a scroll container on desktop"

  slot :col, required: true do
    attr :label, :string
    attr :class, :string
    attr :col_click, :any, doc: "optional column-specific click handler that overrides row_click"

    attr :sort_field, :any,
      doc: "optional; when equal to table sort_field, aria-sort is set on this th"
  end

  slot :action, doc: "the slot for showing user actions in the last table column"

  def table(assigns) do
    assigns =
      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
      end

    # Function to get the row's value id for selected_row_id comparison (no extra DB reads)
    row_value_id_fn =
      assigns[:row_value_id] || fn row -> assigns.row_item.(row).id end

    assigns = assign(assigns, :row_value_id_fn, row_value_id_fn)

    # WCAG 2.1.1: when row_click is set, first column without col_click gets tabindex="0"
    # so rows are reachable via Tab; TableRowKeydown hook triggers click on Enter/Space
    first_row_click_col_idx =
      if assigns[:row_click] do
        Enum.find_index(assigns[:col] || [], fn c -> !c[:col_click] end)
      end

    assigns =
      assign(assigns, :first_row_click_col_idx, first_row_click_col_idx)

    ~H"""
    <div
      id={@row_click && "#{@id}-keyboard"}
      class="overflow-auto"
      phx-hook={@row_click && "TableRowKeydown"}
    >
      <table class="table table-zebra">
        <thead>
          <tr>
            <th
              :for={col <- @col}
              class={table_th_class(col, @sticky_header)}
              aria-sort={table_th_aria_sort(col, @sort_field, @sort_order)}
            >
              {col[:label]}
            </th>
            <th :for={dyn_col <- @dynamic_cols} class={table_th_sticky_class(@sticky_header)}>
              <.live_component
                module={MvWeb.Components.SortHeaderComponent}
                id={:"sort_custom_field_#{dyn_col[:custom_field].id}"}
                field={"custom_field_#{dyn_col[:custom_field].id}"}
                label={dyn_col[:custom_field].name}
                sort_field={@sort_field}
                sort_order={@sort_order}
              />
            </th>
            <th :if={@action != []} class={table_th_sticky_class(@sticky_header)}>
              <span class="sr-only">{gettext("Actions")}</span>
            </th>
          </tr>
        </thead>
        <tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}>
          <tr
            :for={row <- @rows}
            id={@row_id && @row_id.(row)}
            class={table_row_tr_class(@row_click, table_row_selected?(assigns, row))}
            data-selected={table_row_selected?(assigns, row) && "true"}
            title={@row_click && @row_tooltip}
          >
            <td
              :for={{col, col_idx} <- Enum.with_index(@col)}
              tabindex={if @row_click && @first_row_click_col_idx == col_idx, do: 0, else: nil}
              role={if @row_click && @first_row_click_col_idx == col_idx, do: "button", else: nil}
              data-row-clickable={
                if @row_click && @first_row_click_col_idx == col_idx, do: "true", else: nil
              }
              phx-click={
                (col[:col_click] && col[:col_click].(@row_item.(row))) ||
                  (@row_click && @row_click.(row))
              }
              class={
                col_class = Map.get(col, :class)
                has_click = col[:col_click] || @row_click
                classes = ["max-w-xs"]

                classes =
                  if col_class == nil || (col_class && !String.contains?(col_class, "text-center")) do
                    ["truncate" | classes]
                  else
                    classes
                  end

                classes =
                  if has_click do
                    ["hover:cursor-pointer" | classes]
                  else
                    classes
                  end

                # WCAG: no focus ring on the cell itself; row shows focus via focus-within
                classes =
                  if @row_click && @first_row_click_col_idx == col_idx do
                    [
                      "focus:outline-none",
                      "focus-visible:outline-none",
                      "focus:ring-0",
                      "focus-visible:ring-0" | classes
                    ]
                  else
                    classes
                  end

                classes =
                  if col_class do
                    [col_class | classes]
                  else
                    classes
                  end

                Enum.join(classes, " ")
              }
            >
              <%= if col_idx == 0 && @row_click && @row_tooltip do %>
                <span class="sr-only">{@row_tooltip}</span>
              <% end %>
              {render_slot(col, @row_item.(row))}
            </td>
            <td
              :for={dyn_col <- @dynamic_cols}
              phx-click={@row_click && @row_click.(row)}
              class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
            >
              {if dyn_col[:render] do
                rendered = dyn_col[:render].(@row_item.(row))

                if rendered == "" do
                  ""
                else
                  rendered
                end
              else
                ""
              end}
            </td>
            <td :if={@action != []} class="w-0 font-semibold">
              <div class="flex gap-4">
                <%= for action <- @action do %>
                  {render_slot(action, @row_item.(row))}
                <% end %>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    """
  end

  # Returns true if the row is selected (via row_selected?/1 or selected_row_id match).
  defp table_row_selected?(assigns, row) do
    item = assigns.row_item.(row)

    if assigns[:row_selected?] do
      assigns.row_selected?.(item)
    else
      assigns[:selected_row_id] != nil and
        assigns.row_value_id_fn.(row) == assigns.selected_row_id
    end
  end

  # Returns CSS classes for table row: hover/focus-within outline when row_click is set,
  # and stronger selected outline when selected (WCAG: not color-only).
  # Hover/focus-within are omitted for the selected row so the selected ring stays visible.
  defp table_row_tr_class(row_click, selected?) do
    has_row_click? = not is_nil(row_click)
    base = []

    base =
      if has_row_click? and not selected?,
        do:
          base ++
            [
              "hover:ring-2",
              "hover:ring-inset",
              "hover:ring-base-content/10",
              "focus-within:ring-2",
              "focus-within:ring-inset",
              "focus-within:ring-base-content/10"
            ],
        else: base

    base = if selected?, do: base ++ ["ring-2", "ring-inset", "ring-primary"], else: base
    Enum.join(base, " ")
  end

  defp table_th_aria_sort(col, sort_field, sort_order) do
    col_sort = Map.get(col, :sort_field)

    if not is_nil(col_sort) and col_sort == sort_field and sort_order in [:asc, :desc] do
      if sort_order == :asc, do: "ascending", else: "descending"
    else
      nil
    end
  end

  # Combines column class with optional sticky header classes (desktop only; theme-friendly bg).
  defp table_th_class(col, sticky_header) do
    base = Map.get(col, :class)
    sticky = if sticky_header, do: "lg:sticky lg:top-0 bg-base-100 z-10", else: nil
    [base, sticky] |> Enum.filter(& &1) |> Enum.join(" ")
  end

  defp table_th_sticky_class(true),
    do: "lg:sticky lg:top-0 bg-base-100 z-10"

  defp table_th_sticky_class(_), do: nil

  @doc """
  Renders a data list.

  ## Examples

      <.list>
        <:item title="Title">{@post.title}</:item>
        <:item title="Views">{@post.views}</:item>
      </.list>
  """
  slot :item, required: true do
    attr :title, :string, required: true
  end

  def list(assigns) do
    ~H"""
    <ul class="list">
      <li :for={item <- @item} class="list-row">
        <div>
          <div class="font-bold">{item.title}</div>
          <div>{render_slot(item)}</div>
        </div>
      </li>
    </ul>
    """
  end

  @doc """
  Renders a [Heroicon](https://heroicons.com).

  Heroicons come in three styles – outline, solid, and mini.
  By default, the outline style is used, but solid and mini may
  be applied by using the `-solid` and `-mini` suffix.

  You can customize the size and colors of the icons by setting
  width, height, and background color classes.

  Icons are extracted from the `deps/heroicons` directory and bundled within
  your compiled app.css by the plugin in `assets/vendor/heroicons.js`.

  ## Examples

      <.icon name="hero-x-mark" />
      <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
  """
  attr :name, :string, required: true
  attr :class, :string, default: "size-4"
  attr :rest, :global, include: ~w(aria-hidden)

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @class]} {@rest} />
    """
  end

  ## JS Commands

  def show(js \\ %JS{}, selector) do
    JS.show(js,
      to: selector,
      time: 300,
      transition:
        {"transition-all ease-out duration-300",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
         "opacity-100 translate-y-0 sm:scale-100"}
    )
  end

  def hide(js \\ %JS{}, selector) do
    JS.hide(js,
      to: selector,
      time: 200,
      transition:
        {"transition-all ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
    )
  end

  @doc """
  Translates an error message using gettext.
  """
  def translate_error({msg, opts}) do
    # When using gettext, we typically pass the strings we want
    # to translate as a static argument:
    #
    #     # Translate the number of files with plural rules
    #     dngettext("errors", "1 file", "%{count} files", count)
    #
    # However the error messages in our forms and APIs are generated
    # dynamically, so we need to translate them by calling Gettext
    # with our gettext backend as first argument. Translations are
    # available in the errors.po file (as we use the "errors" domain).
    if count = opts[:count] do
      Gettext.dngettext(MvWeb.Gettext, "errors", msg, msg, count, opts)
    else
      Gettext.dgettext(MvWeb.Gettext, "errors", msg, opts)
    end
  end

  @doc """
  Translates the errors for a field from a keyword list of errors.
  """
  def translate_errors(errors, field) when is_list(errors) do
    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
  end

  @doc """
  Renders a list of items with name and value pairs.

  ## Examples
      <.generic_list items={[
        {item.name, item.value},
        {other.name, other.value}
      ]} />
  """
  attr :items, :list, required: true, doc: "List of {name, value} tuples"

  def generic_list(assigns) do
    ~H"""
    <div class="mt-14">
      <dl class="-my-4 divide-y divide-zinc-100">
        <div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
          <dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
          <dd class="text-zinc-700">{value}</dd>
        </div>
      </dl>
    </div>
    """
  end
end