@extends('layouts.dashboard')

@section('title', 'User WhatsApp Connection')
@section('page-title', 'WhatsApp Gateway for ' . $user->name)

@section('content')
<div class="container-fluid py-4">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('dashboard.users.edit', $user->id) }}">{{ $user->name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">WhatsApp Connection</li>
        </ol>
    </nav>

    <!-- Success / Error Alerts -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-check-circle-fill me-2 fs-5"></i>
                <div>{{ session('success') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <div class="d-flex align-items-center">
                <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
                <div>{{ session('error') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        <!-- Connection Status & QR Code Card -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h5 class="fw-bold mb-0 text-dark">Connection Status</h5>
                </div>
                <div class="card-body px-4 pb-4 d-flex flex-column align-items-center justify-content-center text-center">
                    @if($status === 'connected')
                        <div class="status-indicator connected mb-4">
                            <div class="pulse-ring"></div>
                            <i class="bi bi-whatsapp icon-display text-success"></i>
                        </div>
                        <h4 class="fw-bold text-success mb-1">Connected</h4>
                        <p class="text-muted mb-4 small">Logged in as: <strong class="text-dark">+{{ $phoneNumber }}</strong></p>
                        
                        <form action="{{ route('dashboard.whatsapp-gateway.user.logout', $user->id) }}" method="POST" class="w-100 mt-auto">
                            @csrf
                            <button type="submit" class="btn btn-outline-danger w-100 py-2.5 fw-semibold rounded-3">
                                <i class="bi bi-power me-2"></i>Disconnect Session
                            </button>
                        </form>
                    @elseif($status === 'qr' && $qrCode)
                        <div class="status-indicator qr mb-3">
                            <div class="pulse-ring bg-warning"></div>
                            <i class="bi bi-qr-code icon-display text-warning"></i>
                        </div>
                        <h5 class="fw-bold text-warning mb-2">Scan QR Code</h5>
                        <p class="text-muted mb-3 px-2 small">Open WhatsApp on your mobile, go to Linked Devices, and scan this QR code to authenticate the gateway.</p>
                        
                        <div class="qr-container p-3 bg-light rounded-4 border border-light-subtle mb-3">
                            <img src="{{ $qrCode }}" alt="WhatsApp QR Code" class="img-fluid rounded-3 shadow-sm" style="max-width: 200px;">
                        </div>

                        <hr class="w-100 my-3">

                        <!-- Pairing Code request -->
                        <h6 class="fw-bold mb-1 text-dark small">Or Link with Phone Number</h6>
                        <p class="text-muted small mb-2">Request an 8-character pairing code to type into WhatsApp on your phone.</p>
                        <form action="{{ route('dashboard.whatsapp-gateway.user.pair', $user->id) }}" method="POST" class="w-100 mb-3">
                            @csrf
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0 text-muted small">+</span>
                                <input type="text" name="phone" class="form-control bg-light border-0 small" placeholder="e.g. 919999999999" required value="{{ old('phone', $user->phone) }}">
                                <button type="submit" class="btn btn-primary btn-sm">Get Code</button>
                            </div>
                        </form>

                        @if(session('success_code'))
                            <div class="alert alert-success py-2 px-3 mb-3 w-100 rounded-3">
                                <div class="text-secondary small mb-1 fw-bold">Pairing Code:</div>
                                <div class="font-monospace fs-4 fw-bold text-success">{{ session('success_code') }}</div>
                                <div class="small text-muted mt-1">Type this on your phone's linked devices screen.</div>
                            </div>
                        @endif

                        <div class="d-flex align-items-center justify-content-center gap-2 text-muted small mt-auto">
                            <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
                            <span>Waiting for connection...</span>
                        </div>
                    @else
                        <div class="status-indicator disconnected mb-4">
                            <div class="pulse-ring bg-danger"></div>
                            <i class="bi bi-whatsapp icon-display text-danger"></i>
                        </div>
                        <h4 class="fw-bold text-danger mb-1">Disconnected</h4>
                        <p class="text-muted mb-4 small">The gateway is not connected or initialized for this user.</p>
                        
                        <a href="javascript:location.reload();" class="btn btn-sm btn-outline-primary w-100 py-2 rounded-3 mb-2">
                            <i class="bi bi-arrow-clockwise me-1"></i> Initialize Session
                        </a>
                        
                        <div class="alert alert-secondary py-2 px-3 small border-0 mb-0 w-100 rounded-3">
                            <i class="bi bi-info-circle me-1.5"></i>Checking status or service starting up...
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- User Information Card -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h5 class="fw-bold mb-0 text-dark">Agent Profile & Preferences</h5>
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Agent Name</label>
                            <div class="form-control bg-light border-0 py-2.5 text-dark fw-medium">{{ $user->name }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Email Address</label>
                            <div class="form-control bg-light border-0 py-2.5 text-dark">{{ $user->email }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">Preferred Phone (in profile)</label>
                            <div class="form-control bg-light border-0 py-2.5 text-dark">{{ $user->phone ?? '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary small">WhatsApp Mode</label>
                            <div class="form-control bg-light border-0 py-2.5 text-dark">
                                <span class="badge bg-primary text-capitalize">{{ str_replace('_', ' ', $user->settings->whatsapp_mode ?? 'manual') }}</span>
                            </div>
                        </div>
                        <div class="col-12 mt-3 d-flex gap-2 justify-content-end">
                            <a href="{{ route('dashboard.users.edit', $user->id) }}" class="btn btn-outline-secondary px-3.5 py-2 fw-semibold rounded-3">
                                <i class="bi bi-pencil me-1.5"></i>Edit Settings
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity & Logs -->
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex align-items-center justify-content-between">
                    <h5 class="fw-bold mb-0 text-dark">Recent Activity Logs</h5>
                    <span class="badge bg-light text-secondary border py-1.5 px-2.5 small rounded-pill">Last 50 Logs</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light-subtle">
                                <tr class="text-secondary small">
                                    <th class="px-4 py-3 border-0">ID</th>
                                    <th class="py-3 border-0">Recipient</th>
                                    <th class="py-3 border-0">Type</th>
                                    <th class="py-3 border-0">Status</th>
                                    <th class="py-3 border-0">Response Detail</th>
                                    <th class="px-4 py-3 border-0 text-end">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs as $log)
                                    <tr class="small text-dark border-bottom border-light-subtle">
                                        <td class="px-4 py-3 font-monospace text-muted">#{{ $log->id }}</td>
                                        <td class="py-3 fw-medium">+{{ $log->mobile }}</td>
                                        <td class="py-3"><span class="badge bg-light text-dark border rounded-pill">{{ $log->message_type }}</span></td>
                                        <td class="py-3">
                                            @if($log->status === 'sent')
                                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-check-circle-fill me-1"></i>Sent
                                                </span>
                                            @elseif($log->status === 'queued')
                                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-hourglass-split me-1"></i>Queued
                                                </span>
                                            @else
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1">
                                                    <i class="bi bi-x-circle-fill me-1"></i>Failed
                                                </span>
                                            @endif
                                        </td>
                                        <td class="py-3 text-muted text-truncate" style="max-width: 250px;" title="{{ $log->response }}">
                                            {{ $log->response }}
                                        </td>
                                        <td class="px-4 py-3 text-end text-muted small font-monospace">{{ $log->inserted_on }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5 text-muted px-4">
                                            <div class="d-flex flex-column align-items-center justify-content-center">
                                                <i class="bi bi-chat-left-dots text-secondary mb-2" style="font-size: 2.5rem;"></i>
                                                <h6 class="fw-bold text-dark">No Logs Recorded</h6>
                                                <p class="small text-muted mb-0">Gateway actions and send attempts will be displayed here.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .status-indicator {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(25, 135, 84, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .status-indicator.qr {
        background-color: rgba(255, 193, 7, 0.1);
    }
    
    .status-indicator.disconnected {
        background-color: rgba(220, 53, 69, 0.1);
    }
    
    .icon-display {
        font-size: 2.5rem;
    }
    
    .pulse-ring {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid #198754;
        animation: status-pulse 2s infinite ease-out;
        opacity: 0;
    }
    
    .pulse-ring.bg-warning {
        border-color: #ffc107;
    }
    
    .pulse-ring.bg-danger {
        border-color: #dc3545;
    }

    @keyframes status-pulse {
        0% {
            transform: scale(0.95);
            opacity: 0.8;
        }
        50% {
            opacity: 0.3;
        }
        100% {
            transform: scale(1.3);
            opacity: 0;
        }
    }
</style>
@if($status !== 'connected')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const statusUrl = "{{ route('dashboard.whatsapp-gateway.user.status', $user->id) }}";
        const interval = setInterval(function() {
            fetch(statusUrl)
                .then(response => response.json())
                .then(data => {
                    if (data && data.connected) {
                        clearInterval(interval);
                        window.location.reload();
                    }
                })
                .catch(err => console.error('Error fetching connection status:', err));
        }, 3000);
    });
</script>
@endif
@endsection