<script setup lang="ts">
/**
 * Dashboard / Page d'accueil — Glibredecision.
 *
 * Accueil chaleureux avec onboarding : cartes d'entree vers les sections,
 * banniere de connexion, apercu de la boite a outils et activite recente.
 */
const documents = useDocumentsStore()
const decisions = useDecisionsStore()
const protocols = useProtocolsStore()
const auth = useAuthStore()

const loading = ref(true)
const formulaOpen = ref(false)

onMounted(async () => {
  try {
    await Promise.all([
      documents.fetchAll(),
      decisions.fetchAll(),
      protocols.fetchProtocols(),
    ])
  }
  finally {
    loading.value = false
  }
})

/** Entry cards — the 3 main doors. */
const entryCards = computed(() => [
  {
    key: 'documents',
    title: 'Documents',
    icon: 'i-lucide-book-open',
    to: '/documents',
    count: documents.activeDocuments.length,
    countLabel: `${documents.activeDocuments.length} actif${documents.activeDocuments.length > 1 ? 's' : ''}`,
    totalLabel: `${documents.list.length} au total`,
    description: 'Textes fondateurs sous vote permanent',
  },
  {
    key: 'decisions',
    title: 'Decisions',
    icon: 'i-lucide-scale',
    to: '/decisions',
    count: decisions.activeDecisions.length,
    countLabel: `${decisions.activeDecisions.length} en cours`,
    totalLabel: `${decisions.list.length} au total`,
    description: 'Processus de decision collectifs',
  },
  {
    key: 'mandats',
    title: 'Mandats',
    icon: 'i-lucide-user-check',
    to: '/mandates',
    count: null,
    countLabel: null,
    totalLabel: null,
    description: 'Un contexte, un objectif, une duree, une ou plusieurs nominations ; par defaut : nomination d\'un binome.',
  },
])

/** Last 5 decisions sorted by most recent. */
const recentDecisions = computed(() => {
  return [...decisions.list]
    .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
    .slice(0, 5)
})

/** Format a date string to a localized relative or absolute string. */
function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffHours = diffMs / (1000 * 60 * 60)

  if (diffHours < 1) {
    const diffMinutes = Math.floor(diffMs / (1000 * 60))
    return diffMinutes <= 1 ? 'Il y a un instant' : `Il y a ${diffMinutes} min`
  }
  if (diffHours < 24) {
    return `Il y a ${Math.floor(diffHours)}h`
  }
  if (diffHours < 48) {
    return 'Hier'
  }
  return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
}
</script>

