{% extends '@App/app.html.twig' %}

{% block title %}Entretien {{ reference }}{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set employee = interview.salarie %}
{% set status_labels = {
    draft: 'Brouillon', scheduled: 'Planifié', employee_prepared: 'Préparation salarié',
    manager_preparation: 'Préparation manager', ready: 'Prêt à réaliser', in_progress: 'Entretien en cours',
    pending_manager_validation: 'Validation manager', completed: 'Terminé', signed: 'Signé',
    cancelled: 'Annulé', archived: 'Archivé'
} %}
{% set status_tones = {
    draft: 'muted', scheduled: 'info', employee_prepared: 'warning', manager_preparation: 'warning',
    ready: 'info', in_progress: 'warning', pending_manager_validation: 'warning', completed: 'success',
    signed: 'success', cancelled: 'danger', archived: 'muted'
} %}
{% set timeline_ranks = {
    draft: 0, scheduled: 1, employee_prepared: 2, manager_preparation: 3, ready: 4,
    in_progress: 4, pending_manager_validation: 5, completed: 5, signed: 6, archived: 6, cancelled: 0
} %}
{% set timeline_rank = timeline_ranks[interview.status]|default(0) %}
{% set timeline_steps = [
    {label: 'Créé', rank: 0, date: interview.createdAt},
    {label: 'Planifié', rank: 1, date: interview.scheduledAt},
    {label: 'Préparation salarié', rank: 2, date: interview.employeePreparedAt},
    {label: 'Préparation manager', rank: 3, date: interview.managerPreparedAt},
    {label: 'Entretien réalisé', rank: 4, date: interview.completedAt},
    {label: 'Compte rendu validé', rank: 5, date: interview.managerValidatedAt},
    {label: 'Signé', rank: 6, date: interview.signedAt}
] %}
{% set photo_path = employee.photo ? employee.photo|trim : null %}
{% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
{% set initials = ((employee.prenom|default('')|first) ~ (employee.nom|default('')|first))|upper ?: 'S' %}

<div class="data-page interview-page interview-detail-page" data-controller="interview-detail">
    <header class="interview-detail-header">
        <div>
            <nav class="mb-1">
                <a href="{{ path('interview_index') }}">Entretiens</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">{{ reference }}</span>
            </nav>
            <div class="interview-detail-title">
                <h1>Entretien {{ reference }}</h1>
                <span class="data-badge data-badge--{{ status_tones[interview.status]|default('muted') }}"><i></i>{{ status_labels[interview.status]|default(interview.status|replace({'_': ' '})|capitalize) }}</span>
            </div>
        </div>
        <div class="data-page__actions interview-detail-actions">
            <a class="data-button data-button--secondary" href="{{ path('interview_index') }}"><i class="ti ti-arrow-left" aria-hidden="true"></i>Retour liste</a>
            <a class="data-button data-button--secondary" href="{{ path('interview_edit', {id: interview.id}) }}"><i class="ti ti-edit" aria-hidden="true"></i>Modifier</a>
            <a class="data-button data-button--secondary" href="{{ path('interview_edit', {id: interview.id}) }}"><i class="ti ti-calendar-event" aria-hidden="true"></i>{{ interview.scheduledAt ? 'Replanifier' : 'Planifier' }}</a>
            {% if interview.type.requiresPreparationEmployee %}<a class="data-button interview-detail-action--employee" href="{{ path('interview_prepare_employee', {id: interview.id}) }}">Préparation salarié</a>{% endif %}
            {% if interview.type.requiresPreparationManager %}<a class="data-button interview-detail-action--manager" href="{{ path('interview_prepare_manager', {id: interview.id}) }}">Préparation manager</a>{% endif %}
            <a class="data-button data-button--primary" href="{{ path('interview_conduct', {id: interview.id}) }}"><i class="ti ti-player-play" aria-hidden="true"></i>Conduire l'entretien</a>
        </div>
    </header>

    <section class="interview-detail-overview">
        <div class="interview-detail-overview__item">
            <span class="interview-detail-overview__icon interview-detail-overview__icon--blue"><i class="ti ti-file-description" aria-hidden="true"></i></span>
            <div><small>Type d'entretien</small><strong>{{ interview.type.nom }}</strong><em>{{ interview.campaign ? interview.campaign.nom : (interview.template ? interview.template.nom : 'Hors campagne') }}</em></div>
        </div>
        <div class="interview-detail-overview__item">
            <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">{% if avatar_src %}<img src="{{ avatar_src }}" alt="{{ employee }}">{% else %}{{ initials }}{% endif %}</span>
            <div><small>Participants</small><strong>{{ employee }} <b>(Salarié)</b></strong><em>Manager : {{ interview.manager ?: 'Non défini' }}</em></div>
        </div>
        <div class="interview-detail-overview__item">
            <span class="interview-detail-overview__icon"><i class="ti ti-clock" aria-hidden="true"></i></span>
            <div><small>Planification</small><strong>{{ interview.scheduledAt ? interview.scheduledAt|date('d/m/Y à H:i') : 'Date non définie' }}</strong><em><i class="ti ti-map-pin" aria-hidden="true"></i>{{ interview.location ?: (interview.remoteLink ? 'Visioconférence' : 'Lieu non défini') }}</em></div>
        </div>
        <div class="interview-detail-overview__progress">
            <div><small>Progression</small><div><span><i style="width: {{ progress }}%"></i></span><strong>{{ progress }}%</strong></div></div>
            <b>{{ timeline_rank + 1 }}/7</b>
        </div>
    </section>

    <nav class="interview-detail-tabs" aria-label="Sections de l'entretien" role="tablist">
        {% for key, label in {
            summary: 'Résumé', preparations: 'Préparations', answers: 'Réponses', objectives: 'Objectifs',
            skills: 'Compétences', training: 'Besoins de formation', action_plan: 'Plan d’action', report: 'Compte rendu', history: 'Historique'
        } %}
            <button class="{{ loop.first ? 'is-active' : '' }}" type="button" role="tab" aria-selected="{{ loop.first ? 'true' : 'false' }}" data-panel="{{ key }}" data-interview-detail-target="tab" data-action="interview-detail#selectTab">{{ label }}</button>
        {% endfor %}
    </nav>

    <section class="interview-detail-panel" role="tabpanel" data-panel="summary" data-interview-detail-target="panel">
        <div class="interview-detail-content">
            <div class="interview-detail-main">
                <section class="interview-detail-card">
                    <header><h2>Informations salarié</h2><a href="{{ path('employee_show', {id: employee.id}) }}">Fiche profil</a></header>
                    <dl class="interview-detail-employee-info">
                        <div><dt>Poste</dt><dd>{{ employee.employeeJob ? employee.employeeJob.nom : (employee.poste ?: 'Non renseigné') }}</dd></div>
                        <div><dt>Service</dt><dd>{{ employee.employeeService ? employee.employeeService.nom : (employee.service ?: 'Non renseigné') }}</dd></div>
                        <div><dt>Date d'entrée</dt><dd>{{ employee.dateEntree ? employee.dateEntree|date('d/m/Y') : 'Non renseignée' }}{% if seniority %} <span>({{ seniority }} d’ancienneté)</span>{% endif %}</dd></div>
                        <div><dt>Dernier entretien</dt><dd>{% if previous_interview %}{{ previous_interview.type.nom }} – {{ previous_interview.scheduledAt ? previous_interview.scheduledAt|date('d/m/Y') : previous_interview.createdAt|date('d/m/Y') }}{% else %}Aucun entretien antérieur{% endif %}</dd></div>
                        <div><dt>Manager</dt><dd class="interview-detail-person"><span><i class="ti ti-user-tie" aria-hidden="true"></i></span>{{ interview.manager ?: 'Non défini' }}</dd></div>
                    </dl>
                </section>

                <section class="interview-detail-card">
                    <header><h2>Points d'attention</h2></header>
                    <div class="interview-detail-alerts">
                        {% if interview.type.requiresPreparationEmployee and not interview.employeePreparedAt %}
                            <article class="interview-detail-alert interview-detail-alert--warning"><span><i class="ti ti-alert-triangle" aria-hidden="true"></i></span><div><strong>Préparation salarié non terminée</strong><p>Le questionnaire salarié n’a pas encore été validé.</p></div></article>
                        {% endif %}
                        {% if interview.type.requiresPreparationManager and not interview.managerPreparedAt %}
                            <article class="interview-detail-alert interview-detail-alert--warning"><span><i class="ti ti-user-exclamation" aria-hidden="true"></i></span><div><strong>Préparation manager attendue</strong><p>La préparation du manager reste à compléter.</p></div></article>
                        {% endif %}
                        {% if not interview.reportHtml and not interview.reportPdfPath %}
                            <article class="interview-detail-alert"><span><i class="ti ti-file-question" aria-hidden="true"></i></span><div><strong>Compte rendu non généré</strong><p>Le document final sera disponible après la clôture de l’entretien.</p></div></article>
                        {% endif %}
                        {% if (not interview.type.requiresPreparationEmployee or interview.employeePreparedAt) and (not interview.type.requiresPreparationManager or interview.managerPreparedAt) and (interview.reportHtml or interview.reportPdfPath) %}
                            <article class="interview-detail-alert interview-detail-alert--success"><span><i class="ti ti-circle-check" aria-hidden="true"></i></span><div><strong>Aucun point bloquant</strong><p>Les étapes attendues sont à jour.</p></div></article>
                        {% endif %}
                    </div>
                </section>
            </div>

            <aside class="interview-detail-aside">
                <section class="interview-detail-card interview-detail-timeline">
                    <header><h2>Avancement de l'entretien</h2></header>
                    <div>
                        {% for step in timeline_steps %}
                            {% set is_completed = timeline_rank > step.rank or (step.rank == 6 and timeline_rank == 6) %}
                            {% set is_active = timeline_rank == step.rank and not is_completed %}
                            <article class="{{ is_completed ? 'is-completed' : (is_active ? 'is-active' : '') }}">
                                <span>{% if is_completed %}<i class="ti ti-check" aria-hidden="true"></i>{% endif %}</span>
                                <div><strong>{{ step.label }}</strong><small>{% if step.date %}{{ step.date|date('d/m/Y à H:i') }}{% elseif is_active %}En cours ({{ progress }}%){% else %}En attente{% endif %}</small></div>
                            </article>
                        {% endfor %}
                    </div>
                </section>

                <section class="interview-detail-recap">
                    <header><span><i class="ti ti-bolt" aria-hidden="true"></i></span><h2>Récapitulatif {{ interview.type.code|upper }}</h2></header>
                    <dl>
                        <div><dt>Objectifs suivis</dt><dd>{{ objective_count }}</dd></div>
                        <div><dt>Progression moyenne</dt><dd class="text-success">{{ objective_progress }}%</dd></div>
                        <div><dt>Formations souhaitées</dt><dd>{{ training_needs|length }}</dd></div>
                    </dl>
                </section>
            </aside>
        </div>
    </section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="preparations" data-interview-detail-target="panel" hidden>
        {% include '@Interview/interview/_show_preparations.html.twig' %}
    </section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="answers" data-interview-detail-target="panel" hidden>{% include '@Interview/interview/_answers.html.twig' %}</section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="objectives" data-interview-detail-target="panel" hidden>
        {% include '@Interview/interview/_show_objectives.html.twig' %}
    </section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="skills" data-interview-detail-target="panel" hidden>{% include '@Interview/interview/_skills.html.twig' %}</section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="training" data-interview-detail-target="panel" hidden>
        {% include '@Interview/interview/_show_training.html.twig' %}
    </section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="action_plan" data-interview-detail-target="panel" hidden>{% include '@Interview/interview/_action_plan.html.twig' %}</section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="report" data-interview-detail-target="panel" hidden>
        {% include '@Interview/interview/_show_report.html.twig' %}
    </section>

    <section class="interview-detail-panel" role="tabpanel" data-panel="history" data-interview-detail-target="panel" hidden>
        {% include '@Interview/interview/_show_history.html.twig' %}
    </section>
</div>
{% endblock %}