# 🎯 MAP LAYOUT PRESETS - SYSTÈME INTELLIGENT

## 🧠 VISION GLOBALE

**Concept :** Layout qui s'adapte intelligemment selon le **contexte d'utilisation**, pas juste la taille d'écran.

### Objectifs
1. **Web** → Plateforme complète (planification, réservation, exploration)
2. **Mobile** → Outil terrain (navigation, signalement, vue rapide)
3. **AI-Driven** → Suggestions contextuelles intelligentes
4. **Layouts dynamiques** → Plusieurs modes par appareil

---

## 📱 CAS D'USAGE (User Scenarios)

### Web Desktop

| Mode | Quand | Layout | Panneaux |
|------|-------|--------|----------|
| **PLANNING** | Préparation voyage | Split 50/50 | Carte + Timeline détaillée |
| **EXPLORATION** | Recherche POI | Carte 70% | Sidebar suggestions AI |
| **BOOKING** | Réservations | Triple panel | Carte + Liste + Détails |
| **ANALYTICS** | Stats voyage | Dashboard | Carte + Metrics + Graphiques |
| **NAVIGATION** | Conduite simulation | Fullscreen | Carte + Mini controls |

### Mobile

| Mode | Quand | Layout | Focus |
|------|-------|--------|-------|
| **DRIVE** | En route (vitesse > 30km/h) | Fullscreen carte | Gros boutons, info minimale |
| **EXPLORE** | À pied/arrêté | Bottom sheet | Carte + Sheet swipeable |
| **REPORT** | Signaler incident | Modal focus | Carte + Formulaire rapide |
| **QUICK_VIEW** | Consulter rapide | Compact | Carte + Cards flottantes |
| **AR_PREVIEW** | Vision augmentée | Camera overlay | AR markers + Info |

---

## 🎨 PRESETS DÉTAILLÉS

### 1. PLANNING MODE (Web - Préparation)

**Contexte :** User planifie son voyage avant de partir

```
┌──────────────────────────────────────────────────────┐
│  [Planning Mode] [Timeline] [AI Suggestions]         │
├──────────────────┬───────────────────────────────────┤
│                  │                                   │
│    CARTE 50%     │    TIMELINE VERTICALE 50%        │
│                  │  ┌─────────────────────────────┐ │
│                  │  │ Jour 1 - Paris              │ │
│   [Étapes]       │  │ ├─ 9h: Départ              │ │
│   [Routes]       │  │ ├─ 12h: Déjeuner Lyon       │ │
│   [POI]          │  │ └─ 18h: Arrivée Marseille   │ │
│                  │  ├─────────────────────────────┤ │
│                  │  │ Jour 2 - Côte d'Azur        │ │
│                  │  │ ├─ 10h: Nice                │ │
│                  │  │ └─ 16h: Monaco              │ │
│                  │  └─────────────────────────────┘ │
│                  │                                   │
│                  │  [+ Ajouter étape]                │
│                  │  [🤖 AI: Suggérer optimisation]   │
└──────────────────┴───────────────────────────────────┘
```

**Panneaux actifs :**
- Carte interactive (50% gauche)
- Timeline détaillée (50% droite)
- AI suggestions en bas
- Drag & drop étapes

---

### 2. EXPLORATION MODE (Web - Recherche)

**Contexte :** User explore les POI, restaurants, activités

```
┌──────────────────────────────────────────────────────┐
│  [🔍 Exploration] [Catégories: 🍴 🏨 🎭 ⛰️]          │
├────────┬─────────────────────────────────────────────┤
│        │                                             │
│ Filter │            CARTE 70%                        │
│ ────── │                                             │
│ □ Rest │   [Markers: POI + Prix + Notes]            │
│ □ Hôtel│                                             │
│ □ Activ│                                             │
│        │                                             │
│ AI Rec │            [Clusters dynamiques]            │
│ ────── │                                             │
│ 🤖 "À  │                                             │
│ 2km:   │                                             │
│ Le Bel │                                             │
│ Endroit│                                             │
│ ★★★★☆" │                                             │
│        │                                             │
│ [Voir] │                                             │
└────────┴─────────────────────────────────────────────┘
        │                                             │
        │  [Bottom Bar: Cards POI avec Preview]       │
        └─────────────────────────────────────────────┘
```

