<x-app-layout>
<x-module-hero title="Email: {{ Str::limit($email->subject, 60) }}" description="Email details and thread" icon="fa-envelope-open">
    <x-slot name="backButton">
        <a href="{{ route('emails.index') }}" class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
            <i class="fas fa-arrow-left text-xs"></i> Back to Inbox
        </a>
    </x-slot>
    <x-slot name="tabs">
        @can('view emails')
        <a href="{{ route('emails.index') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-tachometer-alt text-sm"></i> Inbox
        </a>
        @endcan
        @can('create emails')
        <a href="{{ route('emails.compose') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.compose') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-pen text-sm"></i> Compose
        </a>
        @endcan
        @can('view emails')
        <a href="{{ route('emails.history') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.history') || request()->routeIs('emails.show') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-history text-sm"></i> History
        </a>
        @endcan
        @can('manage email templates')
        <a href="{{ route('emails.templates') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.templates') || request()->routeIs('emails.*template*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-file-lines text-sm"></i> Templates
        </a>
        @endcan
    </x-slot>
    <x-slot name="actions">
        @can('reply emails')
            @if(auth()->user()->hasAnyRole(['Super Manager', 'Manager']))
                <a href="{{ route('emails.reply', $email) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-white/90 transition">
                    <i class="fas fa-reply"></i> Reply
                </a>
            @endif
        @endcan
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Email Content --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="font-semibold text-gray-800 px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <i class="fas fa-envelope mr-2 text-blue-600"></i> Email Content
                </div>
                <div class="p-6">
                    {{-- Headers --}}
                    <div class="border-b border-gray-200 pb-4 mb-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                        <div>
                            <span class="text-gray-500">From:</span>
                            <span class="text-gray-800 ml-2 font-medium">{{ $email->sender->name ?? 'System' }}
                                @if($email->sender?->email) &lt;{{ $email->sender->email }}&gt; @endif
                            </span>
                        </div>
                        <div>
                            <span class="text-gray-500">To:</span>
                            <span class="text-gray-800 ml-2">
                                @foreach(($email->to_recipients ?? []) as $r)
                                    {{ is_array($r) ? ($r['email'] ?? $r['name'] ?? '') : $r }}{{ !$loop->last ? ', ' : '' }}
                                @endforeach
                            </span>
                        </div>
                        @if(!empty($email->cc_recipients))
                        <div>
                            <span class="text-gray-500">CC:</span>
                            <span class="text-gray-800 ml-2">{{ count($email->cc_recipients) }} recipients</span>
                        </div>
                        @endif
                        <div>
                            <span class="text-gray-500">Subject:</span>
                            <span class="text-gray-800 ml-2 font-medium">{{ $email->subject }}</span>
                        </div>
                    </div>
                    {{-- Body --}}
                    <div class="prose max-w-none text-gray-700">
                        {!! $email->html_body ?? nl2br(e($email->text_body ?? '')) !!}
                    </div>
                    {{-- Attachments --}}
                    @if($email->hasAttachments())
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <p class="text-sm font-medium text-gray-700 mb-2"><i class="fas fa-paperclip mr-1"></i> {{ $email->attachment_count }} Attachment(s)</p>
                            <div class="flex flex-wrap gap-2">
                                @foreach(($email->attachments ?? []) as $attachment)
                                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
                                        <i class="fas fa-file mr-1"></i>{{ $attachment['name'] ?? 'File' }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Replies Thread --}}
            @if($email->replies->count() > 0)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="font-semibold text-gray-800 px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <i class="fas fa-comments mr-2 text-green-600"></i> Replies ({{ $email->replies->count() }})
                    </div>
                    <div class="divide-y divide-gray-100">
                        @foreach($email->replies as $reply)
                            <div class="p-6">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-8 h-8 rounded-full bg-[#1a4731] flex items-center justify-center text-white text-sm font-bold">
                                        {{ strtoupper(substr($reply->sender->name ?? 'S', 0, 1)) }}
                                    </div>
                                    <div>
                                        <span class="font-medium text-gray-800 text-sm">{{ $reply->sender->name ?? 'Unknown' }}</span>
                                        <span class="text-xs text-gray-500 ml-2">{{ $reply->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                                <div class="prose prose-sm max-w-none text-gray-700">{!! $reply->html_body !!}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-4">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                <div class="font-semibold text-gray-800 px-4 py-3 border-b border-gray-200 bg-gray-50">Details</div>
                <div class="divide-y divide-gray-100">
                    <div class="px-4 py-3 flex justify-between items-center">
                        <span class="text-sm text-gray-500">Status</span>
                        @php $sc = ['sent'=>'bg-green-100 text-green-800','scheduled'=>'bg-blue-100 text-blue-800','failed'=>'bg-red-100 text-red-800','draft'=>'bg-gray-100 text-gray-800'][$email->status] ?? 'bg-gray-100 text-gray-800'; @endphp
                        <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $sc }}">{{ ucfirst($email->status) }}</span>
                    </div>
                    <div class="px-4 py-3 flex justify-between">
                        <span class="text-sm text-gray-500">Created</span>
                        <span class="text-sm font-medium text-gray-800">{{ $email->created_at->format('M d, Y H:i') }}</span>
                    </div>
                    @if($email->sent_at)
                    <div class="px-4 py-3 flex justify-between">
                        <span class="text-sm text-gray-500">Sent At</span>
                        <span class="text-sm font-medium text-gray-800">{{ $email->sent_at->format('M d, Y H:i') }}</span>
                    </div>
                    @endif
                    @if($email->scheduled_at)
                    <div class="px-4 py-3 flex justify-between">
                        <span class="text-sm text-gray-500">Scheduled</span>
                        <span class="text-sm font-medium text-gray-800">{{ $email->scheduled_at->format('M d, Y H:i') }}</span>
                    </div>
                    @endif
                    <div class="px-4 py-3 flex justify-between">
                        <span class="text-sm text-gray-500">Priority</span>
                        <span class="text-sm font-medium text-gray-800 capitalize">{{ $email->priority ?? 'Normal' }}</span>
                    </div>
                    @if($email->template)
                    <div class="px-4 py-3 flex justify-between">
                        <span class="text-sm text-gray-500">Template</span>
                        <span class="text-sm font-medium text-gray-800">{{ $email->template->name }}</span>
                    </div>
                    @endif
                </div>
            </div>

            @can('delete emails')
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <form action="{{ route('emails.destroy', $email) }}" method="POST" onsubmit="return confirm('Delete this email permanently?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-action-delete w-full justify-center py-2">
                        <i class="fas fa-trash"></i> Delete Email
                    </button>
                </form>
            </div>
            @endcan
        </div>
    </div>
</div>
</x-app-layout>
