<template>
  <div class="fc-cleanup">
    <p class="fc-muted text-body-2 mb-5">
      Retroactive enforcement and cleanup on the existing library — each tool
      previews before it acts, and destructive ones need a typed-token confirm.
      Click a tile to open its controls.
    </p>

    <section class="fc-section">
      <h3 class="fc-section__title">Import-filter audits</h3>
      <p class="fc-section__hint">
        Scan for content the current import filters would now exclude.
      </p>
      <div class="fc-tile-grid">
        <MinDimensionCard />
        <TransparencyAuditCard />
        <SingleColorAuditCard />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">Duplicates &amp; posts</h3>
      <p class="fc-section__hint">
        Tidy post records, duplicates and locked-preview leftovers.
      </p>
      <div class="fc-tile-grid">
        <PostMaintenanceCard />
        <VideoDedupCard />
        <GatedPurgeCard />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">Tags</h3>
      <p class="fc-section__hint">
        Remove unused / legacy tags and standardize the existing set.
      </p>
      <div class="fc-tile-grid">
        <TagMaintenanceCard />
      </div>
    </section>

    <section class="fc-section fc-danger">
      <h3 class="fc-section__title fc-danger__title">Danger zone</h3>
      <p class="fc-section__hint">
        Whole-instance resets. Each needs a fresh preview and a typed
        confirmation code.
      </p>
      <div class="fc-tile-grid">
        <DangerZoneCard />
      </div>
    </section>
  </div>
</template>

<script setup>
import MinDimensionCard from '../components/cleanup/MinDimensionCard.vue'
import TransparencyAuditCard from '../components/cleanup/TransparencyAuditCard.vue'
import SingleColorAuditCard from '../components/cleanup/SingleColorAuditCard.vue'
import PostMaintenanceCard from '../components/settings/PostMaintenanceCard.vue'
import VideoDedupCard from '../components/settings/VideoDedupCard.vue'
import GatedPurgeCard from '../components/settings/GatedPurgeCard.vue'
import TagMaintenanceCard from '../components/settings/TagMaintenanceCard.vue'
import DangerZoneCard from '../components/settings/DangerZoneCard.vue'
</script>

<style scoped>
/* width is capped + centered by SettingsView's .fc-settings container */
.fc-cleanup { max-width: 100%; }
.fc-section { margin-bottom: 28px; }
.fc-section__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--v-theme-accent));
  margin-bottom: 2px;
}
.fc-section__hint {
  font-size: 0.8rem;
  color: rgb(var(--v-theme-on-surface-variant));
  margin-bottom: 12px;
}
.fc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
/* Danger zone: visually fenced off from routine cleanup so the reset can't
   be mistaken for maintenance. */
.fc-danger {
  border-top: 1px solid rgba(var(--v-theme-error), 0.45);
  padding-top: 18px;
  margin-top: 36px;
}
.fc-danger__title { color: rgb(var(--v-theme-error)); }
</style>