**Panneaux actifs :**
- Carte dominante (70%)
- Sidebar filtres + AI suggestions (30%)
- Bottom bar avec cards POI swipeable
- Clusters POI par catégorie

---

### 3. BOOKING MODE (Web - Réservations)

**Contexte :** User réserve hôtels, restaurants, activités

```
┌──────────────────────────────────────────────────────┐
│  [📋 Réservations] [Budget: 450€] [Nuits: 3]         │
├─────────┬────────────────┬──────────────────────────┤
│         │                │                          │
│  LISTE  │   CARTE 40%    │   DÉTAILS                │
│  30%    │                │   30%                    │
│ ─────── │   [Location]   │  ┌────────────────────┐ │
│ □ Hotel │   [Prix]       │  │ Hôtel Belle Vue    │ │
│   Bella │                │  │ ★★★★☆ (124 avis)   │ │
│   120€  │                │  │                    │ │
│         │                │  │ ✓ Wi-Fi gratuit    │ │
│ □ Hotel │                │  │ ✓ Parking          │ │
│   Vista │                │  │ ✓ Petit-déj inclus │ │
│   95€   │                │  │                    │ │
│         │                │  │ [Photos carousel]  │ │
│ 🤖 AI:  │                │  │                    │ │
│ "Vista  │                │  │ [Réserver 120€]    │ │
│ meil.   │                │  └────────────────────┘ │
│ rapport │                │                          │
│ qualité"│                │                          │
└─────────┴────────────────┴──────────────────────────┘
```

**Panneaux actifs :**
- Liste résultats (30% gauche)
- Carte avec prix (40% centre)
- Panel détails + booking (30% droite)
- AI compare & recommande

---

### 4. ANALYTICS MODE (Web - Stats)

**Contexte :** User analyse son voyage (post-trip ou live)

```
┌──────────────────────────────────────────────────────┐
│  [📊 Analytics] [Voyage: Italie 2024]                │
├──────────────────────────────────────────────────────┤
│  ┌────────────┬────────────┬────────────┐           │
│  │ 1,234 km   │ 18h 45min  │ 12 étapes  │           │
│  └────────────┴────────────┴────────────┘           │
├────────────────┬─────────────────────────────────────┤
│                │                                     │
│   CARTE 60%    │   GRAPHIQUES & STATS 40%           │
│                │  ┌──────────────────────────────┐  │
│  [Heatmap]     │  │ Distance par jour            │  │
│  [Vitesse moy] │  │ ████████ 145km               │  │
│  [Arrêts]      │  │ ██████ 98km                  │  │
│                │  └──────────────────────────────┘  │
│                │                                     │
│                │  ┌──────────────────────────────┐  │
│                │  │ Budget dépensé               │  │
│                │  │ ━━━━━━━━━━━━━━━ 450€/500€   │  │
│                │  └──────────────────────────────┘  │
│                │                                     │
│                │  🤖 AI Insights:                    │
│                │  "Économie de 65€ vs initial"      │
└────────────────┴─────────────────────────────────────┘
```

**Panneaux actifs :**
- Carte avec heatmap (60%)
- Graphiques stats (40%)
- KPI cards en haut
- AI insights

---

### 5. DRIVE MODE (Mobile - Navigation active)

**Contexte :** User conduit (vitesse > 30km/h détectée)

```
┌─────────────────────────────────┐
│                                 │
│                                 │
│                                 │
│        CARTE FULLSCREEN         │
│                                 │
│     [Route avec directions]     │
│                                 │
│                                 │
│  ┌───────────────────────────┐  │
│  │  ➡️  Dans 500m            │  │ ← HUD compact
│  │  Tournez à droite         │  │
│  │  vers A7                  │  │
│  └───────────────────────────┘  │
│                                 │
│  [●●●●○]  120 km/h  🔊         │ ← Status bar mini
│                                 │
└─────────────────────────────────┘
```

