# Internationalisation (i18n)

Support multilingue complet du frontend Ackify.

## Langues Supportées

- 🇫🇷 **Français** (par défaut)
- 🇬🇧 **English** (fallback)
- 🇪🇸 **Español**
- 🇩🇪 **Deutsch**
- 🇮🇹 **Italiano**

## Frontend (Vue.js)

### Sélection de Langue

Le frontend détecte automatiquement la langue via :

1. **localStorage** - Choix utilisateur sauvegardé
2. **navigator.language** - Langue du navigateur
3. **Fallback** - English si non supportée

### Switcher de Langue

Interface utilisateur avec drapeaux Unicode :

```
🇫🇷 FR | 🇬🇧 EN | 🇪🇸 ES | 🇩🇪 DE | 🇮🇹 IT
```

Clic → Langue change + sauvegarde dans localStorage

### Fichiers de Traduction

Localisés dans `/webapp/src/locales/` :

```
locales/
├── fr.json    # Français
├── en.json    # English
├── es.json    # Español
├── de.json    # Deutsch
└── it.json    # Italiano
```

### Structure JSON

```json
{
  "home": {
    "title": "Ackify - Proof of Read",
    "subtitle": "Signatures cryptographiques de lecture"
  },
  "document": {
    "sign": "Signer ce document",
    "signed": "Document signé",
    "signatures": "{count} confirmation | {count} confirmations"
  }
}
```

**Pluralisation** :
```json
"signatures": "{count} confirmation | {count} confirmations"
```

Usage :
```vue
{{ $t('document.signatures', { count: 42 }) }}
// → "42 confirmations"
```

## Backend (Go)

### Templates Email

Les emails utilisent des templates multilingues dans `/backend/templates/emails/` :

```
templates/emails/
├── fr/
│   ├── reminder.html
│   └── reminder.txt
├── en/
│   ├── reminder.html
│   └── reminder.txt
├── es/...
├── de/...
└── it/...
```

### Envoi avec Locale

```http
POST /api/v1/admin/documents/doc_id/reminders
Content-Type: application/json

{
  "emails": ["user@company.com"],
  "locale": "fr"
}
```

Le backend charge le template `fr/reminder.html`.

### Configuration

```bash
# Langue par défaut pour les emails (défaut: en)
ACKIFY_MAIL_DEFAULT_LOCALE=fr
```

## Ajouter une Langue

### Frontend

1. **Créer le fichier de traduction** :

```bash
cd webapp/src/locales
cp en.json pt.json  # Portugais
```

2. **Traduire** :

```json
{
  "home": {
    "title": "Ackify - Prova de Leitura",
    "subtitle": "Assinaturas criptográficas de leitura"
  }
}
```

3. **Enregistrer dans i18n** :

```typescript
// webapp/src/i18n.ts
import pt from './locales/pt.json'

const i18n = createI18n({
  locale: 'fr',
  fallbackLocale: 'en',
  messages: {
    fr, en, es, de, it,
    pt  // Ajouter ici
  }
})
```

4. **Ajouter au sélecteur** :

```vue
<!-- components/LanguageSwitcher.vue -->
<button @click="changeLocale('pt')">🇵🇹 PT</button>
```

### Backend

1. **Créer le répertoire** :

```bash
mkdir -p backend/templates/emails/pt
```

2. **Créer les templates** :

```bash
cp backend/templates/emails/en/reminder.html backend/templates/emails/pt/
cp backend/templates/emails/en/reminder.txt backend/templates/emails/pt/
```

3. **Traduire les templates**

4. **Rebuild** :

```bash
docker compose up -d --force-recreate ackify-ce --build
```

## Vérification i18n

### Script de Validation

Le projet inclut un script pour vérifier la complétude des traductions :

```bash
cd webapp
npm run lint:i18n
```

**Output** :
```
✅ fr.json - 156 keys
✅ en.json - 156 keys
✅ es.json - 156 keys
✅ de.json - 156 keys
✅ it.json - 156 keys

All translations are complete!
```

### CI/CD

Le script s'exécute automatiquement dans GitHub Actions pour bloquer les PRs avec traductions manquantes.

## Bonnes Pratiques

### Clés de Traduction

- ✅ Utiliser des clés structurées : `feature.action.label`
- ✅ Grouper par page/composant
- ✅ Éviter les clés trop génériques (`button`, `title`)
- ✅ Utiliser des placeholders : `{count}`, `{name}`

**Exemple** :
```json
{
  "admin": {
    "documents": {
      "list": {
        "title": "Liste des documents",
        "count": "{count} document | {count} documents"
      }
    }
  }
}
```

### Synchronisation

Lors de l'ajout de nouvelles clés en français :

```bash
# Sync script (à créer)
node scripts/sync-i18n-from-fr.js
```

Copie automatiquement les nouvelles clés vers les autres langues avec `[TODO]`.

### Textes Longs

Pour les textes longs, utiliser des arrays :

```json
{
  "help": {
    "intro": [
      "Ackify permet de créer des signatures cryptographiques.",
      "Chaque signature est horodatée et non-répudiable.",
      "Les données sont stockées de manière immuable."
    ]
  }
}
```

Usage :
```vue
<p v-for="line in $tm('help.intro')" :key="line">
  {{ line }}
</p>
```

## Formats Spécifiques

### Dates

```typescript
// Formater avec la locale courante
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const formatted = new Date().toLocaleDateString(locale.value, {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})
// fr: "15 janvier 2025"
// en: "January 15, 2025"
```

### Nombres

```typescript
const formatted = (42000).toLocaleString(locale.value)
// fr: "42 000"
// en: "42,000"
```

## SEO & Meta Tags

Les meta tags sont traduits dynamiquement :

```vue
<script setup>
import { useI18n } from 'vue-i18n'
import { useHead } from '@vueuse/head'

const { t } = useI18n()

useHead({
  title: t('home.title'),
  meta: [
    { name: 'description', content: t('home.description') }
  ]
})
</script>
```

## Documentation Complète

Pour plus de détails sur l'implémentation i18n du frontend, voir :

**[webapp/I18N.md](../../webapp/I18N.md)**

Ce fichier contient :
- Architecture complète vue-i18n
- Guide de contribution
- Scripts de synchronisation
- Exemples avancés
