@extends('layouts.app')

@section('title', 'Sélectionner depuis l\'inventaire')

@section('content')
@php
    $inventoryCount = $inventoryItems->count();
    $equipmentCount = $equipments->count();
@endphp

<div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(254,226,226,0.92),_rgba(255,255,255,0.96)_52%),linear-gradient(180deg,#fff7ed_0%,#fff1f2_58%,#ffffff_100%)] pb-24">
    <div class="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
        <section class="overflow-hidden rounded-[28px] border border-white/80 bg-white/90 shadow-[0_28px_70px_rgba(15,23,42,0.08)] backdrop-blur">
            <div class="border-b border-red-100/80 px-4 py-4 sm:px-6 sm:py-5">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
                    <div class="min-w-0">
                        <div class="flex items-center gap-3">
                            <a href="{{ route('prestataire.urgent-sales.index') }}" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-red-100 bg-red-50 text-red-600 transition hover:bg-red-100">
                                <i class="fas fa-arrow-left text-sm"></i>
                            </a>
                            <div class="min-w-0">
                                <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-red-500">Source d'annonce</p>
                                <h1 class="mt-1 text-2xl font-black tracking-tight text-slate-900 sm:text-3xl">Créer depuis l'existant</h1>
                            </div>
                        </div>
                        <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
                            Réutilisez un article d'inventaire ou un équipement déjà saisi pour préremplir une vente urgente sans tout retaper.
                        </p>
                    </div>

                    <div class="grid w-full gap-2 sm:grid-cols-2 lg:w-auto lg:min-w-[360px]">
                        <a href="{{ route('prestataire.urgent-sales.index') }}" class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                            <i class="fas fa-store mr-2 text-xs"></i>Mes ventes
                        </a>
                        <a href="{{ route('prestataire.urgent-sales.create') }}" class="inline-flex items-center justify-center rounded-full bg-red-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700">
                            <i class="fas fa-pen-to-square mr-2 text-xs"></i>Créer manuellement
                        </a>
                    </div>
                </div>

                <div class="mt-4 flex flex-wrap gap-2">
                    <span class="inline-flex items-center gap-2 rounded-full border border-red-100 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700">
                        <i class="fas fa-boxes text-[11px]"></i>{{ $inventoryCount }} article(s)
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-blue-100 bg-blue-50 px-3 py-2 text-xs font-semibold text-blue-700">
                        <i class="fas fa-tools text-[11px]"></i>{{ $equipmentCount }} équipement(s)
                    </span>
                    <span class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-700">
                        <i class="fas fa-bolt text-[11px]"></i>Préremplissage rapide
                    </span>
                </div>
            </div>

            <div class="border-b border-red-100/80 px-4 py-3 sm:px-6">
                <div class="-mx-1 flex gap-2 overflow-x-auto px-1 source-tab-scroll" role="tablist" aria-label="Sources disponibles">
                    <button type="button" class="source-tab is-active" data-tab-target="inventory" aria-selected="true" role="tab">
                        <span class="inline-flex items-center gap-2">
                            <i class="fas fa-boxes text-[11px]"></i>
                            <span>Inventaire</span>
                        </span>
                        <span class="source-tab-count">{{ $inventoryCount }}</span>
                    </button>
                    <button type="button" class="source-tab" data-tab-target="equipment" aria-selected="false" role="tab">
                        <span class="inline-flex items-center gap-2">
                            <i class="fas fa-tools text-[11px]"></i>
                            <span>Équipements</span>
                        </span>
                        <span class="source-tab-count">{{ $equipmentCount }}</span>
                    </button>
                </div>
            </div>

            <div class="px-4 py-4 sm:px-6 sm:py-5">
                <section data-tab-panel="inventory" role="tabpanel">
                    @if($inventoryCount > 0)
                        <div class="mb-4 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-900 sm:text-base">Articles d'inventaire disponibles</h2>
                                <p class="mt-1 text-xs text-slate-500 sm:text-sm">Utilisez le stock existant et le prix déjà renseigné pour préparer une annonce plus vite.</p>
                            </div>
                        </div>

                        <div class="space-y-3 sm:space-y-4">
                            @foreach($inventoryItems as $item)
                                @php
                                    $metadata = is_array($item->metadata) ? $item->metadata : (is_string($item->metadata) ? json_decode($item->metadata, true) : []);
                                    $metadataPhotos = is_array($metadata['photos'] ?? null) ? array_values(array_filter($metadata['photos'])) : [];
                                    $directPhotos = method_exists($item, 'getPhotosArray') ? $item->getPhotosArray() : [];
                                    $photos = count($metadataPhotos) > 0 ? $metadataPhotos : $directPhotos;
                                    $price = $item->selling_price ?? $item->cost_per_unit;
                                    $stockTone = $item->quantity > 5
                                        ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
                                        : 'border-amber-200 bg-amber-50 text-amber-700';
                                    $metaParts = array_filter([
                                        $item->category,
                                        $item->location,
                                        $item->sku ? 'SKU ' . $item->sku : null,
                                    ]);
                                @endphp

                                <article class="overflow-hidden rounded-[24px] border border-red-100/80 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.05)]">
                                    <div class="flex gap-3 p-3 sm:gap-4 sm:p-4">
                                        <div class="relative h-24 w-24 shrink-0 overflow-hidden rounded-[18px] bg-red-50 sm:h-28 sm:w-28">
                                            @if(count($photos) > 0)
                                                <x-media-image :path="$photos[0]" :alt="$item->name" class="h-full w-full object-cover" />
                                            @else
                                                <span class="flex h-full w-full items-center justify-center text-red-300">
                                                    <i class="fas fa-box text-2xl"></i>
                                                </span>
                                            @endif
                                        </div>

                                        <div class="min-w-0 flex-1">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <span class="inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold {{ $stockTone }}">
                                                    {{ $item->quantity }} en stock
                                                </span>
                                                @if($item->isLowStock())
                                                    <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700">
                                                        <i class="fas fa-triangle-exclamation mr-1 text-[10px]"></i>Stock faible
                                                    </span>
                                                @endif
                                                @if($item->unit)
                                                    <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600">
                                                        {{ $item->unit }}
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                                                <div class="min-w-0">
                                                    <h3 class="text-base font-black leading-tight text-slate-900 sm:text-lg">{{ $item->name }}</h3>
                                                    @if(count($metaParts) > 0)
                                                        <p class="mt-1 text-xs font-medium text-slate-500 sm:text-sm">{{ implode(' • ', $metaParts) }}</p>
                                                    @endif
                                                </div>

                                                <div class="shrink-0 text-left sm:text-right">
                                                    <div class="text-lg font-black tracking-tight text-red-600 sm:text-2xl">
                                                        {{ $price !== null ? number_format((float) $price, 0, ',', ' ') . ' €' : 'À définir' }}
                                                    </div>
                                                    <div class="mt-1 text-xs font-semibold text-slate-500">Prix repris de l'inventaire</div>
                                                </div>
                                            </div>

                                            @if($item->description)
                                                <p class="mt-2 line-clamp-2 text-sm leading-6 text-slate-600">
                                                    {{ \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($item->description))), 160) }}
                                                </p>
                                            @endif

                                            <div class="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-red-100/80 pt-3">
                                                <p class="text-xs text-slate-500 sm:text-sm">Les informations seront importées puis modifiables avant publication.</p>
                                                <a href="{{ route('prestataire.urgent-sales.from-inventory', $item->id) }}" class="inline-flex h-9 items-center justify-center rounded-full bg-red-600 px-4 text-xs font-semibold text-white transition hover:bg-red-700 sm:h-10 sm:px-5 sm:text-sm">
                                                    <i class="fas fa-arrow-up-right-from-square mr-2 text-[11px]"></i>Utiliser cet article
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-[24px] border border-dashed border-red-200 bg-red-50/40 px-6 py-12 text-center">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white text-red-300 shadow-sm">
                                <i class="fas fa-boxes text-2xl"></i>
                            </div>
                            <h3 class="mt-4 text-xl font-black text-slate-900">Aucun article d'inventaire disponible</h3>
                            <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-600">
                                Ajoutez d'abord des articles dans votre inventaire pour les transformer rapidement en ventes urgentes.
                            </p>
                            <a href="{{ route('prestataire.inventory.create') }}" class="mt-5 inline-flex h-10 items-center justify-center rounded-full bg-red-600 px-5 text-sm font-semibold text-white transition hover:bg-red-700">
                                <i class="fas fa-plus mr-2 text-xs"></i>Ajouter un article
                            </a>
                        </div>
                    @endif
                </section>

                <section data-tab-panel="equipment" role="tabpanel" hidden>
                    @if($equipmentCount > 0)
                        <div class="mb-4 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <h2 class="text-sm font-semibold text-slate-900 sm:text-base">Équipements actifs et disponibles</h2>
                                <p class="mt-1 text-xs text-slate-500 sm:text-sm">Récupérez un équipement existant pour démarrer une annonce de vente avec une base déjà structurée.</p>
                            </div>
                        </div>

                        <div class="space-y-3 sm:space-y-4">
                            @foreach($equipments as $equipment)
                                @php
                                    $suggestedSalePrice = $equipment->price_per_month
                                        ?: ($equipment->price_per_week ? $equipment->price_per_week * 4 : ($equipment->price_per_day ? $equipment->price_per_day * 30 : null));
                                    $conditionLabel = $equipment->condition ? ucfirst(str_replace('_', ' ', $equipment->condition)) : 'Bon état';
                                    $equipmentMeta = array_filter([
                                        $equipment->brand,
                                        $equipment->model,
                                        $equipment->city,
                                    ]);
                                @endphp

                                <article class="overflow-hidden rounded-[24px] border border-blue-100/80 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.05)]">
                                    <div class="flex gap-3 p-3 sm:gap-4 sm:p-4">
                                        <div class="relative h-24 w-24 shrink-0 overflow-hidden rounded-[18px] bg-blue-50 sm:h-28 sm:w-28">
                                            @if($equipment->main_photo)
                                                <x-media-image :path="$equipment->main_photo" :alt="$equipment->name" class="h-full w-full object-cover" />
                                            @elseif(is_array($equipment->photos) && count($equipment->photos) > 0)
                                                <x-media-image :path="$equipment->photos[0]" :alt="$equipment->name" class="h-full w-full object-cover" />
                                            @else
                                                <span class="flex h-full w-full items-center justify-center text-blue-300">
                                                    <i class="fas fa-tools text-2xl"></i>
                                                </span>
                                            @endif
                                        </div>

                                        <div class="min-w-0 flex-1">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <span class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-700">
                                                    <i class="fas fa-circle-check mr-1 text-[10px]"></i>Disponible
                                                </span>
                                                <span class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-700">
                                                    {{ $conditionLabel }}
                                                </span>
                                                @if($equipment->security_deposit)
                                                    <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600">
                                                        Caution {{ number_format((float) $equipment->security_deposit, 0, ',', ' ') }} €
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                                                <div class="min-w-0">
                                                    <h3 class="text-base font-black leading-tight text-slate-900 sm:text-lg">{{ $equipment->name }}</h3>
                                                    @if(count($equipmentMeta) > 0)
                                                        <p class="mt-1 text-xs font-medium text-slate-500 sm:text-sm">{{ implode(' • ', $equipmentMeta) }}</p>
                                                    @endif
                                                </div>

                                                <div class="shrink-0 text-left sm:text-right">
                                                    <div class="text-lg font-black tracking-tight text-red-600 sm:text-2xl">
                                                        {{ $suggestedSalePrice ? number_format((float) $suggestedSalePrice, 0, ',', ' ') . ' €' : 'À estimer' }}
                                                    </div>
                                                    <div class="mt-1 text-xs font-semibold text-slate-500">
                                                        @if($equipment->price_per_day)
                                                            Base locative: {{ number_format((float) $equipment->price_per_day, 0, ',', ' ') }} €/jour
                                                        @elseif($equipment->price_per_week)
                                                            Base locative: {{ number_format((float) $equipment->price_per_week, 0, ',', ' ') }} €/semaine
                                                        @elseif($equipment->price_per_month)
                                                            Base locative: {{ number_format((float) $equipment->price_per_month, 0, ',', ' ') }} €/mois
                                                        @else
                                                            Prix locatif non renseigné
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            @if($equipment->description)
                                                <p class="mt-2 line-clamp-2 text-sm leading-6 text-slate-600">
                                                    {{ \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($equipment->description))), 160) }}
                                                </p>
                                            @endif

                                            <div class="mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-blue-100/80 pt-3">
                                                <p class="text-xs text-slate-500 sm:text-sm">Vous pourrez ajuster le prix et le descriptif avant de publier la vente urgente.</p>
                                                <a href="{{ route('prestataire.urgent-sales.from-equipment', $equipment->id) }}" class="inline-flex h-9 items-center justify-center rounded-full bg-red-600 px-4 text-xs font-semibold text-white transition hover:bg-red-700 sm:h-10 sm:px-5 sm:text-sm">
                                                    <i class="fas fa-arrow-up-right-from-square mr-2 text-[11px]"></i>Utiliser cet équipement
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-[24px] border border-dashed border-blue-200 bg-blue-50/40 px-6 py-12 text-center">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white text-blue-300 shadow-sm">
                                <i class="fas fa-tools text-2xl"></i>
                            </div>
                            <h3 class="mt-4 text-xl font-black text-slate-900">Aucun équipement disponible</h3>
                            <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-slate-600">
                                Ajoutez ou réactivez un équipement pour pouvoir le convertir rapidement en vente urgente.
                            </p>
                            <a href="{{ route('prestataire.equipment.create') }}" class="mt-5 inline-flex h-10 items-center justify-center rounded-full bg-red-600 px-5 text-sm font-semibold text-white transition hover:bg-red-700">
                                <i class="fas fa-plus mr-2 text-xs"></i>Ajouter un équipement
                            </a>
                        </div>
                    @endif
                </section>
            </div>
        </section>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabs = Array.from(document.querySelectorAll('.source-tab'));
    const panels = Array.from(document.querySelectorAll('[data-tab-panel]'));

    function setActiveTab(tabName) {
        tabs.forEach((tab) => {
            const isActive = tab.dataset.tabTarget === tabName;
            tab.classList.toggle('is-active', isActive);
            tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
        });

        panels.forEach((panel) => {
            panel.hidden = panel.dataset.tabPanel !== tabName;
        });

        if (window.location.hash !== '#' + tabName) {
            history.replaceState(null, '', '#' + tabName);
        }
    }

    tabs.forEach((tab) => {
        tab.addEventListener('click', function () {
            setActiveTab(this.dataset.tabTarget);
        });
    });

    const initialHash = window.location.hash.replace('#', '');
    const initialTab = tabs.some((tab) => tab.dataset.tabTarget === initialHash) ? initialHash : 'inventory';
    setActiveTab(initialTab);
});
</script>
@endpush

@push('styles')
<style>
.source-tab-scroll {
    scrollbar-width: none;
}

.source-tab-scroll::-webkit-scrollbar {
    display: none;
}

.source-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid rgb(254 226 226);
    background: #fff;
    color: rgb(71 85 105);
    border-radius: 9999px;
    padding: 0.7rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 700;
    transition: 180ms ease;
    white-space: nowrap;
}

.source-tab:hover {
    background: rgb(254 242 242);
    color: rgb(220 38 38);
}

.source-tab.is-active {
    border-color: rgb(220 38 38);
    background: rgb(220 38 38);
    color: #fff;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.18);
}

.source-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    border-radius: 9999px;
    background: rgb(241 245 249);
    color: rgb(71 85 105);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0 0.45rem;
}

.source-tab.is-active .source-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 639px) {
    .source-tab {
        padding: 0.62rem 0.82rem;
        font-size: 0.76rem;
    }

    .source-tab-count {
        min-width: 1.45rem;
        height: 1.45rem;
        font-size: 0.68rem;
    }
}
</style>
@endpush