{% extends "base.html" %}
{% block title %}{{ vehicule.immatriculation }} — GarageManager{% endblock %}
{% block content %}

<a href="/vehicules" class="back-link"><i class="fas fa-arrow-left"></i> Retour aux véhicules</a>

<!-- Header véhicule -->
<div class="flex justify-between items-start mb-8">
    <div>
        <h1 class="page-title mono" style="color:var(--accent-electric);font-size:2rem;letter-spacing:0.06em">{{ vehicule.immatriculation }}</h1>
        <p class="page-subtitle" style="margin-top:0.35rem">
            {{ vehicule.marque }} {{ vehicule.modele }}
            {% if vehicule.annee %} — {{ vehicule.annee }}{% endif %}
            {% if vehicule.kilometrage %} — <span class="mono">{{ vehicule.kilometrage }} km</span>{% endif %}
        </p>
        {% if vehicule.vin %}
        <p class="text-xs text-muted mono" style="margin-top:0.35rem">VIN : {{ vehicule.vin }}</p>
        {% endif %}
    </div>
    <div class="flex gap-2">
        <a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="btn-primary btn-sm">
            <i class="fas fa-plus"></i> Intervention
        </a>
        <a href="/vehicules/{{ vehicule.id }}/edit" class="btn-secondary btn-sm">
            <i class="fas fa-edit"></i> Modifier
        </a>
        <form method="post" action="/vehicules/{{ vehicule.id }}/delete" onsubmit="return confirm('Supprimer ce véhicule et toutes ses données ?')">
            <button class="btn-danger btn-sm">
                <i class="fas fa-trash"></i> Supprimer
            </button>
        </form>
    </div>
</div>

<!-- ── Historique interventions ── -->
<div class="card mb-6" style="padding:0" id="interventions">
    <div class="card-header">
        <span class="card-title">
            <i class="fas fa-tools text-electric" style="margin-right:0.4rem"></i>
            Historique interventions
            <span class="badge badge-info ml-2">{{ interventions|length }}</span>
        </span>
        <a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="link-action text-xs">+ Nouvelle</a>
    </div>

    {% if interventions %}
    <div class="overflow-x-auto">
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Date</th>
                    <th>Kilométrage</th>
                    <th class="text-right">Pièces</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                {% for i in interventions %}
                <tr style="cursor:pointer" onclick="window.location='/interventions/{{ i.id }}'">
                    <td>
                        <p class="font-medium">{{ i.description }}</p>
                        {% if i.technicien %}<p class="text-xs text-muted mt-1">{{ i.technicien }}</p>{% endif %}
                    </td>
                    <td class="text-secondary text-sm">{{ i.date_intervention or '—' }}</td>
                    <td class="mono text-sm text-secondary">{{ (i.kilometrage_intervention|string + ' km') if i.kilometrage_intervention else '—' }}</td>
                    <td class="text-right">
                        <span class="text-xs text-secondary">{{ i.nb_pieces }} pce(s)</span><br>
                        <span class="text-xs text-muted">{{ "%.2f"|format(i.cout_pieces) }} €</span>
                    </td>
                    <td class="text-right font-semibold" style="color:var(--accent-volt)">
                        {{ "%.0f"|format(i.cout_main_oeuvre + i.cout_pieces) }} €
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr style="background:var(--bg-secondary)">
                    <td colspan="4" class="text-right text-secondary font-semibold text-sm" style="padding:0.75rem 1rem">Total véhicule</td>
                    <td class="text-right font-bold" style="color:var(--accent-volt);padding:0.75rem 1rem">
                        {{ "%.0f"|format(interventions|sum(attribute='cout_main_oeuvre') + interventions|sum(attribute='cout_pieces')) }} €
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-tools"></i>
        <p>Aucune intervention</p>
        <a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="link-action">Créer →</a>
    </div>
    {% endif %}
</div>