<template>
  <div class="dashboard" :style="{ background: 'var(--mood-gradient)' }">
    <!-- Welcome banner -->
    <div class="dashboard__welcome">
      <h1 class="dashboard__welcome-title">
        Bienvenue sur Glibredecision
      </h1>
      <p class="dashboard__welcome-subtitle">
        Plateforme de decisions collectives pour la communaute Duniter / G1.
        Explorez les documents de reference, participez aux decisions, suivez les mandats.
      </p>
    </div>

    <!-- Entry cards grid -->
    <div class="dashboard__entries">
      <template v-if="loading">
        <LoadingSkeleton
          v-for="i in 3"
          :key="i"
          :lines="3"
          card
        />
      </template>
      <template v-else>
        <NuxtLink
          v-for="card in entryCards"
          :key="card.key"
          :to="card.to"
          class="dashboard__entry-card"
        >
          <div class="dashboard__entry-icon">
            <UIcon :name="card.icon" class="text-2xl" />
          </div>
          <h2 class="dashboard__entry-title">
            {{ card.title }}
          </h2>

          <!-- Count badge for documents and decisions -->
          <template v-if="card.count !== null">
            <p class="dashboard__entry-count">
              {{ card.countLabel }}
            </p>
            <p class="dashboard__entry-total">
              {{ card.totalLabel }}
            </p>
          </template>

          <!-- Special onboarding text for mandats -->
          <template v-else>
            <p class="dashboard__entry-onboard">
              {{ card.description }}
            </p>
          </template>

          <UButton
            label="Entrer"
            variant="soft"
            size="xs"
            trailing-icon="i-lucide-arrow-right"
            class="dashboard__entry-btn"
          />
        </NuxtLink>
      </template>
    </div>

    <!-- Onboarding banner for unauthenticated users -->
    <div v-if="!auth.isAuthenticated" class="dashboard__onboarding">
      <div class="dashboard__onboarding-content">
        <UIcon name="i-lucide-key-round" class="text-xl" />
        <div>
          <p class="dashboard__onboarding-text">
            Connectez-vous avec votre identite Duniter pour participer aux decisions collectives.
          </p>
          <p class="dashboard__onboarding-hint">
            Authentification par signature Ed25519 — aucun mot de passe.
          </p>
        </div>
      </div>
      <UButton
        to="/login"
        label="Se connecter"
        icon="i-lucide-log-in"
        variant="soft"
        size="sm"
      />
    </div>

    <!-- Boite a outils teaser -->
    <div class="dashboard__toolbox-teaser">
      <div class="dashboard__toolbox-teaser-header">
        <UIcon name="i-lucide-wrench" class="text-lg" />
        <h3>Boite a outils</h3>
        <UBadge variant="subtle" size="xs">
          {{ protocols.protocols.length }} modalite{{ protocols.protocols.length > 1 ? 's' : '' }}
        </UBadge>
      </div>
      <p class="dashboard__toolbox-teaser-description">
        Protocoles de vote configurables avec formule de seuil WoT adaptative.
      </p>
      <div class="dashboard__toolbox-teaser-tags">
        <template v-if="protocols.protocols.length > 0">
          <NuxtLink
            v-for="protocol in protocols.protocols"
            :key="protocol.id"
            :to="`/protocols/${protocol.id}`"
            class="dashboard__toolbox-tag"
          >
            {{ protocol.name }}
          </NuxtLink>
        </template>
        <template v-else>
          <span class="dashboard__toolbox-tag">Vote majoritaire</span>
          <span class="dashboard__toolbox-tag">Vote nuance</span>
          <span class="dashboard__toolbox-tag">Vote permanent</span>
        </template>
      </div>
      <UButton
        to="/protocols"
        label="Voir la boite a outils"
        variant="ghost"
        size="xs"
        trailing-icon="i-lucide-chevron-right"
        class="mt-1"
      />
    </div>

    <!-- Recent activity -->
    <div v-if="recentDecisions.length > 0" class="dashboard__activity">
      <div class="dashboard__activity-header">
        <UIcon name="i-lucide-activity" class="text-lg" />
        <h3>Activite recente</h3>
      </div>
      <div class="dashboard__activity-list">
        <NuxtLink
          v-for="decision in recentDecisions"
          :key="decision.id"
          :to="`/decisions/${decision.id}`"
          class="dashboard__activity-item"
        >
          <div class="dashboard__activity-item-main">
            <span class="dashboard__activity-item-title">{{ decision.title }}</span>
            <span class="dashboard__activity-item-date">{{ formatDate(decision.updated_at) }}</span>
          </div>
          <StatusBadge :status="decision.status" type="decision" />
        </NuxtLink>
      </div>
    </div>

    <!-- Formula explainer — collapsible -->
    <UCollapsible v-model:open="formulaOpen">
      <UButton
        variant="ghost"
        size="sm"
        :icon="formulaOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
        class="dashboard__formula-trigger"
      >
        <div class="flex items-center gap-2">
          <UIcon name="i-lucide-calculator" />
          <span>Formule de seuil WoT</span>
        </div>
      </UButton>
      <template #content>
        <div class="dashboard__formula-content">
          <p class="dashboard__formula-description">
            Le seuil d'adoption s'adapte dynamiquement a la participation :
            faible participation = quasi-unanimite requise ; forte participation = majorite simple suffisante.
          </p>
          <code class="dashboard__formula-code">
            Seuil = C + B^W + (M + (1-M) * (1 - (T/W)^G)) * max(0, T-C)
          </code>
          <div class="dashboard__formula-params">
            <span>C = constante de base</span>
            <span>B = exposant de base</span>
            <span>W = taille WoT</span>
            <span>T = votes totaux</span>
            <span>M = majorite</span>
            <span>G = gradient</span>
          </div>
          <UButton
            to="/protocols/formulas"
            label="Ouvrir le simulateur"
            variant="outline"
            size="xs"
            icon="i-lucide-calculator"
            class="mt-2"
          />
        </div>
      </template>
    </UCollapsible>
  </div>
</template>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100%;
  padding-bottom: 2rem;
}

/* --- Welcome --- */
.dashboard__welcome {
  text-align: center;
  padding: 1rem 0;
}

.dashboard__welcome-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--mood-accent);
  line-height: 1.2;
}

@media (min-width: 640px) {
  .dashboard__welcome-title {
    font-size: 2.25rem;
  }
}

.dashboard__welcome-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--mood-text-muted);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* --- Entry cards --- */
.dashboard__entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.dashboard__entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 0.75rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.dashboard__entry-card:hover {
  border-color: var(--mood-accent);
  box-shadow: 0 4px 12px var(--mood-shadow);
  transform: translateY(-2px);
}

.dashboard__entry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
}

.dashboard__entry-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mood-text);
}

.dashboard__entry-count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mood-accent);
  line-height: 1;
}

.dashboard__entry-total {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
}

.dashboard__entry-onboard {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  line-height: 1.4;
  max-width: 18rem;
}

.dashboard__entry-btn {
  margin-top: 0.5rem;
}

/* --- Onboarding banner --- */
.dashboard__onboarding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--mood-accent-soft);
  border: 1px solid var(--mood-border);
  border-radius: 0.75rem;
}

.dashboard__onboarding-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--mood-accent);
}

.dashboard__onboarding-text {
  font-size: 0.875rem;
  color: var(--mood-text);
  font-weight: 500;
}

.dashboard__onboarding-hint {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  margin-top: 0.125rem;
}

/* --- Toolbox teaser --- */
.dashboard__toolbox-teaser {
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.dashboard__toolbox-teaser-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mood-accent);
  font-weight: 700;
  font-size: 0.9375rem;
}

.dashboard__toolbox-teaser-header h3 {
  margin: 0;
}

.dashboard__toolbox-teaser-description {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.dashboard__toolbox-teaser-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.dashboard__toolbox-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--mood-accent);
  background: var(--mood-accent-soft);
  border: 1px solid var(--mood-border);
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.dashboard__toolbox-tag:hover {
  background: var(--mood-surface-hover);
}

/* --- Recent activity --- */
.dashboard__activity {
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

.dashboard__activity-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mood-text);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

.dashboard__activity-header h3 {
  margin: 0;
}

.dashboard__activity-list {
  display: flex;
  flex-direction: column;
}

.dashboard__activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mood-border);
  text-decoration: none;
  transition: background 0.15s ease;
}

.dashboard__activity-item:last-child {
  border-bottom: none;
}

.dashboard__activity-item:hover {
  background: var(--mood-surface-hover);
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.375rem;
}

.dashboard__activity-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.dashboard__activity-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mood-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__activity-item-date {
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
}

/* --- Formula explainer --- */
.dashboard__formula-trigger {
  width: 100%;
  justify-content: space-between;
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 0.75rem;
}

.dashboard__formula-content {
  padding: 0 1.25rem 1.25rem;
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard__formula-description {
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  line-height: 1.5;
}

.dashboard__formula-code {
  display: block;
  padding: 0.75rem;
  background: var(--mood-accent-soft);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--mood-text);
  overflow-x: auto;
}

.dashboard__formula-params {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
}
</style>
