@extends('layouts.app')

@section('title', 'Media Library - Vendor')

@section('content')
<div class="vendor-dashboard-wrap vendor-media-wrap">
<div class="row g-4">
    @include('vendor.partials.sidebar-column')

    <div class="col-lg-7 col-12 vendor-col-main">
        <div class="vendor-product-page-header">
            <div>
                <p class="vendor-product-page-eyebrow">Media Manager</p>
                <h2 class="vendor-product-page-title">Media Library</h2>
                <p class="vendor-product-page-sub">All product photos, gallery images, and shop visuals in one place</p>
            </div>
            <div class="vendor-product-page-actions">
                <a href="{{ route('vendor.dashboard') }}" class="btn btn-light border text-dark">
                    <i class="bi bi-arrow-left me-1"></i> Dashboard
                </a>
                <a href="{{ route('vendor.products.create') }}" class="btn btn-outline-primary">
                    <i class="bi bi-plus-circle me-1"></i> Add Product
                </a>
            </div>
        </div>

        @include('partials.vendor-media-advice')

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4">
                <i class="bi bi-check-circle-fill me-1"></i> {{ session('success') }}
            </div>
        @endif

        <div class="card vendor-product-form-card mb-4">
            <div class="vendor-product-form-card-header">
                <h5><i class="bi bi-cloud-upload me-2 text-primary"></i>Upload Image</h5>
                <p>Add a primary or gallery image to an existing product</p>
            </div>
            <div class="vendor-product-form-card-body">
                @if($products->isEmpty())
                    <div class="vendor-media-empty-inline">
                        <i class="bi bi-box-seam"></i>
                        <div>
                            <strong>No products yet</strong>
                            <p class="mb-0">Create a product first, then upload images here or during listing.</p>
                        </div>
                        <a href="{{ route('vendor.products.create') }}" class="btn btn-primary btn-sm rounded-pill fw-bold">Create Product</a>
                    </div>
                @else
                    <form action="{{ route('vendor.media.store') }}" method="POST" enctype="multipart/form-data" class="row g-3 align-items-end">
                        @csrf
                        <div class="col-md-5">
                            <label class="vendor-form-label">Product</label>
                            <select name="product_id" class="form-select" required>
                                <option value="">Select product...</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}" @selected(old('product_id') == $product->id)>
                                        {{ $product->name }} ({{ strtoupper($product->status) }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="vendor-form-label">Upload As</label>
                            <select name="upload_type" class="form-select" required>
                                <option value="gallery" @selected(old('upload_type') === 'gallery')>Gallery Image</option>
                                <option value="primary" @selected(old('upload_type') === 'primary')>Primary Image</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="vendor-form-label">Image File</label>
                            <input type="file" name="image" class="form-control" accept="image/*" required>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary rounded-pill fw-bold px-4">
                                <i class="bi bi-upload me-1"></i> Upload to Library
                            </button>
                            <span class="vendor-form-hint ms-2">JPG, PNG, WebP — max 2 MB. Auto-converted to WebP.</span>
                        </div>
                    </form>
                @endif
            </div>
        </div>

        <div class="card vendor-product-form-card">
            <div class="vendor-product-form-card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div>
                    <h5><i class="bi bi-grid-3x3-gap me-2 text-primary"></i>Visual Library</h5>
                    <p>{{ $stats['total_images'] }} assets across your shop</p>
                </div>
                <form method="GET" action="{{ route('vendor.media.index') }}" class="vendor-media-search-form">
                    <input type="hidden" name="filter" value="{{ $filter }}">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                        <input type="text" name="q" class="form-control" placeholder="Search product or slide..." value="{{ $search }}">
                        @if($search)
                            <a href="{{ route('vendor.media.index', ['filter' => $filter]) }}" class="btn btn-light border">Clear</a>
                        @endif
                    </div>
                </form>
            </div>

            <div class="vendor-media-filters">
                @php
                    $filters = [
                        'all' => ['label' => 'All', 'count' => $stats['total_images']],
                        'product' => ['label' => 'Product', 'count' => $stats['product_images']],
                        'gallery' => ['label' => 'Gallery', 'count' => $stats['gallery_images']],
                        'carousel' => ['label' => 'Carousel', 'count' => $stats['carousel_images']],
                        'shop' => ['label' => 'Shop', 'count' => $stats['shop_images']],
                    ];
                @endphp
                @foreach($filters as $key => $meta)
                    <a href="{{ route('vendor.media.index', array_filter(['filter' => $key !== 'all' ? $key : null, 'q' => $search ?: null])) }}"
                       class="vendor-media-filter {{ $filter === $key ? 'active' : '' }}">
                        {{ $meta['label'] }}
                        <span>{{ $meta['count'] }}</span>
                    </a>
                @endforeach
            </div>

            <div class="vendor-product-form-card-body">
                @if($images->count())
                    <div class="row g-3">
                        @foreach($images as $image)
                            <div class="col-6 col-md-4 col-lg-3">
                                <div class="vendor-media-card">
                                    <div class="vendor-media-thumb">
                                        @if($image['url'])
                                            <img src="{{ $image['url'] }}" alt="{{ $image['product_name'] }}" loading="lazy">
                                        @else
                                            <div class="vendor-media-thumb-fallback">
                                                <i class="bi bi-image"></i>
                                            </div>
                                        @endif
                                        <div class="vendor-media-overlay">
                                            @if($image['url'])
                                                <a href="{{ $image['url'] }}" target="_blank" rel="noopener" class="vendor-media-action" title="View full size">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            @endif
                                            @if($image['product_id'])
                                                <a href="{{ route('vendor.products.edit', $image['product_id']) }}" class="vendor-media-action" title="Edit product">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            @elseif($image['edit_url'])
                                                <a href="{{ $image['edit_url'] }}" class="vendor-media-action" title="Manage">
                                                    <i class="bi bi-gear"></i>
                                                </a>
                                            @endif
                                            @if($image['can_delete'] && $image['gallery_id'])
                                                <form action="{{ route('vendor.media.gallery.destroy', $image['gallery_id']) }}" method="POST" class="d-inline" onsubmit="return confirm('Remove this gallery image?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="vendor-media-action danger" title="Delete">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                        <span class="vendor-media-type-badge">{{ $image['type_label'] }}</span>
                                        @if($image['is_primary'])
                                            <span class="vendor-media-primary-badge">Primary</span>
                                        @endif
                                    </div>
                                    <div class="vendor-media-meta">
                                        <div class="vendor-media-title" title="{{ $image['product_name'] }}">{{ $image['product_name'] }}</div>
                                        <div class="vendor-media-sub">
                                            @if($image['product_sku'])
                                                <span>{{ $image['product_sku'] }}</span>
                                            @endif
                                            @if($image['size_bytes'] > 0)
                                                <span>{{ number_format($image['size_bytes'] / 1024, 0) }} KB</span>
                                            @endif
                                        </div>
                                        @if($image['product_status'])
                                            <span class="vendor-media-status vendor-media-status-{{ $image['product_status'] }}">{{ ucfirst($image['product_status']) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="vendor-media-empty">
                        <div class="vendor-media-empty-icon"><i class="bi bi-images"></i></div>
                        <h4>No media found</h4>
                        <p>
                            @if($search)
                                No results for "{{ $search }}". Try another search or clear filters.
                            @else
                                Upload images while creating products or use the upload form above.
                            @endif
                        </p>
                        <a href="{{ route('vendor.products.create') }}" class="btn btn-primary rounded-pill fw-bold px-4">
                            <i class="bi bi-cloud-upload me-1"></i> Start Uploading
                        </a>
                    </div>
                @endif
            </div>

            @if($images->hasPages())
                <div class="card-footer bg-white py-3 border-0">
                    {{ $images->links('pagination::bootstrap-5') }}
                </div>
            @endif
        </div>
    </div>

    <div class="col-lg-3 col-12 vendor-product-sidebar">
        <div class="vendor-product-sidebar-head">
            <h5>Storage Overview</h5>
            <span>Usage, stats, and recent uploads</span>
        </div>

        <div class="vendor-media-storage-card">
            <div class="vendor-media-storage-icon"><i class="bi bi-hdd-stack"></i></div>
            <h6>Asset Storage</h6>
            <div class="vendor-media-storage-bar-wrap">
                <div class="d-flex justify-content-between small mb-1">
                    <span class="text-muted">Used: <strong>{{ $stats['storage_used'] }}</strong></span>
                    <span class="text-muted">Limit: {{ $stats['storage_limit'] }}</span>
                </div>
                <div class="progress vendor-media-progress">
                    <div class="progress-bar" style="width: {{ $stats['storage_percent'] }}%;"></div>
                </div>
            </div>
            <div class="vendor-media-stat-grid">
                <div class="vendor-media-stat-box">
                    <strong>{{ $stats['total_images'] }}</strong>
                    <span>Total Assets</span>
                </div>
                <div class="vendor-media-stat-box">
                    <strong>WebP</strong>
                    <span>Auto Format</span>
                </div>
            </div>
        </div>

        <div class="vendor-stats-card">
            <div class="vendor-stats-card-head">Breakdown</div>
            <div class="vendor-stats-row">
                <span>Product Images</span>
                <strong>{{ $stats['product_images'] }}</strong>
            </div>
            <div class="vendor-stats-row">
                <span>Gallery Images</span>
                <strong>{{ $stats['gallery_images'] }}</strong>
            </div>
            <div class="vendor-stats-row">
                <span>Carousel Slides</span>
                <strong>{{ $stats['carousel_images'] }}</strong>
            </div>
            <div class="vendor-stats-row">
                <span>Shop Branding</span>
                <strong>{{ $stats['shop_images'] }}</strong>
            </div>
        </div>

        <div class="vendor-stats-card">
            <div class="vendor-stats-card-head">Recent Uploads</div>
            @forelse($recentUploads as $upload)
                <div class="vendor-media-recent-item">
                    <div class="vendor-media-recent-thumb">
                        @if($upload['url'])
                            <img src="{{ $upload['url'] }}" alt="">
                        @else
                            <i class="bi bi-image"></i>
                        @endif
                    </div>
                    <div class="min-w-0">
                        <div class="vendor-media-recent-title">{{ $upload['product_name'] }}</div>
                        <small class="text-muted">{{ $upload['type_label'] }} · {{ $upload['sort_at']?->diffForHumans() }}</small>
                    </div>
                </div>
            @empty
                <div class="p-3 text-muted small">No uploads yet.</div>
            @endforelse
        </div>

        <div class="vendor-checklist-card">
            <h6><i class="bi bi-magic me-1"></i> Optimization</h6>
            <ul>
                <li><i class="bi bi-check-circle-fill"></i> Images are resized to 800×800 max</li>
                <li><i class="bi bi-check-circle-fill"></i> Saved as WebP for faster loading</li>
                <li><i class="bi bi-check-circle-fill"></i> Optional SKU watermark on product photos</li>
            </ul>
        </div>
    </div>
</div>
</div>
@endsection