**Features :**
- Carte plein écran
- HUD directions vocal + visuel
- Gros boutons tactiles
- Auto-zoom intelligent
- Alertes vocales

---

### 6. EXPLORE MODE (Mobile - À pied/arrêté)

**Contexte :** User explore à pied ou est arrêté

```
┌─────────────────────────────────┐
│                                 │
│        CARTE 60%                │
│                                 │
│     [POI markers visibles]      │
│                                 │
├─────────────────────────────────┤
│ ╔═══════════════════════════╗   │ ← Swipeable
│ ║ 🍴 Restaurants à 500m     ║   │   bottom sheet
│ ║ ───────────────────────── ║   │
│ ║ Le Petit Bistro  ★★★★☆    ║   │
│ ║ [Photo] Français · 15€    ║   │
│ ║                           ║   │
│ ║ Pizza Napoli  ★★★★★       ║   │
│ ║ [Photo] Italien · 12€     ║   │
│ ║                           ║   │
│ ║ 🤖 AI: "Le Petit Bistro   ║   │
│ ║ parfait pour déjeuner"    ║   │
│ ╚═══════════════════════════╝   │
│         [Swipe up pour +]       │
└─────────────────────────────────┘
```

**Features :**
- Carte visible (60%)
- Bottom sheet swipeable (40%)
- Cards POI avec preview
- AI recommendations
- Filtres rapides

---

### 7. REPORT MODE (Mobile - Signalement)

**Contexte :** User signale incident, travaux, radar, etc.

```
┌─────────────────────────────────┐
│        CARTE 40%                │
│     [Pin position]              │
│                                 │
├─────────────────────────────────┤
│ ╔═══════════════════════════╗   │
│ ║ 🚨 Signaler un incident   ║   │
│ ║                           ║   │
│ ║ Type:                     ║   │
│ ║ ◉ Travaux                 ║   │
│ ║ ○ Accident                ║   │
│ ║ ○ Radar                   ║   │
│ ║ ○ Embouteillage          ║   │
│ ║                           ║   │
│ ║ [📸 Ajouter photo]        ║   │
│ ║                           ║   │
│ ║ Note (optionnel):         ║   │
│ ║ [Voie fermée côté droit]  ║   │
│ ║                           ║   │
│ ║ [Annuler]  [Signaler ✓]   ║   │
│ ╚═══════════════════════════╝   │
└─────────────────────────────────┘
```

**Features :**
- Carte réduite (40%)
- Formulaire rapide (60%)
- Quick actions (photo, vocal)
- Validation 1-tap
- Partage communauté

---

### 8. AR PREVIEW MODE (Mobile - Réalité augmentée)

**Contexte :** User utilise la caméra pour voir infos AR

```
┌─────────────────────────────────┐
│                                 │
│      📹 CAMERA LIVE VIEW        │
│                                 │
│   [Bâtiments avec overlays]     │
│                                 │
│     ┌─────────────┐             │ ← AR markers
│     │ 🏨 Hotel    │             │
│     │ Bella Vista │             │
│     │ 120€ · 500m │             │
│     └─────────────┘             │
│                                 │
│          🍴                      │
│       Le Bistro                 │
│       ★★★★☆ · 200m              │
│                                 │
│  [◀️]              [Mini map]   │ ← Controls
│                                 │
└─────────────────────────────────┘
```

**Features :**
- Camera live
- AR markers sur POI
- Distance + prix
- Mini-map orientation
- Compass overlay

---

## 🤖 AI CONTEXTUEL

### Triggers Intelligents

| Contexte | AI Suggestion | Action |
|----------|---------------|--------|
| Vitesse < 10km/h + 12h-14h | "Pause déjeuner ?" | Propose restaurants 2km |
| Batterie < 20% | "Recharger ?" | Affiche bornes électriques |
| Météo pluie | "Route alternative ?" | Propose route couverte |
| Budget dépassé | "Optimiser ?" | Suggère alternatives moins chères |
| Fatigue détectée (3h route) | "Pause café ?" | Propose aires repos |
| Arrivée prévue > 22h | "Hôtel ce soir ?" | Propose hébergements |
| POI fermé détecté | "Alternative ?" | Propose équivalent ouvert |

