@extends('layouts.app')
@section('title', 'Médiathèque')
@section('page-title', 'Médiathèque')
@section('breadcrumb')
  <span class="breadcrumb-current">GED</span>
@endsection

@section('topbar-actions')
  <a href="{{ route('ged.create') }}" 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="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
    Importer
  </a>
@endsection

@section('content')

{{-- Stats --}}
<div class="stats-grid" style="grid-template-columns:repeat(5,1fr);margin-bottom:24px">

  <div class="stat-card blue">
    <div class="stat-header">
      <div>
        <div class="stat-label">Fichiers</div>
        <div class="stat-value">{{ number_format($stats['total']) }}</div>
      </div>
      <div class="stat-icon blue">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
      </div>
    </div>
    <div class="stat-sub">Documents actifs</div>
  </div>

  <div class="stat-card">
    <div class="stat-header">
      <div>
        <div class="stat-label">Dossiers</div>
        <div class="stat-value">{{ $stats['dossiers'] }}</div>
      </div>
      <div class="stat-icon navy">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
      </div>
    </div>
    <div class="stat-sub">Arborescence</div>
  </div>

  <div class="stat-card green">
    <div class="stat-header">
      <div>
        <div class="stat-label">Catégories</div>
        <div class="stat-value">{{ $stats['categories'] }}</div>
      </div>
      <div class="stat-icon green">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
      </div>
    </div>
    <div class="stat-sub">Types de documents</div>
  </div>

  <div class="stat-card yellow">
    <div class="stat-header">
      <div>
        <div class="stat-label">Volume</div>
        <div class="stat-value" style="font-size:18px">{{ \App\Services\GedService::formatTaille($stats['taille_totale']) }}</div>
      </div>
      <div class="stat-icon yellow">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      </div>
    </div>
    <div class="stat-sub">Espace utilisé</div>
  </div>

  <div class="stat-card red">
    <div class="stat-header">
      <div>
        <div class="stat-label">Corbeille</div>
        <div class="stat-value">{{ $stats['corbeille'] }}</div>
      </div>
      <div class="stat-icon red">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
      </div>
    </div>
    <div class="stat-sub"><a href="{{ route('ged.corbeille') }}" style="color:inherit;text-decoration:underline">Voir la corbeille</a></div>
  </div>

</div>

<div style="display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start">

