cobblemon-ui/lib/cobblemon_ui_web/live/pokemon_components.ex

defmodule CobblemonUiWeb.PokemonComponents do
  use CobblemonUiWeb, :html

  alias CobblemonUiWeb.TypeIcons

  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 gap-3">
        <%!-- Sprite (party only) --%>
        <div
          :if={!@compact}
          class="w-14 h-14 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0 overflow-hidden"
        >
          <img
            src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
            alt={@pokemon.species}
            class="w-12 h-12 object-contain drop-shadow-sm"
          />
        </div>
        <div class="flex-1 min-w-0">
          <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={!@tier}
                title="Tier data not downloaded"
                class={[
                  "inline-flex items-center justify-center font-black rounded leading-none shrink-0",
                  "bg-base-300/20 text-base-content/25 ring-1 ring-base-300/30",
                  if(@compact, do: "text-[9px] w-4 h-4", else: "text-[10px] w-5 h-5")
                ]}
              >
                ?
              </div>
              <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>
      </div>
    </div>
    """
  end

  attr :pokemon, :map, required: true
  attr :index, :integer, required: true
  attr :tier, :string, default: nil
  attr :types, :list, default: []
  attr :evo_tiers, :list, default: []

  def pc_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 cursor-pointer hover:shadow-md hover:shadow-primary/5 p-3"
    >
      <div class="flex items-start gap-2.5">
        <%!-- Sprite --%>
        <div class="w-12 h-12 rounded-lg bg-base-300/15 flex items-center justify-center shrink-0 overflow-hidden">
          <img
            src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
            alt={@pokemon.species}
            class="w-10 h-10 object-contain drop-shadow-sm"
          />
        </div>
        <%!-- Info --%>
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-1.5">
            <span class="text-xs font-semibold text-base-content/90 capitalize truncate group-hover:text-primary transition-colors">
              {@pokemon.species || "Unknown"}
            </span>
            <.tier_badge :if={@tier} tier={@tier} species={@pokemon.species} compact={true} />
          </div>
          <p class="text-[10px] text-base-content/40 mt-0.5">
            Lv. {@pokemon.level || "?"}
          </p>
          <%!-- Types --%>
          <div :if={@types != []} class="flex flex-wrap gap-1 mt-1.5">
            <span
              :for={type <- @types}
              class={[
                "inline-block text-[9px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded leading-none text-white/90",
                CobblemonUi.TypeChart.type_color(type)
              ]}
            >
              {type}
            </span>
          </div>
        </div>
      </div>
      <%!-- Evolution tiers --%>
      <div :if={@evo_tiers != []} class="mt-2 pt-2 border-t border-base-content/5">
        <div class="flex items-center gap-1 flex-wrap">
          <span class="text-[9px] text-base-content/25 uppercase tracking-wider font-medium mr-0.5">
            Evo
          </span>
          <%= for evo <- @evo_tiers do %>
            <div class="flex items-center gap-1 rounded bg-base-300/15 px-1.5 py-0.5">
              <img
                src={CobblemonUi.SpriteCache.sprite_url(evo.species)}
                alt={evo.species}
                class="w-4 h-4 object-contain opacity-70"
              />
              <span class="text-[9px] text-base-content/40 capitalize">{evo.species}</span>
              <.tier_badge :if={evo.tier} tier={evo.tier} species={evo.species} compact={true} />
            </div>
          <% end %>
        </div>
      </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-16 h-16 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden">
            <img
              src={CobblemonUi.SpriteCache.sprite_url(@pokemon.species || "")}
              alt={@pokemon.species}
              class="w-14 h-14 object-contain drop-shadow-sm"
            />
          </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={!@tier}
                class="inline-flex items-center gap-1 text-xs text-base-content/30 font-normal italic"
                title="Tier data not downloaded"
              >
                <.icon name="hero-arrow-down-tray" class="size-3" /> tier unavailable
              </span>
              <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

  # --- Type Chart Component ---

  alias CobblemonUi.TypeChart

  def type_chart(assigns) do
    chart = TypeChart.defensive_chart()
    types = TypeChart.types()

    assigns = assign(assigns, chart: chart, types: types)

    ~H"""
    <div class="mt-8 rounded-xl border border-base-300/40 bg-base-200/30 overflow-hidden">
      <div class="px-5 py-4 border-b border-base-300/30 flex items-center gap-3">
        <div class="w-10 h-10 rounded-lg bg-primary/15 flex items-center justify-center shrink-0">
          <.icon name="hero-table-cells" class="size-5 text-primary/80" />
        </div>
        <div>
          <h3 class="font-bold text-base-content text-lg">Type Chart</h3>
          <p class="text-xs text-base-content/40">Weaknesses & Resistances</p>
        </div>
      </div>

      <div class="p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        <.type_chart_card :for={t <- @types} type_name={t} matchups={@chart[t]} />
      </div>
    </div>
    """
  end

  attr :type_name, :string, required: true
  attr :matchups, :map, required: true

  def type_chart_card(assigns) do
    ~H"""
    <div class="flex items-start gap-3 rounded-xl bg-base-200/40 border border-base-300/20 px-3.5 py-3 hover:bg-base-200/60 transition-colors">
      <%!-- Type icon --%>
      <div class={[
        "w-11 h-11 flex items-center justify-center shrink-0 mt-0.5",
        TypeChart.type_text_color(@type_name)
      ]}>
        <TypeIcons.type_icon type={@type_name} class="w-8 h-8" />
      </div>
      <%!-- Weakness / Resistance rows --%>
      <div class="flex-1 min-w-0">
        <p class="text-xs font-bold text-base-content/80 capitalize mb-1.5">{@type_name}</p>
        <%!-- Weakness row --%>
        <div class="flex items-center gap-1.5 mb-1">
          <span class="text-[9px] text-error/70 font-semibold uppercase tracking-wider w-[52px] shrink-0">
            Weak
          </span>
          <div class="flex flex-wrap gap-0.5">
            <.type_mini_icon :for={t <- @matchups.weak_to} type_name={t} />
            <span :if={@matchups.weak_to == []} class="text-[9px] text-base-content/20 italic">
              —
            </span>
          </div>
        </div>
        <%!-- Resistance row --%>
        <div class="flex items-center gap-1.5 mb-1">
          <span class="text-[9px] text-success/70 font-semibold uppercase tracking-wider w-[52px] shrink-0">
            Resist
          </span>
          <div class="flex flex-wrap gap-0.5">
            <.type_mini_icon :for={t <- @matchups.resists} type_name={t} />
            <span :if={@matchups.resists == []} class="text-[9px] text-base-content/20 italic">
              —
            </span>
          </div>
        </div>
        <%!-- Immune row (only if applicable) --%>
        <div :if={@matchups.immune_to != []} class="flex items-center gap-1.5">
          <span class="text-[9px] text-info/70 font-semibold uppercase tracking-wider w-[52px] shrink-0">
            Immune
          </span>
          <div class="flex flex-wrap gap-0.5">
            <.type_mini_icon :for={t <- @matchups.immune_to} type_name={t} />
          </div>
        </div>
      </div>
    </div>
    """
  end

  attr :type_name, :string, required: true

  def type_mini_icon(assigns) do
    ~H"""
    <span
      class={[
        "inline-flex items-center justify-center w-5 h-5",
        TypeChart.type_text_color(@type_name)
      ]}
      title={@type_name}
    >
      <TypeIcons.type_icon type={@type_name} class="w-4 h-4" />
    </span>
    """
  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