### AI Proactive

```typescript
// Exemple: Système de suggestions contextuelles
interface AIContext {
  location: Coordinates
  speed: number
  time: Date
  weather: Weather
  budget: Budget
  userPreferences: Preferences
}

function getAISuggestions(context: AIContext): Suggestion[] {
  // Heure du repas
  if (isLunchTime(context.time) && context.speed < 10) {
    return [{
      type: 'food',
      message: '🍴 C\'est l\'heure du déjeuner !',
      poi: getNearbyRestaurants(context.location, context.budget),
      priority: 'high'
    }]
  }
  
  // Fatigue détectée
  if (context.drivingTime > 180 && context.speed > 80) {
    return [{
      type: 'safety',
      message: '☕ Pause recommandée après 3h de route',
      poi: getNearbyRestStops(context.location),
      priority: 'critical'
    }]
  }
  
  // Météo
  if (context.weather.rain && context.speed > 90) {
    return [{
      type: 'weather',
      message: '🌧️ Pluie détectée - Ralentissez',
      action: 'reduce_speed',
      priority: 'medium'
    }]
  }
  
  // ... autres règles
}
```

---

## 🎮 SYSTÈME DE PRESETS

### Structure TypeScript

```typescript
// types/mapPresets.ts
export type MapPresetId = 
  | 'planning'
  | 'exploration'
  | 'booking'
  | 'analytics'
  | 'navigation'
  | 'drive'
  | 'explore'
  | 'report'
  | 'ar'

export interface MapPreset {
  id: MapPresetId
  name: string
  description: string
  device: 'web' | 'mobile' | 'both'
  layout: LayoutConfig
  panels: PanelConfig[]
  aiFeatures: AIFeature[]
  autoTrigger?: TriggerRule[]
}

export interface LayoutConfig {
  type: 'split' | 'fullscreen' | 'triple' | 'dashboard' | 'overlay'
  mapSize: number // 0-100%
  orientation: 'horizontal' | 'vertical'
}

export interface PanelConfig {
  id: string
  position: 'left' | 'right' | 'top' | 'bottom' | 'overlay'
  size: number // 0-100%
  component: string
  collapsible: boolean
  swipeable: boolean
}

export interface AIFeature {
  id: string
  type: 'suggestion' | 'optimization' | 'alert' | 'insight'
  trigger: TriggerRule
  priority: 'low' | 'medium' | 'high' | 'critical'
}

export interface TriggerRule {
  conditions: Condition[]
  operator: 'AND' | 'OR'
}
```

### Presets Config

