<script setup lang="ts">
import type { App } from '../apps'

defineProps<{ app: App }>()

const statusLabel: Record<App['status'], string> = {
  live: '运行中',
  pending: '迁移中',
  tbd: '待规划',
}
</script>

<template>
  <component
    :is="app.status === 'live' ? 'a' : 'div'"
    :href="app.status === 'live' ? app.url : undefined"
    :target="app.status === 'live' ? '_blank' : undefined"
    rel="noopener"
    class="card"
    :class="`is-${app.status}`"
  >
    <div class="row">
      <h2>{{ app.name }}</h2>
      <span class="status">{{ statusLabel[app.status] }}</span>
    </div>
    <p>{{ app.description }}</p>
    <span class="url">{{ app.url.replace(/^https?:\/\//, '') }}</span>
  </component>
</template>

<style scoped>
.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.card.is-live {
  cursor: pointer;
}
.card.is-live:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.3);
}

.card.is-pending,
.card.is-tbd {
  opacity: 0.7;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.is-live .status   { color: var(--green);  border-color: rgba(52, 211, 153, 0.4); }
.is-pending .status { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); }
.is-tbd .status    { color: var(--rose);   border-color: rgba(251, 113, 133, 0.4); }

p {
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.45;
}

.url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--fg-dim);
  margin-top: auto;
}
</style>
