@extends('layout')
@section('title','Modèles de mail')
@section('content')
<h1>Modèles de mail</h1>
<p class="muted">Un modèle contient un objet, un contenu et ses pièges. À la création/modification d'une campagne, l'import d'un modèle remplit tout et reste <strong>modifiable temporairement</strong> sur la campagne (le modèle n'est pas touché). Écrivez le mail comme dans un traitement de texte ; les boutons « Insérer » ajoutent le prénom, l'email, le département ou le lien piégé.</p>

@if($aiConfigured)
    @include('admin._ai-generator', ['aiEndpoint' => route('templates.ai-generate'), 'onResult' => 'applyAiTemplate'])
@else
    <div class="card">
        <p class="muted" style="margin:0">
            🤖 Assistant IA disponible : configure une clé API Claude dans
            <a href="{{ route('settings.edit') }}">Configuration → Réglages</a> pour générer des modèles depuis une
            description (et des images/PDF joints).
        </p>
    </div>
@endif

<div class="template-split">
<div class="card">
    <h2>Nouveau modèle</h2>
    <form method="post" action="{{ route('templates.store') }}" data-live-preview>
        @csrf
        <div class="row">
            <div style="flex:1"><label>Nom</label><input name="name" placeholder="ex. Microsoft 365" required></div>
            <div style="flex:2"><label>Objet</label><input name="subject" placeholder="Objet du mail" required></div>
        </div>
        <label>Contenu du mail</label>
        @include('campaigns._editor', ['initialBody' => old('body_html', '')])

        <label style="margin-top:14px">Pièges du modèle</label>
        <div id="traps"></div>
        <button type="button" class="btn secondary" onclick="addTrap()">+ Ajouter un piège</button>

        <div style="margin-top:14px"><button class="btn">Enregistrer le modèle</button></div>
    </form>
</div>
@include('admin._template-preview')
</div>
<style>
    .template-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
    @media (max-width:1100px){.template-split{grid-template-columns:1fr}.template-split #mail-preview{position:static!important}}
</style>

<datalist id="trap-images">
    @foreach($libraryImages as $img)
        <option value="{{ $img['url'] }}">{{ $img['name'] }}</option>
    @endforeach
</datalist>

<div class="card">
    <form method="get" action="{{ route('templates.index') }}" id="templates-filters" data-autosubmit data-results="#results">
        <div class="row" style="align-items:flex-end;gap:12px">
            <div style="flex:1;min-width:200px"><label>Recherche</label>
                <input type="text" name="q" value="{{ $q }}" placeholder="Nom ou objet…">
            </div>
            <div><button class="btn">Appliquer</button></div>
            @if($q !== '')
                <div><a class="btn secondary" href="{{ route('templates.index') }}">Réinitialiser</a></div>
            @endif
        </div>
    </form>
</div>

<div class="card" id="results">
    <div class="row" style="justify-content:space-between;align-items:center;margin-bottom:6px">
        <h2 style="margin:0">Modèles ({{ $templates->total() }})</h2>
        @include('partials.per-page-selector', ['perPage' => $perPage, 'options' => $perPageOptions, 'formId' => 'templates-filters'])
    </div>
    <table>
        <tr><th>Nom</th><th>Objet</th><th>Pièges</th><th></th></tr>
        @forelse($templates as $t)
            <tr>
                <td><strong>{{ $t->name }}</strong></td>
                <td>{{ $t->subject }}</td>
                <td>{{ count($t->traps ?? []) }}</td>
                <td style="text-align:right;white-space:nowrap">
                    <a class="btn secondary" href="{{ route('templates.edit', $t) }}">Modifier</a>
                    <form method="post" action="{{ route('templates.destroy', $t) }}" style="display:inline" onsubmit="return confirm('Supprimer ce modèle ?')">
                        @csrf @method('DELETE')
                        <button class="btn danger">Supprimer</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="4" class="muted">{{ $q !== '' ? 'Aucun modèle ne correspond à cette recherche.' : 'Aucun modèle.' }}</td></tr>
        @endforelse
    </table>
    <div style="margin-top:14px">{{ $templates->links() }}</div>
</div>

<script>
let i = 0;
function addTrap(data){
    const n = i++;
    data = data || {type:'link', label:'', asset_url:''};
    const div = document.createElement('div');
    div.className = 'card';
    div.style.background = '#f8fafc';
    const isImg = data.type === 'image';
    div.innerHTML = `
        <div class="row" style="align-items:flex-end">
            <div style="width:80px"><label>Piège ${n+1}</label><span class="muted">trap:${n+1}</span></div>
            <div style="flex:1"><label>Type</label>
                <select name="traps[${n}][type]" onchange="toggleAsset(this, ${n})">
                    <option value="link">Lien texte</option>
                    <option value="button">Bouton</option>
                    <option value="image">Image cliquable</option>
                    <option value="qr">QR code</option>
                </select>
            </div>
            <div style="flex:1"><label>Texte / alt</label><input name="traps[${n}][label]" required value="${(data.label||'').replace(/"/g,'&quot;')}"></div>
            <div style="flex:1" id="asset-${n}" ${isImg?'':'hidden'}>
                <label>Image <span class="muted">(tape le nom, choisis dans la liste — ou <a href="{{ route('files.index') }}" target="_blank">gère la bibliothèque</a>)</span></label>
                <input type="text" list="trap-images" autocomplete="off" name="traps[${n}][asset_url]" value="${data.asset_url||''}" placeholder="ex. logo-office365.png" oninput="previewAsset(this, ${n})">
                <img id="preview-${n}" src="${data.asset_url||''}" style="max-height:60px;margin-top:6px;${data.asset_url?'':'display:none'}" onerror="this.style.display='none'" onload="this.style.display='inline-block'">
            </div>
            <button type="button" class="btn danger" onclick="this.closest('.card').remove()">×</button>
        </div>`;
    document.getElementById('traps').appendChild(div);
    div.querySelector('select').value = data.type;
}
function toggleAsset(sel, n){ document.getElementById('asset-'+n).hidden = sel.value !== 'image'; }
function previewAsset(input, n){
    const img = document.getElementById('preview-'+n);
    img.style.display = input.value ? 'inline-block' : 'none';
    img.src = input.value;
}
addTrap();

function applyAiTemplate(data){
    if (data.name) document.querySelector('input[name="name"]').value = data.name;
    document.querySelector('input[name="subject"]').value = data.subject || '';
    quill.setText('');
    if (data.body_html) quill.clipboard.dangerouslyPasteHTML(data.body_html);
    document.getElementById('traps').innerHTML = '';
    i = 0;
    if (data.traps && data.traps.length) { data.traps.forEach(t => addTrap(t)); } else { addTrap(); }
}
</script>
@endsection