<template>
  <header class="hero-section-gradient from-emerald-700 to-teal-800 py-16">
    <div class="hero-container">
      <h1 class="hero-title">{{ t('stores.title') }}</h1>
      <p class="hero-subtitle text-emerald-50">{{ t('stores.subtitle') }}</p>
    </div>
  </header>

  <main class="main-container py-12 px-4 mt-0">
    <div class="st-panel">
      <p class="st-lead">{{ t('stores.lead') }}</p>
    </div>

    <!-- The app first, and not behind a tab: it is what most visitors want, it is the
         only way in on Windows (there is no `curl … | sh` there), and it drives any
         store the site's registry offers. The integrations below are for the machines
         where a window is the wrong shape. -->
    <section class="st-section st-app">
      <h2 class="st-app-title">
        <i class="fa-solid fa-window-maximize st-app-icon"></i> {{ t('stores.clientTitle') }}
      </h2>
      <div class="st-app-grid">
        <div>
          <p class="st-app-lead">{{ t('stores.clientDesc') }}</p>
          <ul class="st-client-points">
            <li><i class="fa-solid fa-check"></i> {{ t('stores.clientPointSetup') }}</li>
            <li><i class="fa-solid fa-check"></i> {{ t('stores.clientPointBrowse') }}</li>
            <li><i class="fa-solid fa-check"></i> {{ t('stores.clientPointSame') }}</li>
          </ul>
          <div class="st-links">
            <a :href="client.releasesUrl" target="_blank" rel="noopener noreferrer"
               class="st-link st-link-cta">
              <i class="fa-solid fa-download"></i> {{ t('stores.clientDownload') }}
            </a>
            <a :href="client.repoUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-dark">
              <i class="fa-solid fa-code-branch"></i> {{ t('stores.repo') }}
            </a>
            <a :href="client.wikiUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-indigo">
              <i class="fa-solid fa-book"></i> {{ t('stores.docs') }}
            </a>
          </div>
          <p class="st-app-platforms">
            <i class="fa-brands fa-linux"></i> <i class="fa-brands fa-apple"></i>
            <i class="fa-brands fa-windows"></i> {{ t('stores.clientPlatforms') }}
          </p>
        </div>

        <!-- The window itself, because a store is a thing you look at. Eager, with its
             dimensions given: it sits in the first screen, so lazy-loading it would only
             buy a reflow. -->
        <figure class="st-app-shot">
          <img :src="clientScreenshot" :alt="t('stores.clientShotAlt')" width="2304" height="1664">
        </figure>
      </div>
      <p class="st-note">{{ t('stores.clientNote') }}</p>
    </section>

    <!-- The other ways in. Same catalog, same engine underneath; what differs is the
         host, so where you are installing is the only thing to choose. -->
    <section class="st-section">
      <h2 class="st-section-title">{{ t('stores.chooseTitle') }}</h2>
      <p class="st-section-desc">{{ t('stores.chooseDesc') }}</p>
      <div class="st-devices" role="tablist">
        <button
          v-for="d in devices"
          :key="d.id"
          class="st-device"
          :class="{ 'st-device-active': d.id === device }"
          role="tab"
          :aria-selected="d.id === device"
          @click="select(d.id)"
        >
          <i :class="d.icon" class="st-device-icon"></i>
          <span class="st-device-name">{{ t(`stores.${d.id}.name`) }}</span>
          <span class="st-device-tagline">{{ t(`stores.${d.id}.tagline`) }}</span>
        </button>
      </div>

      <div class="st-links">
        <a :href="current.repoUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-dark">
          <i class="fa-solid fa-code-branch"></i> {{ t('stores.repo') }}
        </a>
        <a :href="current.wikiUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-indigo">
          <i class="fa-solid fa-book"></i> {{ t('stores.docs') }}
        </a>
        <a :href="current.projectUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-emerald">
          <i :class="current.icon"></i> {{ t(`stores.${device}.site`) }}
        </a>
      </div>
    </section>

    <section class="st-section">
      <h2 class="st-section-title">
        <span class="st-step">1</span> {{ t('stores.installTitle') }}
      </h2>
      <p class="st-section-desc">{{ t(`stores.${device}.installDesc`) }}</p>
      <CommandBlock :command="current.installCmd" />
      <template v-if="current.afterInstallCmd">
        <p class="st-note">{{ t(`stores.${device}.installNote`) }}</p>
        <CommandBlock :command="current.afterInstallCmd" />
      </template>
      <p v-else class="st-note">{{ t(`stores.${device}.installNote`) }}</p>
    </section>

    <section class="st-section">
      <h2 class="st-section-title">
        <span class="st-step">2</span> {{ t('stores.useTitle') }}
      </h2>
      <p class="st-section-desc">{{ t(`stores.${device}.useDesc`) }}</p>
      <CommandBlock :command="current.cliSnippet" />
    </section>

    <section class="st-section">
      <h2 class="st-section-title">
        <span class="st-step">3</span> {{ t('stores.uninstallTitle') }}
      </h2>
      <p class="st-section-desc">{{ t('stores.uninstallDesc') }}</p>
      <CommandBlock :command="current.uninstallCmd" />
      <p class="st-note">{{ t('stores.uninstallNote') }}</p>
    </section>

    <!-- Below here nothing depends on the device: the cartridges, and the
         engines both stores are built from, are the same either way. -->
    <section class="st-section">
      <h2 class="st-section-title">{{ t('stores.platformsTitle') }}</h2>
      <p class="st-section-desc">{{ t('stores.platformsDesc') }}</p>
      <ul class="st-platforms">
        <li v-for="p in platforms" :key="p.platform" class="st-platform">
          <i :class="p.icon" class="st-platform-icon"></i>
          <span class="st-platform-name">{{ p.label }}</span>
          <code class="st-platform-ext">{{ p.ext }}</code>
        </li>
      </ul>
    </section>

    <section class="st-section st-engine">
      <h2 class="st-section-title">
        <i class="fa-solid fa-cubes st-engine-icon"></i> {{ t('stores.engineTitle') }}
      </h2>
      <p class="st-section-desc">{{ t('stores.engineDesc') }}</p>
      <div class="st-links">
        <a
          v-for="e in engines" :key="e.name" :href="e.url" target="_blank" rel="noopener noreferrer"
          class="st-link st-link-slate"
        >
          <i class="fa-solid fa-code-branch"></i> {{ e.name }}
        </a>
      </div>
    </section>

    <div class="st-back">
      <RouterLink to="/catalog" class="st-back-link">{{ t('catalogShow.back') }}</RouterLink>
    </div>
  </main>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { CONFIG } from '../../lib/config'
import CommandBlock from './CommandBlock.vue'
import clientScreenshot from '../../assets/warpengine-client.png'

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const FORGE = 'https://git.teletypegames.org/stores'
const ENGINES_FORGE = 'https://git.teletypegames.org/engines'

// The graphical client. Its own thing rather than a link on the desktop store: it
// drives any WarpEngine store the site's registry offers, and on Windows it is the
// only way in — there is no `curl … | sh` there.
const CLIENT = {
  repoUrl: `${FORGE}/warp-engine-client`,
  releasesUrl: `${FORGE}/warp-engine-client/releases`,
  wikiUrl: `${CONFIG.wikiBase}/stores/warp-engine-client`,
}

type DeviceId = 'desktop' | 'batocera' | 'retroarch'

const BATOCERA_CLI = '/userdata/system/batocera-store/ttg-store'
const RETROARCH_CLI = '~/.local/bin/ttg-retroarch-store'
const DESKTOP_CLI = '~/.local/bin/ttg-desktop-store'

const devices = [
  {
    id: 'batocera' as DeviceId,
    icon: 'fa-solid fa-tv',
    projectUrl: 'https://batocera.org',
    repoUrl: `${FORGE}/ttg-batocera-store`,
    wikiUrl: `${CONFIG.wikiBase}/stores/ttg-batocera-store`,
    // The installer is served straight from the forge, so this one line is the
    // whole install on the device.
    installCmd: `curl -fsSL ${FORGE}/ttg-batocera-store/raw/branch/master/install.sh | sh`,
    afterInstallCmd: 'batocera-es-swissknife --restart',
    uninstallCmd: `curl -fsSL ${FORGE}/ttg-batocera-store/raw/branch/master/uninstall.sh | sh`,
    cliSnippet: [
      `${BATOCERA_CLI} list      # compatible catalog entries`,
      `${BATOCERA_CLI} sync      # download everything new`,
      `${BATOCERA_CLI} remove c64demo`,
    ].join('\n'),
  },
  {
    id: 'desktop' as DeviceId,
    icon: 'fa-solid fa-desktop',
    projectUrl: 'https://teletypegames.org',
    repoUrl: `${FORGE}/ttg-desktop-store`,
    wikiUrl: `${CONFIG.wikiBase}/stores/ttg-desktop-store`,
    installCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/install.sh | sh`,
    afterInstallCmd: '',
    uninstallCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/uninstall.sh | sh`,
    cliSnippet: [
      `${DESKTOP_CLI} paths     # where things go on this machine`,
      `${DESKTOP_CLI} list      # what is installable here, and how`,
      `${DESKTOP_CLI} sync      # install everything new`,
      `${DESKTOP_CLI} remove pong`,
    ].join('\n'),
  },
  {
    id: 'retroarch' as DeviceId,
    icon: 'fa-solid fa-gamepad',
    projectUrl: 'https://www.retroarch.com',
    repoUrl: `${FORGE}/ttg-retroarch-store`,
    wikiUrl: `${CONFIG.wikiBase}/stores/ttg-retroarch-store`,
    installCmd: `curl -fsSL ${FORGE}/ttg-retroarch-store/raw/branch/master/install.sh | sh`,
    afterInstallCmd: '',
    uninstallCmd: `curl -fsSL ${FORGE}/ttg-retroarch-store/raw/branch/master/uninstall.sh | sh`,
    cliSnippet: [
      `${RETROARCH_CLI} paths    # where things go, and whether the cores are there`,
      `${RETROARCH_CLI} list     # compatible catalog entries`,
      `${RETROARCH_CLI} sync     # download everything new`,
      `${RETROARCH_CLI} remove c64demo`,
    ].join('\n'),
  },
]

// `?device=` keeps a link to one of the two shareable, and lets /batocera
// redirect here without losing which store the visitor came for.
const initial = devices.some((d) => d.id === route.query.device)
  ? (route.query.device as DeviceId)
  : 'desktop'
const device = ref<DeviceId>(initial)
const current = computed(() => devices.find((d) => d.id === device.value) ?? devices[0])
// The app is not tied to a device tab: it drives whichever store the site's registry
// offers, so it stands above the chooser rather than inside it.
const client = CLIENT

function select(id: DeviceId) {
  device.value = id
  router.replace({ query: { ...route.query, device: id } })
}

const platforms = [
  { platform: 'c64', label: 'Commodore 64 (VICE)', ext: '.prg', icon: 'fa-solid fa-floppy-disk' },
  { platform: 'tic80', label: 'TIC-80', ext: '.tic', icon: 'fa-solid fa-tv' },
]

const engines = [
  { name: 'warpstore', url: `${ENGINES_FORGE}/warpstore` },
  { name: 'warp-engine-batocera-store', url: `${FORGE}/warp-engine-batocera-store` },
  { name: 'warp-engine-retroarch-store', url: `${FORGE}/warp-engine-retroarch-store` },
]
</script>

<style scoped>
.st-panel {
  @apply bg-white rounded-2xl shadow-xl border border-gray-100 p-6 md:p-8;
}
.st-lead {
  @apply text-gray-600 leading-relaxed;
}
.st-links {
  @apply flex flex-wrap gap-3;
}
.st-link {
  @apply inline-flex items-center gap-2 font-bold py-2.5 px-5 rounded-xl text-sm text-white transition-all active:scale-95;
}
.st-link-dark { @apply bg-slate-800 hover:bg-slate-900 shadow-lg shadow-slate-800/20; }
.st-link-slate { @apply bg-slate-600 hover:bg-slate-700 shadow-lg shadow-slate-600/20; }
.st-link-indigo { @apply bg-indigo-600 hover:bg-indigo-700 shadow-lg shadow-indigo-600/20; }
.st-link-emerald { @apply bg-emerald-600 hover:bg-emerald-700 shadow-lg shadow-emerald-600/20; }

.st-section {
  @apply bg-white rounded-2xl shadow-xl border border-gray-100 p-6 md:p-8 mt-6;
}
.st-section-title {
  @apply flex items-center gap-3 text-xl font-bold text-gray-900 mb-2;
}
.st-step {
  @apply inline-flex items-center justify-center w-7 h-7 rounded-full bg-emerald-100 text-emerald-700 text-sm font-bold;
}
.st-section-desc {
  @apply text-gray-600 mb-4;
}
.st-note {
  @apply text-gray-600 mt-4 mb-3 text-sm;
}

.st-devices {
  @apply grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6;
}
.st-device {
  @apply flex flex-col items-start gap-1 text-left bg-gray-50 border-2 border-gray-100 rounded-xl px-4 py-3 transition-all hover:border-emerald-200 active:scale-95;
}
.st-device-active {
  @apply bg-emerald-50 border-emerald-500;
}
.st-device-icon {
  @apply text-gray-400;
}
.st-device-active .st-device-icon {
  @apply text-emerald-600;
}
.st-device-name {
  @apply font-bold text-gray-900;
}
.st-device-tagline {
  @apply text-sm text-gray-500;
}

.st-engine {
  @apply bg-gray-50;
}
/* The app leads the page, so it is the one section that looks like an offer rather
   than a paragraph. */
.st-app {
  @apply bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200;
}
.st-app-title {
  @apply text-2xl font-bold text-gray-900 mb-2 flex items-center gap-3;
}
.st-app-icon {
  @apply text-emerald-500 text-xl;
}
.st-app-lead {
  @apply text-gray-700 text-lg leading-relaxed mb-4;
}
.st-app-platforms {
  @apply flex items-center gap-2 text-sm text-gray-500 mt-4;
}
.st-app-grid {
  @apply grid gap-6 items-start lg:grid-cols-2;
}
.st-app-shot {
  @apply rounded-xl overflow-hidden border border-emerald-200/70 shadow-lg bg-gray-900;
}
.st-app-shot img {
  @apply block w-full h-auto;
}
.st-link-cta {
  @apply bg-emerald-600 text-white hover:bg-emerald-700 text-base px-5 py-2.5 font-semibold;
}
.st-client-points {
  @apply space-y-2 mb-5;
}
.st-client-points li {
  @apply flex items-start gap-2 text-gray-700;
}
.st-client-points i {
  @apply text-emerald-500 mt-1 text-sm;
}
.st-engine-icon {
  @apply text-gray-400 text-lg;
}
.st-platforms {
  @apply grid grid-cols-1 sm:grid-cols-2 gap-3;
}
.st-platform {
  @apply flex items-center gap-3 bg-gray-50 border border-gray-100 rounded-xl px-4 py-3;
}
.st-platform-icon {
  @apply text-gray-400;
}
.st-platform-name {
  @apply font-medium text-gray-800 flex-grow;
}
.st-platform-ext {
  @apply font-mono text-xs text-purple-600 bg-purple-50 px-2 py-0.5 rounded;
}
.st-back {
  @apply mt-8 text-center;
}
.st-back-link {
  @apply text-gray-400 hover:text-gray-600 text-sm font-medium transition-colors;
}
</style>
