@extends('business::layouts.app')

@section('title', 'Conversation — ' . $session->phone_number . ' — BizWap')

@push('styles')
<style>
    html, body { overflow: hidden; }

    .chat-header {
        background: var(--bw-surface);
        border-bottom: 1px solid var(--bw-border);
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .chat-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--bw-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .chat-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 1.25rem;
        background: var(--bw-bg);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .message-row {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .message-row.outbound {
        justify-content: flex-end;
    }

    .message-row.inbound {
        justify-content: flex-start;
    }

    .bubble {
        max-width: 68%;
        padding: 0.5rem 0.75rem 0.35rem;
        border-radius: 12px;
        font-size: 0.875rem;
        line-height: 1.45;
        position: relative;
        word-break: break-word;
    }

    .bubble.outbound {
        background: #dcf8c6;
        color: #111;
        border-radius: 12px 12px 2px 12px;
    }

    .bubble.inbound {
        background: #fff;
        color: #111;
        border-radius: 12px 12px 12px 2px;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }

    [data-bs-theme="dark"] .bubble.outbound {
        background: #1a4731;
        color: #e8f5e9;
    }

    [data-bs-theme="dark"] .bubble.inbound {
        background: var(--bw-surface);
        color: var(--bw-text);
    }

    .bubble-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        margin-top: 0.2rem;
        font-size: 0.7rem;
        opacity: 0.65;
    }

    .bubble-meta.inbound {
        justify-content: flex-start;
    }

    .status-icon {
        font-size: 0.75rem;
    }

    .status-icon.delivered { color: #8e8e8e; }
    .status-icon.read      { color: #53bdeb; opacity: 1; }
    .status-icon.failed    { color: #e53935; opacity: 1; }

    .template-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8rem;
        background: rgba(0,0,0,.06);
        border-radius: 6px;
        padding: 0.2rem 0.5rem;
    }

    [data-bs-theme="dark"] .template-pill {
        background: rgba(255,255,255,.08);
    }

    .day-divider {
        text-align: center;
        margin: 0.75rem 0;
    }

    .day-divider span {
        background: var(--bw-surface);
        border: 1px solid var(--bw-border);
        border-radius: 20px;
        padding: 0.2rem 0.85rem;
        font-size: 0.72rem;
        color: var(--bw-text-muted);
    }

    .chat-empty {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--bw-text-muted);
        gap: 0.5rem;
    }

    .chat-footer {
        border-top: 1px solid var(--bw-border);
        padding: 0.75rem 1rem;
        background: var(--bw-surface);
    }

    .chat-footer textarea {
        resize: none;
        overflow: hidden;
        min-height: 38px;
        max-height: 120px;
        line-height: 1.5;
    }

    .window-expired-banner {
        border-top: 1px solid var(--bw-border);
        padding: 0.65rem 1rem;
        background: var(--bw-surface);
        font-size: 0.825rem;
        color: var(--bw-text-muted);
        text-align: center;
    }
</style>
@endpush

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show small py-2 mb-3" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show small py-2 mb-3" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="card border-0 shadow-sm overflow-hidden d-flex flex-column" id="conversation-card">
    {{-- Header --}}
    <div class="chat-header">
        <a href="{{ route('business.conversations.index') }}" class="text-decoration-none text-muted small">
            <i class="bi bi-arrow-left me-1"></i>
        </a>
        <div class="chat-avatar">
            <i class="bi bi-person-fill"></i>
        </div>
        <div class="flex-grow-1">
            <div class="fw-semibold">{{ $session->phone_number }}</div>
            <div class="small text-muted">
                {{ $session->flow_name }}
                &nbsp;·&nbsp;
                @php
                    $badge = match($session->status) {
                        'active'    => 'success',
                        'completed' => 'secondary',
                        'expired'   => 'warning',
                        default     => 'secondary',
                    };
                @endphp
                <span class="badge bg-{{ $badge }}-subtle text-{{ $badge }}-emphasis text-uppercase" style="font-size:0.65rem;">
                    {{ $session->status }}
                </span>
            </div>
        </div>
        <div class="text-muted small text-end">
            <div>{{ $messages->count() }} messages</div>
            <div>Since {{ $session->created_at->format('d M Y') }}</div>
        </div>
    </div>

    {{-- Messages --}}
    <div class="chat-body" id="chat-body">
        @if($messages->isEmpty())
            <div class="chat-empty">
                <i class="bi bi-chat-dots" style="font-size:2.5rem;opacity:.25;"></i>
                <span>No messages yet</span>
            </div>
        @else
            @php $lastDate = null; @endphp

            @foreach($messages as $msg)
                @php
                    $msgDate = $msg->created_at->toDateString();
                    $isOutbound = $msg->direction === 'outbound';
                @endphp

                {{-- Day divider --}}
                @if($msgDate !== $lastDate)
                    <div class="day-divider">
                        <span>
                            @if($msg->created_at->isToday())
                                Today
                            @elseif($msg->created_at->isYesterday())
                                Yesterday
                            @else
                                {{ $msg->created_at->format('d M Y') }}
                            @endif
                        </span>
                    </div>
                    @php $lastDate = $msgDate; @endphp
                @endif

                <div class="message-row {{ $isOutbound ? 'outbound' : 'inbound' }}">
                    <div class="bubble {{ $isOutbound ? 'outbound' : 'inbound' }}">
                        {{-- Content --}}
                        @if($isOutbound && $msg->message_type === 'template')
                            @php
                                $decoded = json_decode($msg->content, true);
                                $tplName = $decoded['template_name'] ?? $msg->content;
                            @endphp
                            <span class="template-pill">
                                <i class="bi bi-layout-text-sidebar-reverse"></i>
                                {{ $tplName }}
                            </span>
                        @else
                            {{ $msg->content }}
                        @endif

                        {{-- Meta: time + status --}}
                        <div class="bubble-meta {{ $isOutbound ? 'outbound' : 'inbound' }}">
                            <span>{{ $msg->created_at->format('H:i') }}</span>
                            @if($isOutbound)
                                @if($msg->status === 'pending')
                                    <i class="bi bi-clock status-icon" title="Pending"></i>
                                @elseif($msg->status === 'sent')
                                    <i class="bi bi-check status-icon" title="Sent"></i>
                                @elseif($msg->status === 'delivered')
                                    <i class="bi bi-check-all status-icon delivered" title="Delivered"></i>
                                @elseif($msg->status === 'read')
                                    <i class="bi bi-check-all status-icon read" title="Read"></i>
                                @elseif($msg->status === 'failed')
                                    <i class="bi bi-exclamation-circle-fill status-icon failed" title="Failed"></i>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>

    {{-- Reply input / expired banner --}}
    @php $windowOpen = $session->window_expires_at && $session->window_expires_at->isFuture(); @endphp

    @if($windowOpen)
        <div class="chat-footer">
            <form method="POST" action="{{ route('business.conversations.reply', $session->uuid) }}" id="reply-form">
                @csrf
                <div class="d-flex gap-2 align-items-end">
                    <textarea
                        name="message"
                        id="reply-message"
                        class="form-control form-control-sm"
                        placeholder="Type a message…"
                        rows="1"
                        maxlength="4096"
                        required
                    ></textarea>
                    <button type="submit" class="btn btn-success btn-sm px-3" style="white-space: nowrap;">
                        <i class="bi bi-send-fill me-1"></i>Send
                    </button>
                </div>
            </form>
        </div>
    @else
        <div class="window-expired-banner">
            <i class="bi bi-clock-history me-1"></i>
            24-hour messaging window has expired. Start a new conversation using a template.
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    const chatBody = document.getElementById('chat-body');
    if (chatBody) {
        chatBody.scrollTop = chatBody.scrollHeight;
    }

    // Pin card to remaining viewport height so only chat-body scrolls
    const card       = document.getElementById('conversation-card');
    const mainFooter = document.getElementById('main-footer');
    function fitCard() {
        const top      = card.getBoundingClientRect().top;
        const footerH  = mainFooter ? mainFooter.offsetHeight : 0;
        const margin   = 8;
        card.style.height = (window.innerHeight - top - footerH - margin) + 'px';
    }
    fitCard();
    window.addEventListener('resize', fitCard);

    const replyMsg = document.getElementById('reply-message');
    if (replyMsg) {
        replyMsg.addEventListener('input', function () {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });

        // Submit on Enter, new line on Shift+Enter
        replyMsg.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && ! e.shiftKey) {
                e.preventDefault();
                if (this.value.trim()) {
                    document.getElementById('reply-form').submit();
                }
            }
        });
    }
</script>
@endpush