<template>
  <!-- Mobile: Card view -->
  <div v-if="isMobile" class="package-cards">
    <template v-if="packagesStore.state.packages.length === 0">
      <EmptyState
        icon="mdi-package-variant-remove"
        title="No packages found"
        description="Try adjusting your search filters or check back later." />
    </template>
    <template v-else>
      <PackageCard
        v-for="pkg in packagesStore.state.packages"
        :key="`${pkg.pkgbase}-${pkg.repo}`"
        :pkg="pkg" />
    </template>
  </div>

  <!-- Desktop/Tablet: Table view -->
  <div v-else class="package-table-wrapper">
    <v-table class="package-table">
      <thead>
        <tr>
          <th scope="col">Repository</th>
          <th scope="col">Pkgbase</th>
          <th scope="col">Status</th>
          <th scope="col">Reason</th>
          <th scope="col">
            <span class="header-with-tooltip">
              LTO
              <v-icon icon="mdi-help-circle-outline" size="14" class="header-icon" />
            </span>
            <v-tooltip activator="parent" location="bottom">
              Link time optimization;
              <br />
              Does not guarantee that package is actually built with LTO
            </v-tooltip>
          </th>
          <th scope="col">
            <span class="header-with-tooltip">
              DS
              <v-icon icon="mdi-help-circle-outline" size="14" class="header-icon" />
            </span>
            <v-tooltip activator="parent" location="bottom">
              Debug-symbols available via debuginfod
            </v-tooltip>
          </th>
          <th scope="col">Archlinux Version</th>
          <th scope="col">ALHP Version</th>
          <th scope="col" class="actions-header">Info</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="packagesStore.state.packages.length === 0">
          <td colspan="9">
            <EmptyState
              icon="mdi-package-variant-remove"
              title="No packages found"
              description="Try adjusting your search filters or check back later." />
          </td>
        </tr>
        <template v-else>
          <tr
            v-for="pkg in packagesStore.state.packages"
            :key="`${pkg.pkgbase}-${pkg.repo}`"
            class="package-row">
            <td class="repo-cell">
              <v-chip
                :style="{ backgroundColor: getVersionColor(repoVersion(pkg.repo || '')), color: '#fff' }"
                class="version-chip"
                density="comfortable"
                label
                variant="flat">
                {{ repoVersion(pkg.repo || '') }}
              </v-chip>
              <span class="repo-name">{{ repoName(pkg.repo || '') }}</span>
            </td>
            <td class="pkgbase-cell">
              <span class="pkgbase-name">{{ pkg.pkgbase }}</span>
            </td>
            <td class="status-cell">
              <StatusBadge :status="pkg.status" size="sm" />
            </td>
            <td class="reason-cell">
              <span v-if="pkg.skip_reason" class="skip-reason">{{ pkg.skip_reason }}</span>
              <span v-else class="no-reason">—</span>
            </td>
            <td class="icon-cell">
              <v-icon
                :icon="getLto(pkg.lto).icon"
                :style="{ color: getLto(pkg.lto).color }"
                size="20"
                :aria-label="getLto(pkg.lto).title" />
              <v-tooltip activator="parent" location="bottom">
                {{ getLto(pkg.lto).title }}
              </v-tooltip>
            </td>
            <td class="icon-cell">
              <v-icon
                :icon="getDs(pkg.debug_symbols).icon"
                :style="{ color: getDs(pkg.debug_symbols).color }"
                size="20"
                :aria-label="getDs(pkg.debug_symbols).title" />
              <v-tooltip activator="parent" location="bottom">
                {{ getDs(pkg.debug_symbols).title }}
              </v-tooltip>
            </td>
            <td class="version-cell">
              <code class="version-text">{{ pkg.arch_version || '—' }}</code>
            </td>
            <td class="version-cell">
              <code class="version-text">{{ pkg.repo_version || '—' }}</code>
            </td>
            <td class="actions-cell">
              <div class="action-buttons">
                <a
                  v-if="pkg.status === 'failed'"
                  :href="`https://alhp.dev/logs/${(pkg.repo || '').slice((pkg.repo || '').indexOf('-') + 1)}/${pkg.pkgbase}.log`"
                  class="action-link action-link--log"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="View build log (opens in new tab)">
                  <v-icon icon="mdi-file-document-outline" size="18" />
                  <v-tooltip activator="parent" location="bottom">View build log</v-tooltip>
                </a>
                <a
                  :href="`https://archlinux.org/packages/?q=${pkg.pkgbase}`"
                  class="action-link action-link--arch"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="View on Arch Linux packages (opens in new tab)">
                  <span class="arch-link-text">AW</span>
                  <v-tooltip activator="parent" location="bottom">View on ArchWeb</v-tooltip>
                </a>
                <span
                  v-if="pkg.build_date && pkg.peak_mem"
                  class="action-link action-link--info">
                  <v-icon icon="mdi-information-outline" size="18" />
                  <v-tooltip activator="parent" location="start">
                    <div class="build-info-tooltip">
                      <div><strong>Built:</strong> {{ pkg.build_date }}</div>
                      <div><strong>Peak Memory:</strong> {{ pkg.peak_mem }}</div>
                    </div>
                  </v-tooltip>
                </span>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </v-table>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