<!-- ── Toutes les pièces ── -->
<div class="card mb-6" style="padding:0" id="pieces">
    <div class="card-header">
        <span class="card-title">
            <i class="fas fa-cog text-volt" style="margin-right:0.4rem"></i>
            Toutes les pièces utilisées
            <span class="badge badge-warning ml-2">{{ toutes_pieces|length }}</span>
        </span>
    </div>
    <p class="text-xs text-muted" style="padding:0.6rem 1.5rem;border-bottom:1px solid var(--border)">Récapitulatif de toutes les pièces de toutes les interventions — pour les retrouver et racheter facilement.</p>

    {% if toutes_pieces %}
    <div class="overflow-x-auto">
        <table>
            <thead>
                <tr>
                    <th>Photo</th>
                    <th>Pièce</th>
                    <th>Référence</th>
                    <th>Marque</th>
                    <th>Prix unit.</th>
                    <th class="text-center">Qté</th>
                    <th>Intervention</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for p in toutes_pieces %}
                <tr>
                    <td>
                        {% if p.photo %}
                        <img src="{{ p.photo }}" class="photo-thumb" onclick="window.open('{{ p.photo }}','_blank')">
                        {% else %}
                        <div class="photo-placeholder"><i class="fas fa-cog text-xs"></i></div>
                        {% endif %}
                    </td>
                    <td class="font-medium">{{ p.nom }}</td>
                    <td class="mono text-xs text-muted">{{ p.reference or '—' }}</td>
                    <td class="text-secondary text-sm">{{ p.marque or '—' }}</td>
                    <td class="mono text-sm">{{ "%.2f"|format(p.prix) }} €</td>
                    <td class="text-center text-secondary">{{ p.quantite }}</td>
                    <td class="text-xs text-secondary" style="max-width:200px">
                        <a href="/interventions/{{ p.intervention_id }}" class="link-action truncate" style="display:block;max-width:200px">
                            {{ p.intervention_desc[:40] }}{% if p.intervention_desc|length > 40 %}…{% endif %}
                        </a>
                    </td>
                    <td class="text-xs text-muted">{{ p.date_intervention or '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-cog"></i>
        <p>Aucune pièce enregistrée</p>
        <span class="text-xs text-muted">Les pièces s'affichent ici dès qu'elles sont ajoutées dans une intervention.</span>
    </div>
    {% endif %}
</div>

<!-- ── Infos & Notes ── -->
<div class="card" style="padding:0" id="infos">
    <div class="card-header">
        <span class="card-title">
            <i class="fas fa-paperclip text-secondary" style="margin-right:0.4rem"></i>
            Infos &amp; Notes
        </span>
        <button onclick="toggleAddInfo()" class="link-action text-xs">+ Ajouter</button>
    </div>

    <!-- Form ajout info -->
    <div id="add-info-form" style="display:none;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1.25rem 1.5rem">
        <form method="post" action="/vehicules/{{ vehicule.id }}/infos/add" enctype="multipart/form-data">
            <div class="grid grid-3 mb-3">
                <div>
                    <label>Type</label>
                    <select name="type" id="info-type" onchange="toggleInfoType()">
                        <option value="texte">📝 Texte libre</option>
                        <option value="url">🔗 Lien / URL</option>
                        <option value="image">🖼️ Image / Photo</option>
                    </select>
                </div>
                <div style="grid-column:span 2">
                    <label>Titre (optionnel)</label>
                    <input name="titre" placeholder="Ex: Forum, Fiche technique, Photo moteur…">
                </div>
            </div>
            <div class="mb-3">
                <div id="input-texte">
                    <label>Contenu</label>
                    <textarea name="contenu" rows="2" placeholder="Notes, infos techniques…"></textarea>
                </div>
                <div id="input-url" style="display:none">
                    <label>URL</label>
                    <input name="contenu" placeholder="https://…">
                </div>
                <div id="input-image" style="display:none">
                    <label>Photo</label>
                    <input type="file" name="photo" accept="image/*" style="background:none;border:none;padding:0.25rem 0;color:var(--text-secondary)">
                    <input type="hidden" name="contenu" value="photo">
                </div>
            </div>
            <button type="submit" class="btn-primary btn-sm">
                <i class="fas fa-save"></i> Enregistrer
            </button>
        </form>
    </div>

    {% if infos %}
    <div>
        {% for info in infos %}
        <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;transition:background 0.15s" onmouseover="this.style.background='rgba(0,212,255,0.03)'" onmouseout="this.style.background=''">
            <div style="flex:1">
                {% if info.titre %}
                <p class="text-xs font-semibold uppercase" style="letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.3rem">{{ info.titre }}</p>
                {% endif %}
                {% if info.type == 'texte' %}
                <p class="text-sm" style="white-space:pre-wrap;color:var(--text-primary)">{{ info.contenu }}</p>
                {% elif info.type == 'url' %}
                <a href="{{ info.contenu }}" target="_blank" class="link-action text-sm" style="word-break:break-all">🔗 {{ info.contenu }}</a>
                {% elif info.type == 'image' %}
                <img src="{{ info.contenu }}" style="max-height:160px;border-radius:8px;border:1px solid var(--border);margin-top:0.25rem;cursor:pointer" onclick="window.open('{{ info.contenu }}','_blank')">
                {% endif %}
                <p class="text-xs text-muted" style="margin-top:0.35rem">{{ info.created_at[:10] }}</p>
            </div>
            <form method="post" action="/vehicules/{{ vehicule.id }}/infos/{{ info.id }}/delete" style="margin-left:1rem" onsubmit="return confirm('Supprimer ?')">
                <button class="link-danger">✕</button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-paperclip"></i>
        <p>Aucune info pour l'instant</p>
    </div>
    {% endif %}
</div>

<script>
function toggleAddInfo() {
    const f = document.getElementById('add-info-form');
    f.style.display = f.style.display === 'none' ? 'block' : 'none';
}
function toggleInfoType() {
    const type = document.getElementById('info-type').value;
    document.getElementById('input-texte').style.display = type === 'texte' ? 'block' : 'none';
    document.getElementById('input-url').style.display = type === 'url' ? 'block' : 'none';
    document.getElementById('input-image').style.display = type === 'image' ? 'block' : 'none';
}
</script>
{% endblock %}