import "./desktop-promo.css"
import { A, useLocation } from "@solidjs/router"
import { createSignal, Show } from "solid-js"
import { getRequestEvent } from "solid-js/web"
import desktopPromoVideo from "~/asset/lander/desktop-tabs-landscape.mp4"
import { useI18n } from "~/context/i18n"
import { useLanguage } from "~/context/language"
import { strip } from "~/lib/language"

const DISMISSED_COOKIE = "desktop_promo_dismissed"

export function DesktopPromo() {
  const i18n = useI18n()
  const language = useLanguage()
  const location = useLocation()
  const request = getRequestEvent()?.request
  const cookie = request?.headers.get("cookie") ?? (typeof document === "object" ? document.cookie : "")
  const [visible, setVisible] = createSignal(
    !cookie.split(";").some((value) => value.trim() === `${DISMISSED_COOKIE}=1`),
  )
  const hostname = request ? new URL(request.url).hostname : typeof window === "object" ? window.location.hostname : ""
  const primaryHost =
    hostname === "opencode.ai" || hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1"

  return (
    <Show
      when={
        visible() &&
        primaryHost &&
        strip(location.pathname) !== "/download" &&
        !strip(location.pathname).startsWith("/download/")
      }
    >
      <aside data-component="desktop-promo">
        <A href={language.route("/download")} data-slot="desktop-promo-link">
          <video src={desktopPromoVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
          <span data-slot="desktop-promo-copy">
            <strong>{i18n.t("home.promo.title")}</strong>
            <span>
              {i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
            </span>
          </span>
        </A>
        <button
          type="button"
          data-slot="desktop-promo-close"
          onClick={() => {
            document.cookie = `${DISMISSED_COOKIE}=1; Path=/; Max-Age=31536000; SameSite=Lax`
            setVisible(false)
          }}
        >
          <span class="sr-only">{i18n.t("home.promo.close")}</span>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" />
          </svg>
        </button>
      </aside>
    </Show>
  )
}