import { usePackageDisplay } from '@/composables/Packages/usePackageDisplay'
import { usePackagesStore } from '@/stores'
import StatusBadge from '@/components/common/StatusBadge.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import PackageCard from '@/components/Packages/PackageCard.vue'

const { mobile } = useDisplay()
const isMobile = computed(() => mobile.value)

const { repoName, repoVersion, getVersionColor, getLto, getDs } = usePackageDisplay()
const packagesStore = usePackagesStore()
</script>

<style scoped>
/* Mobile card view */
.package-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Desktop table view */
.package-table-wrapper {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.package-table {
  width: 100%;
  background: transparent !important;
  font-size: var(--font-size-sm);
}

/* Header styles */
.package-table :deep(thead) {
  background: var(--color-bg-tertiary);
}

.package-table :deep(thead th) {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.header-with-tooltip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: help;
}

.header-icon {
  opacity: 0.6;
}

.actions-header {
  text-align: right;
  padding-right: var(--space-4) !important;
}

/* Row styles */
.package-row {
  transition: background-color var(--transition-fast);
}

.package-row:nth-child(odd) {
  background: var(--color-bg-secondary);
}

.package-row:nth-child(even) {
  background: var(--color-bg-tertiary);
}

.package-row:hover {
  background: var(--color-bg-hover) !important;
}

.package-table :deep(tbody td) {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

/* Cell specific styles */
.repo-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.version-chip {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  min-width: 32px;
  text-align: center;
}

.repo-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.pkgbase-cell {
  white-space: nowrap;
}

.pkgbase-name {
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
}

.status-cell {
  white-space: nowrap;
}

.reason-cell {
  max-width: 200px;
}

.skip-reason {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-reason {
  color: var(--color-text-muted);
}

.icon-cell {
  text-align: center;
}

.version-cell {
  white-space: nowrap;
}

.version-text {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Action buttons - WCAG compliant touch targets */
.actions-cell {
  text-align: right;
}

.action-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.action-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.action-link--log:hover {
  color: var(--color-status-error);
}

.action-link--arch {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
}

.action-link--arch:hover {
  color: var(--color-brand-primary);
}

.arch-link-text {
  font-family: var(--font-family-mono);
}

.action-link--info {
  cursor: default;
}

.build-info-tooltip {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .package-table-wrapper {
    margin-top: var(--space-3);
    border-radius: var(--radius-md);
  }

  .package-table :deep(thead th),
  .package-table :deep(tbody td) {
    padding: var(--space-2) var(--space-3);
  }

  .version-chip {
    min-width: 28px;
  }
}
</style>
