defmodule CobblemonUiWeb.PokemonComponents do
  use CobblemonUiWeb, :html

  attr :pokemon, :map, required: true
  attr :index, :integer, required: true
  attr :compact, :boolean, default: false
  attr :tier, :string, default: nil

  def pokemon_card(%{pokemon: nil} = assigns) do
    ~H"""
    <div class={[
      "rounded-lg border border-base-300/20 bg-base-200/10 flex items-center justify-center",
      if(@compact, do: "h-16", else: "h-24")
    ]}>
      <span class="text-base-content/15 text-xs">Empty</span>
    </div>
    """
  end

  def pokemon_card(assigns) do
    ~H"""
    <div
      phx-click="select_pokemon"
      phx-value-index={@index}
      class={[
        "group rounded-lg border border-base-300/30 bg-base-200/20 hover:bg-base-200/40",
        "hover:border-primary/30 transition-all duration-150 text-left cursor-pointer",
        "hover:shadow-md hover:shadow-primary/5",
        if(@compact, do: "p-2.5", else: "p-3.5")
      ]}
    >
      <div class="flex items-start justify-between">
        <div class="min-w-0">
          <p class={[
            "font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors",
            if(@compact, do: "text-xs", else: "text-sm")
          ]}>
            {@pokemon.species || "Unknown"}
          </p>
          <p class={[
            "text-base-content/40 mt-0.5",
            if(@compact, do: "text-[10px]", else: "text-xs")
          ]}>
            Lv. {@pokemon.level || "?"}
          </p>
        </div>
        <div class="flex items-center gap-1 shrink-0">
          <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={@compact} />
          <div :if={@pokemon.shiny} title="Shiny">
            <.icon
              name="hero-sparkles"
              class={[
                "text-warning",
                if(@compact, do: "size-3", else: "size-4")
              ]}
            />
          </div>
        </div>
      </div>
      <div :if={!@compact} class="flex items-center gap-2 mt-2">
        <span
          :if={@pokemon.nature}
          class="inline-block text-[10px] px-1.5 py-0.5 rounded bg-base-300/40 text-base-content/50 capitalize"
        >
          {@pokemon.nature}
        </span>
        <span
          :if={@pokemon.gender}
          class={[
            "text-[10px] font-bold",
            gender_color(@pokemon.gender)
          ]}
        >
          {gender_symbol(@pokemon.gender)}
        </span>
      </div>
    </div>
    """
  end

  attr :tier, :string, required: true
  attr :species, :string, required: true
  attr :compact, :boolean, default: false

  def tier_badge(assigns) do
    ~H"""
    <a
      href={"https://rankedboost.com/pokemon/#{String.downcase(@species || "")}/"}
      target="_blank"
      rel="noopener noreferrer"
      class={[
        "inline-flex items-center justify-center font-black rounded leading-none shrink-0 hover:scale-110 transition-transform",
        if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5"),
        case @tier do
          "S" -> "bg-red-500/20 text-red-400 ring-1 ring-red-500/30 hover:bg-red-500/30"
          "A" -> "bg-orange-500/20 text-orange-400 ring-1 ring-orange-500/30 hover:bg-orange-500/30"
          "B" -> "bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30 hover:bg-yellow-500/30"
          "C" -> "bg-green-500/20 text-green-400 ring-1 ring-green-500/30 hover:bg-green-500/30"
          "D" -> "bg-blue-500/20 text-blue-400 ring-1 ring-blue-500/30 hover:bg-blue-500/30"
          _ -> "bg-base-300/30 text-base-content/40 ring-1 ring-base-300/40"
        end
      ]}
    >
      {@tier}
    </a>
    """
  end

  attr :pokemon, :map, required: true
  attr :tier, :string, default: nil

  def pokemon_detail(assigns) do
    ~H"""
    <div class="mt-6 rounded-xl border border-base-300/40 bg-base-200/30 overflow-hidden">
      <%!-- Detail header --%>
      <div class="px-5 py-4 border-b border-base-300/30 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
            <.icon name="hero-bolt" class="size-4 text-primary/70" />
          </div>
          <div>
            <h3 class="font-bold text-base-content capitalize text-lg flex items-center gap-2">
              {@pokemon.species || "Unknown"}
              <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} />
              <span :if={@pokemon.shiny} class="text-warning text-sm" title="Shiny">★</span>
            </h3>
            <p class="text-xs text-base-content/40">
              Level {@pokemon.level || "?"} · {String.capitalize(@pokemon.form || "default")} form
            </p>
          </div>
        </div>
        <button
          id="close-pokemon-detail"
          phx-click="close_pokemon"
          class="btn btn-ghost btn-sm btn-circle hover:bg-base-300/50"
        >
          <.icon name="hero-x-mark" class="size-4" />
        </button>
      </div>

      <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-6">
        <%!-- Info Column --%>
        <div class="space-y-4">
          <div>
            <h4 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-2">
              Details
            </h4>
            <div class="grid grid-cols-2 gap-2">
              <.stat_pill label="Nature" value={@pokemon.nature} />
              <.stat_pill label="Ability" value={@pokemon.ability} />
              <.stat_pill label="Gender" value={@pokemon.gender} />
              <.stat_pill label="Friendship" value={@pokemon.friendship} />
            </div>
          </div>

          <%!-- Moves --%>
          <div>
            <h4 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-2">
              Moves
            </h4>
            <div class="space-y-1.5">
              <div
                :for={move <- @pokemon.moves || []}
                class="px-3 py-1.5 rounded-md bg-base-300/20 border border-base-300/20 text-sm text-base-content/70 capitalize"
              >
                {format_move(move)}
              </div>
              <div :if={(@pokemon.moves || []) == []} class="text-xs text-base-content/30 italic">
                No moves
              </div>
            </div>
          </div>
        </div>

        <%!-- Stats Column --%>
        <div class="space-y-4">
          <%!-- IVs --%>
          <div :if={@pokemon.ivs}>
            <h4 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-2">
              IVs
            </h4>
            <div class="space-y-1.5">
              <.stat_bar
                :for={{stat, val} <- stat_list(@pokemon.ivs)}
                label={format_stat(stat)}
                value={val}
                max={31}
              />
            </div>
          </div>

          <%!-- EVs --%>
          <div :if={@pokemon.evs}>
            <h4 class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-2">
              EVs
              <span class="text-base-content/25 font-normal ml-1">
                ({ev_total(@pokemon.evs)}/510)
              </span>
            </h4>
            <div class="space-y-1.5">
              <.stat_bar
                :for={{stat, val} <- stat_list(@pokemon.evs)}
                label={format_stat(stat)}
                value={val}
                max={252}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end

  attr :label, :string, required: true
  attr :value, :any, required: true

  def stat_pill(assigns) do
    ~H"""
    <div class="px-3 py-2 rounded-lg bg-base-300/15 border border-base-300/15">
      <p class="text-[10px] text-base-content/35 uppercase tracking-wider">{@label}</p>
      <p class="text-sm text-base-content/80 capitalize mt-0.5">{@value || "—"}</p>
    </div>
    """
  end

  attr :label, :string, required: true
  attr :value, :integer, required: true
  attr :max, :integer, required: true

  def stat_bar(assigns) do
    pct = if assigns.max > 0, do: min(assigns.value / assigns.max * 100, 100), else: 0

    color =
      cond do
        pct >= 90 -> "bg-success"
        pct >= 60 -> "bg-info"
        pct >= 30 -> "bg-warning"
        true -> "bg-error/70"
      end

    assigns = assign(assigns, pct: pct, color: color)

    ~H"""
    <div class="flex items-center gap-2">
      <span class="text-[10px] text-base-content/40 w-10 uppercase tracking-wider shrink-0">
        {@label}
      </span>
      <div class="flex-1 h-2 rounded-full bg-base-300/30 overflow-hidden">
        <div
          class={[@color, "h-full rounded-full transition-all duration-500"]}
          style={"width: #{@pct}%"}
        />
      </div>
      <span class="text-xs text-base-content/50 w-8 text-right tabular-nums font-mono">
        {@value}
      </span>
    </div>
    """
  end

  # --- Helpers ---

  defp gender_symbol("male"), do: "♂"
  defp gender_symbol("female"), do: "♀"
  defp gender_symbol(_), do: "—"

  defp gender_color("male"), do: "text-info"
  defp gender_color("female"), do: "text-error"
  defp gender_color(_), do: "text-base-content/40"

  defp format_move(move) when is_binary(move), do: String.replace(move, "_", " ")
  defp format_move(_), do: "—"

  defp format_stat(:hp), do: "HP"
  defp format_stat(:attack), do: "ATK"
  defp format_stat(:defense), do: "DEF"
  defp format_stat(:special_attack), do: "SPA"
  defp format_stat(:special_defense), do: "SPD"
  defp format_stat(:speed), do: "SPE"
  defp format_stat(other), do: to_string(other)

  defp stat_list(stats) when is_map(stats) do
    [:hp, :attack, :defense, :special_attack, :special_defense, :speed]
    |> Enum.map(fn key -> {key, Map.get(stats, key, 0)} end)
  end

  defp stat_list(_), do: []

  defp ev_total(evs) when is_map(evs), do: evs |> Map.values() |> Enum.sum()
  defp ev_total(_), do: 0
end