<?php
use Livewire\Component;
use App\Models\Inquiry;
?>

<div class="max-content max-w-[800px]">
    <header class="flex justify-between items-center mb-10">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.inquiries') }}" wire:navigate class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-50 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </a>
            <div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Review Inquiry</h1>
                <p class="text-sm text-gray-500 mt-1">Message ID: #INQ-{{ $inquiry->created_at->format('Y') }}-{{ str_pad($inquiry->id, 3, '0', STR_PAD_LEFT) }}</p>
            </div>
        </div>
        <div class="flex gap-3">
            <button wire:click="archive" class="px-4 py-2 border border-gray-300 text-gray-700 text-xs font-medium rounded-md hover:bg-gray-50 transition-colors">Archive</button>
            @if($inquiry->status === 'new')
                <button wire:click="markAsReplied" class="px-4 py-2 bg-sage text-white text-xs font-medium rounded-md hover:bg-sage-dark transition-colors" style="background-color: #99BC85;">Mark as Replied</button>
            @endif
        </div>
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('message') }}</span>
        </div>
    @endif

    <div class="space-y-8">
        <!-- Message Details -->
        <div class="card p-10">
            <div class="flex justify-between items-start border-b border-gray-100 pb-8 mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 font-bold text-lg">
                        {{ strtoupper(substr($inquiry->name, 0, 2)) }}
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900">{{ $inquiry->name }}</h3>
                        <p class="text-sm text-gray-500">{{ $inquiry->email }} • {{ $inquiry->phone ?? 'No phone' }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-[11px] font-bold text-gray-400 uppercase tracking-widest">Received On</p>
                    <p class="text-sm font-medium text-gray-900">{{ $inquiry->created_at->format('F d, Y at h:i A') }}</p>
                </div>
            </div>

            <div class="mb-10">
                <p class="text-[11px] font-bold text-sage uppercase tracking-widest mb-4" style="color: #99BC85;">Subject</p>
                <h2 class="text-xl font-semibold text-gray-800">{{ $inquiry->subject }}</h2>
            </div>

            <div>
                <p class="text-[11px] font-bold text-gray-400 uppercase tracking-widest mb-4">Message Body</p>
                <div class="text-gray-700 leading-relaxed space-y-4 text-base bg-gray-50/50 p-6 rounded-xl border border-gray-100">
                    {!! nl2br(e($inquiry->message)) !!}
                </div>
            </div>
        </div>

        <!-- Quick Response Form -->
        <div class="card p-10 bg-white">
            <h3 class="text-sm font-semibold mb-6 text-gray-900">Quick Response</h3>
            <form wire:submit.prevent="sendResponse" class="space-y-6">
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Response Content</label>
                    <textarea wire:model="reply" rows="6" class="input-field w-full resize-none text-base" placeholder="Type your response to {{ explode(' ', $inquiry->name)[0] }}..."></textarea>
                    @error('reply') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div class="flex justify-between items-center">
                    <p class="text-xs text-gray-400 italic">This will be sent to the sender's email address.</p>
                    <button type="submit" class="px-8 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors" style="background-color: #99BC85;">Send Response</button>
                </div>
            </form>
        </div>
    </div>
</div>