<script setup lang="ts">
const documents = useDocumentsStore()
const decisions = useDecisionsStore()
const mandates = useMandatesStore()
const votes = useVotesStore()
const auth = useAuthStore()

const loading = ref(true)

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

/** Summary stats for the dashboard cards. */
const stats = computed(() => [
  {
    label: 'Documents actifs',
    value: documents.activeDocuments.length,
    total: documents.list.length,
    icon: 'i-lucide-book-open',
    color: 'primary' as const,
    to: '/documents',
  },
  {
    label: 'Decisions en cours',
    value: decisions.activeDecisions.length,
    total: decisions.list.length,
    icon: 'i-lucide-scale',
    color: 'success' as const,
    to: '/decisions',
  },
  {
    label: 'Votes ouverts',
    value: openVoteSessions.value.length,
    total: votes.sessions.length,
    icon: 'i-lucide-vote',
    color: 'warning' as const,
    to: '/decisions',
  },
  {
    label: 'Mandats actifs',
    value: mandates.activeMandates.length,
    total: mandates.list.length,
    icon: 'i-lucide-user-check',
    color: 'info' as const,
    to: '/mandates',
  },
])

/** Open vote sessions. */
const openVoteSessions = computed(() => {
  return votes.sessions.filter(s => s.status === 'open')
})

