@extends('layouts.app')
@section('title', $gedFichier->nom_original)
@section('page-title', $gedFichier->nom_original)
@section('breadcrumb')
  <a href="{{ route('ged.index') }}">Médiathèque</a>
  <span class="breadcrumb-sep">/</span>
  <span class="breadcrumb-current" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $gedFichier->nom_original }}</span>
@endsection

@section('topbar-actions')
  <a href="{{ route('ged.telecharger', $gedFichier) }}" class="btn btn-primary btn-sm">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
    Télécharger
  </a>
  <a href="{{ route('ged.edit', $gedFichier) }}" class="btn btn-outline btn-sm">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
    Modifier
  </a>
  <form method="POST" action="{{ route('ged.destroy', $gedFichier) }}" style="display:inline">
    @csrf @method('DELETE')
    <button type="submit" class="btn btn-outline btn-sm" data-confirm="Envoyer ce fichier à la corbeille ?" style="color:var(--error);border-color:var(--error-bd)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
      Corbeille
    </button>
  </form>
@endsection

@section('content')
<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start">

  {{-- Colonne principale --}}
  <div>

    {{-- Prévisualisation --}}
    @if($gedFichier->est_previsualisable)
    <div class="card" style="margin-bottom:20px">
      <div class="card-header">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          Aperçu
        </div>
        <a href="{{ route('ged.apercu', $gedFichier) }}" target="_blank" class="btn btn-ghost btn-sm" title="Ouvrir dans un nouvel onglet">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
          Nouvel onglet
        </a>
      </div>
      <div style="background:var(--gray-100);min-height:300px;display:flex;align-items:center;justify-content:center">
        @if($gedFichier->est_image)
          <img src="{{ route('ged.apercu', $gedFichier) }}" alt="{{ $gedFichier->nom_original }}"
               style="max-width:100%;max-height:500px;object-fit:contain;display:block;margin:0 auto">
        @else
          <iframe src="{{ route('ged.apercu', $gedFichier) }}"
                  style="width:100%;height:500px;border:none;display:block"
                  title="{{ $gedFichier->nom_original }}"></iframe>
        @endif
      </div>
    </div>
    @else
    <div class="card" style="margin-bottom:20px">
      <div class="card-body" style="text-align:center;padding:48px">
        <div style="color:{{ $gedFichier->couleur_icone }};margin-bottom:16px">
          @include('ged._svg_icone', ['icone' => $gedFichier->icone])
        </div>
        <p style="font-size:13.5px;color:var(--gray-500);margin-bottom:16px">Ce format ne peut pas être prévisualisé.</p>
        <a href="{{ route('ged.telecharger', $gedFichier) }}" class="btn btn-primary btn-sm">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Télécharger pour ouvrir
        </a>
      </div>
    </div>
    @endif

    {{-- Historique --}}
    <div class="card">
      <div class="card-header">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          Historique des actions
        </div>
      </div>
      <div class="activity-list" style="padding:0 20px">
        @forelse($gedFichier->historique as $log)
        <div class="activity-item">
          <div class="activity-dot" style="background:{{ $log->action_color }}"></div>
          <div class="activity-body">
            <div class="activity-text">
              <strong>{{ $log->user_nom }}</strong> — {{ $log->action_label }}
              @if($log->detail)
                <span style="color:var(--gray-400);font-size:12px"> · {{ $log->detail }}</span>
              @endif
            </div>
            <div class="activity-time">{{ $log->created_at->format('d/m/Y à H:i') }}</div>
          </div>
        </div>
        @empty
        <div style="padding:20px 0;text-align:center;color:var(--gray-400);font-size:13px">Aucun historique</div>
        @endforelse
      </div>
    </div>
  </div>

  {{-- Colonne droite : métadonnées --}}
  <div>
    <div class="card" style="margin-bottom:16px">
      <div class="card-header">
        <div class="card-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
          Informations
        </div>
      </div>
      <div class="card-body" style="padding:0">
        <div class="detail-grid" style="grid-template-columns:1fr;padding:16px;gap:12px">

          <div class="detail-item">
            <label>Nom du fichier</label>
            <span style="word-break:break-all">{{ $gedFichier->nom_original }}</span>
          </div>

          <div class="detail-item">
            <label>Type</label>
            <span>
              <span class="badge badge-{{ $gedFichier->badge_color }}">{{ strtoupper($gedFichier->extension) }}</span>
              <span style="font-size:12px;color:var(--gray-400);margin-left:4px">{{ $gedFichier->mime_type }}</span>
            </span>
          </div>

          <div class="detail-item">
            <label>Taille</label>
            <span>{{ $gedFichier->taille_formatee }}</span>
          </div>

          @if($gedFichier->categorie)
          <div class="detail-item">
            <label>Catégorie</label>
            <span><span class="badge badge-{{ $gedFichier->categorie->couleur }}">{{ $gedFichier->categorie->nom }}</span></span>
          </div>
          @endif

          @if($gedFichier->dossier)
          <div class="detail-item">
            <label>Dossier</label>
            <span style="font-size:12.5px">{{ $gedFichier->dossier->chemin_complet }}</span>
          </div>
          @endif

          @if($gedFichier->entite_type && $gedFichier->entite_id)
          <div class="detail-item">
            <label>Entité liée</label>
            <span style="font-size:12px;color:var(--gray-500)">
              {{ class_basename($gedFichier->entite_type) }} #{{ $gedFichier->entite_id }}
            </span>
          </div>
          @endif

          @if($gedFichier->description)
          <div class="detail-item">
            <label>Description</label>
            <span style="font-size:13px">{{ $gedFichier->description }}</span>
          </div>
          @endif

          @if($gedFichier->tags_array)
          <div class="detail-item">
            <label>Tags</label>
            <span style="display:flex;flex-wrap:wrap;gap:4px">
              @foreach($gedFichier->tags_array as $tag)
                <span class="badge badge-gray" style="font-size:11px">{{ $tag }}</span>
              @endforeach
            </span>
          </div>
          @endif

          <div class="detail-item">
            <label>Importé par</label>
            <span>{{ $gedFichier->uploader?->name ?? '—' }}</span>
          </div>

          <div class="detail-item">
            <label>Date d'import</label>
            <span>{{ $gedFichier->created_at->format('d/m/Y à H:i') }}</span>
          </div>

        </div>
      </div>
    </div>

    {{-- Actions secondaires --}}
    <div class="card">
      <div class="card-body" style="display:flex;flex-direction:column;gap:8px">
        <a href="{{ route('ged.telecharger', $gedFichier) }}" class="btn btn-outline btn-sm" style="justify-content:center">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Télécharger
        </a>
        <a href="{{ route('ged.edit', $gedFichier) }}" class="btn btn-outline btn-sm" style="justify-content:center">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          Modifier les infos
        </a>
        @if(auth()->user()->isAdmin())
        <div class="divider" style="margin:4px 0"></div>
        <form method="POST" action="{{ route('ged.detruire', $gedFichier) }}">
          @csrf @method('DELETE')
          <button type="submit" class="btn btn-sm" data-confirm="Supprimer définitivement ? Cette action est irréversible."
                  style="width:100%;justify-content:center;background:var(--error-bg);color:#991b1b;border:1px solid var(--error-bd)">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
            Supprimer définitivement
          </button>
        </form>
        @endif
      </div>
    </div>
  </div>

</div>
@endsection