<template>
  <div class="codev-demo">

    <header class="demo-header">
      <span class="demo-badge">DEMO</span>
      <h1>Co-developpement - exemple</h1>
      <p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
    </header>

    <ClientOnly>
      <CodevGraph
        :fiches="fiches"
        :matches="matches"
        :mode="mode"
      />
      <template #fallback>
        <div class="graph-fallback">Chargement du graphe...</div>
      </template>
    </ClientOnly>

    <!-- Bandeau info mode actif -->
    <div v-if="mode !== 'none'" class="mode-banner">
      <span>
        Mode {{ MODE_LABELS[mode] }} actif -
        {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
      </span>
      <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
    </div>

    <!-- 3 boutons matching identiques a carto.vue -->
    <div class="matching-controls">
      <button
        :class="{ active: mode === 'solution' }"
        style="--mode-color: #22c55e"
        @click="setMode('solution')"
        type="button"
      >
        Solution
        <span class="hint">besoin - offre</span>
      </button>
      <button
        :class="{ active: mode === 'alliance' }"
        style="--mode-color: #f97316"
        @click="setMode('alliance')"
        type="button"
      >
        Alliance
        <span class="hint">besoins partages</span>
      </button>
      <button
        :class="{ active: mode === 'surprise' }"
        style="--mode-color: #3b82f6"
        @click="setMode('surprise')"
        type="button"
      >
        Surprise
        <span class="hint">offres partagees</span>
      </button>
      <button
        v-if="mode !== 'none'"
        class="reset"
        @click="setMode('none')"
        type="button"
      >
        Effacer
      </button>
    </div>

  </div>
</template>

<script setup lang="ts">
import type { CodevFiche, CodevMatch } from '~/types/codev'
import { computeMatches } from '~/utils/codev/matching'

// 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
//
// Solution (scoreDirect besoinA vs offreB) :
//   Sami(besoin vendre formation) -> Ines(offre vente formations) ✓
//   Nael(besoin site web formation) -> Sami(offre developpement web) ✓
//   Eva(besoin coaching vente) -> Ines(offre vente formations) ✓
//   Tom(besoin tiers-lieu) -> Zoe(offre facilitation tiers-lieux) ✓
//
// Alliance (besoins similaires) :
//   Lea + Maya (coaching, lancer, offre) ✓
//   Tom + Zoe (tiers-lieu, co-creer) ✓
//   Sami + Kenji (vendre, formations) ✓
//
// Surprise (offres similaires) :
//   Lea + Zoe (facilitation, groupes) ✓
//   Tom + Roman (architecture) ✓
//   Ines + Nael (marketing, formations) ✓

const FICHES_DEMO: CodevFiche[] = [
  {
    id: 1, nom: 'Lea',
    besoin: 'Structurer et lancer mon offre de coaching professionnel cet automne',
    offre: 'Facilitation de groupes et animation de cercles de parole',
    hashtags: [],
    created_at: '2026-05-08T10:00:00Z',
  },
  {
    id: 2, nom: 'Sami',
    besoin: 'Vendre ma formation en ligne et attirer mes premiers clients',
    offre: 'Developpement web sur mesure, creation de sites et applications',
    hashtags: [],
    created_at: '2026-05-08T10:01:00Z',
  },
  {
    id: 3, nom: 'Ines',
    besoin: 'Ameliorer la facilitation de mes ateliers collaboratifs',
    offre: 'Vente de formations en ligne et marketing pour formateurs',
    hashtags: [],
    created_at: '2026-05-08T10:02:00Z',
  },
  {
    id: 4, nom: 'Tom',
    besoin: 'Trouver des associes pour co-creer un tiers-lieu rural',
    offre: 'Architecture bioclimatique et eco-construction pour tiers-lieux',
    hashtags: [],
    created_at: '2026-05-08T10:03:00Z',
  },
  {
    id: 5, nom: 'Maya',
    besoin: 'Creer et lancer mon offre de coaching en transition professionnelle',
    offre: 'Accompagnement coaching de carriere et transitions professionnelles',
    hashtags: [],
    created_at: '2026-05-08T10:04:00Z',
  },
  {
    id: 6, nom: 'Kenji',
    besoin: 'Apprendre a vendre mes formations sans pression commerciale',
    offre: 'Photographie professionnelle et direction artistique editoriale',
    hashtags: [],
    created_at: '2026-05-08T10:05:00Z',
  },
  {
    id: 7, nom: 'Zoe',
    besoin: 'Co-creer un tiers-lieu avec des porteurs de projet alignes',
    offre: 'Facilitation de collectifs et animation en intelligence collective',
    hashtags: [],
    created_at: '2026-05-08T10:06:00Z',
  },
  {
    id: 8, nom: 'Nael',
    besoin: 'Creer un site web pour presenter et vendre ma formation',
    offre: 'Strategie marketing digital et lancement de produits en ligne',
    hashtags: [],
    created_at: '2026-05-08T10:07:00Z',
  },
  {
    id: 9, nom: 'Eva',
    besoin: 'Lancer mon coaching avec une page de vente qui convertit',
    offre: 'Ecriture longue forme, articles de fond et tribunes editoriales',
    hashtags: [],
    created_at: '2026-05-08T10:08:00Z',
  },
  {
    id: 10, nom: 'Roman',
    besoin: 'Ecrire de meilleurs articles pour mon blog et ma newsletter',
    offre: 'Architecture technique et plans pour renovation energetique',
    hashtags: [],
    created_at: '2026-05-08T10:09:00Z',
  },
]

const fiches = ref(FICHES_DEMO)
const matches = ref<CodevMatch[]>([])
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')

const MODE_LABELS: Record<string, string> = {
  solution: 'Solution',
  alliance: 'Alliance',
  surprise: 'Surprise',
}

useHead({ title: 'Demo - Co-developpement' })

function setMode(newMode: typeof mode.value) {
  mode.value = newMode
  if (newMode === 'none') {
    matches.value = []
  } else {
    matches.value = computeMatches(fiches.value, newMode, 0.12)
  }
}
</script>

<style scoped>
.codev-demo {
  min-height: 100vh;
  background: var(--nav-bg, #fafafa);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 2rem;
  gap: 1rem;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── En-tete ── */

.demo-header {
  text-align: center;
  padding-bottom: 0.5rem;
}

.demo-badge {
  display: inline-block;
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.demo-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nav-text, #1a1a2e);
  margin: 0 0 0.375rem;
}

.subtitle {
  font-size: 0.9rem;
  color: var(--nav-text-muted, #6b7280);
  margin: 0;
}

/* ── Fallback ── */

.graph-fallback {
  width: 100%;
  height: 70vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-text-muted, #6b7280);
  font-size: 0.9rem;
  background: var(--nav-bg-alt, #f3f4f6);
  border-radius: 12px;
}

/* ── Bandeau mode actif ── */

.mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #166534;
  flex-wrap: wrap;
}

.banner-clear {
  font-size: 0.8rem;
  font-weight: 600;
  color: #166534;
  background: transparent;
  border: 1px solid #166534;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}

.banner-clear:hover {
  background: #166534;
  color: #fff;
}

/* ── Boutons matching ── */

.matching-controls {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  margin: 0 -1rem -2rem;
}

.matching-controls button {
  flex: 1;
  padding: 12px 8px;
  border: 1px solid #d0d4dc;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.matching-controls button .hint {
  font-size: 11px;
  color: #6b7280;
  font-weight: normal;
}

.matching-controls button.active {
  background: var(--mode-color, #1B4436);
  color: white;
  border-color: transparent;
}

.matching-controls button.active .hint {
  color: rgba(255, 255, 255, 0.8);
}

.matching-controls button.reset {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: #f3f4f6;
  border-color: #d0d4dc;
  color: #374151;
  font-size: 13px;
}

.matching-controls button.reset:hover {
  background: #e5e7eb;
}

@media (max-width: 500px) {
  .matching-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 -0.75rem -1.5rem;
  }

  .matching-controls button.reset {
    grid-column: span 2;
  }
}

/* ── Mobile ── */

@media (max-width: 600px) {
  .codev-demo {
    padding: 1rem 0.75rem 1.5rem;
  }

  .demo-header h1 {
    font-size: 1.25rem;
  }
}
</style>
