@extends('admin.layout')
@section('title', 'View Message')
@section('page-title', 'Message Details')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">

        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg">
                    {{ substr($message->name, 0, 1) }}
                </div>
                <div>
                    <p class="font-bold text-white">{{ $message->name }}</p>
                    <p class="text-sm text-indigo-400">{{ $message->email }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                @if(!$message->is_read)
                    <form action="{{ route('admin.messages.read', $message) }}" method="POST">
                        @csrf
                        <button class="px-3 py-1.5 bg-green-500/10 text-green-400 text-xs font-semibold rounded-lg hover:bg-green-500 hover:text-white transition-all">
                            <i class="fas fa-check mr-1"></i>Mark Read
                        </button>
                    </form>
                @else
                    <span class="px-3 py-1.5 bg-green-500/10 text-green-400 text-xs font-semibold rounded-lg">
                        <i class="fas fa-check mr-1"></i>Read
                    </span>
                @endif
                @include('admin.partials.delete-btn', ['route' => route('admin.messages.destroy', $message)])
            </div>
        </div>

        <!-- Message Details -->
        <div class="space-y-4">
            @if($message->phone)
                <div class="bg-gray-800/50 rounded-xl p-3">
                    <p class="text-xs text-gray-500">Phone</p>
                    <p class="text-sm text-white">{{ $message->phone }}</p>
                </div>
            @endif

            @if($message->subject)
                <div class="bg-gray-800/50 rounded-xl p-3">
                    <p class="text-xs text-gray-500">Subject</p>
                    <p class="text-sm text-white">{{ $message->subject }}</p>
                </div>
            @endif

            <div class="bg-gray-800/50 rounded-xl p-4">
                <p class="text-xs text-gray-500 mb-2">Message</p>
                <p class="text-sm text-gray-300 leading-relaxed whitespace-pre-wrap">{{ $message->message }}</p>
            </div>

            <p class="text-xs text-gray-600">
                <i class="fas fa-clock mr-1"></i>
                Received {{ $message->created_at->format('M d, Y \a\t h:i A') }}
                @if($message->is_read && $message->read_at)
                    <span class="ml-3 text-green-500/60">
                        <i class="fas fa-eye mr-1"></i>
                        Read {{ $message->read_at->diffForHumans() }}
                    </span>
                @endif
            </p>
        </div>

        <!-- ===== REFERRAL TRACKING INFO ===== -->
        @if($message->referral)
            <div class="mt-6 bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-5">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-8 h-8 bg-indigo-500/20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-link text-indigo-400 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-white">Referred By</span>
                </div>

                <div class="flex items-center justify-between flex-wrap gap-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
                            {{ substr($message->referral->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="text-sm text-white font-medium">{{ $message->referral->name }}</p>
                            <div class="flex items-center gap-2 mt-0.5">
                                <code class="text-xs text-indigo-400 bg-indigo-500/10 px-2 py-0.5 rounded">
                                    {{ $message->referral_code }}
                                </code>
                                <span class="text-xs px-1.5 py-0.5 rounded
                                    {{ $message->referral->type === 'team' ? 'bg-indigo-500/10 text-indigo-400' : '' }}
                                    {{ $message->referral->type === 'partner' ? 'bg-cyan-500/10 text-cyan-400' : '' }}
                                    {{ $message->referral->type === 'affiliate' ? 'bg-green-500/10 text-green-400' : '' }}
                                    {{ $message->referral->type === 'custom' ? 'bg-yellow-500/10 text-yellow-400' : '' }}
                                ">
                                    {{ ucfirst($message->referral->type) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <!-- Quick Stats -->
                        <div class="text-center">
                            <p class="text-lg font-bold text-white">{{ $message->referral->total_clicks }}</p>
                            <p class="text-xs text-gray-500">Clicks</p>
                        </div>
                        <div class="text-center">
                            <p class="text-lg font-bold text-green-400">{{ $message->referral->total_conversions }}</p>
                            <p class="text-xs text-gray-500">Conversions</p>
                        </div>
                        <div class="text-center">
                            <p class="text-lg font-bold text-indigo-400">{{ $message->referral->getConversionRate() }}%</p>
                            <p class="text-xs text-gray-500">Rate</p>
                        </div>

                        <!-- View Analytics Button -->
                        <a href="{{ route('admin.referrals.show', $message->referral) }}"
                           class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold rounded-xl transition-all flex items-center gap-1.5 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/30">
                            <i class="fas fa-chart-bar text-xs"></i>
                            View Analytics
                        </a>
                    </div>
                </div>

                <!-- Referral Link -->
                <div class="mt-4 pt-3 border-t border-indigo-500/20">
                    <p class="text-xs text-gray-500 mb-1">Referral Link Used</p>
                    <div class="flex items-center gap-2">
                        <code class="text-xs text-indigo-300/80 bg-indigo-500/10 px-3 py-1.5 rounded-lg flex-1 overflow-hidden text-ellipsis">
                            {{ $message->referral->getLink() }}
                        </code>
                        <button
                            onclick="navigator.clipboard.writeText('{{ $message->referral->getLink() }}'); this.innerHTML='<i class=\'fas fa-check text-green-400\'></i>'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i>', 1500)"
                            class="w-8 h-8 bg-indigo-500/20 hover:bg-indigo-500 rounded-lg flex items-center justify-center text-indigo-400 hover:text-white text-xs transition-all flex-shrink-0"
                            title="Copy Link"
                        >
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <!-- Team Member Info (if linked) -->
                @if($message->referral->teamMember)
                    <div class="mt-3 pt-3 border-t border-indigo-500/20">
                        <div class="flex items-center gap-2">
                            <div class="w-7 h-7 bg-purple-500/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user text-purple-400 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-400">
                                    Linked Team Member:
                                    <span class="text-white font-medium">{{ $message->referral->teamMember->name }}</span>
                                    <span class="text-gray-500">({{ $message->referral->teamMember->role }})</span>
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

        @elseif($message->referral_code)
            <!-- Referral code exists but referral record was deleted -->
            <div class="mt-6 bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4">
                <div class="flex items-center gap-2">
                    <i class="fas fa-exclamation-triangle text-yellow-400 text-sm"></i>
                    <span class="text-sm text-yellow-400 font-medium">Referral Link Deleted</span>
                </div>
                <p class="text-xs text-gray-400 mt-1">
                    This message was referred via code
                    <code class="text-yellow-400 bg-yellow-500/10 px-1.5 py-0.5 rounded">{{ $message->referral_code }}</code>
                    but the referral link has been deleted.
                </p>
            </div>

        @else
            <!-- No referral - Direct visitor -->
            <div class="mt-6 bg-gray-800/30 border border-gray-800 rounded-xl p-4">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 bg-gray-700 rounded-lg flex items-center justify-center">
                        <i class="fas fa-globe text-gray-400 text-xs"></i>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400">
                            <span class="text-gray-300 font-medium">Direct Visitor</span>
                            — No referral link was used
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Action Buttons -->
        <div class="mt-6 pt-4 border-t border-gray-800 flex flex-wrap items-center gap-3">
            <a href="mailto:{{ $message->email }}"
               class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all inline-flex items-center gap-2 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/30">
                <i class="fas fa-reply text-xs"></i> Reply via Email
            </a>

            @if($message->phone)
                <a href="tel:{{ $message->phone }}"
                   class="px-5 py-2.5 bg-green-600 hover:bg-green-500 text-white text-sm font-semibold rounded-xl transition-all inline-flex items-center gap-2">
                    <i class="fas fa-phone text-xs"></i> Call
                </a>
            @endif

            <a href="{{ route('admin.messages.index') }}"
               class="px-5 py-2.5 bg-gray-800 hover:bg-gray-700 text-gray-300 text-sm font-medium rounded-xl transition-all inline-flex items-center gap-2">
                <i class="fas fa-arrow-left text-xs"></i> Back to Messages
            </a>
        </div>
    </div>
</div>
@endsection