```typescript
// config/mapPresets.ts
export const MAP_PRESETS: Record<MapPresetId, MapPreset> = {
  planning: {
    id: 'planning',
    name: 'Mode Planification',
    description: 'Organiser votre voyage étape par étape',
    device: 'web',
    layout: {
      type: 'split',
      mapSize: 50,
      orientation: 'horizontal'
    },
    panels: [
      {
        id: 'timeline',
        position: 'right',
        size: 50,
        component: 'TimelinePanel',
        collapsible: false,
        swipeable: false
      }
    ],
    aiFeatures: [
      {
        id: 'route_optimization',
        type: 'optimization',
        trigger: { conditions: [{ key: 'stages', operator: '>', value: 3 }], operator: 'AND' },
        priority: 'medium'
      }
    ]
  },
  
  exploration: {
    id: 'exploration',
    name: 'Mode Exploration',
    description: 'Découvrir des POI et activités',
    device: 'web',
    layout: {
      type: 'split',
      mapSize: 70,
      orientation: 'horizontal'
    },
    panels: [
      {
        id: 'filters',
        position: 'left',
        size: 30,
        component: 'FiltersPanel',
        collapsible: true,
        swipeable: false
      },
      {
        id: 'poi_cards',
        position: 'bottom',
        size: 20,
        component: 'POICardsPanel',
        collapsible: true,
        swipeable: true
      }
    ],
    aiFeatures: [
      {
        id: 'poi_recommendations',
        type: 'suggestion',
        trigger: { conditions: [{ key: 'location_changed', operator: '==', value: true }], operator: 'AND' },
        priority: 'low'
      }
    ]
  },
  
  drive: {
    id: 'drive',
    name: 'Mode Conduite',
    description: 'Navigation en temps réel',
    device: 'mobile',
    layout: {
      type: 'fullscreen',
      mapSize: 100,
      orientation: 'vertical'
    },
    panels: [
      {
        id: 'hud',
        position: 'overlay',
        size: 20,
        component: 'NavigationHUD',
        collapsible: false,
        swipeable: false
      }
    ],
    aiFeatures: [
      {
        id: 'safety_alerts',
        type: 'alert',
        trigger: { conditions: [{ key: 'speed', operator: '>', value: 30 }], operator: 'AND' },
        priority: 'critical'
      }
    ],
    autoTrigger: [
      {
        conditions: [
          { key: 'speed', operator: '>', value: 30 },
          { key: 'device', operator: '==', value: 'mobile' }
        ],
        operator: 'AND'
      }
    ]
  }
  
  // ... autres presets
}
```

---

## 🔄 SYSTÈME DE TRANSITION

### Auto-Switch Intelligent

```typescript
// composables/useMapPresetManager.ts
export function useMapPresetManager() {
  const currentPreset = ref<MapPresetId>('exploration')
  const device = ref<'web' | 'mobile'>('web')
  const context = ref<AIContext>({})
  
  // Auto-switch basé sur contexte
  watch([() => context.value.speed, () => context.value.time], () => {
    const newPreset = determineOptimalPreset(context.value, device.value)
    if (newPreset !== currentPreset.value) {
      switchPreset(newPreset, { animated: true, duration: 300 })
    }
  })
  
  function determineOptimalPreset(ctx: AIContext, dev: 'web' | 'mobile'): MapPresetId {
    // Mobile + vitesse > 30km/h = DRIVE mode
    if (dev === 'mobile' && ctx.speed > 30) {
      return 'drive'
    }
    
    // Mobile + arrêté + POI recherche = EXPLORE mode
    if (dev === 'mobile' && ctx.speed < 5 && ctx.searchActive) {
      return 'explore'
    }
    
    // Web + planification = PLANNING mode
    if (dev === 'web' && ctx.editingStages) {
      return 'planning'
    }
    
    // Web + recherche POI = EXPLORATION mode
    if (dev === 'web' && ctx.searchActive) {
      return 'exploration'
    }
    
    // Web + stats = ANALYTICS mode
    if (dev === 'web' && ctx.viewingStats) {
      return 'analytics'
    }
    
    return 'exploration' // default
  }
  
  async function switchPreset(presetId: MapPresetId, options?: TransitionOptions) {
    const preset = MAP_PRESETS[presetId]
    
    // Animation de transition
    if (options?.animated) {
      await animatePresetTransition(currentPreset.value, presetId, options.duration)
    }
    
    // Appliquer nouveau layout
    applyPresetLayout(preset)
    
    // Activer AI features
    activateAIFeatures(preset.aiFeatures)
    
    // Update state
    currentPreset.value = presetId
    
    // Notify analytics
    trackPresetChange(presetId)
  }
  
  return {
    currentPreset,
    switchPreset,
    availablePresets: computed(() => 
      Object.values(MAP_PRESETS).filter(p => p.device === device.value || p.device === 'both')
    )
  }
}
```

---

## 🎨 UI COMPONENTS PAR PRESET

### Planning Mode Components
- `TimelinePanel.vue` - Ligne de temps drag & drop
- `StageCard.vue` - Card étape avec détails
- `RouteOptimizer.vue` - Outil optimisation AI
- `BudgetTracker.vue` - Suivi budget

