# Amélioration POI Discovery - Composant Unifié

## 🎯 Objectif

Remplacer le composant `MobilePoiTray` (simple liste) par un nouveau composant `POIDiscoveryPanel` unifié qui fusionne :
- **Design moderne** de `POICardsPanel` (Dashboard)
- **Logique IA avancée** de `useMobilePoiDiscovery`

## ❓ Problème résolu

**User feedback :**  
> "c'est pas ca, mais genre on cherche quoi ? A quelle endroit ? Comment ? Quand ? Quoi ?"

Le POI search manquait de clarté sur :
- **Quoi** : Catégories recherchées
- **Où** : Point d'ancrage + rayon
- **Comment** : Filtres + méthode IA
- **Quand** : Dernière actualisation

## ✨ Nouveau composant : POIDiscoveryPanel

### Localisation
```
apps/web/src/modules/planner/components/POIDiscoveryPanel.vue
```

### Fonctionnalités

#### 1. Header contextuel
- **Eyebrow badge** avec icône IA : "Autour de [Point d'ancrage]"
- **Titre** : "Découvrez des lieux uniques"
- **Compteur** : Nombre de suggestions IA
- **Timestamp** : "Il y a X min"
- **Actions** : Changer ancrage, actualiser

#### 2. Filtres visuels
- **Catégories** : 8 boutons chips interactifs (viewpoint, activity, restaurant, museum, park, hotel, cafe, beach)
  - États : inactif / actif (hover + background + border)
  - Icônes Material + labels
- **Rayon** : Slider 5-120 km avec label dynamique

#### 3. Grille de cards moderne
- **Layout** : Grid responsive (auto-fill 300px)
- **Card structure** :
  - Image cover ou placeholder avec icône catégorie
  - Overlay actions (ajouter, prévisualiser) au hover
  - Badge uniqueness (score IA /100) en bas à gauche
  - Content : titre + catégorie chip
  - Description (2 lignes max, ellipsis)
  - Meta chips : distance, rating, durée
  - Tags (max 3)
- **Animations** :
  - Hover : translateY(-6px) + shadow boost
  - Image zoom (scale 1.08)
  - Overlay fade-in

#### 4. États
- **Loading** : Skeletons (6 cards)
- **Empty** : Icône + message + bouton actualiser
- **Success** : Grid de suggestions

### Design system

#### Couleurs
- Background : `color-mix(in srgb, var(--bg-elevated, #0b1220) 70%, transparent 30%)`
- Border : `color-mix(in srgb, var(--accent-primary, #4f46e5) 15%, transparent 85%)`
- Backdrop : `blur(16px)`
- Glass morphism sur tous les conteneurs

#### Typographie
- Eyebrow : `0.7rem`, `uppercase`, `letter-spacing: 0.5px`
- Titre : `1.3rem`, `font-weight: 700`
- Subtitle : `0.85rem`, secondary
- Card title : `1.05rem`, `font-weight: 600`
- Description : `0.85rem`, `line-clamp: 2`

#### Espacements
- Section gap : `20px`
- Card gap : `18px`
- Padding conteneur : `18px`
- Border radius : `14-16px`

#### Responsive
- Desktop : `300px` cards
- Tablet : `280px` cards
- Mobile : `1fr` (pleine largeur)

### Props

```typescript
suggestions: AIPOISuggestion[]
loading: boolean
anchorLabel: string
lastUpdatedLabel: string
selectedCategories: string[]
availableCategories: Array<{ value: string; label: string; icon: string }>
radiusKm: number (v-model)
```

### Events

```typescript
@refresh: []
@add: [poi: AIPOISuggestion]
@preview: [poi: AIPOISuggestion]
@toggle-category: [category: string]
@update:radiusKm: [value: number]
@cycle-anchor: []
```

### Méthodes

```typescript
getCategoryIcon(category: string): string
formatCategory(category: string): string
formatDistance(km: number): string
formatDuration(minutes: number): string
```

## 📍 Intégration

### PlannerPage.web.vue

**Avant :**
```vue
<MobilePoiTray
  :categories="poiDiscovery.selectedCategories.value"
  @update-radius="poiDiscovery.setRadius($event)"
/>
```

**Après :**
```vue
<POIDiscoveryPanel
  :selected-categories="poiDiscovery.selectedCategories.value"
  @update:radius-km="poiDiscovery.setRadius($event)"
/>
```

### PlannerPage.mobile.vue

**Avant :**
```vue
<MobilePoiTray
  :categories="unref(poiDiscovery.selectedCategories)"
  @update-radius="poiDiscovery.setRadius($event)"
/>
```

**Après :**
```vue
<POIDiscoveryPanel
  :selected-categories="unref(poiDiscovery.selectedCategories)"
  @update:radius-km="poiDiscovery.setRadius($event)"
/>
```

### Imports modifiés

**Web :**
```typescript
// Avant
import MobilePoiTray from '@/modules/planner/components/mobile/MobilePoiTray.vue'

// Après
import POIDiscoveryPanel from '@/modules/planner/components/POIDiscoveryPanel.vue'
```

**Mobile :**
```typescript
// Avant
import MobilePoiTray from '@/modules/planner/components/mobile/MobilePoiTray.vue'

// Après
import POIDiscoveryPanel from '@/modules/planner/components/POIDiscoveryPanel.vue'
```

## ✅ Tests

```bash
pnpm type-check  # ✅ PASS
pnpm build       # ✅ PASS (1m17s)
```

## 🎨 Comparaison visuelle

### Avant (MobilePoiTray)
- Liste verticale simple
- Cards minimalistes
- Filtres en header basiques
- Pas d'images
- Pas d'animations

### Après (POIDiscoveryPanel)
- Grid responsive moderne
- Cards avec images/placeholders
- Filtres visuels interactifs
- Badge AI uniqueness
- Animations hover sophistiquées
- Glass morphism partout
- Context header explicite

## 📊 Impact

### UX
- **Clarté** : Header contextuel explicite (quoi/où/quand)
- **Visual appeal** : Images + glass morphism + animations
- **Interactivité** : Hover states + quick actions
- **Feedback** : Badges IA + scores relevance

### Performance
- Identique (même composable `useMobilePoiDiscovery`)
- Skeletons pour loading states
- Grid lazy rendering

### Maintenance
- **1 composant** au lieu de 2 (MobilePoiTray + POICardsPanel)
- Code centralisé
- Props standardisées

## 🚀 Prochaines étapes

### Améliorations possibles
1. **Images réelles** : Intégrer API photos (Google Places, Unsplash)
2. **Favorites** : Système de sauvegarde POI
3. **Preview modal** : Afficher POI sur carte au clic
4. **Filtres avancés** : Rating min, distance max, prix
5. **Tri** : Par distance, rating, relevance
6. **Pagination** : Load more pour grandes listes

### Évolutions
- Ajouter animations stagger pour cards (delay progressif)
- Intégrer searchStore pour résultats complémentaires
- Support offline avec cache IndexedDB
- Share POI favorites entre utilisateurs

## 📝 Notes

- `MobilePoiTray.vue` peut maintenant être supprimé (plus utilisé)
- `POICardsPanel.vue` reste sur Dashboard (usage différent)
- Composable `useMobilePoiDiscovery` inchangé (réutilisable)
