<template>
  <div class="fc-source-card">
    <div class="fc-source-card__top">
      <SourceHealthDot :source="source" :warning-threshold="warningThreshold" />
      <v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
      <v-spacer />
      <v-switch
        :model-value="source.enabled"
        density="compact" hide-details color="accent"
        @click.stop
        @update:model-value="onToggleEnabled"
      />
    </div>

    <div class="fc-source-card__url-row">
      <a
        :href="source.url" target="_blank" rel="noopener"
        class="fc-source-card__url" @click.stop
      >{{ source.url }}</a>
      <v-btn
        icon="mdi-pencil" size="x-small" variant="text"
        @click.stop="$emit('edit', source)"
      >
        <v-icon>mdi-pencil</v-icon>
        <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
      </v-btn>
    </div>

    <div class="fc-source-card__meta">
      <span>Last {{ formatRelative(source.last_checked_at) }}</span>
      <span>Next {{ formatRelative(source.next_check_at, { future: true }) }}</span>
      <v-chip
        v-if="(source.consecutive_failures || 0) > 0"
        size="x-small" color="error" variant="tonal" label
      >{{ source.consecutive_failures }} err
        <v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
          <span style="white-space: pre-wrap; word-break: break-word;">{{ source.last_error }}</span>
        </v-tooltip>
      </v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'running'"
        size="x-small" color="info" variant="tonal" label
      >{{ source.backfill_bypass_seen ? 'Recovering' : 'Backfilling'
        }}{{ source.backfill_posts
              ? ` · ${source.backfill_posts} posts`
              : (source.backfill_chunks ? ` (${source.backfill_chunks})` : '') }}</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'complete'"
        size="x-small" color="success" variant="tonal" label
      >Backfilled</v-chip>
      <v-chip
        v-else-if="source.backfill_state === 'stalled'"
        size="x-small" color="warning" variant="tonal" label
      >Stalled</v-chip>
    </div>

    <div class="fc-source-card__actions">
      <SourceActions
        :source="source" :checking="checking"
        @check="$emit('check', $event)"
        @backfill="$emit('backfill', $event)"
        @recover="$emit('recover', $event)"
        @remove="$emit('remove', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import SourceActions from './SourceActions.vue'
import SourceHealthDot from './SourceHealthDot.vue'
import { formatRelative } from '../../utils/date.js'

// Mobile-stacked equivalent of SourceRow (the desktop <tr>) — same data and
// emits, but laid out vertically so the wide source columns never force the
// lateral scroll the operator flagged on phones.
const props = defineProps({
  source: { type: Object, required: true },
  checking: { type: Boolean, default: false },
  warningThreshold: { type: Number, default: 5 },
})
const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])

function onToggleEnabled(value) {
  emit('toggle', { source: props.source, enabled: value })
}
</script>

<style scoped>
.fc-source-card {
  padding: 8px 10px;
  border: 1px solid rgb(var(--v-theme-surface-light));
  border-radius: 6px;
  background: rgb(var(--v-theme-surface));
  display: flex; flex-direction: column; gap: 6px;
}
.fc-source-card__top { display: flex; align-items: center; gap: 8px; }
.fc-source-card__url-row {
  display: flex; align-items: center; gap: 4px;
}
.fc-source-card__url {
  color: rgb(var(--v-theme-on-surface-variant));
  text-decoration: none;
  font-size: 0.8rem;
  word-break: break-all;
  flex: 1 1 auto; min-width: 0;
}
.fc-source-card__url:hover { color: rgb(var(--v-theme-accent)); }
.fc-source-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 0.78rem; color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
}
.fc-source-card__actions {
  display: flex; gap: 2px; justify-content: flex-end;
}
</style>