### Exploration Mode Components
- `FiltersPanel.vue` - Filtres catégories POI
- `POICard.vue` - Card POI avec preview
- `ClusterManager.vue` - Gestion clusters map
- `AIRecommendations.vue` - Suggestions AI

### Booking Mode Components
- `BookingList.vue` - Liste résultats
- `BookingDetails.vue` - Détails + réservation
- `PriceComparator.vue` - Comparateur prix
- `AIBookingAssistant.vue` - Assistant AI

### Drive Mode Components
- `NavigationHUD.vue` - HUD directions
- `VoiceAssistant.vue` - Assistant vocal
- `SafetyAlerts.vue` - Alertes sécurité
- `QuickActions.vue` - Actions rapides (SOS, signaler)

---

## 📊 METRICS & ANALYTICS

### Tracking par Preset

```typescript
interface PresetMetrics {
  presetId: MapPresetId
  duration: number // ms
  interactions: number
  aiSuggestionsShown: number
  aiSuggestionsAccepted: number
  switchReason: 'manual' | 'auto' | 'ai'
  userSatisfaction?: 1 | 2 | 3 | 4 | 5
}

// Track preset usage
function trackPresetUsage(metrics: PresetMetrics) {
  analytics.track('map_preset_used', {
    preset: metrics.presetId,
    duration: metrics.duration,
    interactions: metrics.interactions,
    ai_acceptance_rate: metrics.aiSuggestionsAccepted / metrics.aiSuggestionsShown,
    switch_reason: metrics.switchReason
  })
}
```

---

## 🚀 ROADMAP IMPLEMENTATION

### Phase 1 - Core Presets (Semaine 1-2)
- [ ] Créer système presets (types, config, manager)
- [ ] Implémenter 3 presets essentiels (Planning, Exploration, Drive)
- [ ] Transitions animées entre presets
- [ ] Auto-switch basique (vitesse, device)

### Phase 2 - AI Integration (Semaine 3-4)
- [ ] Système suggestions contextuelles
- [ ] Triggers intelligents
- [ ] AI recommendations POI
- [ ] Safety alerts

### Phase 3 - Advanced Presets (Semaine 5-6)
- [ ] Booking mode
- [ ] Analytics mode
- [ ] Report mode
- [ ] AR preview mode (expérimental)

### Phase 4 - Optimisation (Semaine 7-8)
- [ ] Performance (lazy loading panels)
- [ ] A/B testing presets
- [ ] User preferences learning
- [ ] Analytics dashboard

---

## 💡 EXEMPLES CRÉATIFS

### Preset "Road Trip Social"
- Stream live position
- Chat avec copilotes
- Partage photos instantané
- Feed communauté

### Preset "Eco Mode"
- Affichage conso carburant
- Suggestions routes économiques
- Bornes recharge électrique
- Carbon footprint tracker

### Preset "Adventure"
- Challenges gamifiés
- Points découverte
- Badges exploration
- Leaderboard amis

### Preset "Zen Mode"
- Routes panoramiques
- Arrêts nature
- Musique apaisante intégrée
- Slow travel suggestions

---

## 🎯 SUCCESS METRICS

| Métrique | Objectif | Mesure |
|----------|----------|--------|
| **Preset usage** | 80% users utilisent 2+ presets | Analytics |
| **Auto-switch acceptance** | 70% users acceptent switch auto | Click-through |
| **AI suggestions CTR** | 40% suggestions cliquées | Interaction rate |
| **Time to task** | -50% vs layout fixe | Task completion time |
| **User satisfaction** | 4.5/5 rating | Survey |

---

## 🔥 CONCLUSION

**Concept clé :** Layout intelligent qui s'adapte au contexte, pas juste à la taille d'écran.

**Innovation :** AI proactive + Presets dynamiques + Auto-switch intelligent

**Différenciation :** Expérience personnalisée vs Google Maps statique

**Next steps :** Implémenter phase 1 (core presets + transitions)

🚀 **Let's build the ultimate road trip map experience!**
