<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="mb-3 d-flex justify-content-between align-items-start">
    <div>
        <a href="<?= site_url('concierge') ?>" class="text-decoration-none small">&larr; Back to Concierge</a>
        <h1 class="h3 mb-1 mt-1"><?= esc($conversation->guest_name ?? 'Unrecognized number') ?></h1>
        <p class="text-muted mb-0"><?= esc($conversation->phone) ?></p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <?php if ($conversation->needs_staff && ! $conversation->resolved_at): ?>
            <span class="badge bg-danger">Needs Staff</span>
            <form action="<?= site_url('concierge/' . $conversation->id . '/resolve') ?>" method="post">
                <?= csrf_field() ?>
                <button type="submit" class="btn btn-sm btn-outline-secondary">Mark Resolved</button>
            </form>
        <?php elseif ($conversation->resolved_at): ?>
            <span class="badge bg-secondary">Resolved</span>
        <?php endif; ?>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body" style="max-height: 60vh; overflow-y: auto;">
        <?php if (empty($messages)): ?>
            <p class="text-muted text-center py-5 mb-0">No messages yet.</p>
        <?php endif; ?>
        <?php foreach ($messages as $m): ?>
            <div class="d-flex mb-3 <?= $m->direction === 'inbound' ? 'justify-content-start' : 'justify-content-end' ?>">
                <div style="max-width: 70%;">
                    <div class="p-2 rounded <?= $m->direction === 'inbound' ? 'bg-light border' : ($m->status === 'pending' ? 'bg-warning-subtle border border-warning' : 'bg-primary text-white') ?>">
                        <p class="mb-0 small"><?= nl2br(esc($m->body)) ?></p>
                    </div>
                    <div class="text-muted mt-1" style="font-size: 0.7rem;">
                        <?= $m->direction === 'inbound' ? 'Guest' : 'Concierge' ?>
                        <?php if ($m->status === 'pending'): ?> &middot; <span class="text-warning-emphasis">Drafted, awaiting send</span>
                        <?php elseif ($m->status === 'failed'): ?> &middot; <span class="text-danger">Send failed</span>
                        <?php elseif ($m->status === 'dismissed'): ?> &middot; <span class="text-muted">Dismissed</span>
                        <?php endif; ?>
                        &middot; <?= esc(date('d M Y, g:i a', strtotime($m->created_at))) ?>
                    </div>
                    <?php if ($m->status === 'pending'): ?>
                        <div class="d-flex gap-2 mt-1">
                            <form action="<?= site_url('concierge/' . $conversation->id . '/messages/' . $m->id . '/send') ?>" method="post" onsubmit="return confirm('Send this real WhatsApp reply to ' + <?= json_encode($conversation->phone) ?> + '?');">
                                <?= csrf_field() ?>
                                <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-send me-1"></i>Send</button>
                            </form>
                            <form action="<?= site_url('concierge/' . $conversation->id . '/messages/' . $m->id . '/dismiss') ?>" method="post">
                                <?= csrf_field() ?>
                                <button type="submit" class="btn btn-sm btn-outline-secondary">Dismiss</button>
                            </form>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<?= $this->endSection() ?>