{{-- Panneau gauche : dossiers --}}
  <div>
    {{-- Créer un dossier --}}
    <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"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          Nouveau dossier
        </div>
      </div>
      <div class="card-body" style="padding-top:12px">
        <form method="POST" action="{{ route('ged.dossiers.store') }}">
          @csrf
          <div class="form-group">
            <input type="text" name="nom" class="form-control" placeholder="Nom du dossier" required maxlength="255">
          </div>
          <div class="form-group">
            <select name="parent_id" class="form-control">
              <option value="">— Racine —</option>
              @foreach($dossiers as $d)
                <option value="{{ $d->id }}">{{ $d->nom }}</option>
                @foreach($d->enfants as $e)
                  <option value="{{ $e->id }}">└ {{ $e->nom }}</option>
                @endforeach
              @endforeach
            </select>
          </div>
          <button type="submit" class="btn btn-outline btn-sm" style="width:100%">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Créer
          </button>
        </form>
      </div>
    </div>

    {{-- Arborescence des dossiers --}}
    @if($dossiers->count())
    <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"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          Dossiers
        </div>
      </div>
      <div style="padding:6px 0">
        <a href="{{ route('ged.index') }}"
           style="display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;color:var(--gray-700);transition:background var(--transition);{{ !request('dossier_id') ? 'background:var(--brand-50);color:var(--brand-600);font-weight:600' : '' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="color:var(--warning)"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          Tous les fichiers
        </a>
        @foreach($dossiers as $dossier)
        <a href="{{ route('ged.index', ['dossier_id' => $dossier->id]) }}"
           style="display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;color:var(--gray-700);transition:background var(--transition);{{ request('dossier_id') == $dossier->id ? 'background:var(--brand-50);color:var(--brand-600);font-weight:600' : '' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="color:var(--warning)"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $dossier->nom }}</span>
          <span style="font-size:11px;color:var(--gray-400)">{{ $dossier->nb_fichiers }}</span>
        </a>
        @foreach($dossier->enfants as $enfant)
        <a href="{{ route('ged.index', ['dossier_id' => $enfant->id]) }}"
           style="display:flex;align-items:center;gap:8px;padding:7px 16px 7px 32px;font-size:12.5px;color:var(--gray-600);transition:background var(--transition);{{ request('dossier_id') == $enfant->id ? 'background:var(--brand-50);color:var(--brand-600);font-weight:600' : '' }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13" style="color:var(--warning)"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          {{ $enfant->nom }}
        </a>
        @endforeach
        @endforeach
      </div>
    </div>
    @endif
  </div>

  {{-- Liste des fichiers --}}
  <div>
    <div class="card">
      <div class="filter-bar">
        <form method="GET" style="display:flex;gap:8px;flex-wrap:wrap;width:100%">
          <div class="search-wrap">
            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" name="search" class="form-control" placeholder="Nom, description, tag…" value="{{ request('search') }}">
          </div>
          <select name="categorie_id" class="form-control" style="width:auto">
            <option value="">Toutes catégories</option>
            @foreach($categories as $cat)
              <option value="{{ $cat->id }}" @selected(request('categorie_id') == $cat->id)>{{ $cat->nom }}</option>
            @endforeach
          </select>
          <select name="extension" class="form-control" style="width:auto">
            <option value="">Tout type</option>
            <option value="pdf"  @selected(request('extension') === 'pdf')>PDF</option>
            <option value="jpg"  @selected(request('extension') === 'jpg')>Image</option>
            <option value="docx" @selected(request('extension') === 'docx')>Word</option>
            <option value="xlsx" @selected(request('extension') === 'xlsx')>Excel</option>
          </select>
          <input type="date" name="date_debut" class="form-control" style="width:auto" value="{{ request('date_debut') }}" title="Depuis">
          <input type="date" name="date_fin"   class="form-control" style="width:auto" value="{{ request('date_fin') }}"   title="Jusqu'au">
          <button type="submit" class="btn btn-outline btn-sm">Filtrer</button>
          @if(request()->hasAny(['search','categorie_id','extension','dossier_id','date_debut','date_fin']))
            <a href="{{ route('ged.index') }}" class="btn btn-ghost btn-sm">Reset</a>
          @endif
        </form>
      </div>

      {{-- Grille de fichiers --}}
      @if($fichiers->count())
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;padding:16px">
          @foreach($fichiers as $fichier)
          <div class="ged-file-card">
            <a href="{{ route('ged.show', $fichier) }}" style="display:block;text-decoration:none;color:inherit">

              {{-- Vignette / Icône --}}
              <div class="ged-thumb">
                @if($fichier->est_image)
                  <img src="{{ route('ged.apercu', $fichier) }}" alt="{{ $fichier->nom_original }}" loading="lazy">
                @else
                  <div class="ged-thumb-icon" style="color:{{ $fichier->couleur_icone }}">
                    @include('ged._svg_icone', ['icone' => $fichier->icone])
                  </div>
                @endif
              </div>

              {{-- Infos --}}
              <div class="ged-file-info">
                <div class="ged-file-name" title="{{ $fichier->nom_original }}">
                  {{ $fichier->nom_original }}
                </div>
                <div class="ged-file-meta">
                  <span>{{ $fichier->taille_formatee }}</span>
                  @if($fichier->categorie)
                    · <span class="badge badge-{{ $fichier->categorie->couleur }}" style="font-size:10px;padding:1px 5px">{{ $fichier->categorie->nom }}</span>
                  @endif
                </div>
                <div class="ged-file-date">{{ $fichier->created_at->format('d/m/Y') }}</div>
              </div>
            </a>

            {{-- Actions rapides --}}
            <div class="ged-file-actions">
              <a href="{{ route('ged.telecharger', $fichier) }}" class="btn btn-ghost btn-icon btn-sm" title="Télécharger">
                <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>
              </a>
              <form method="POST" action="{{ route('ged.destroy', $fichier) }}" style="display:inline">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-icon btn-sm" data-confirm="Envoyer à la corbeille ?" style="color:var(--error)" title="Corbeille">
                  <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"/></svg>
                </button>
              </form>
            </div>
          </div>
          @endforeach
        </div>
      @else
        <div class="empty-state">
          <div class="empty-state-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          </div>
          <h3>Aucun fichier</h3>
          <p>{{ request()->hasAny(['search','categorie_id']) ? 'Aucun résultat pour ces filtres.' : 'Importez votre premier document.' }}</p>
          <a href="{{ route('ged.create') }}" class="btn btn-primary btn-sm" style="margin-top:12px">
            <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="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            Importer
          </a>
        </div>
      @endif

      <div class="pagination-wrap">
        @if($fichiers->total() > 0)
          <div class="pagination-info">{{ $fichiers->firstItem() }}–{{ $fichiers->lastItem() }} sur {{ $fichiers->total() }}</div>
        @endif
        {{ $fichiers->links() }}
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<style>
.ged-file-card {
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  transition:box-shadow var(--transition), transform var(--transition);
}
.ged-file-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ged-file-card:hover .ged-file-actions { opacity:1; }

.ged-thumb {
  height:96px;
  background:var(--gray-50);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--gray-100);
}
.ged-thumb img { width:100%; height:100%; object-fit:cover; }
.ged-thumb-icon svg { width:40px; height:40px; }

.ged-file-info { padding:10px 12px; }
.ged-file-name { font-size:12.5px; font-weight:600; color:var(--gray-800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:4px; }
.ged-file-meta { font-size:11.5px; color:var(--gray-400); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ged-file-date { font-size:11px; color:var(--gray-300); margin-top:3px; }

.ged-file-actions {
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  gap:3px;
  opacity:0;
  transition:opacity var(--transition);
}
.ged-file-actions .btn { background:rgba(255,255,255,.92); backdrop-filter:blur(4px); box-shadow:var(--shadow-xs); }
</style>
@endpush