<template>
  <div class="page">
    <Header />
    <main class="container">
      <section class="hero">
        <div>
          <p class="kicker">Radar automático de datos públicos</p>
          <h1>Detecta cambios en datos.gob.es antes que nadie</h1>
          <p class="lead">Monitoriza datasets, normaliza formatos y recibe alertas por email o Telegram. Configura perfiles sin complicaciones.</p>
          <div class="hero-actions">
            <NuxtLink to="/catalog" class="btn primary">Ver catálogo</NuxtLink>
            <NuxtLink to="/alerts" class="btn ghost">Crear alertas</NuxtLink>
          </div>
        </div>
        <div class="hero-card" v-if="summary">
          <div class="metric">
            <span class="metric-value">{{ summary.totals.items }}</span>
            <span class="metric-label">Datasets</span>
          </div>
          <div class="metric">
            <span class="metric-value">{{ summary.totals.changes }}</span>
            <span class="metric-label">Cambios recientes</span>
          </div>
          <div class="metric">
            <span class="metric-value">{{ summary.totals.alertProfiles }}</span>
            <span class="metric-label">Perfiles activos</span>
          </div>
          <div class="card-footer">Actualizado automáticamente</div>
        </div>
      </section>

      <section class="trend" v-if="summary?.trend?.length">
        <h2>Tendencia (últimos {{ summary.trend.length }} días)</h2>
        <div class="trend-chart">
          <div v-for="point in summary.trend" :key="point.date" class="trend-bar">
            <span class="bar-fill" :style="{ height: barHeight(point.total) }"></span>
            <small>{{ formatShortDate(point.date) }}</small>
          </div>
        </div>
      </section>

      <section class="grid">
        <article class="panel">
          <h2>Cambios recientes</h2>
          <ul>
            <li v-for="change in summary?.latestChanges || []" :key="change.id">
              <strong>{{ change.snapshot?.title || 'Sin título' }}</strong>
              <span class="muted">{{ change.snapshot?.publisher || '—' }}</span>
              <small class="muted">{{ formatDate(change.createdAt) }}</small>
            </li>
          </ul>
        </article>
        <article class="panel">
          <h2>Top publicadores</h2>
          <ul>
            <li v-for="pub in summary?.topPublishers || []" :key="pub.label">
              <span>{{ pub.label }}</span>
              <strong>{{ pub.value }}</strong>
            </li>
          </ul>
        </article>
        <article class="panel">
          <h2>Formatos más comunes</h2>
          <ul>
            <li v-for="fmt in summary?.topFormats || []" :key="fmt.label">
              <span>{{ fmt.label }}</span>
              <strong>{{ fmt.value }}</strong>
            </li>
          </ul>
        </article>
        <article class="panel">
          <h2>Top temas</h2>
          <ul>
            <li v-for="topic in summary?.topTopics || []" :key="topic.label">
              <span>{{ topic.label }}</span>
              <strong>{{ topic.value }}</strong>
            </li>
          </ul>
        </article>
        <article class="panel">
          <h2>Top territorios</h2>
          <ul>
            <li v-for="territory in summary?.topTerritories || []" :key="territory.label">
              <span>{{ territory.label }}</span>
              <strong>{{ territory.value }}</strong>
            </li>
          </ul>
        </article>
      </section>
    </main>
  </div>
</template>

<script setup>
import Header from '~/components/Header.vue'
const config = useRuntimeConfig()
const { data: summary } = await useFetch(`${config.public.apiBase}/dashboard/summary`)
const maxTrend = computed(() => {
  const values = summary.value?.trend?.map((p) => p.total) || []
  return Math.max(...values, 1)
})

function formatDate(value) {
  if (!value) return ''
  return new Date(value).toLocaleDateString('es-ES')
}

function formatShortDate(value) {
  if (!value) return ''
  const date = new Date(value)
  return date.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' })
}

function barHeight(value) {
  return `${Math.round((value / maxTrend.value) * 100)}%`
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: radial-gradient(circle at top, #f5f7ff 0%, #eef2f9 45%, #e5ecf5 100%);
  color: #0f172a;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  align-items: center;
}
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: #475569;
  margin-bottom: 0.6rem;
}
.hero h1 {
  font-size: clamp(2.2rem, 3vw, 3rem);
  margin: 0 0 1rem;
}
.lead {
  font-size: 1.05rem;
  color: #334155;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn {
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.primary {
  background: #0f172a;
  color: #fff;
}
.btn.ghost {
  border: 1px solid #0f172a;
  color: #0f172a;
}
.hero-card {
  background: #0f172a;
  color: #fff;
  padding: 1.5rem;
  border-radius: 24px;
  display: grid;
  gap: 1rem;
}
.metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.metric-value {
  font-size: 1.8rem;
  font-weight: 700;
}
.metric-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.card-footer {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.trend {
  margin-top: 2.5rem;
  background: #ffffff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
.trend h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.trend-chart {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.trend-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 140px;
}
.bar-fill {
  width: 100%;
  max-width: 18px;
  background: linear-gradient(180deg, #38bdf8 0%, #0f172a 100%);
  border-radius: 999px;
  display: block;
  min-height: 8px;
}
.panel {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}
.panel h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.panel ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.panel li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.muted {
  color: #64748b;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
