@extends('layouts.admin')

@section('content')
    @php
        $adminArtefactImageUrl = static function ($asset) {
            if (! $asset?->file_path) {
                return null;
            }

            $path = $asset->file_path;

            if (str($path)->startsWith(['http://', 'https://', '/'])) {
                return $path;
            }

            if (str($path)->startsWith('storage/')) {
                return asset($path);
            }

            if (str($path)->startsWith('images/')) {
                return asset($path);
            }

            if (($asset->disk ?: 'public') === 'public') {
                return asset('storage/'.$path);
            }

            return \Illuminate\Support\Facades\Storage::disk($asset->disk)->url($path);
        };
    @endphp

    <section class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3 mb-4">
        <div>
            <p class="small text-success fw-bold text-uppercase mb-2" style="letter-spacing: .08em;"><span data-admin-en="Admin Module" data-admin-as="প্ৰশাসনিক মডিউল">Admin Module</span></p>
            <h1 class="h3 fw-bold admin-text mb-1"><span data-admin-en="Artefacts" data-admin-as="প্ৰত্নবস্তুসমূহ">Artefacts</span></h1>
            <p class="small admin-muted mb-0"><span data-admin-en="Manage artefacts records from the database." data-admin-as="ডাটাবেছৰ পৰা প্ৰত্নবস্তুৰ ৰেকৰ্ড পৰিচালনা কৰক।">Manage artefacts records from the database.</span></p>
        </div>
        <a class="btn btn-success d-inline-flex align-items-center gap-2 rounded-4 px-3 py-2 fw-semibold shadow-sm" href="{{ route('admin.artefacts.create') }}">
            <i data-lucide="plus-circle" width="16" height="16"></i>
            <span data-admin-en="New Artefact" data-admin-as="নতুন প্ৰত্নবস্তু">New Artefact</span>
        </a>
    </section>

    @if (session('success'))
        <div class="alert alert-success border-0 rounded-4 shadow-sm">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger border-0 rounded-4 shadow-sm">
            <span data-admin-en="Please check the highlighted fields and try again." data-admin-as="চিহ্নিত ক্ষেত্ৰসমূহ পৰীক্ষা কৰি পুনৰ চেষ্টা কৰক।">Please check the highlighted fields and try again.</span>
        </div>
    @endif

    <section class="glass-card rounded-4 p-3 p-lg-4 mb-4">
        <form class="row g-3 align-items-end" method="GET" action="{{ route('admin.artefacts.index') }}">
            <div class="col-12 col-lg-7">
                <label class="form-label small fw-semibold admin-muted"><span data-admin-en="Search" data-admin-as="সন্ধান">Search</span></label>
                <input class="form-control admin-input rounded-4" type="search" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search artefacts" data-admin-placeholder-en="Search artefacts" data-admin-placeholder-as="প্ৰত্নবস্তু সন্ধান কৰক">
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <label class="form-label small fw-semibold admin-muted"><span data-admin-en="Status" data-admin-as="স্থিতি">Status</span></label>
                <select class="form-select admin-input rounded-4" name="status">
                    <option value="" data-admin-en="All statuses" data-admin-as="সকলো স্থিতি">All statuses</option>
                    @foreach (($selectOptions['statuses'] ?? []) + ($selectOptions['categoryStatuses'] ?? []) + ($selectOptions['submissionStatuses'] ?? []) as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value) data-admin-en="{{ $label }}" data-admin-as="{{ $selectOptionLabelsAs[$value] ?? $label }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-6 col-lg-2 d-grid">
                <button class="btn btn-success rounded-4 fw-semibold" type="submit"><span data-admin-en="Filter" data-admin-as="ফিল্টাৰ">Filter</span></button>
            </div>
        </form>
    </section>

    <section>
        <div class="artefact-card-grid">
            @forelse ($records as $record)
                @php
                    $imageUrl = $adminArtefactImageUrl($record->image);
                    $imageAlt = $record->image?->alt_text_en ?: $record->image?->title_en ?: $record->title_en;
                    $titleEn = $record->title_en ?: '-';
                    $titleAs = $record->title_as ?: $titleEn;
                    $statusEn = str($record->status ?? '-')->replace('_', ' ')->title()->toString();
                    $statusAs = $selectOptionLabelsAs[$record->status ?? ''] ?? $statusEn;
                @endphp

                <article class="glass-card artefact-card rounded-4 overflow-hidden">
                    <div class="artefact-card-media">
                        @if ($imageUrl)
                            <img src="{{ $imageUrl }}" alt="{{ $imageAlt }}" loading="lazy">
                        @else
                            <span class="artefact-card-empty">
                                <i data-lucide="image-off" width="24" height="24"></i>
                            </span>
                        @endif
                    </div>

                    <div class="artefact-card-body">
                        <div class="d-flex align-items-start justify-content-between gap-2">
                            <h2 class="artefact-card-title mb-0">
                                <span data-admin-en="{{ str($titleEn)->limit(80) }}" data-admin-as="{{ str($titleAs)->limit(80) }}">{{ str($titleEn)->limit(80) }}</span>
                            </h2>
                            <span class="admin-badge text-success flex-shrink-0" style="background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .24);" data-admin-en="{{ $statusEn }}" data-admin-as="{{ $statusAs }}">{{ $statusEn }}</span>
                        </div>

                        <div class="artefact-card-meta">
                            <span>
                                <strong data-admin-en="Period" data-admin-as="কাল">Period</strong>
                                {{ str($record->period ?? '-')->limit(60) }}
                            </span>
                            <span>
                                <strong data-admin-en="Sort" data-admin-as="ক্ৰম">Sort</strong>
                                {{ $record->sort_order ?? '-' }}
                            </span>
                        </div>

                        <div class="artefact-card-actions">
                            <a class="btn btn-sm glass-card admin-text rounded-3" href="{{ route('admin.artefacts.show', $record->id) }}" title="View" aria-label="View">
                                <i data-lucide="eye" width="15" height="15"></i>
                            </a>
                            <a class="btn btn-sm glass-card admin-text rounded-3" href="{{ route('admin.artefacts.edit', $record->id) }}" title="Edit" aria-label="Edit">
                                <i data-lucide="pencil" width="15" height="15"></i>
                            </a>
                            <form method="POST" action="{{ route('admin.artefacts.destroy', $record->id) }}" onsubmit="return confirm('Delete this Artefact?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger rounded-3" type="submit" title="Delete" aria-label="Delete">
                                    <i data-lucide="trash-2" width="15" height="15"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </article>
            @empty
                <div class="glass-card rounded-4 p-5 text-center admin-muted artefact-card-empty-state">
                    <span data-admin-en="No artefacts found." data-admin-as="প্ৰত্নবস্তু পোৱা নগল।">No artefacts found.</span>
                </div>
            @endforelse
        </div>

        <div class="p-3 mt-3">
            {{ $records->links() }}
        </div>
    </section>

    <style>
        .artefact-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
            gap: 1rem;
        }

        .artefact-card {
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }

        .artefact-card-media {
            position: relative;
            width: 100%;
            height: 13.5rem;
            background: rgba(255, 255, 255, .05);
            border-bottom: 1px solid var(--admin-border);
        }

        .artefact-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .artefact-card-empty {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--admin-muted);
        }

        .artefact-card-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
        }

        .artefact-card-title {
            color: var(--admin-text);
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.35;
        }

        .artefact-card-meta {
            display: grid;
            gap: .55rem;
            color: var(--admin-muted);
            font-size: .86rem;
        }

        .artefact-card-meta span {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            min-width: 0;
        }

        .artefact-card-meta strong {
            color: var(--admin-text);
            font-weight: 700;
        }

        .artefact-card-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .5rem;
            margin-top: auto;
        }

        .artefact-card-empty-state {
            grid-column: 1 / -1;
        }

        @media (max-width: 575.98px) {
            .artefact-card-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection