@extends('layouts.admin')

@section('title', $library->name)

@section('content')
    <x-ui.page-header :title="$library->name" :subtitle="$library->display_name"
        :back="route('admin.libraries.index')">
        <x-slot:actions>
            @can('update', $library)
                <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.libraries.edit', $library) }}">
                    <i class="bi bi-pencil"></i> Edit
                </a>
            @endcan
            @can('delete', $library)
                <x-ui.delete-button :action="route('admin.libraries.destroy', $library)" label="Delete"
                    confirm="Delete library {{ $library->name }}? The x-ray cases themselves are kept." />
            @endcan
        </x-slot:actions>
    </x-ui.page-header>

    <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
            <a class="nav-link {{ $tab !== 'content' ? 'active' : '' }}"
               href="{{ route('admin.libraries.show', ['library' => $library, 'tab' => 'properties']) }}">Properties</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $tab === 'content' ? 'active' : '' }}"
               href="{{ route('admin.libraries.show', ['library' => $library, 'tab' => 'content']) }}">
                Content <span class="badge text-bg-light">{{ $cases->total() }}</span>
            </a>
        </li>
    </ul>

    @if ($tab !== 'content')
        <x-ui.card title="Library properties">
            <div class="row">
                <x-ui.detail-row label="Name">{{ $library->name }}</x-ui.detail-row>
                <x-ui.detail-row label="Display Name">{{ $library->display_name }}</x-ui.detail-row>
                <x-ui.detail-row label="Description">{{ $library->description }}</x-ui.detail-row>
                <x-ui.detail-row label="Library Type">{{ $library->library_type->value }}</x-ui.detail-row>
                <x-ui.detail-row label="Machine Type">{{ $library->machine_type }}</x-ui.detail-row>
                <x-ui.detail-row label="Area">{{ $library->area }}</x-ui.detail-row>
                <x-ui.detail-row label="Scope">{{ $library->scope->value }}</x-ui.detail-row>
                <x-ui.detail-row label="Status"><x-ui.status-badge :value="$library->status" /></x-ui.detail-row>
                <x-ui.detail-row label="Version">{{ $library->version }}</x-ui.detail-row>
                <x-ui.detail-row label="X-Ray Cases">{{ $cases->total() }}</x-ui.detail-row>
                <x-ui.detail-row label="Created By">{{ $library->creator?->name ?? 'System' }}</x-ui.detail-row>
                <x-ui.detail-row label="Created At">{{ $library->created_at?->format('d M Y H:i') }}</x-ui.detail-row>
                <x-ui.detail-row label="Updated By">{{ $library->updater?->name ?? '—' }}</x-ui.detail-row>
                <x-ui.detail-row label="Updated At">{{ $library->updated_at?->format('d M Y H:i') }}</x-ui.detail-row>
            </div>
        </x-ui.card>
    @else
        @can('update', $library)
            <x-ui.card title="Add existing x-ray cases to this library">
                <x-slot:header>
                    @can(\App\Support\Permissions::CASES_CREATE)
                        <a class="btn btn-sm btn-outline-primary"
                           href="{{ route('admin.xray-cases.create', ['library_id' => $library->id]) }}">
                            <i class="bi bi-plus-lg"></i> New Case
                        </a>
                    @endcan
                </x-slot:header>

                @if ($availableCases->isEmpty())
                    <p class="xrt-meta mb-0">Every existing x-ray case is already part of this library.</p>
                @else
                    <form method="POST" action="{{ route('admin.libraries.cases.attach', $library) }}" class="row g-2 align-items-end">
                        @csrf
                        <div class="col-md-8">
                            <label class="xrt-label" for="attach-cases">X-ray cases</label>
                            <select class="form-select form-select-sm" id="attach-cases" name="xray_case_ids[]" multiple size="5" required>
                                @foreach ($availableCases as $available)
                                    <option value="{{ $available->id }}">{{ $available->name }} — {{ $available->display_name }}</option>
                                @endforeach
                            </select>
                            <div class="form-text">Hold Ctrl (or Cmd) to select several cases.</div>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-link-45deg"></i> Add to Library</button>
                        </div>
                    </form>
                @endif
            </x-ui.card>
        @endcan

        <div class="xrt-card">
            <div class="xrt-card-header">
                <span>X-ray cases in this library</span>
                <span class="xrt-meta">Ordered by the library sort order</span>
            </div>
            <div class="xrt-card-body">
                @forelse ($cases as $case)
                    @php $primary = $case->views->first(); @endphp
                    <div class="xrt-list-row">
                        @if ($primary)
                            <img class="xrt-thumb" src="{{ $primary->imageUrl() }}" alt="{{ $case->name }}">
                        @else
                            <div class="xrt-thumb xrt-thumb-placeholder"><i class="bi bi-image"></i></div>
                        @endif

                        <div class="flex-grow-1">
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <a class="fw-semibold text-decoration-none" href="{{ route('admin.xray-cases.show', $case) }}">{{ $case->name }}</a>
                                <x-ui.status-badge :value="$case->status" />
                                <span class="badge {{ $case->complexity->badgeClass() }}">{{ $case->complexity->value }}</span>
                            </div>
                            <div class="xrt-meta">{{ $case->display_name }}</div>
                            <div class="xrt-meta">
                                {{ $case->views_count }} view(s) &middot; {{ $case->machine_type ?? '—' }} &middot; v{{ $case->version }}
                                &middot; position {{ $case->pivot->sort_order }}
                            </div>
                        </div>

                        <div class="d-flex flex-column gap-1">
                            <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.xray-cases.show', $case) }}"><i class="bi bi-eye"></i> View</a>
                            <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.xray-cases.preview', $case) }}"><i class="bi bi-display"></i> Preview</a>
                            @can('update', $library)
                                <form method="POST" action="{{ route('admin.libraries.cases.detach', [$library, $case]) }}"
                                      data-confirm="Remove {{ $case->name }} from this library? The case itself is kept.">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger w-100" type="submit"><i class="bi bi-x-lg"></i> Remove</button>
                                </form>
                            @endcan
                        </div>
                    </div>
                @empty
                    <x-ui.empty-state icon="bi-images" title="This library has no x-ray cases yet"
                        message="Add existing cases above, or create a new one." />
                @endforelse

                <div class="mt-3">{{ $cases->links() }}</div>
            </div>
        </div>
    @endif
@endsection