{% extends '@Communication/communication/layout.html.twig' %}

{% block communication_title %}Paramètres de communication{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set p = settings.preferences|default({}) %}
{% set notifications = p.notificationPreferences|default({}) %}
{% set account = linkedinAccounts|first %}
{% set sections = {
    general:['solar:tuning-2-bold-duotone','Général'],
    workflow:['solar:branching-paths-down-bold-duotone','Flux de validation'],
    linkedin:['logos:linkedin-icon','LinkedIn'],
    publishing:['solar:plain-bold-duotone','Publication'],
    notifications:['solar:bell-bing-bold-duotone','Notifications'],
    ai:['solar:magic-stick-3-bold-duotone','Intelligence artificielle'],
    tone:['solar:pen-new-square-bold-duotone','Ton éditorial'],
    timezone:['solar:clock-circle-bold-duotone','Fuseau horaire'],
    approval:['solar:verified-check-bold-duotone','Approbation'],
    retries:['solar:refresh-circle-bold-duotone','Relances']
} %}

<form class="csettings" method="post" data-controller="communication-settings" data-action="input->communication-settings#changed change->communication-settings#changed">
    <input type="hidden" name="_token" value="{{ csrf_token('communication_settings_save') }}">
    <header class="csettings-top capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Paramètres de communication</h1>
                <p class="capsule-heading-subtitle">Gérez vos préférences de publication, vos processus et vos intégrations.</p>
            </div>
        </div>
        <button class="capsule-button capsule-button--primary" type="submit"><iconify-icon icon="solar:diskette-bold-duotone"></iconify-icon>Enregistrer les modifications</button>
    </header>

    <div class="csettings-layout">
        <aside class="csettings-nav">
            <strong>Sections</strong>
            {% for id,item in sections %}
                <a href="#settings-{{ id }}" class="{{ loop.first ? 'is-active' }}" data-communication-settings-target="nav" data-action="communication-settings#navigate"><iconify-icon icon="{{ item[0] }}"></iconify-icon>{{ item[1] }}</a>
            {% endfor %}
        </aside>

        <main class="csettings-main">
            <section id="settings-general" class="csettings-card">
                <header><i class="is-indigo"><iconify-icon icon="solar:tuning-2-bold-duotone"></iconify-icon></i><div><h2>Général</h2><p>Paramètres de base de l’espace de travail et du compte.</p></div></header>
                <div class="csettings-body csettings-grid">
                    <label>Nom de l’espace de travail<input name="settings[preferences][workspaceName]" value="{{ p.workspaceName|default(company.nom) }}"></label>
                    <label>Langue par défaut<select name="settings[defaultLocale]"><option value="fr_FR" {{ settings.defaultLocale == 'fr_FR' ? 'selected' }}>Français (France)</option><option value="fr_CA" {{ settings.defaultLocale == 'fr_CA' ? 'selected' }}>Français (Canada)</option><option value="en_US" {{ settings.defaultLocale == 'en_US' ? 'selected' }}>Anglais (États-Unis)</option></select></label>
                    <label>Format de date<select name="settings[preferences][dateFormat]"><option value="d/m/Y" {{ p.dateFormat|default('d/m/Y') == 'd/m/Y' ? 'selected' }}>JJ/MM/AAAA</option><option value="Y-m-d" {{ p.dateFormat|default == 'Y-m-d' ? 'selected' }}>AAAA-MM-JJ</option><option value="m/d/Y" {{ p.dateFormat|default == 'm/d/Y' ? 'selected' }}>MM/JJ/AAAA</option></select></label>
                    <fieldset><legend>Format de l’heure</legend><div class="csettings-segments"><label><input type="radio" name="settings[preferences][timeFormat]" value="12" {{ p.timeFormat|default('24') == '12' ? 'checked' }}><span>12 h</span></label><label><input type="radio" name="settings[preferences][timeFormat]" value="24" {{ p.timeFormat|default('24') == '24' ? 'checked' }}><span>24 h</span></label></div></fieldset>
                    {{ _self.toggle('settings[preferences][analyticsTracking]', 'Suivi analytique', 'Collecter automatiquement les performances des publications.', p.analyticsTracking|default(true), 'wide') }}
                </div>
            </section>

            <section id="settings-workflow" class="csettings-card">
                <header><i class="is-purple"><iconify-icon icon="solar:branching-paths-down-bold-duotone"></iconify-icon></i><div><h2>Flux de validation</h2><p>Définissez le parcours des publications avant leur diffusion.</p></div></header>
                <div class="csettings-body">
                    <label class="csettings-caption">Mode de publication</label>
                    <div class="csettings-choice-grid">
                        {% for value,choice in {direct:['solar:bolt-bold-duotone','Publication directe','Diffuser dès la fin de la rédaction.'],approval:['solar:user-check-bold-duotone','Validation simple','Une personne valide avant publication.'],multi:['solar:users-group-rounded-bold-duotone','Validation multiple','Validation éditoriale puis administrateur.']} %}
                            <label><input type="radio" name="settings[preferences][workflowMode]" value="{{ value }}" {{ p.workflowMode|default('approval') == value ? 'checked' }}><span><i><iconify-icon icon="{{ choice[0] }}"></iconify-icon></i><b>{{ choice[1] }}</b><small>{{ choice[2] }}</small></span></label>
                        {% endfor %}
                    </div>
                    <div class="csettings-grid csettings-toggle-grid">
                        {{ _self.toggle('settings[preferences][autoSaveDrafts]', 'Enregistrement automatique', 'Enregistrer le brouillon toutes les 30 secondes.', p.autoSaveDrafts|default(true)) }}
                        {{ _self.toggle('settings[preferences][requirePreview]', 'Aperçu obligatoire', 'Afficher un aperçu avant la programmation.', p.requirePreview|default(false)) }}
                    </div>
                </div>
            </section>

            <section id="settings-linkedin" class="csettings-card">
                <header><i class="is-blue"><iconify-icon icon="logos:linkedin-icon"></iconify-icon></i><div><h2>Intégration LinkedIn</h2><p>Gérez votre connexion et vos préférences de publication LinkedIn.</p></div></header>
                <div class="csettings-body">
                    <div class="csettings-account"><i><iconify-icon icon="logos:linkedin-icon"></iconify-icon></i><div><b>{{ account ? account.displayName : 'Aucun compte LinkedIn connecté' }}</b><small>{{ account and account.username ? '@' ~ account.username : 'Connectez un compte depuis la rubrique Connexions.' }}</small></div><span class="{{ account and account.status == 'active' ? 'is-connected' }}">{{ account and account.status == 'active' ? 'Connecté' : 'Déconnecté' }}</span></div>
                    <div class="csettings-grid">
                        <label>Publier en tant que<select name="settings[preferences][linkedInPostAs]"><option value="">Profil personnel</option>{% for item in linkedinAccounts %}<option value="{{ item.idtoken }}" {{ p.linkedInPostAs|default == item.idtoken ? 'selected' }}>{{ item.displayName }}</option>{% endfor %}</select></label>
                        <label>Visibilité par défaut<select name="settings[preferences][linkedInVisibility]"><option value="public" {{ p.linkedInVisibility|default('public') == 'public' ? 'selected' }}>Public — tous les membres LinkedIn</option><option value="connections" {{ p.linkedInVisibility|default == 'connections' ? 'selected' }}>Mes relations uniquement</option></select></label>
                        {{ _self.toggle('settings[preferences][autoTagFirstComment]', 'Hashtags dans le premier commentaire', 'Publier automatiquement les hashtags en commentaire.', p.autoTagFirstComment|default(false)) }}
                        {{ _self.toggle('settings[preferences][importEngagementData]', 'Importer les interactions', 'Synchroniser les mentions J’aime et commentaires.', p.importEngagementData|default(true)) }}
                    </div>
                    {% if account and account.tokenExpiresAt %}<div class="csettings-warning"><iconify-icon icon="solar:danger-triangle-bold-duotone"></iconify-icon><span><b>Le jeton expire le {{ account.tokenExpiresAt|date('d/m/Y') }}</b><small>Renouvelez la connexion avant cette date pour éviter une interruption.</small></span></div>{% endif %}
                </div>
            </section>

            <section id="settings-publishing" class="csettings-card">
                <header><i class="is-cyan"><iconify-icon icon="solar:plain-bold-duotone"></iconify-icon></i><div><h2>Publication</h2><p>Contrôlez la manière et le moment où vos contenus sont diffusés.</p></div></header>
                <div class="csettings-body csettings-grid">
                    <label>Heure de publication par défaut<input type="time" name="settings[preferences][defaultPublishTime]" value="{{ p.defaultPublishTime|default('09:00') }}"></label>
                    <label>Nombre maximal de publications par jour<div class="csettings-range"><input type="range" min="1" max="10" name="settings[preferences][maxPostsPerDay]" value="{{ p.maxPostsPerDay|default(3) }}" data-action="input->communication-settings#range"><output>{{ p.maxPostsPerDay|default(3) }}</output></div></label>
                    <fieldset class="wide"><legend>Plateformes autorisées</legend><div class="csettings-platforms">{% for value,label in {linkedin:'LinkedIn',twitter:'X / Twitter',instagram:'Instagram',facebook:'Facebook'} %}<label><input type="checkbox" name="settings[enabledPlatforms][]" value="{{ value }}" {{ value in settings.enabledPlatforms ? 'checked' }}><span>{{ label }}</span></label>{% endfor %}</div></fieldset>
                    {{ _self.toggle('settings[preferences][smartScheduling]', 'Planification intelligente', 'Suggérer les meilleurs horaires de publication.', p.smartScheduling|default(true)) }}
                    {{ _self.toggle('settings[preferences][pauseWeekends]', 'Pause le week-end', 'Ne rien publier le samedi et le dimanche.', p.pauseWeekends|default(false)) }}
                </div>
            </section>

            <section id="settings-notifications" class="csettings-card">
                <header><i class="is-rose"><iconify-icon icon="solar:bell-bing-bold-duotone"></iconify-icon></i><div><h2>Notifications</h2><p>Choisissez les alertes et les courriels que vous souhaitez recevoir.</p></div></header>
                <div class="csettings-body"><div class="csettings-notifications"><b>Événement</b><b>Dans l’application</b><b>Courriel</b>{% for key,label in {published:'Publication diffusée',failed:'Échec de publication',approval:'Validation attendue',milestone:'Jalon de campagne',weekly:'Rapport hebdomadaire',token:'Expiration du jeton LinkedIn'} %}<span>{{ label }}</span>{{ _self.switch('settings[preferences][notificationPreferences]['~key~'][app]', attribute(attribute(notifications,key)|default({}),'app')|default(key != 'weekly')) }}{{ _self.switch('settings[preferences][notificationPreferences]['~key~'][email]', attribute(attribute(notifications,key)|default({}),'email')|default(key != 'approval')) }}{% endfor %}</div></div>
            </section>

            <section id="settings-ai" class="csettings-card">
                <header><i class="is-violet"><iconify-icon icon="solar:magic-stick-3-bold-duotone"></iconify-icon></i><div><h2>Intelligence artificielle</h2><p>Configurez vos préférences de génération de contenu.</p></div><em>Fonctionnalité à venir</em></header>
                <div class="csettings-body csettings-grid">
                    <label>Modèle d’intelligence artificielle<select name="settings[preferences][aiModel]" disabled><option value="gpt-4o">GPT-4o — recommandé</option></select></label>
                    <label>Idées générées par demande<div class="csettings-range"><input disabled type="range" min="1" max="10" value="{{ p.aiIdeasPerRequest|default(5) }}"><output>{{ p.aiIdeasPerRequest|default(5) }}</output></div></label>
                    <label class="wide">Piliers de contenu<input disabled value="{{ p.aiContentPillars|default(['Leadership','Marketing','Entrepreneuriat'])|join(', ') }}"></label>
                    {{ _self.toggle('', 'Suggestions de hashtags', 'Proposer des hashtags adaptés à chaque publication.', p.aiHashtagSuggestions|default(true), '', true) }}
                    {{ _self.toggle('', 'Suggestions selon les tendances', 'S’inspirer des sujets populaires.', p.trendBasedSuggestions|default(true), '', true) }}
                    <input type="hidden" name="settings[aiEnabled]" value="0">
                </div>
            </section>

            <section id="settings-tone" class="csettings-card">
                <header><i class="is-green"><iconify-icon icon="solar:pen-new-square-bold-duotone"></iconify-icon></i><div><h2>Ton éditorial</h2><p>Définissez la voix de votre marque sur toutes les plateformes.</p></div></header>
                <div class="csettings-body">
                    <div class="csettings-tone-grid">{% for value,label in {professional:'Professionnel',enthusiastic:'Enthousiaste',conversational:'Conversationnel',educational:'Pédagogique'} %}<label><input type="radio" name="settings[preferences][tonePreset]" value="{{ value }}" {{ p.tonePreset|default('professional') == value ? 'checked' }}><span>{{ label }}</span></label>{% endfor %}</div>
                    {% for definition in [
                        ['toneFormality', 'Formalité', 'Formel', 'Décontracté', 65],
                        ['toneConciseness', 'Concision', 'Concis', 'Détaillé', 40],
                        ['toneAnalytical', 'Approche', 'Analytique', 'Narrative', 55]
                    ] %}
                        {% set field = definition[0] %}
                        {% set toneValue = attribute(p, field)|default(definition[4]) %}
                        <label class="csettings-slider">
                            <span>
                                <b>{{ definition[1] }}</b>
                                <small>{{ definition[2] }} <output>{{ toneValue }} %</output> {{ definition[3] }}</small>
                            </span>
                            <input type="range"
                                   min="0"
                                   max="100"
                                   name="settings[preferences][{{ field }}]"
                                   value="{{ toneValue }}"
                                   data-action="input->communication-settings#range">
                        </label>
                    {% endfor %}
                    <label>Instructions personnalisées<textarea name="settings[preferences][toneInstructions]" placeholder="Ex. Terminer les publications par une question, éviter le jargon…">{{ p.toneInstructions|default }}</textarea></label>
                </div>
            </section>

            <section id="settings-timezone" class="csettings-card">
                <header><i class="is-sky"><iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon></i><div><h2>Fuseau horaire</h2><p>Toutes les programmations utilisent ce fuseau horaire.</p></div></header>
                <div class="csettings-body csettings-grid">
                    <label>Fuseau du compte<select name="settings[timezone]">{% for value,label in {'Europe/Paris':'Europe/Paris (UTC+1 / UTC+2)','Europe/London':'Europe/Londres','America/New_York':'Amérique/New York','America/Montreal':'Amérique/Montréal'} %}<option value="{{ value }}" {{ settings.timezone == value ? 'selected' }}>{{ label }}</option>{% endfor %}</select></label>
                    <label>Fuseau principal de l’audience<select name="settings[preferences][audienceTimezone]"><option value="">Identique au compte</option><option value="America/New_York" {{ p.audienceTimezone|default == 'America/New_York' ? 'selected' }}>Amérique/New York</option></select></label>
                    <div class="csettings-time wide"><iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon><span><b>Heure locale actuelle</b><small data-communication-settings-target="clock"></small></span></div>
                    {{ _self.toggle('settings[preferences][autoDetectTimezone]', 'Détection automatique du fuseau', 'Mettre à jour selon la position du navigateur.', p.autoDetectTimezone|default(false), 'wide') }}
                </div>
            </section>

            <section id="settings-approval" class="csettings-card">
                <header><i class="is-emerald"><iconify-icon icon="solar:verified-check-bold-duotone"></iconify-icon></i><div><h2>Approbation</h2><p>Gérez qui peut approuver les contenus et dans quels délais.</p></div></header>
                <div class="csettings-body csettings-grid">
                    <label>Délai de validation<select name="settings[preferences][approvalDeadlineHours]">{% for hours,label in {12:'12 heures',24:'24 heures',48:'48 heures',72:'3 jours',168:'7 jours'} %}<option value="{{ hours }}" {{ p.approvalDeadlineHours|default(24) == hours ? 'selected' }}>{{ label }} avant publication</option>{% endfor %}</select></label>
                    <label>Si le délai expire sans validation<select name="settings[preferences][deadlineAction]"><option value="cancel_notify" {{ p.deadlineAction|default('cancel_notify') == 'cancel_notify' ? 'selected' }}>Annuler et prévenir l’équipe</option><option value="postpone" {{ p.deadlineAction|default == 'postpone' ? 'selected' }}>Reporter la publication</option><option value="publish" {{ p.deadlineAction|default == 'publish' ? 'selected' }}>Publier automatiquement</option></select></label>
                    <div class="csettings-approver wide"><img src="{{ user_avatar_url(app.user) }}" alt=""><div><b>{{ app.user ? (app.user.prenom ~ ' ' ~ app.user.nom)|trim : 'Administrateur' }}</b><small>Administrateur — peut tout approuver</small></div><em>Administrateur</em></div>
                    <input type="hidden" name="settings[approvalRequired]" value="1">
                </div>
            </section>

            <section id="settings-retries" class="csettings-card">
                <header><i class="is-orange"><iconify-icon icon="solar:refresh-circle-bold-duotone"></iconify-icon></i><div><h2>Relances</h2><p>Configurez les nouvelles tentatives en cas d’échec de publication.</p></div></header>
                <div class="csettings-body csettings-grid">
                    {{ _self.toggle('settings[retriesEnabled]', 'Relances automatiques', 'Réessayer une publication qui a échoué.', settings.retriesEnabled) }}
                    <label>Nombre maximal de tentatives<input type="number" min="0" max="10" name="settings[maxRetryCount]" value="{{ settings.maxRetryCount }}"></label>
                    <label>Fréquence de synchronisation (minutes)<input type="number" min="1" max="10080" name="settings[syncFrequencyMinutes]" value="{{ settings.syncFrequencyMinutes }}"></label>
                    <input type="hidden" name="settings[minimumDaysBeforePublication]" value="{{ settings.minimumDaysBeforePublication }}">
                    <input type="hidden" name="settings[publicationHours]" value="{{ settings.publicationHours|join(', ') }}">
                    <input type="hidden" name="settings[hashtagLibrary]" value="{{ settings.hashtagLibrary|join(', ') }}">
                    <input type="hidden" name="settings[directPublicationAllowed]" value="{{ settings.directPublicationAllowed ? 1 : 0 }}">
                    <input type="hidden" name="settings[authorSelfApprovalAllowed]" value="{{ settings.authorSelfApprovalAllowed ? 1 : 0 }}">
                    <input type="hidden" name="settings[editAfterApprovalAllowed]" value="{{ settings.editAfterApprovalAllowed ? 1 : 0 }}">
                    <input type="hidden" name="settings[automaticPublicationEnabled]" value="{{ settings.automaticPublicationEnabled ? 1 : 0 }}">
                    <input type="hidden" name="settings[notificationsEnabled]" value="1">
                </div>
            </section>
        </main>
    </div>
</form>
{% endblock %}

{% macro toggle(name,title,description,checked,className,disabled) %}<label class="csettings-toggle {{ className|default }}" ><span><b>{{ title }}</b><small>{{ description }}</small></span><input type="checkbox" {% if name %}name="{{ name }}"{% endif %} value="1" {{ checked ? 'checked' }} {{ disabled|default(false) ? 'disabled' }}><i></i></label>{% endmacro %}
{% macro switch(name,checked) %}<label class="csettings-switch"><input type="hidden" name="{{ name }}" value="0"><input type="checkbox" name="{{ name }}" value="1" {{ checked ? 'checked' }}><i></i></label>{% endmacro %}