import { PageHead } from "~/components/PageHead";
import { A } from "@solidjs/router";
import { createSignal, onMount, onCleanup } from "solid-js";
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
import { glitchText } from "~/lib/client-utils";

const DownloadButton = ({
  onClick,
  children
}: {
  onClick: () => void;
  children: Element | string;
}) => {
  return (
    <button
      onClick={onClick}
      class="bg-green hover:bg-green/90 cursor-pointer rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
    >
      {children}
    </button>
  );
};

export default function DownloadsPage() {
  const [LaLText, setLaLText] = createSignal("Life and Lineage");
  const [SwAText, setSwAText] = createSignal("Shapes with Abigail!");
  const [corkText, setCorkText] = createSignal("Cork");
  const [gazeText, setGazeText] = createSignal("Gaze");

  const download = (assetName: string) => {
    // Call the tRPC endpoint directly
    import("~/lib/api").then(({ api }) => {
      api.downloads.getDownloadUrl
        .query({ asset_name: assetName })
        .then((data) => {
          const url = data.downloadURL;
          window.location.href = url;
        })
        .catch((error) => {
          console.error("Download error:", error);
          // Optionally show user a message
          alert("Failed to initiate download. Please try again.");
        });
    });
  };

  onMount(() => {
    const lalInterval = glitchText(LaLText(), setLaLText);
    const swaInterval = glitchText(SwAText(), setSwAText);
    const corkInterval = glitchText(corkText(), setCorkText);
    const gazeInterval = glitchText(gazeText(), setGazeText);

    onCleanup(() => {
      clearInterval(lalInterval);
      clearInterval(swaInterval);
      clearInterval(corkInterval);
      clearInterval(gazeInterval);
    });
  });

  return (
    <>
      <PageHead
        title="Downloads"
        description="Download Life and Lineage, Shapes with Abigail, and Cork for macOS. Available on iOS, Android, and macOS."
      />

      <div class="bg-base relative min-h-screen overflow-hidden px-4 pt-[15vh] pb-12 md:px-8">
        {/* Subtle scanline effect */}
        <div class="pointer-events-none absolute inset-0 opacity-5">
          <div
            class="h-full w-full"
            style={{
              "background-image":
                "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px)"
            }}
          />
        </div>

        <div class="relative z-10">
          <div class="text-center text-xl italic">
            Ordered by date of initial release
          </div>
          <div class="mx-auto max-w-5xl space-y-16">
            {/* Gaze */}
            <div class="border-overlay0 rounded-lg border p-6 md:p-8">
              <h2 class="text-text mb-6 font-mono text-2xl">
                <span class="text-yellow">{">"}</span> {gazeText()}
              </h2>

              <div class="flex flex-col items-center gap-3">
                <span class="text-subtext0 font-mono text-sm">
                  platform: macOS (14.6+)
                </span>
                <DownloadButton onClick={() => download("gaze")}>
                  download.dmg
                </DownloadButton>
              </div>
            </div>
            <div class="border-overlay0 rounded-lg border p-6 md:p-8">
              <h2 class="text-text mb-6 font-mono text-2xl">
                <span class="text-yellow">{">"}</span> {LaLText()}
              </h2>

              <div class="flex flex-col gap-8 md:flex-row md:justify-around">
                <div class="flex flex-col items-center gap-3">
                  <span class="text-subtext0 font-mono text-sm">
                    platform: android
                  </span>
                  <DownloadButton onClick={() => download("lineage")}>
                    download.apk
                  </DownloadButton>
                  <span class="text-subtext1 max-w-xs text-center text-xs italic">
                    # android build not optimized
                  </span>
                </div>

                <div class="flex flex-col items-center gap-3">
                  <span class="text-subtext0 font-mono text-sm">
                    platform: ios
                  </span>
                  <A
                    class="transition-all duration-200 ease-out hover:scale-105 active:scale-95"
                    href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
                  >
                    <DownloadOnAppStore size={50} />
                  </A>
                </div>
              </div>
            </div>
            {/* Cork */}
            <div class="border-overlay0 rounded-lg border p-6 md:p-8">
              <h2 class="text-text mb-6 font-mono text-2xl">
                <span class="text-yellow">{">"}</span> {corkText()}
              </h2>

              <div class="flex flex-col items-center gap-3">
                <span class="text-subtext0 font-mono text-sm">
                  platform: macOS (13+)
                </span>
                <DownloadButton onClick={() => download("cork")}>
                  download.zip
                </DownloadButton>
                <span class="text-subtext1 text-xs">
                  # unzip → drag to /Applications
                </span>
              </div>
            </div>

            {/* Shapes with Abigail */}
            <div class="border-overlay0 rounded-lg border p-6 md:p-8">
              <h2 class="text-text mb-6 font-mono text-2xl">
                <span class="text-yellow">{">"}</span> {SwAText()}
              </h2>

              <div class="flex flex-col gap-8 md:flex-row md:justify-around">
                <div class="flex flex-col items-center gap-3">
                  <span class="text-subtext0 font-mono text-sm">
                    platform: android
                  </span>
                  <DownloadButton
                    onClick={() => download("shapes-with-abigail")}
                  >
                    download.apk
                  </DownloadButton>
                </div>

                <div class="flex flex-col items-center gap-3">
                  <span class="text-subtext0 font-mono text-sm">
                    platform: ios
                  </span>
                  <A
                    class="transition-all duration-200 ease-out hover:scale-105 active:scale-95"
                    href="https://apps.apple.com/us/app/shapes-with-abigail/id6474561117"
                  >
                    <DownloadOnAppStore size={50} />
                  </A>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}