defmodule WandererAppWeb.Layouts do
  use WandererAppWeb, :html

  embed_templates "layouts/*"

  attr :rtt_class, :string

  def ping_container(assigns) do
    ~H"""
    <div
      id="ping-container"
      class={[
        "flex flex-col p-4 items-center absolute bottom-28 left-1 gap-2 tooltip tooltip-right text-gray-400 hover:text-white",
        @rtt_class
      ]}
      phx-hook="Ping"
      phx-update="ignore"
    >
      <.icon name="hero-wifi-solid" class="h-4 w-4" />
    </div>
    """
  end

  attr :app_version, :string
  attr :enabled, :boolean
  attr :latest_post, :any, default: nil

  def new_version_banner(assigns) do
    ~H"""
    <div
      id="new-version-banner"
      phx-hook="NewVersionUpdate"
      phx-update="ignore"
      data-version={@app_version}
      data-enabled={Jason.encode!(@enabled)}
      class="!z-1000 hidden absolute top-0 left-0 w-full h-full group items-center fade-in-scale text-white !bg-opacity-70 rounded p-px overflow-hidden flex items-center"
    >
      <div class="hs-overlay-backdrop transition duration absolute left-0 top-0 w-full h-full bg-gray-900 bg-opacity-50 dark:bg-opacity-80 dark:bg-neutral-900">
      </div>
      <div class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-6">
        <div class="flex items-center">
          <div class="rounded w-9 h-9 w-[80px] h-[66px] flex items-center justify-center relative z-20">
            <.icon name="hero-chevron-double-right" class="w-9 h-9 mr-[-40px]" />
          </div>
          <div id="refresh-area">
            <.live_component module={WandererAppWeb.MapRefresh} id="map-refresh" />
          </div>

          <div class="rounded h-[66px] flex items-center justify-center relative z-20">
            <div class=" flex items-center w-[200px] h-full">
              <.icon name="hero-chevron-double-left" class="w-9 h-9 mr-[20px]" />
              <div class=" flex flex-col items-center justify-center h-full">
                <div class="text-white text-nowrap text-sm [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                  Update Required
                </div>
                <a
                  href="/changelog"
                  target="_blank"
                  class="text-sm link-secondary [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]"
                >
                  What's new?
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-row gap-6 z-20">
          <div
            :if={@latest_post}
            class="bg-gray-800/80 rounded-lg overflow-hidden min-w-[300px] backdrop-blur-sm border border-gray-700"
          >
            <a href={"/news/#{@latest_post.id}"} target="_blank" class="block group/post">
              <div class="relative">
                <img
                  src={@latest_post.cover_image_uri}
                  class="w-[300px] h-[140px] object-cover opacity-80 group-hover/post:opacity-100 transition-opacity"
                />
                <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black/70">
                </div>
                <div class="absolute top-2 left-2 flex items-center gap-1 bg-orange-500/90 px-2 py-0.5 rounded text-xs font-semibold">
                  <.icon name="hero-newspaper-solid" class="w-3 h-3" />
                  <span>Latest News</span>
                </div>
                <div class="absolute bottom-0 left-0 w-full p-3">
                  <% [first_part | rest] = String.split(@latest_post.title, ":", parts: 2) %>
                  <h3 class="text-white text-sm font-bold ccp-font [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                    {first_part}
                  </h3>
                  <p
                    :if={rest != []}
                    class="text-gray-200 text-xs ccp-font text-ellipsis overflow-hidden whitespace-nowrap [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]"
                  >
                    {List.first(rest)}
                  </p>
                </div>
              </div>
            </a>
          </div>

          <div class="bg-gray-800/80 rounded-lg p-4 min-w-[280px] backdrop-blur-sm border border-gray-700">
            <div class="flex items-center gap-2 mb-3">
              <.icon name="hero-gift-solid" class="w-5 h-5 text-green-400" />
              <span class="text-white font-semibold text-sm [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
                Support Wanderer
              </span>
            </div>
            <div class="text-gray-300 text-xs mb-3 [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">
              Buy PLEX from the official EVE Online store using our promocode to support the development.
            </div>
            <div class="flex items-center gap-3">
              <code class="bg-gray-900/60 px-2 py-1 rounded text-green-400 text-sm font-mono border border-gray-600">
                WANDERER
              </code>
              <a
                href="https://www.eveonline.com/plex"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center gap-1 text-sm text-green-400 hover:text-green-300 transition-colors"
              >
                <span>Get PLEX</span>
                <.icon name="hero-arrow-top-right-on-square-mini" class="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end

  def youtube_container(assigns) do
    ~H"""
    <.link
      href="https://www.youtube.com/@wanderer_ltd"
      class="flex flex-col p-4 items-center absolute bottom-52 left-0 gap-2 tooltip tooltip-right text-gray-400 hover:text-white"
    >
      <svg
        width="24px"
        height="24px"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M20.5245 6.00694C20.3025 5.81544 20.0333 5.70603 19.836 5.63863C19.6156 5.56337 19.3637 5.50148 19.0989 5.44892C18.5677 5.34348 17.9037 5.26005 17.1675 5.19491C15.6904 5.06419 13.8392 5 12 5C10.1608 5 8.30956 5.06419 6.83246 5.1949C6.09632 5.26005 5.43231 5.34348 4.9011 5.44891C4.63628 5.50147 4.38443 5.56337 4.16403 5.63863C3.96667 5.70603 3.69746 5.81544 3.47552 6.00694C3.26514 6.18846 3.14612 6.41237 3.07941 6.55976C3.00507 6.724 2.94831 6.90201 2.90314 7.07448C2.81255 7.42043 2.74448 7.83867 2.69272 8.28448C2.58852 9.18195 2.53846 10.299 2.53846 11.409C2.53846 12.5198 2.58859 13.6529 2.69218 14.5835C2.74378 15.047 2.81086 15.4809 2.89786 15.8453C2.97306 16.1603 3.09841 16.5895 3.35221 16.9023C3.58757 17.1925 3.92217 17.324 4.08755 17.3836C4.30223 17.461 4.55045 17.5218 4.80667 17.572C5.32337 17.6733 5.98609 17.7527 6.72664 17.8146C8.2145 17.9389 10.1134 18 12 18C13.8865 18 15.7855 17.9389 17.2733 17.8146C18.0139 17.7527 18.6766 17.6733 19.1933 17.572C19.4495 17.5218 19.6978 17.461 19.9124 17.3836C20.0778 17.324 20.4124 17.1925 20.6478 16.9023C20.9016 16.5895 21.0269 16.1603 21.1021 15.8453C21.1891 15.4809 21.2562 15.047 21.3078 14.5835C21.4114 13.6529 21.4615 12.5198 21.4615 11.409C21.4615 10.299 21.4115 9.18195 21.3073 8.28448C21.2555 7.83868 21.1874 7.42043 21.0969 7.07448C21.0517 6.90201 20.9949 6.72401 20.9206 6.55976C20.8539 6.41236 20.7349 6.18846 20.5245 6.00694Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M14.5385 11.5L10.0962 14.3578L10.0962 8.64207L14.5385 11.5Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </.link>
    """
  end

  def donate_container(assigns) do
    ~H"""
    <.link
      href="https://www.patreon.com/WandererLtd"
      target="_blank"
      class="flex flex-col p-4 items-center absolute bottom-64 left-1 gap-2 tooltip tooltip-right text-gray-400 hover:text-white"
    >
      <.icon name="hero-banknotes-solid" class="h-4 w-4" />
    </.link>
    """
  end

  def feedback_container(assigns) do
    ~H"""
    <.link
      href="https://discord.gg/cafERvDD2k"
      class="flex flex-col p-4 items-center absolute bottom-40 left-1 gap-2 tooltip tooltip-right text-gray-400 hover:text-white"
    >
      <.icon name="hero-hand-thumb-up-solid" class="h-4 w-4" />
    </.link>
    """
  end

  attr :id, :string
  attr :active_tab, :atom
  attr :show_admin, :boolean
  attr :show_sidebar, :boolean
  attr :map_subscriptions_enabled, :boolean

  def sidebar_nav_links(assigns) do
    ~H"""
    <ul class="text-center flex flex-col w-full h-full justify-between">
      <div>
        <div class="dropdown dropdown-right">
          <div tabindex="0" role="button">
            <li class="flex-1 w-full h-14 block text-gray-400 hover:text-white p-3">
              <.icon name="hero-bars-3-solid" class="w-6 h-6" />
            </li>
          </div>
          <ul
            tabindex="0"
            class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
          >
            <li><a href="/changelog">Changelog</a></li>
            <li><a href="/news">News</a></li>
            <li><a href="/license">License</a></li>
            <li><a href="/contacts">Contact Us</a></li>
          </ul>
        </div>
        <div :if={@show_sidebar}>
          <.nav_link
            href="/last"
            active={@active_tab == :map}
            icon="hero-viewfinder-circle-solid"
            tip="Map"
          />
          <.nav_link href="/maps" active={@active_tab == :maps} icon="hero-map-solid" tip="Maps" />
          <.nav_link
            href="/access-lists"
            active={@active_tab == :access_lists}
            icon="hero-user-group-solid"
            tip="Access Lists"
          />
          <.nav_link
            href="/characters"
            active={@active_tab == :characters}
            icon="hero-user-plus-solid"
            tip="Characters"
          />
          <.nav_link
            href="/tracking"
            active={@active_tab == :characters_tracking}
            icon="hero-signal-solid"
            tip="Characters Tracking"
          />
        </div>
      </div>
      <div>
        <div
          :if={@show_sidebar}
          class="bottom-0 left-0 border-t border-gray-600 dropdown dropdown-right dropdown-end"
        >
          <div
            tabindex="0"
            role="button"
            class="h-full w-full text-gray-400 hover:text-white block p-4"
          >
            <.icon name="hero-user-solid" class="w-6 h-6" />
          </div>
          <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
            <li :if={@show_admin}>
              <.link navigate="/admin">
                Admin
              </.link>
            </li>
            <li :if={@show_admin}>
              <.link navigate="/admin/characters">
                Characters
              </.link>
            </li>
            <li :if={@show_admin}>
              <.link navigate="/admin/errors">
                Errors
              </.link>
            </li>
            <li :if={@map_subscriptions_enabled}>
              <.link navigate="/profile">
                Profile
              </.link>
            </li>
            <li>
              <.link navigate="/auth/signout">
                Logout
              </.link>
            </li>
          </ul>
        </div>
        <div
          phx-click="toggle_sidebar"
          class="z-10 flex-1 absolute bottom-0 left-0 w-full h-2 block text-gray-400 hover:bg-[#444]"
        >
        </div>
      </div>
    </ul>
    """
  end

  attr :href, :string
  attr :active, :boolean, default: false
  attr :class, :string, default: ""
  attr :icon, :string
  attr :tip, :string

  defp nav_link(assigns) do
    ~H"""
    <li class={["flex-1 w-full ", @class]}>
      <div class="tooltip tooltip-right" data-tip={@tip}>
        <.link
          navigate={@href}
          class={[
            "h-full w-full text-gray-400 hover:text-white block p-3",
            classes("border-r-4 text-white border-r-orange-400": @active)
          ]}
          aria-current={if @active, do: "true", else: "false"}
        >
          <.icon name={@icon} class="w-6 h-6" />
        </.link>
      </div>
    </li>
    """
  end
end