@extends('layouts.app')

@section('title', 'Tableau de bord')

@section('styles')
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    .stat-card {
        background: var(--white);
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: border-color 0.2s, box-shadow 0.2s;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }
    .stat-card:hover { border-color: var(--navy-light); box-shadow: 0 2px 12px rgba(45,74,95,0.08); }

    .stat-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .stat-icon svg { width: 22px; height: 22px; }
    .stat-icon.navy { background: rgba(45,74,95,0.1); color: var(--navy); }
    .stat-icon.gold  { background: rgba(200,180,122,0.15); color: #8a6f2e; }
    .stat-icon.danger { background: var(--danger-bg); color: var(--danger); }
    .stat-icon.success { background: var(--success-bg); color: var(--success); }

    .stat-info { flex: 1; }
    .stat-num {
        font-size: 28px; font-weight: 500;
        color: var(--navy); line-height: 1;
        font-family: 'Cormorant Garamond', serif;
    }
    .stat-label {
        font-size: 12px; color: var(--text-muted);
        margin-top: 4px; letter-spacing: 0.04em;
    }

    .content-grid {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
    }

    @media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } }

    .section-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px; font-weight: 600;
        color: var(--navy); margin-bottom: 16px;
        letter-spacing: 0.02em;
    }

    .produit-row {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f2f4;
    }
    .produit-row:last-child { border-bottom: none; }

    .produit-type {
        width: 36px; height: 36px;
        border-radius: 8px;
        background: var(--gold-pale);
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; flex-shrink: 0;
    }

    .produit-info { flex: 1; min-width: 0; }
    .produit-name {
        font-size: 13px; font-weight: 500; color: var(--text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .produit-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    .dlc-badge {
        font-size: 11px; padding: 3px 10px;
        border-radius: 20px; font-weight: 500; flex-shrink: 0;
    }
    .dlc-ok { background: var(--success-bg); color: var(--success); }
    .dlc-warn { background: var(--warning-bg); color: var(--warning); }
    .dlc-danger { background: var(--danger-bg); color: var(--danger); }

    .event-item {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 12px 0; border-bottom: 1px solid #f0f2f4;
    }
    .event-item:last-child { border-bottom: none; }

    .event-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: var(--gold); margin-top: 4px; flex-shrink: 0;
    }

    .event-name { font-size: 13px; font-weight: 500; color: var(--text); }
    .event-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

    .btn-primary {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--navy); color: var(--gold);
        border: none; border-radius: 10px;
        padding: 11px 20px; font-size: 13px;
        font-family: 'Jost', sans-serif; font-weight: 500;
        letter-spacing: 0.06em; cursor: pointer;
        text-decoration: none; transition: background 0.2s;
    }
    .btn-primary:hover { background: var(--navy-light); }
    .btn-primary svg { width: 16px; height: 16px; }

    .empty-state {
        text-align: center; padding: 40px 20px;
        color: var(--text-muted); font-size: 13px;
    }
</style>
@endsection

@section('content')

<!-- Stats -->
<div class="stats-grid">
    <a href="{{ route('produits.index') }}" class="stat-card">
        <div class="stat-icon navy">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num">{{ $totalProduits }}</div>
            <div class="stat-label">Produits ce mois</div>
        </div>
    </a>

    <a href="{{ route('evenements.index') }}" class="stat-card">
        <div class="stat-icon gold">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num">{{ $totalEvenements }}</div>
            <div class="stat-label">Événements</div>
        </div>
    </a>

    <a href="{{ route('alertes') }}" class="stat-card">
        <div class="stat-icon danger">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num">{{ $alertesDLC }}</div>
            <div class="stat-label">Alertes DLC</div>
        </div>
    </a>

    <a href="{{ route('exports.index') }}" class="stat-card">
        <div class="stat-icon success">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        <div class="stat-info">
            <div class="stat-num">{{ $totalExports }}</div>
            <div class="stat-label">Exports HACCP</div>
        </div>
    </a>
</div>

<!-- Contenu principal -->
<div class="content-grid">

    <!-- Derniers produits -->
    <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
            <h2 class="section-title" style="margin-bottom:0;">Derniers produits</h2>
            <a href="{{ route('scanner') }}" class="btn-primary">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 012-2h4M3 15v4a2 2 0 002 2h4m10-16h-4m4 0v4m0 12h-4m4 0v-4M9 12h6"/>
                </svg>
                Scanner
            </a>
        </div>

        @forelse($derniersProduits as $produit)
        @php
            $jours = $produit->dlc ? now()->diffInDays($produit->dlc, false) : 999;
            $dlcClass = $jours < 0 ? 'dlc-danger' : ($jours <= 3 ? 'dlc-warn' : 'dlc-ok');
            $dlcLabel = $produit->dlc ? ($jours < 0 ? 'Expiré' : ($jours === 0 ? "Aujourd'hui" : 'DLC '.$produit->dlc->format('d/m'))) : 'Sans DLC';
        @endphp
        <div class="produit-row">
            <div class="produit-type">🍽️</div>
            <div class="produit-info">
                <div class="produit-name">{{ $produit->nom }}</div>
                <div class="produit-meta">Lot {{ $produit->numero_lot ?? '—' }} · {{ $produit->evenement->nom ?? 'Sans événement' }}</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <span class="dlc-badge {{ $dlcClass }}">{{ $dlcLabel }}</span>
                <button onclick="openReassign({{ $produit->id }}, '{{ addslashes($produit->nom) }}')"
                    style="background:none; border:1px solid #dde3e8; border-radius:6px; padding:4px 8px; font-size:11px; color:#6b7c8d; cursor:pointer; white-space:nowrap;"
                    title="Rattacher à un événement">
                    ↗ Événement
                </button>
            </div>
        </div>
        @empty
        <div class="empty-state">
            Aucun produit enregistré.<br>
            <a href="{{ route('scanner') }}" style="color: var(--navy); margin-top: 8px; display:inline-block;">Scanner votre premier produit →</a>
        </div>
        @endforelse
    </div>

    <!-- Événements récents -->
    <div class="card">
        <h2 class="section-title">Événements récents</h2>

        @forelse($derniersEvenements as $evenement)
        <div class="event-item">
            <div class="event-dot"></div>
            <div>
                <div class="event-name">{{ $evenement->nom }}</div>
                <div class="event-meta">
                    {{ $evenement->date->format('d/m/Y') }} · {{ $evenement->lieu }}<br>
                    {{ $evenement->produits_count }} produit(s) tracé(s)
                </div>
            </div>
        </div>
        @empty
        <div class="empty-state">Aucun événement créé.</div>
        @endforelse
    </div>

</div>

<!-- Modal réattribuer produit -->
<div id="reassignModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; padding:16px;">
    <div style="background:white; border-radius:16px; width:100%; max-width:460px; padding:28px; max-height:90vh; overflow-y:auto;">
        <h2 style="font-family:'Cormorant Garamond',serif; font-size:20px; color:#2D4A5F; margin-bottom:20px;">Rattacher à un événement</h2>

        <div style="margin-bottom:16px;">
            <div style="font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b7c8d; margin-bottom:6px;">Produit sélectionné</div>
            <div id="reassignProduitName" style="font-size:15px; font-weight:500; color:#1e2d3a; background:#f4f6f8; padding:10px 14px; border-radius:8px;"></div>
        </div>

        <form method="POST" action="/produits/reassign" id="reassignForm">
            @csrf
            <input type="hidden" name="produit_id" id="reassignProduitId">

            <div style="margin-bottom:16px;">
                <div style="font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b7c8d; margin-bottom:6px;">Événement</div>
                <select name="evenement_id" style="width:100%; padding:11px 14px; border:1px solid #dde3e8; border-radius:8px; font-size:13px; font-family:'Jost',sans-serif; outline:none;">
                    <option value="">— Sans événement —</option>
                    @foreach($derniersEvenements as $ev)
                    <option value="{{ $ev->id }}">{{ $ev->nom }} — {{ $ev->date->format('d/m/Y') }}</option>
                    @endforeach
                </select>
            </div>

            <div style="display:flex; gap:10px; margin-top:20px;">
                <button type="button" onclick="closeReassign()" style="flex:1; padding:12px; border-radius:10px; border:1px solid #dde3e8; background:white; font-family:'Jost',sans-serif; font-size:13px; cursor:pointer;">Annuler</button>
                <button type="submit" style="flex:2; padding:12px; border-radius:10px; border:none; background:#2D4A5F; color:#C8B47A; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;">Rattacher</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
function openReassign(id, nom) {
    document.getElementById('reassignProduitId').value = id;
    document.getElementById('reassignProduitName').textContent = nom;
    const modal = document.getElementById('reassignModal');
    modal.style.display = 'flex';
}
function closeReassign() {
    document.getElementById('reassignModal').style.display = 'none';
}
document.getElementById('reassignModal').addEventListener('click', function(e) {
    if (e.target === this) closeReassign();
});
</script>