@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col-6">
                        <h5 class="card-title mb-0">WhatsApp Message Details</h5>
                    </div>
                    <div class="col-6 text-end">
                        <a href="{{ route('whatsapp-messages.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
                <hr />
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Message Information</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless">
                                    <tr>
                                        <th width="35%" class="text-muted">Message ID:</th>
                                        <td>
                                            <code class="bg-light p-2 rounded d-block">
                                                {{ $whatsappMessage->msg_id }}
                                            </code>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">From Phone:</th>
                                        <td>
                                            <a href="https://wa.me/{{ $whatsappMessage->from_phone }}" target="_blank" class="text-success">
                                                <i class="fab fa-whatsapp"></i> {{ $whatsappMessage->from_phone }}
                                            </a>
                                            <br>
                                            <small class="text-muted">Click to open WhatsApp chat</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Parsed Status:</th>
                                        <td>
                                            @php
                                                $statusColors = [
                                                    'matched' => 'success',
                                                    'unmatched' => 'warning',
                                                    'error' => 'danger',
                                                    'pending' => 'info',
                                                    'processed' => 'primary'
                                                ];
                                            @endphp
                                            <span class="badge bg-{{ $statusColors[$whatsappMessage->parsed_status] ?? 'secondary' }}">
                                                {{ $parsedStatuses[$whatsappMessage->parsed_status] ?? $whatsappMessage->parsed_status ?? 'Unknown' }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Task Code:</th>
                                        <td>
                                            @if($whatsappMessage->task_code)
                                                <span class="badge bg-info">{{ $whatsappMessage->task_code }}</span>
                                                @php
                                                    $parsed = app('App\Http\Controllers\WhatsappMessageController')->parseTaskCode($whatsappMessage->task_code);
                                                @endphp
                                                @if($parsed)
                                                    <br>
                                                    <small class="text-muted">
                                                        Mosque: {{ $parsed['mosque_code'] }} | 
                                                        Task: {{ $parsed['task_number'] }} | 
                                                        Date: {{ $parsed['formatted_date'] }}
                                                    </small>
                                                @endif
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Created At:</th>
                                        <td>{{ $whatsappMessage->created_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    <tr>
                                        <th class="text-muted">Last Updated:</th>
                                        <td>{{ $whatsappMessage->updated_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        @if($whatsappMessage->media_url)
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">Media Content</h6>
                                </div>
                                <div class="card-body text-center">
                                    @php
                                        $extension = pathinfo($whatsappMessage->media_url, PATHINFO_EXTENSION);
                                        $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
                                        $videoExtensions = ['mp4', 'mov', 'avi', 'mkv'];
                                        $documentExtensions = ['pdf', 'doc', 'docx', 'txt'];
                                    @endphp
                                    
                                    @if(in_array(strtolower($extension), $imageExtensions))
                                        <img src="{{ $whatsappMessage->media_url }}" 
                                             class="img-fluid rounded" 
                                             alt="WhatsApp Media"
                                             style="max-height: 300px;">
                                        <p class="mt-2 mb-0">Image Attachment</p>
                                    @elseif(in_array(strtolower($extension), $videoExtensions))
                                        <video controls class="w-100" style="max-height: 300px;">
                                            <source src="{{ $whatsappMessage->media_url }}" type="video/{{ $extension }}">
                                            Your browser does not support the video tag.
                                        </video>
                                        <p class="mt-2 mb-0">Video Attachment</p>
                                    @elseif(in_array(strtolower($extension), $documentExtensions))
                                        <div class="border rounded p-5 text-center">
                                            <i class="fas fa-file fa-4x text-secondary"></i>
                                            <h5 class="mt-3">Document Attachment</h5>
                                            <p class="text-muted">Format: {{ strtoupper($extension) }}</p>
                                        </div>
                                    @else
                                        <div class="border rounded p-5 text-center">
                                            <i class="fas fa-paperclip fa-4x text-secondary"></i>
                                            <h5 class="mt-3">File Attachment</h5>
                                            <p class="text-muted">Unknown file type</p>
                                        </div>
                                    @endif
                                    
                                    <div class="mt-3">
                                        <a href="{{ $whatsappMessage->media_url }}" target="_blank" class="btn btn-success">
                                            <i class="fas fa-external-link-alt"></i> Open Original
                                        </a>
                                        <a href="{{ $whatsappMessage->media_url }}" download class="btn btn-primary">
                                            <i class="fas fa-download"></i> Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @canany(['update whatsapp messages', 'delete whatsapp messages'])
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Actions</h6>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group" role="group">
                                        @can('update whatsapp messages')
                                            <a href="{{ route('whatsapp-messages.edit', $whatsappMessage) }}" class="btn btn-warning">
                                                <i class="fas fa-edit"></i> Edit Message
                                            </a>
                                        @endcan
                                        
                                        @can('delete whatsapp messages')
                                            <form action="{{ route('whatsapp-messages.destroy', $whatsappMessage) }}" method="POST" 
                                                  style="display: inline;" 
                                                  onsubmit="return confirm('Are you sure you want to delete this WhatsApp message?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fas fa-trash"></i> Delete Message
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        @endcanany
                    </div>

                    <div class="col-md-6">
                        <!-- Mosque Information -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Mosque Information</h6>
                            </div>
                            <div class="card-body">
                                @if($whatsappMessage->mosque)
                                    <table class="table table-borderless">
                                        <tr>
                                            <th width="40%" class="text-muted">Mosque:</th>
                                            <td>
                                                <a href="{{ route('mosques.show', $whatsappMessage->mosque_id) }}" class="text-primary">
                                                    {{ $whatsappMessage->mosque->name }}
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Location:</th>
                                            <td>{{ $whatsappMessage->mosque->location ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Moulvi:</th>
                                            <td>
                                                @if($whatsappMessage->mosque->moulvi)
                                                    {{ $whatsappMessage->mosque->moulvi->name }}
                                                @else
                                                    <span class="text-muted">Not Assigned</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">Recent Checklists:</th>
                                            <td>
                                                {{ $whatsappMessage->mosque->checklists->where('created_at', '>=', now()->subDays(7))->count() }}
                                                in last 7 days
                                            </td>
                                        </tr>
                                    </table>
                                @else
                                    <div class="alert alert-warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        This message is not linked to any mosque.
                                        @can('update whatsapp messages')
                                            <br>
                                            <a href="{{ route('whatsapp-messages.edit', $whatsappMessage) }}" class="btn btn-sm btn-primary mt-2">
                                                <i class="fas fa-link"></i> Link to Mosque
                                            </a>
                                        @endcan
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Task Code Analysis -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">Task Code Analysis</h6>
                            </div>
                            <div class="card-body">
                                @if($whatsappMessage->task_code)
                                    @php
                                        $parsed = app('App\Http\Controllers\WhatsappMessageController')->parseTaskCode($whatsappMessage->task_code);
                                    @endphp
                                    
                                    @if($parsed)
                                        <table class="table table-borderless">
                                            <tr>
                                                <th width="40%" class="text-muted">Mosque Code:</th>
                                                <td>
                                                    <strong>{{ $parsed['mosque_code'] }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="text-muted">Task Number:</th>
                                                <td>{{ $parsed['task_number'] }}</td>
                                            </tr>
                                            <tr>
                                                <th class="text-muted">Date:</th>
                                                <td>{{ $parsed['formatted_date'] }}</td>
                                            </tr>
                                            <tr>
                                                <th class="text-muted">Interpretation:</th>
                                                <td>
                                                    <small>
                                                        Message related to task {{ $parsed['task_number'] }}<br>
                                                        for mosque code {{ $parsed['mosque_code'] }}<br>
                                                        on {{ $parsed['formatted_date'] }}
                                                    </small>
                                                </td>
                                            </tr>
                                        </table>
                                    @else
                                        <div class="alert alert-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            Task code format could not be parsed.
                                            <br>
                                            <small>Expected format: MSQ102-TASK07-20260113</small>
                                        </div>
                                    @endif
                                @else
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        No task code provided in this message.
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Related Messages -->
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Related Messages</h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted">
                                    Messages from the same phone number in the last 24 hours:
                                </p>
                                @php
                                    $relatedMessages = App\Models\WhatsappMessage::where('from_phone', $whatsappMessage->from_phone)
                                        ->where('id', '!=', $whatsappMessage->id)
                                        ->where('created_at', '>=', now()->subDay())
                                        ->orderBy('created_at', 'desc')
                                        ->limit(5)
                                        ->get();
                                @endphp
                                
                                @if($relatedMessages->count() > 0)
                                    <ul class="list-group list-group-flush">
                                        @foreach($relatedMessages as $related)
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <div>
                                                    <small>{{ $related->created_at->format('h:i A') }}</small><br>
                                                    @if($related->task_code)
                                                        <span class="badge bg-info">{{ $related->task_code }}</span>
                                                    @else
                                                        <span class="text-muted">No task code</span>
                                                    @endif
                                                </div>
                                                <a href="{{ route('whatsapp-messages.show', $related->id) }}" class="btn btn-sm btn-outline-info">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                    <div class="text-center mt-2">
                                        <a href="{{ route('whatsapp-messages.index', ['from_phone' => $whatsappMessage->from_phone]) }}" class="btn btn-sm btn-outline-primary">
                                            View All Messages
                                        </a>
                                    </div>
                                @else
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        No other messages from this phone number in the last 24 hours.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection