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

  <main class="main-container py-12 px-4 mt-0">
    <div v-if="error" class="builds-error">{{ error }}</div>

    <SkeletonCard v-else-if="!data" :count="3" />

    <!-- Desktop table -->
    <div v-else class="builds-desktop">
      <div class="builds-table-wrap">
        <table class="builds-table">
          <thead>
            <tr>
              <th rowspan="2" class="builds-th-engine">Engine</th>
              <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" :class="['builds-th-group', group.color]">
                <i :class="group.icon" class="builds-group-icon"></i>
                <span class="builds-group-label">{{ group.label }}</span>
              </th>
            </tr>
            <tr>
              <template v-for="group in columnGroups" :key="group.label">
                <th v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-th-sub', group.color, { 'builds-group-start': colIdx === 0 }]">
                  <i :class="group.icon" class="builds-sub-icon"></i>
                  {{ col.sub }}
                </th>
              </template>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
              <td class="builds-td-engine">
                <i :class="engineIcons[platform as string] || defaultEngineIcon" class="builds-engine-icon"></i>
                {{ info.label }}
              </td>
              <template v-for="group in columnGroups" :key="group.label">
                <td v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-td-kind', group.color, { 'builds-group-start': colIdx === 0 }]">
                  <i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
                  <i v-else class="fa-solid fa-xmark builds-xmark"></i>
                </td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Mobile cards -->
    <div v-if="data" class="builds-mobile">
      <div v-for="(info, platform) in data.platforms" :key="platform" class="builds-card">
        <h3 class="builds-card-title">
          <i :class="engineIcons[platform as string] || defaultEngineIcon" class="builds-engine-icon"></i>
          {{ info.label }}
        </h3>
        <div v-for="group in columnGroups" :key="group.label" :class="['builds-card-group', group.color]">
          <div class="builds-card-group-header">
            <i :class="group.icon" class="builds-card-group-icon"></i>
            <span>{{ group.label }}</span>
          </div>
          <div class="builds-card-kinds">
            <div v-for="col in group.kinds" :key="col.kind" class="builds-card-kind">
              <i :class="info.kinds.includes(col.kind) ? 'fa-solid fa-check builds-check' : 'fa-solid fa-xmark builds-xmark'"></i>
              <span class="builds-card-kind-label">{{ col.sub }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

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

<script setup lang="ts">
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useBuildsStore } from '../../stores/builds.store'
import SkeletonCard from '../../components/SkeletonCard.vue'

const { t } = useI18n()

const store = useBuildsStore()
const { data, error } = storeToRefs(store)

const engineIcons: Record<string, string> = {
  tic80: 'fa-solid fa-tv',
  ebitengine: 'fa-brands fa-golang',
  love: 'fa-solid fa-heart',
  godot: 'fa-solid fa-robot',
  c64: 'fa-solid fa-floppy-disk',
  bevy: 'fa-solid fa-cubes',
  phaser: 'fa-solid fa-bolt',
}
const defaultEngineIcon = 'fa-solid fa-cube'

const columnGroups = [
  {
    label: 'Windows',
    icon: 'fa-brands fa-windows',
    color: 'group-blue',
    kinds: [
      { kind: 'win_x64', sub: '64 bit' },
      { kind: 'win_x86', sub: '32 bit' },
    ],
  },
  {
    label: 'Linux',
    icon: 'fa-brands fa-linux',
    color: 'group-amber',
    kinds: [
      { kind: 'linux_x64', sub: '64 bit' },
      { kind: 'linux_arm64', sub: 'ARM 64 bit' },
    ],
  },
  {
    label: 'Mac',
    icon: 'fa-brands fa-apple',
    color: 'group-slate',
    kinds: [
      { kind: 'mac_x64', sub: 'Intel' },
      { kind: 'mac_arm64', sub: 'ARM' },
      { kind: 'mac_universal', sub: 'Universal' },
    ],
  },
  {
    label: 'Web',
    icon: 'fa-solid fa-globe',
    color: 'group-green',
    kinds: [
      { kind: 'html', sub: 'HTML5' },
    ],
  },
  {
    label: 'Cartridge',
    icon: 'fa-solid fa-gamepad',
    color: 'group-purple',
    kinds: [
      { kind: 'cartridge', sub: 'Native' },
    ],
  },
  {
    label: 'Others',
    icon: 'fa-solid fa-folder-open',
    color: 'group-gray',
    kinds: [
      { kind: 'source', sub: 'Source' },
      { kind: 'docs', sub: 'Docs' },
    ],
  },
]

onMounted(() => store.fetch())
</script>

<style scoped>
.builds-error {
  @apply text-center text-red-500 font-bold py-12;
}
.builds-loading {
  @apply text-center text-gray-400 py-12;
}
.builds-table-wrap {
  @apply bg-white rounded-2xl shadow-xl border border-gray-100 overflow-x-auto;
}
.builds-table {
  @apply w-full text-sm;
}
.builds-th-engine {
  @apply px-6 py-4 text-left text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 border-b border-gray-200;
}
.builds-th-group {
  @apply px-2 py-3 text-center border-b border-gray-200;
}
.builds-group-icon {
  @apply text-base;
}
.builds-group-label {
  @apply ml-1.5 text-xs font-bold uppercase tracking-wider;
}
.builds-th-sub {
  @apply px-3 py-2 text-center text-[10px] font-bold uppercase tracking-wider;
}
.builds-sub-icon {
  @apply text-[9px] mr-0.5 opacity-60;
}
.builds-group-start {
  @apply border-l-2;
}

/* Group color themes */
.group-blue .builds-group-icon,
.group-blue .builds-group-label { @apply text-blue-500; }
.th-group.group-blue, th.group-blue { background-color: rgb(239 246 255); }
td.group-blue { background-color: rgb(239 246 255 / 0.4); }
th.group-blue.builds-group-start, td.group-blue.builds-group-start { @apply border-l-blue-300; }

.group-amber .builds-group-icon,
.group-amber .builds-group-label { @apply text-amber-600; }
th.group-amber { background-color: rgb(255 251 235); }
td.group-amber { background-color: rgb(255 251 235 / 0.4); }
th.group-amber.builds-group-start, td.group-amber.builds-group-start { @apply border-l-amber-300; }

.group-slate .builds-group-icon,
.group-slate .builds-group-label { @apply text-slate-500; }
th.group-slate { background-color: rgb(248 250 252); }
td.group-slate { background-color: rgb(248 250 252 / 0.4); }
th.group-slate.builds-group-start, td.group-slate.builds-group-start { @apply border-l-slate-300; }

.group-green .builds-group-icon,
.group-green .builds-group-label { @apply text-emerald-500; }
th.group-green { background-color: rgb(236 253 245); }
td.group-green { background-color: rgb(236 253 245 / 0.4); }
th.group-green.builds-group-start, td.group-green.builds-group-start { @apply border-l-emerald-300; }

.group-purple .builds-group-icon,
.group-purple .builds-group-label { @apply text-purple-500; }
th.group-purple { background-color: rgb(250 245 255); }
td.group-purple { background-color: rgb(250 245 255 / 0.4); }
th.group-purple.builds-group-start, td.group-purple.builds-group-start { @apply border-l-purple-300; }

.group-gray .builds-group-icon,
.group-gray .builds-group-label { @apply text-gray-500; }
th.group-gray { background-color: rgb(249 250 251); }
td.group-gray { background-color: rgb(249 250 251 / 0.4); }
th.group-gray.builds-group-start, td.group-gray.builds-group-start { @apply border-l-gray-300; }

/* Sub-header inherits group tint */
.builds-th-sub.group-blue { @apply text-blue-400; }
.builds-th-sub.group-amber { @apply text-amber-500; }
.builds-th-sub.group-slate { @apply text-slate-400; }
.builds-th-sub.group-green { @apply text-emerald-400; }
.builds-th-sub.group-purple { @apply text-purple-400; }
.builds-th-sub.group-gray { @apply text-gray-400; }
.builds-row {
  @apply border-t border-gray-100 transition-colors;
}
.builds-row:hover td {
  filter: brightness(0.97);
}
.builds-td-engine {
  @apply px-6 py-4 font-bold text-gray-900 whitespace-nowrap;
}
.builds-engine-icon {
  @apply text-gray-400 text-sm mr-2;
}
.builds-td-kind {
  @apply px-3 py-4 text-center;
}
.builds-check {
  @apply text-green-500 text-lg;
}
.builds-xmark {
  @apply text-gray-200 text-lg;
}
/* Responsive visibility */
.builds-desktop {
  @apply hidden md:block;
}
.builds-mobile {
  @apply md:hidden space-y-4;
}

/* Mobile cards */
.builds-card {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-5;
}
.builds-card-title {
  @apply text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-100;
}
.builds-card-group {
  @apply py-2 px-3 rounded-lg my-1;
}
.builds-card-group.group-blue { background-color: rgb(239 246 255 / 0.5); }
.builds-card-group.group-amber { background-color: rgb(255 251 235 / 0.5); }
.builds-card-group.group-slate { background-color: rgb(248 250 252 / 0.5); }
.builds-card-group.group-green { background-color: rgb(236 253 245 / 0.5); }
.builds-card-group.group-purple { background-color: rgb(250 245 255 / 0.5); }
.builds-card-group.group-gray { background-color: rgb(249 250 251 / 0.5); }

.builds-card-group-header {
  @apply flex items-center gap-2 text-xs font-bold uppercase tracking-wider mb-2;
}
.builds-card-group-icon {
  @apply text-sm;
}
.builds-card-kinds {
  @apply flex flex-wrap gap-x-5 gap-y-1 pl-5 mb-2;
}
.builds-card-kind {
  @apply flex items-center gap-1.5 text-sm;
}
.builds-card-kind-label {
  @apply text-gray-600;
}

.builds-back {
  @apply mt-8 text-center;
}
.builds-back-link {
  @apply text-gray-400 hover:text-gray-600 text-sm font-medium transition-colors;
}
</style>
