@extends('layouts.admin')

@section('title', 'Klantvraag #' . $communication->id . ': ' . $communication->subject . ' | Jouwdriedee Beheer')

@section('content')
<div class="space-y-6 max-w-6xl mx-auto">

    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/80 gap-4">
        <div>
            <a href="{{ route('admin.communications.index') }}" class="text-xs text-slate-500 hover:text-slate-900 font-medium inline-flex items-center space-x-1 mb-1 transition">
                <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                <span>Terug naar Communicatie overzicht</span>
            </a>
            <div class="flex items-center space-x-2 mt-0.5">
                <span class="font-mono text-xs text-slate-400">#{{ $communication->id }}</span>
                <h1 class="text-xl sm:text-2xl font-bold tracking-tight text-slate-900">{{ $communication->subject }}</h1>
            </div>
            <p class="text-xs text-slate-500 mt-0.5">
                Ontvangen op {{ $communication->created_at->format('d-m-Y om H:i') }} &bull; Afschrift verzonden naar klant
            </p>
        </div>

        <div class="flex items-center space-x-2">
            <!-- Delete Communication -->
            <form action="{{ route('admin.communications.destroy', $communication) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit klantbericht wilt verwijderen?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-3 py-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 border border-transparent hover:border-rose-200 text-xs font-medium transition cursor-pointer flex items-center space-x-1">
                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                    <span>Verwijderen</span>
                </button>
            </form>
        </div>
    </div>

    <!-- Flash message -->
    @if(session('success'))
        <div class="p-3.5 rounded-xl bg-emerald-50 border border-emerald-200/60 text-emerald-800 text-xs flex items-center space-x-2.5">
            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span class="font-medium">{{ session('success') }}</span>
        </div>
    @endif
    @if(session('warning'))
        <div class="p-3.5 rounded-xl bg-amber-50 border border-amber-200/60 text-amber-800 text-xs flex items-center space-x-2.5">
            <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600 shrink-0"></i>
            <span class="font-medium">{{ session('warning') }}</span>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        
        <!-- Linkerkolom: Bericht Thread & Antwoordformulier -->
        <div class="lg:col-span-8 space-y-6">
            
            <!-- Oorspronkelijke vraag van de klant -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-xs p-6 space-y-4">
                <div class="flex items-center justify-between pb-3 border-b border-slate-100">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-xs">
                            {{ strtoupper(substr($communication->name, 0, 1)) }}
                        </div>
                        <div>
                            <div class="flex items-center space-x-2">
                                <span class="font-bold text-slate-900 text-xs">{{ $communication->name }}</span>
                                <span class="text-[10px] text-slate-400">&lt;{{ $communication->email }}&gt;</span>
                            </div>
                            <span class="text-[11px] text-slate-400">Oorspronkelijk bericht</span>
                        </div>
                    </div>
                    <span class="text-[11px] text-slate-400 font-mono">
                        {{ $communication->created_at->format('d-m-Y H:i:s') }}
                    </span>
                </div>

                <!-- Het daadwerkelijke bericht -->
                <div class="text-xs sm:text-sm text-slate-800 leading-relaxed whitespace-pre-wrap font-normal p-4 rounded-xl bg-slate-50 border border-slate-200/60">
{{ $communication->message }}
                </div>

                @if($communication->ip_address)
                    <div class="text-[10px] text-slate-400 flex items-center space-x-3 pt-1">
                        <span>IP-adres: {{ $communication->ip_address }}</span>
                        <span>&bull;</span>
                        <span>Afschrift verstuurd naar: {{ $communication->email }}</span>
                    </div>
                @endif
            </div>

            <!-- Reactie Geschiedenis (Replies) -->
            @if($communication->replies->isNotEmpty())
                <div class="space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
                        <i data-lucide="corner-down-right" class="w-3.5 h-3.5 text-slate-400"></i>
                        <span>Eerdere Reacties ({{ $communication->replies->count() }})</span>
                    </h3>

                    @foreach($communication->replies as $reply)
                        <div class="bg-white rounded-2xl border border-emerald-200/80 shadow-xs p-5 space-y-3">
                            <div class="flex items-center justify-between pb-2 border-b border-slate-100">
                                <div class="flex items-center space-x-2.5">
                                    <div class="w-7 h-7 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-bold text-[10px]">
                                        {{ $reply->user ? strtoupper(substr($reply->user->name, 0, 1)) : 'J3D' }}
                                    </div>
                                    <div>
                                        <span class="font-semibold text-slate-900 text-xs">{{ $reply->user?->name ?? 'Jouwdriedee.nl Beheer' }}</span>
                                        <span class="text-[10px] text-emerald-700 font-medium ml-1.5 px-1.5 py-0.2 rounded bg-emerald-50">Verzonden via info@jouwdriedee.nl</span>
                                    </div>
                                </div>
                                <span class="text-[11px] text-slate-400 font-mono">
                                    {{ $reply->created_at->format('d-m-Y H:i') }}
                                </span>
                            </div>

                            <div class="text-xs sm:text-sm text-slate-800 leading-relaxed whitespace-pre-wrap">
{{ $reply->message }}
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <!-- Direct Antwoord Formulier -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-xs p-6 space-y-4">
                <div>
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
                        <i data-lucide="reply" class="w-3.5 h-3.5 text-slate-500"></i>
                        <span>Beantwoord deze vraag direct</span>
                    </h3>
                    <p class="text-xs text-slate-500 mt-0.5">
                        Jouw antwoord wordt als e-mail verzonden vanuit <code class="text-slate-800 font-mono bg-slate-100 px-1 py-0.2 rounded">info@jouwdriedee.nl</code> naar <strong class="text-slate-800">{{ $communication->email }}</strong>.
                    </p>
                </div>

                <form action="{{ route('admin.communications.reply', $communication) }}" method="POST" class="space-y-3">
                    @csrf

                    <div>
                        <textarea 
                            name="message" 
                            rows="5" 
                            required 
                            placeholder="Typ jouw reactie aan {{ $communication->name }}..." 
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs sm:text-sm text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 leading-relaxed"
                        ></textarea>
                    </div>

                    <div class="flex items-center justify-between pt-1">
                        <div class="text-[11px] text-slate-400 flex items-center space-x-1.5">
                            <i data-lucide="mail-check" class="w-3.5 h-3.5 text-emerald-600"></i>
                            <span>Status wordt na verzending automatisch 'Beantwoord'</span>
                        </div>

                        <button type="submit" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center space-x-2 shadow-xs cursor-pointer">
                            <i data-lucide="send" class="w-3.5 h-3.5"></i>
                            <span>Verstuur Reactie naar Klant</span>
                        </button>
                    </div>
                </form>
            </div>

        </div>

        <!-- Rechterkolom: Klantprofiel Info & Status Paneel -->
        <div class="lg:col-span-4 space-y-5">
            
            <!-- Status & Notities Box -->
            <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-4">
                <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">Status &amp; Interne Notities</h3>

                <form action="{{ route('admin.communications.status', $communication) }}" method="POST" class="space-y-3">
                    @csrf

                    <div class="space-y-1">
                        <label class="block text-xs font-medium text-slate-700">Dossier Status</label>
                        <select name="status" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-semibold text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                            <option value="new" {{ $communication->status === 'new' ? 'selected' : '' }}>Nieuw</option>
                            <option value="in_progress" {{ $communication->status === 'in_progress' ? 'selected' : '' }}>In behandeling</option>
                            <option value="resolved" {{ $communication->status === 'resolved' ? 'selected' : '' }}>Beantwoord / Opgelost</option>
                            <option value="closed" {{ $communication->status === 'closed' ? 'selected' : '' }}>Gesloten</option>
                        </select>
                    </div>

                    <div class="space-y-1">
                        <label class="block text-xs font-medium text-slate-700">Interne beheerder notitie</label>
                        <textarea name="admin_notes" rows="3" placeholder="Alleen zichtbaar voor beheerders..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">{{ old('admin_notes', $communication->admin_notes) }}</textarea>
                    </div>

                    <button type="submit" class="w-full py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-medium transition cursor-pointer">
                        Status &amp; Notitie Opslaan
                    </button>
                </form>
            </div>

            <!-- Klantprofiel Kaart -->
            <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3.5">
                <div class="flex items-center justify-between">
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">Klantgegevens</h3>
                    <a href="{{ route('admin.customers.show', $communication->user_id ?? $communication->email) }}" class="text-[11px] font-semibold text-slate-900 underline hover:text-slate-700">
                        Volledig Profiel &rarr;
                    </a>
                </div>

                <div class="text-xs space-y-2 text-slate-600">
                    <div>
                        <span class="text-slate-400 block text-[10px]">Naam</span>
                        <a href="{{ route('admin.customers.show', $communication->user_id ?? $communication->email) }}" class="font-semibold text-slate-900 hover:underline">
                            {{ $communication->name }}
                        </a>
                    </div>

                    <div>
                        <span class="text-slate-400 block text-[10px]">E-mailadres</span>
                        <a href="mailto:{{ $communication->email }}" class="text-slate-900 hover:underline font-mono">
                            {{ $communication->email }}
                        </a>
                    </div>

                    @if($communication->phone)
                        <div>
                            <span class="text-slate-400 block text-[10px]">Telefoonnummer</span>
                            <a href="tel:{{ $communication->phone }}" class="text-slate-900 hover:underline font-mono">
                                {{ $communication->phone }}
                            </a>
                        </div>
                    @endif

                    <div>
                        <span class="text-slate-400 block text-[10px]">Account status</span>
                        @if($communication->user)
                            <span class="inline-flex items-center space-x-1 text-emerald-700 font-semibold">
                                <i data-lucide="check" class="w-3 h-3"></i>
                                <span>Geregistreerd account (#{{ $communication->user->id }})</span>
                            </span>
                        @else
                            <span class="text-slate-500">Gastbezoeker (geen account)</span>
                        @endif
                    </div>
                </div>

                <div class="pt-2 border-t border-slate-100">
                    <a href="{{ route('admin.customers.show', $communication->user_id ?? $communication->email) }}" class="w-full py-2 px-3 rounded-xl bg-slate-50 hover:bg-slate-100 text-slate-800 text-xs font-medium transition flex items-center justify-center space-x-1.5">
                        <i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
                        <span>Bekijk alle communicatie van deze klant</span>
                    </a>
                </div>
            </div>

            <!-- Gekoppelde Bestelling (indien van toepassing) -->
            @if($communication->order)
                <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">Betreft Bestelling</h3>
                        <a href="{{ route('admin.orders.show', $communication->order) }}" class="text-[11px] font-semibold text-indigo-600 underline">
                            Order details &rarr;
                        </a>
                    </div>

                    <div class="text-xs space-y-1.5 text-slate-600">
                        <div>
                            <span class="text-slate-400 block text-[10px]">Ordernummer</span>
                            <span class="font-mono font-bold text-slate-900">#{{ $communication->order->order_number }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block text-[10px]">Orderdatum</span>
                            <span>{{ $communication->order->created_at->format('d-m-Y H:i') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block text-[10px]">Bedrag &amp; Status</span>
                            <span class="font-bold text-slate-900">{{ $communication->order->formatted_total }}</span>
                            <span class="ml-1 text-[10px] px-1.5 py-0.2 rounded bg-slate-100 font-semibold">{{ $communication->order->status }}</span>
                        </div>
                    </div>
                </div>
            @endif

        </div>

    </div>

</div>
@endsection