@extends('layouts.app')

@section('title', $conversation->display_name)

@push('styles')
<style>
.chat-bubble { max-width: 75%; word-break: break-word; }
.chat-bubble.inbound  { background: var(--white); border: 1px solid var(--gray-200); border-radius: 0 12px 12px 12px; margin-right: auto; }
.chat-bubble.outbound { background: var(--primary); color: white; border-radius: 12px 0 12px 12px; margin-left: auto; }
.chat-bubble.outbound .msg-time { color: rgba(255,255,255,.7); }
.msg-time { font-size: .6875rem; color: var(--gray-400); margin-top: .25rem; display: block; }
#chatBody { height: calc(100vh - 300px); min-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: .625rem; padding: 1rem; }
.chat-date-divider { text-align: center; }
.chat-date-divider span { font-size: .75rem; color: var(--gray-500); background: var(--gray-100); padding: 2px 12px; border-radius: 20px; }
</style>
@endpush

@section('content')

<div class="page-header" style="margin-bottom:.75rem;">
    <div style="display:flex;align-items:center;gap:.875rem;">
        <a href="{{ route('wa.inbox') }}" class="btn btn-ghost btn-sm btn-icon">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div style="width:40px;height:40px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;color:white;font-size:.875rem;font-weight:700;flex-shrink:0;">
            {{ strtoupper(substr($conversation->display_name, 0, 2)) }}
        </div>
        <div>
            <div style="font-size:1rem;font-weight:600;color:var(--gray-900);">{{ $conversation->display_name }}</div>
            <div style="font-size:.8125rem;color:var(--gray-500);">
                {{ $conversation->wa_number }}
                @if($conversation->contact)
                · <a href="{{ route('contacts.show', $conversation->contact) }}" style="color:var(--primary);">Lihat Kontak</a>
                @endif
                · <span class="badge badge-{{ $conversation->status_color }}" style="font-size:.6875rem;">{{ $conversation->status_label }}</span>
            </div>
        </div>
    </div>
    <div class="page-actions">
        {{-- Toggle Bot --}}
        <form method="POST" action="{{ route('wa.bot.toggle', $conversation) }}">
            @csrf
            <button type="submit" class="btn btn-sm {{ $conversation->is_bot_active ? 'btn-secondary' : 'btn-success' }}" title="{{ $conversation->is_bot_active ? 'Matikan Bot' : 'Aktifkan Bot' }}">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Bot {{ $conversation->is_bot_active ? 'ON' : 'OFF' }}
            </button>
        </form>

        {{-- Assign --}}
        @can('view wa inbox')
        <button class="btn btn-secondary btn-sm" onclick="openModal('assignModal')">Assign Agent</button>
        @endcan

        {{-- Resolve --}}
        @if($conversation->status !== 'resolved')
        <form method="POST" action="{{ route('wa.resolve', $conversation) }}">
            @csrf
            <button type="submit" class="btn btn-success btn-sm">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                Selesai
            </button>
        </form>
        @endif
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 280px;gap:1rem;align-items:start;">

    {{-- Chat Area --}}
    <div class="card" style="display:flex;flex-direction:column;">

        {{-- Messages --}}
        <div id="chatBody">
            @php $lastDate = null; @endphp
            @foreach($messages as $msg)
                @php $msgDate = $msg->sent_at?->format('Y-m-d'); @endphp
                @if($msgDate !== $lastDate)
                <div class="chat-date-divider">
                    <span>{{ $msg->sent_at?->locale('id')->isoFormat('D MMMM YYYY') }}</span>
                </div>
                @php $lastDate = $msgDate; @endphp
                @endif

                <div style="display:flex;flex-direction:column;{{ $msg->direction === 'outbound' ? 'align-items:flex-end;' : '' }}">
                    <div class="chat-bubble {{ $msg->direction }}" style="padding:.625rem .875rem;">
                        @if($msg->direction === 'outbound' && $msg->is_bot)
                        <div style="font-size:.6875rem;color:rgba(255,255,255,.75);margin-bottom:.25rem;">🤖 Bot</div>
                        @elseif($msg->direction === 'outbound' && $msg->user)
                        <div style="font-size:.6875rem;color:rgba(255,255,255,.75);margin-bottom:.25rem;">{{ $msg->user->name }}</div>
                        @endif
                        <div style="font-size:.9375rem;line-height:1.5;white-space:pre-wrap;">{{ $msg->content }}</div>
                        <span class="msg-time">
                            {{ $msg->sent_at?->format('H:i') }}
                            @if($msg->direction === 'outbound')
                            @if($msg->status === 'delivered') ✓✓
                            @elseif($msg->status === 'read') <span style="color:#60d4f4;">✓✓</span>
                            @elseif($msg->status === 'failed') ⚠
                            @else ✓ @endif
                            @endif
                        </span>
                    </div>
                </div>
            @endforeach

            @if($messages->isEmpty())
            <div style="text-align:center;padding:2rem;color:var(--gray-400);font-size:.875rem;">
                Belum ada pesan dalam percakapan ini
            </div>
            @endif
        </div>

        {{-- Input Area --}}
        @if($conversation->status !== 'resolved')
        <div style="border-top:1px solid var(--gray-200);padding:.875rem 1.25rem;">
            <form method="POST" action="{{ route('wa.send', $conversation) }}" id="sendForm">
                @csrf
                <div style="display:flex;gap:.625rem;align-items:flex-end;">
                    <textarea name="message" id="msgInput" class="form-control"
                              rows="1"
                              placeholder="Ketik pesan... (Enter kirim, Shift+Enter baris baru)"
                              style="resize:none;flex:1;min-height:40px;max-height:120px;"
                              required></textarea>
                    <button type="submit" class="btn btn-primary" style="flex-shrink:0;height:40px;width:40px;padding:0;justify-content:center;">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    </button>
                </div>
            </form>
        </div>
        @else
        <div style="border-top:1px solid var(--gray-100);padding:1rem;text-align:center;">
            <span style="font-size:.875rem;color:var(--gray-400);">Percakapan sudah diselesaikan</span>
        </div>
        @endif
    </div>

    {{-- Sidebar Info --}}
    <div style="display:flex;flex-direction:column;gap:.875rem;">

        {{-- Contact info --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Info Kontak</span></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.625rem;">
                <div>
                    <div class="text-small text-muted">Nomor WA</div>
                    <div style="font-size:.875rem;color:var(--gray-800);">{{ $conversation->wa_number }}</div>
                </div>
                @if($conversation->contact)
                <div>
                    <div class="text-small text-muted">Nama CRM</div>
                    <a href="{{ route('contacts.show', $conversation->contact) }}" style="font-size:.875rem;color:var(--primary);">{{ $conversation->contact->name }}</a>
                </div>
                <div>
                    <div class="text-small text-muted">Status</div>
                    <span class="badge badge-{{ $conversation->contact->status_color }}" style="margin-top:.25rem;">{{ $conversation->contact->status_label }}</span>
                </div>
                @else
                <div>
                    <div class="text-small text-muted">Kontak CRM</div>
                    <a href="{{ route('contacts.create', ['phone' => $conversation->wa_number, 'name' => $conversation->wa_name]) }}" class="btn btn-ghost btn-sm" style="padding:0;color:var(--primary);">
                        + Buat Kontak
                    </a>
                </div>
                @endif
                @if($conversation->assignedTo)
                <div>
                    <div class="text-small text-muted">Assigned To</div>
                    <div style="font-size:.875rem;color:var(--gray-800);">{{ $conversation->assignedTo->name }}</div>
                </div>
                @endif
            </div>
        </div>

        {{-- Bot status --}}
        <div class="card">
            <div class="card-body" style="padding:.875rem 1rem;">
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <div>
                        <div style="font-size:.875rem;font-weight:500;color:var(--gray-800);">AI Chatbot</div>
                        <div style="font-size:.75rem;color:var(--gray-500);margin-top:.125rem;">
                            {{ $conversation->is_bot_active ? 'Aktif — membalas otomatis' : 'Nonaktif — mode agent' }}
                        </div>
                    </div>
                    <div style="width:12px;height:12px;border-radius:50%;background:{{ $conversation->is_bot_active ? 'var(--success)' : 'var(--gray-300)' }};flex-shrink:0;"></div>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- Assign Modal --}}
