defmodule CobblemonUiWeb.BattleComponents do
  use CobblemonUiWeb, :html

  import CobblemonUiWeb.PokemonComponents, only: [tier_badge: 1]

  attr :battle, :map, required: true
  attr :player_id, :string, required: true
  attr :tier_list, :map, default: %{}
  attr :evolutions, :map, default: %{}

  def battle_panel(assigns) do
    ~H"""
    <div class="rounded-xl border border-error/30 bg-error/5 overflow-hidden mb-6">
      <div class="px-5 py-3 border-b border-error/20 flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-error animate-pulse inline-block"></span>
        <span class="text-sm font-semibold text-error/70">Active Battle</span>
      </div>
      <div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-3 relative">
        <div class="hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2 items-center justify-center z-10 pointer-events-none">
          <span class="text-base font-black text-base-content/20 bg-base-200/80 px-2 py-1 rounded-lg">
            VS
          </span>
        </div>
        <%= for actor <- @battle.actors do %>
          <div class={[
            "rounded-lg border p-3",
            if(actor.player_id == @player_id,
              do: "border-primary/25 bg-primary/5",
              else: "border-warning/25 bg-warning/5"
            )
          ]}>
            <div class="flex items-center gap-2 mb-3">
              <div class={[
                "w-7 h-7 rounded-md flex items-center justify-center shrink-0",
                if(actor.type == "player", do: "bg-primary/15", else: "bg-warning/15")
              ]}>
                <%= if actor.type == "player" do %>
                  <.icon name="hero-user" class="size-3.5 text-primary" />
                <% else %>
                  <.icon name="hero-cpu-chip" class="size-3.5 text-warning" />
                <% end %>
              </div>
              <div>
                <p class="text-sm font-semibold text-base-content">{actor.name}</p>
                <p class={[
                  "text-[10px] uppercase font-medium tracking-wide",
                  if(actor.type == "player", do: "text-primary/60", else: "text-warning/60")
                ]}>
                  {actor.type}
                </p>
              </div>
            </div>
            <%= for poke <- actor.active_pokemon do %>
              <% tier = Map.get(@tier_list, String.downcase(poke.species || ""), nil) %>
              <% species_key = String.downcase(poke.species || "") %>
              <% is_opponent = actor.player_id != @player_id %>
              <% evos = if is_opponent, do: Map.get(@evolutions, species_key, []), else: [] %>
              <div class="rounded-md bg-base-100/50 border border-base-300/30 px-3 py-2">
                <div class="flex items-center gap-3">
                  <%!-- Sprite --%>
                  <div class="w-14 h-14 rounded-lg bg-base-300/20 flex items-center justify-center shrink-0 overflow-hidden">
                    <img
                      src={CobblemonUi.SpriteCache.sprite_url(species_key)}
                      alt={poke.species}
                      class="w-12 h-12 object-contain drop-shadow-sm"
                    />
                  </div>
                  <%!-- Info --%>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 mb-1">
                      <span class="text-sm font-bold text-base-content capitalize">
                        {poke.species}
                      </span>
                      <span class="text-[10px] text-base-content/40 bg-base-300/40 px-1.5 py-0.5 rounded font-mono">
                        Lv.{poke.level}
                      </span>
                      <.tier_badge :if={tier} tier={tier} species={poke.species} compact={true} />
                    </div>
                    <div class="flex items-center justify-between mb-1">
                      <span class="text-[11px] text-base-content/40">HP</span>
                      <span class="text-xs font-mono text-base-content/50">
                        {poke.hp}/{poke.max_hp}
                      </span>
                    </div>
                    <div class="w-full h-1.5 rounded-full bg-base-300/50 overflow-hidden">
                      <div
                        class={[
                          "h-full rounded-full transition-all",
                          cond do
                            poke.max_hp == 0 -> "bg-base-content/20"
                            poke.hp / poke.max_hp > 0.5 -> "bg-success"
                            poke.hp / poke.max_hp > 0.2 -> "bg-warning"
                            true -> "bg-error"
                          end
                        ]}
                        style={"width: #{if poke.max_hp > 0, do: Float.round(poke.hp / poke.max_hp * 100, 1), else: 0}%"}
                      />
                    </div>
                  </div>
                </div>
                <%!-- Evolution info for opponent Pokémon --%>
                <div :if={evos != []} class="mt-2 pt-2 border-t border-base-content/5">
                  <div class="flex items-center gap-1.5 mb-1.5">
                    <.icon name="hero-arrow-trending-up" class="size-3 text-accent/50" />
                    <span class="text-[10px] uppercase font-medium tracking-wider text-base-content/30">
                      Evolves into
                    </span>
                  </div>
                  <div class="flex flex-wrap gap-1.5">
                    <%= for evo <- evos do %>
                      <% evo_tier = Map.get(@tier_list, evo, nil) %>
                      <div class="flex items-center gap-1.5 rounded-md bg-base-300/20 px-2 py-1">
                        <img
                          src={CobblemonUi.SpriteCache.sprite_url(evo)}
                          alt={evo}
                          class="w-6 h-6 object-contain opacity-80"
                        />
                        <span class="text-xs font-semibold text-base-content/50 capitalize">
                          {evo}
                        </span>
                        <.tier_badge :if={evo_tier} tier={evo_tier} species={evo} compact={true} />
                      </div>
                    <% end %>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    """
  end
end