<template>
  <div class="package-card">
    <div class="card-main">
      <div class="card-left">
        <StatusBadge :status="pkg.status" size="sm" />
        <v-chip
          :style="{ backgroundColor: getVersionColor(repoVersion(pkg.repo || '')), color: '#fff' }"
          class="version-chip"
          density="compact"
          label
          size="x-small">
          {{ repoVersion(pkg.repo || '') }}
        </v-chip>
      </div>
      <div class="card-center">
        <span class="pkg-name">{{ pkg.pkgbase }}</span>
        <span class="pkg-repo">{{ repoName(pkg.repo || '') }}</span>
      </div>
      <div class="card-actions">
        <a
          v-if="pkg.status === 'failed'"
          :href="logUrl"
          class="action-btn"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="View build log">
          <v-icon icon="mdi-file-document-outline" size="18" />
          <v-tooltip activator="parent" location="top">View build log</v-tooltip>
        </a>
        <a
          :href="archWebUrl"
          class="action-btn"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="View on ArchWeb">
          <span class="aw-text">AW</span>
          <v-tooltip activator="parent" location="top">View on ArchWeb</v-tooltip>
        </a>
      </div>
    </div>
    <div v-if="pkg.skip_reason" class="pkg-reason">{{ pkg.skip_reason }}</div>
    <div class="card-versions">
      <span class="version-item">
        <span class="version-label">Arch:</span>
        <code>{{ pkg.arch_version || '—' }}</code>
      </span>
      <span class="version-item">
        <span class="version-label">ALHP:</span>
        <code>{{ pkg.repo_version || '—' }}</code>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { components } from '@/api'
import StatusBadge from '@/components/common/StatusBadge.vue'
import { usePackageDisplay } from '@/composables/Packages/usePackageDisplay'

const props = defineProps<{
  pkg: components['schemas']['Package']
}>()

const { repoName, repoVersion, getVersionColor } = usePackageDisplay()

const logUrl = computed(() => {
  const repo = props.pkg.repo || ''
  const repoSuffix = repo.slice(repo.indexOf('-') + 1)
  return `https://alhp.dev/logs/${repoSuffix}/${props.pkg.pkgbase}.log`
})

const archWebUrl = computed(() => {
  return `https://archlinux.org/packages/?q=${props.pkg.pkgbase}`
})
</script>

<style scoped>
.package-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.version-chip {
  font-weight: var(--font-weight-bold);
  font-size: 10px;
  height: 18px !important;
}

.card-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pkg-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkg-repo {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pkg-reason {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.card-versions {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

.version-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}

.version-label {
  color: var(--color-text-muted);
}

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

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

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

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

.action-btn:active {
  transform: scale(0.95);
}

.aw-text {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
}
</style>