<div class="modal-overlay" id="assignModal">
    <div class="modal" style="max-width:380px;">
        <div class="modal-header">
            <span class="modal-title">Assign ke Agent</span>
            <button class="modal-close" onclick="closeModal('assignModal')">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form method="POST" action="{{ route('wa.assign', $conversation) }}">
            @csrf
            <div class="modal-body">
                <div class="form-group" style="margin:0;">
                    <label class="form-label">Pilih Agent</label>
                    <select name="assigned_to" class="form-control">
                        @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ $conversation->assigned_to === $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('assignModal')">Batal</button>
                <button type="submit" class="btn btn-primary">Assign</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Scroll ke bawah
var chatBody = document.getElementById('chatBody');
if (chatBody) chatBody.scrollTop = chatBody.scrollHeight;

// Enter to send, Shift+Enter untuk newline
var msgInput = document.getElementById('msgInput');
if (msgInput) {
    msgInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            document.getElementById('sendForm').submit();
        }
    });

    // Auto-resize textarea
    msgInput.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
    });
}

// Auto-polling pesan baru setiap 5 detik
var lastCheck = new Date().toISOString();
setInterval(function() {
    fetch('{{ route('wa.messages', $conversation) }}?since=' + encodeURIComponent(lastCheck), {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        lastCheck = new Date().toISOString();
        if (data.messages && data.messages.length > 0) {
            // Reload halaman untuk semplicitas (tanpa framework JS berat)
            window.location.reload();
        }
    })
    .catch(function() {});
}, 5000);
</script>
@endpush