<x-app-layout>
<x-module-hero title="Reply to Email" description="Re: {{ Str::limit($email->subject, 50) }}" icon="fa-reply">
    <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') || request()->routeIs('emails.reply') ? '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-module-hero>

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

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Reply Form --}}
        <div class="lg:col-span-2">
            <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-reply mr-2 text-blue-600"></i> Compose Reply
                </div>
                <form action="{{ route('emails.send-reply', $email) }}" method="POST" class="p-6">
                    @csrf

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">To</label>
                        <div class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-700">
                            {{ $email->sender->name ?? 'Unknown' }} &lt;{{ $email->sender->email ?? '' }}&gt;
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
                        <input type="text" value="Re: {{ $email->subject }}" class="w-full px-4 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700" readonly>
                    </div>

                    {{-- Original Message Preview --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Original Message</label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg max-h-40 overflow-y-auto text-sm text-gray-600">
                            {!! Str::limit(strip_tags($email->html_body ?? $email->text_body ?? ''), 500) !!}
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Your Reply <span class="text-red-500">*</span></label>
                        <div id="reply-editor" class="min-h-[250px] border border-gray-300 rounded-lg bg-white"></div>
                        <textarea name="message" id="reply-body-input" class="hidden" required></textarea>
                        @error('message')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>

                    @if(!empty($email->cc_recipients))
                    <div class="mb-4">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="reply_all" value="1" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="text-sm text-gray-700">Reply to all (include CC recipients)</span>
                        </label>
                    </div>
                    @endif

                    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
                        <a href="{{ route('emails.show', $email) }}" class="px-6 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition">
                            <i class="fas fa-times mr-1"></i> Cancel
                        </a>
                        <button type="submit" class="px-6 py-2 bg-[#1a4731] text-white text-sm font-semibold rounded-lg hover:bg-[#276749] transition">
                            <i class="fas fa-paper-plane mr-1"></i> Send Reply
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Sidebar --}}
        <div>
            <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">Message Info</div>
                <div class="divide-y divide-gray-100">
                    <div class="px-4 py-3">
                        <p class="text-xs text-gray-500">From</p>
                        <p class="text-sm font-medium text-gray-800">{{ $email->sender->name ?? 'Unknown' }}</p>
                        <p class="text-xs text-gray-500">{{ $email->sender->email ?? '' }}</p>
                    </div>
                    <div class="px-4 py-3">
                        <p class="text-xs text-gray-500">Received</p>
                        <p class="text-sm font-medium text-gray-800">{{ $email->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    <div class="px-4 py-3">
                        <p class="text-xs text-gray-500">Subject</p>
                        <p class="text-sm font-medium text-gray-800">{{ $email->subject }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const quill = new Quill('#reply-editor', {
        theme: 'snow',
        modules: {
            toolbar: [['bold', 'italic', 'underline'], [{'list': 'ordered'}, {'list': 'bullet'}], ['link'], ['clean']]
        }
    });
    document.querySelector('form').addEventListener('submit', function() {
        document.getElementById('reply-body-input').value = quill.root.innerHTML;
    });
});
</script>
@endpush
</x-app-layout>
