@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.orders.index') }}" class="text-gray-400 hover:text-gray-600 transition">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-3xl font-bold text-gray-900">Commande #{{ $order->id }}</h1>
                <span class="text-sm text-gray-500">du {{ $order->created_at->format('d/m/Y à H:i') }}</span>
            </div>
            <div class="mt-1 text-primary font-bold ml-7">
                Client : {{ $order->user->name ?? $order->customer_name }}
            </div>
        </div>

        <div class="flex gap-3 flex-wrap">
            @if($order->payment_status == 'paye')
                <span class="bg-green-100 text-green-800 px-4 py-2 rounded-full font-bold shadow-sm">
                    <i class="fas fa-check-circle mr-2"></i> Payé
                </span>
            @elseif($order->payment_status == 'rembourse' || $order->payment_status == 'remboursé')
                <span class="bg-red-100 text-red-800 px-4 py-2 rounded-full font-bold shadow-sm">
                    <i class="fas fa-undo mr-2"></i> Remboursé
                </span>
            @else
                <span class="bg-orange-100 text-orange-800 px-4 py-2 rounded-full font-bold shadow-sm">
                    <i class="fas fa-clock mr-2"></i> En attente de paiement
                </span>
            @endif

            <span class="bg-gray-100 text-gray-800 px-4 py-2 rounded-full font-bold shadow-sm border">
                @if($order->status == 'en_attente') ⏳ En attente
                @elseif($order->status == 'en_cours') 🔨 En cours
                @elseif($order->status == 'expedie') 🚚 Expédié
                @elseif($order->status == 'livre') ✅ Livré
                @endif
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <div class="lg:col-span-2 space-y-6">

            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b bg-gray-50 font-bold flex justify-between">
                    <span>Articles commandés</span>
                    <span class="text-xs text-gray-500 font-normal">{{ $order->items->count() }} article(s)</span>
                </div>
                <table class="min-w-full">
                    <tbody class="divide-y divide-gray-200">
                        @foreach($order->items as $item)
                        @php
                            // 1. Décodage des données (JSON)
                            $customData = is_string($item->custom_data) ? json_decode($item->custom_data, true) : ($item->custom_data ?? []);

                            // 2. RECUPERATION DE L'APERÇU (Le Mug avec le design)
                            $previewRaw = $item->preview_image ?? ($customData['preview'] ?? null);

                            $previewUrl = null;
                            if ($previewRaw) {
                                if (str_starts_with($previewRaw, 'data:image')) {
                                    $previewUrl = $previewRaw;
                                } elseif (str_starts_with($previewRaw, 'storage/')) {
                                    $previewUrl = asset($previewRaw);
                                } else {
                                    $previewUrl = asset('storage/' . $previewRaw);
                                }
                            }
                            // Fallback : Image produit de base
                            $finalImageToDisplay = $previewUrl ?? ($item->product->image_path ? asset('storage/' . $item->product->image_path) : null);

                            // 3. RECUPERATION DU FICHIER SOURCE (Pour impression)
                            $sourceRaw = $item->source_image_path
                                         ?? $item->user_file
                                         ?? $item->custom_image_path
                                         ?? ($customData['image'] ?? null);

                            $downloadUrl = null;
                            if ($sourceRaw) {
                                if (str_starts_with($sourceRaw, 'storage/')) {
                                    $downloadUrl = asset($sourceRaw);
                                } else {
                                    $downloadUrl = asset('storage/' . $sourceRaw);
                                }
                            }
                        @endphp

                        <tr>
                            <td class="px-6 py-4">
                                <div class="flex items-start gap-4">

                                    <div class="relative group flex-shrink-0 h-24 w-24">
                                        @if($finalImageToDisplay)
                                            <a href="{{ $finalImageToDisplay }}" target="_blank" class="block h-full w-full">
                                                <img src="{{ $finalImageToDisplay }}"
                                                     class="h-full w-full rounded object-contain border border-gray-200 bg-white hover:scale-150 transition-transform duration-300 shadow-sm z-10 relative"
                                                     alt="Aperçu du résultat">
                                            </a>
                                        @else
                                            <div class="h-full w-full bg-gray-100 rounded flex items-center justify-center text-gray-400 border">
                                                <i class="fas fa-image text-2xl"></i>
                                            </div>
                                        @endif

                                        @if($previewUrl)
                                            <span class="absolute bottom-1 left-1/2 transform -translate-x-1/2 bg-purple-600/90 backdrop-blur-sm text-white text-[8px] px-2 py-0.5 rounded-full font-bold shadow uppercase tracking-wide whitespace-nowrap z-20 pointer-events-none">
                                                Aperçu Client
                                            </span>
                                        @endif
                                    </div>

                                    <div class="flex-grow">
                                        <div class="font-bold text-gray-800 text-lg">{{ $item->product_name }}</div>
                                        <div class="text-sm text-gray-500 mb-2">Réf: #{{ $item->product_id }}</div>

                                        @if(!empty($customData))
                                            <div class="bg-gray-50 p-3 rounded text-sm text-gray-700 border border-gray-200 mb-3 shadow-sm inline-block min-w-[50%]">
                                                <strong class="block border-b border-gray-200 pb-1 mb-1 text-xs text-gray-500 uppercase">Détails de personnalisation :</strong>
                                                <ul class="list-none space-y-1">
                                                    @foreach($customData as $key => $value)
                                                        @if(!in_array($key, ['image', 'file', 'preview', 'price_adjustment', 'source_image_path', 'preview_image']))
                                                            <li class="flex items-start">
                                                                <span class="font-semibold text-gray-600 mr-2 capitalize min-w-[80px]">{{ str_replace('_', ' ', $key) }} :</span>
                                                                <span class="text-gray-900 bg-white px-1 rounded border border-gray-100">{{ $value }}</span>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif

                                        @if($downloadUrl)
                                            <div class="mt-1">
                                                <a href="{{ $downloadUrl }}" download target="_blank"
                                                   class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-xs font-bold rounded hover:bg-blue-700 transition shadow-sm gap-2">
                                                    <i class="fas fa-file-download text-lg"></i>
                                                    <div class="text-left">
                                                        <span class="block leading-none">Télécharger Original</span>
                                                        <span class="text-[9px] opacity-80 font-normal">Fichier pour impression</span>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-right whitespace-nowrap align-top pt-8">
                                <div class="text-sm text-gray-900 font-medium">{{ $item->quantity }} x {{ number_format($item->price, 2) }} €</div>
                            </td>
                            <td class="px-6 py-4 text-right font-bold whitespace-nowrap text-lg text-primary align-top pt-8">
                                {{ number_format($item->quantity * $item->price, 2) }} €
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="bg-white shadow rounded-lg p-6 flex flex-col items-end gap-2">
                <div class="w-full md:w-1/2 flex justify-between text-gray-600">
                    <span>Sous-total</span>
                    <span>{{ number_format($order->total_price, 2) }} €</span>
                </div>
                <div class="w-full md:w-1/2 flex justify-between font-bold text-xl text-primary border-t pt-2 mt-2">
                    <span>Total</span>
                    <span>{{ number_format($order->total_price, 2) }} €</span>
                </div>
            </div>

            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="font-bold mb-4 flex items-center gap-2">
                    <i class="fas fa-comments text-primary"></i> Discussion & B.A.T
                </h3>

                <div class="bg-gray-50 h-80 overflow-y-auto p-4 rounded border mb-4 space-y-3" id="chat-box">
                    @forelse($order->messages as $message)
                        <div class="flex flex-col {{ $message->user_id == Auth::id() ? 'items-end' : 'items-start' }}">
                            <div class="max-w-[80%] inline-block {{ $message->user_id == Auth::id() ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800' }} px-4 py-2 rounded-lg text-sm shadow-sm">
                                {!! $message->content !!}
                            </div>
                            <span class="text-xs text-gray-400 mt-1">
                                {{ $message->user->name ?? 'Système' }} • {{ $message->created_at->format('d/m H:i') }}
                            </span>
                        </div>
                    @empty
                        <div class="h-full flex flex-col items-center justify-center text-gray-400 italic">
                            <i class="fas fa-comment-slash text-4xl mb-2"></i>
                            <p>Aucun message pour l'instant.</p>
                        </div>
                    @endforelse
                </div>

                <form action="{{ route('admin.orders.message', $order->id) }}" method="POST" class="flex gap-2 mb-6">
                    @csrf
                    <input type="text" name="message" class="flex-grow border rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="Écrire un message au client..." required>
                    <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-blue-700 transition shadow">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>

                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <h4 class="font-bold text-yellow-800 text-sm mb-2"><i class="fas fa-file-image mr-1"></i> Envoyer un aperçu (B.A.T)</h4>
                    <p class="text-xs text-yellow-700 mb-3">Le client recevra une notification pour valider cette maquette.</p>

                    <form action="{{ route('admin.orders.proof', $order->id) }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-3">
                        @csrf
                        <input type="file" name="proof_image" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-yellow-100 file:text-yellow-700 hover:file:bg-yellow-200" required>
                        <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-bold text-sm shadow transition whitespace-nowrap">
                            Envoyer
                        </button>
                    </form>
                </div>
            </div>

        </div>

        <div class="lg:col-span-1 space-y-6">

            <div class="bg-white shadow rounded-lg p-6 border-t-4 border-green-500">
                <h3 class="font-bold text-gray-800 mb-4">Gestion du Paiement</h3>
                <form action="{{ route('admin.orders.update_payment', $order->id) }}" method="POST">
                    @csrf
                    @method('PATCH')

                    <div class="mb-4">
                        <label class="block text-sm font-bold text-gray-700 mb-1">Statut</label>
                        <select name="payment_status" class="w-full border rounded p-2 focus:ring-green-500">
                            <option value="en_attente" {{ $order->payment_status == 'en_attente' ? 'selected' : '' }}>⏳ En attente</option>
                            <option value="paye" {{ $order->payment_status == 'paye' ? 'selected' : '' }}>✅ Payé</option>
                            <option value="rembourse" {{ ($order->payment_status == 'rembourse' || $order->payment_status == 'remboursé') ? 'selected' : '' }}>↩️ Remboursé</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-bold text-gray-700 mb-1">Moyen de paiement</label>
                        <select name="payment_method" class="w-full border rounded p-2 focus:ring-green-500">
                            <option value="stripe" {{ $order->payment_method == 'stripe' ? 'selected' : '' }}>Carte (Site)</option>
                            <option value="especes" {{ $order->payment_method == 'especes' ? 'selected' : '' }}>Espèces</option>
                            <option value="cheque" {{ $order->payment_method == 'cheque' ? 'selected' : '' }}>Chèque</option>
                            <option value="tpe" {{ $order->payment_method == 'tpe' ? 'selected' : '' }}>TPE (Carte)</option>
                            <option value="virement" {{ $order->payment_method == 'virement' ? 'selected' : '' }}>Virement</option>
                        </select>
                    </div>

                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded transition shadow">
                        Mettre à jour
                    </button>
                </form>
            </div>

            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="font-bold text-gray-800 mb-4">Client</h3>
                <div class="flex items-center gap-3 mb-4">
                    <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                        {{ substr($order->customer_name, 0, 1) }}
                    </div>
                    <div>
                        <p class="font-bold">{{ $order->customer_name }}</p>
                        <a href="mailto:{{ $order->customer_email }}" class="text-sm text-blue-600 hover:underline">{{ $order->customer_email }}</a>
                    </div>
                </div>

                <p class="text-xs text-gray-400 uppercase font-bold mt-4 mb-1">Adresse de livraison</p>
                <p class="text-sm bg-gray-50 p-3 rounded border text-gray-600">
                    <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
                    {{ $order->shipping_address }}
                </p>
            </div>

            <a href="{{ route('invoices.download', $order->id) }}" class="block w-full text-center bg-gray-800 text-white font-bold py-3 rounded hover:bg-black transition shadow-lg transform hover:-translate-y-1">
                <i class="fas fa-file-pdf mr-2"></i> Télécharger Facture
            </a>

        </div>
    </div>
</div>
@endsection