/** 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)
})

/** Last 5 vote sessions sorted by most recent. */
const recentVotes = computed(() => {
  return [...votes.sessions]
    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_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' })
}

/** Section cards for the "Domaines" grid. */
const sections = [
  {
    title: 'Documents de reference',
    description: 'Licence G1, engagements forgerons, reglement du comite technique et autres documents fondateurs sous vote permanent.',
    icon: 'i-lucide-book-open',
    to: '/documents',
    color: 'primary' as const,
  },
  {
    title: 'Decisions',
    description: 'Processus de decision collectifs: runtime upgrades, modifications de documents, votes de mandats.',
    icon: 'i-lucide-scale',
    to: '/decisions',
    color: 'success' as const,
  },
  {
    title: 'Mandats',
    description: 'Gestion des mandats du comite technique, des forgerons et autres roles de gouvernance.',
    icon: 'i-lucide-user-check',
    to: '/mandates',
    color: 'warning' as const,
  },
  {
    title: 'Protocoles de vote',
    description: 'Configuration des formules de seuil WoT, criteres Smith et TechComm, parametres de vote nuance.',
    icon: 'i-lucide-settings',
    to: '/protocols',
    color: 'info' as const,
  },
  {
    title: 'Sanctuaire',
    description: 'Archive immuable: documents ancres sur IPFS avec preuve on-chain via system.remark.',
    icon: 'i-lucide-archive',
    to: '/sanctuary',
    color: 'error' as const,
  },
]
</script>

<template>
  <div class="space-y-8">
    <!-- Title -->
    <div>
      <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Glibredecision
      </h1>
      <p class="mt-2 text-base sm:text-lg text-gray-600 dark:text-gray-400">
        Decisions collectives pour la communaute Duniter/G1
      </p>
    </div>

    <!-- Quick actions (authenticated users only) -->
    <div v-if="auth.isAuthenticated" class="flex flex-wrap gap-2 sm:gap-3">
      <UButton
        to="/decisions"
        icon="i-lucide-plus"
        label="Nouvelle decision"
        variant="soft"
        color="primary"
        size="sm"
      />
      <UButton
        to="/documents"
        icon="i-lucide-book-open"
        label="Voir les documents"
        variant="soft"
        color="neutral"
        size="sm"
      />
      <UButton
        to="/mandates"
        icon="i-lucide-user-check"
        label="Mandats"
        variant="soft"
        color="neutral"
        size="sm"
      />
    </div>

    <!-- Stats cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
      <template v-if="loading">
        <LoadingSkeleton
          v-for="i in 4"
          :key="i"
          :lines="2"
          card
        />
      </template>
      <template v-else>
        <NuxtLink v-for="stat in stats" :key="stat.label" :to="stat.to">
          <UCard class="hover:shadow-md transition-shadow h-full">
            <div class="flex items-start justify-between gap-2">
              <div class="min-w-0">
                <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate">
                  {{ stat.label }}
                </p>
                <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mt-1">
                  {{ stat.value }}
                </p>
                <p class="text-xs text-gray-400 mt-1">
                  {{ stat.total }} au total
                </p>
              </div>
              <UIcon
                :name="stat.icon"
                class="text-2xl sm:text-3xl text-gray-400 flex-shrink-0"
              />
            </div>
          </UCard>
        </NuxtLink>
      </template>
    </div>

    <!-- Recent activity: decisions + votes side-by-side -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
      <!-- Recent decisions -->
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <UIcon name="i-lucide-scale" class="text-lg text-primary" />
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">
                Decisions recentes
              </h3>
            </div>
            <UButton
              to="/decisions"
              variant="ghost"
              size="xs"
              color="neutral"
              label="Tout voir"
              trailing-icon="i-lucide-chevron-right"
            />
          </div>
        </template>

        <div v-if="loading" class="space-y-3">
          <LoadingSkeleton :lines="5" />
        </div>
        <div v-else-if="recentDecisions.length === 0" class="text-center py-6">
          <UIcon name="i-lucide-inbox" class="text-3xl text-gray-300 dark:text-gray-600 mx-auto" />
          <p class="text-sm text-gray-500 mt-2">Aucune decision pour le moment</p>
        </div>
        <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
          <NuxtLink
            v-for="decision in recentDecisions"
            :key="decision.id"
            :to="`/decisions/${decision.id}`"
            class="flex items-center justify-between py-3 first:pt-0 last:pb-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 -mx-2 px-2 rounded transition-colors"
          >
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                {{ decision.title }}
              </p>
              <p class="text-xs text-gray-500 mt-0.5">
                {{ formatDate(decision.updated_at) }}
              </p>
            </div>
            <StatusBadge :status="decision.status" type="decision" />
          </NuxtLink>
        </div>
      </UCard>

      <!-- Recent votes -->
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <UIcon name="i-lucide-vote" class="text-lg text-warning" />
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">
                Sessions de vote recentes
              </h3>
            </div>
            <UButton
              to="/decisions"
              variant="ghost"
              size="xs"
              color="neutral"
              label="Tout voir"
              trailing-icon="i-lucide-chevron-right"
            />
          </div>
        </template>

        <div v-if="loading" class="space-y-3">
          <LoadingSkeleton :lines="5" />
        </div>
        <div v-else-if="recentVotes.length === 0" class="text-center py-6">
          <UIcon name="i-lucide-inbox" class="text-3xl text-gray-300 dark:text-gray-600 mx-auto" />
          <p class="text-sm text-gray-500 mt-2">Aucune session de vote pour le moment</p>
        </div>
        <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
          <div
            v-for="session in recentVotes"
            :key="session.id"
            class="py-3 first:pt-0 last:pb-0"
          >
            <div class="flex items-center justify-between">
              <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2">
                  <StatusBadge :status="session.status" type="vote" />
                  <span class="text-xs text-gray-500">
                    {{ session.votes_total }} vote{{ session.votes_total !== 1 ? 's' : '' }}
                  </span>
                </div>
                <div class="mt-1.5">
                  <!-- Mini progress bar for vote results -->
                  <div class="flex items-center gap-2">
                    <div class="flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                      <div
                        class="h-full bg-success-500 rounded-full transition-all"
                        :style="{ width: session.votes_total > 0 ? `${(session.votes_for / session.votes_total) * 100}%` : '0%' }"
                      />
                    </div>
                    <span class="text-xs text-gray-500 flex-shrink-0">
                      {{ session.votes_for }}/{{ session.votes_total }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <p class="text-xs text-gray-400 mt-1">
              {{ formatDate(session.created_at) }}
            </p>
          </div>
        </div>
      </UCard>
    </div>

    <!-- Section cards (Domaines) -->
    <div>
      <h2 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-4">
        Domaines
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
        <NuxtLink v-for="section in sections" :key="section.title" :to="section.to">
          <UCard class="h-full hover:shadow-md transition-shadow">
            <div class="space-y-3">
              <div class="flex items-center gap-3">
                <UIcon :name="section.icon" class="text-2xl text-primary flex-shrink-0" />
                <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">
                  {{ section.title }}
                </h3>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                {{ section.description }}
              </p>
            </div>
          </UCard>
        </NuxtLink>
      </div>
    </div>

    <!-- Formula explainer -->
    <UCard>
      <div class="space-y-3">
        <div class="flex items-center gap-2">
          <UIcon name="i-lucide-calculator" class="text-xl text-primary" />
          <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">
            Formule de seuil WoT
          </h3>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Le seuil d'adoption s'adapte dynamiquement a la participation :
          faible participation = quasi-unanimite requise ; forte participation = majorite simple suffisante.
        </p>
        <code class="block p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs sm:text-sm font-mono overflow-x-auto">
          Seuil = C + B^W + (M + (1-M) * (1 - (T/W)^G)) * max(0, T-C)
        </code>
        <div class="flex flex-wrap gap-3 sm:gap-4 text-xs text-gray-500">
          <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>
      </div>
    </UCard>
  </div>
</template>
