<?php ?>
<div class="fade-in">
    <h1 style="margin-bottom: 2rem;"><?= \App\Helpers\Lang::t('private_messages') ?></h1>

    <div class="main-grid" style="display: grid; grid-template-columns: 350px 1fr; gap: 2rem;">
        <aside>
            <div class="card" style="padding: 1rem; max-height: 70vh; overflow-y: auto;">
                <h3 style="margin-bottom: 1rem; padding: 0 0.5rem;"><?= \App\Helpers\Lang::t('dialogs') ?></h3>
                <?php if (empty($dialogs)): ?>
                    <p style="padding: 1rem; text-align: center; color: var(--text-muted);"><?= \App\Helpers\Lang::t('no_conversations') ?></p>
                <?php else: ?>
                    <?php foreach ($dialogs as $dialog): ?>
                        <a href="/messages/<?= $dialog['id'] ?>" class="dialog-item <?= (isset($otherUser) && $otherUser['id'] == $dialog['id']) ? 'active' : '' ?>" style="display: flex; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 1rem; text-decoration: none; color: inherit; transition: var(--transition); margin-bottom: 0.5rem; <?= (isset($otherUser) && $otherUser['id'] == $dialog['id']) ? 'background: var(--primary-light); border: 1px solid var(--primary);' : '' ?>">
                            <img src="<?= \App\Helpers\Asset::avatar($dialog['avatar'] ?? null, $dialog['username'], 48) ?>" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover;">
                            <div style="flex: 1; min-width: 0;">
                                <div style="font-weight: 600; display: flex; justify-content: space-between;">
                                    <span><?= $dialog['username'] ?></span>
                                    <span style="font-size: 0.75rem; color: var(--text-muted); font-weight: normal;"><?= date('H:i', strtotime($dialog['created_at'])) ?></span>
                                </div>
                                <div style="font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; align-items: center;">
                                    <span style="flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;"><?= htmlspecialchars($dialog['message']) ?></span>
                                    <form action="/messages/delete/<?= $dialog['id'] ?>" method="POST" onsubmit="return confirm('Ви впевнені, що хочете видалити цей діалог?')" style="margin-left: 0.5rem;">
                                        <?= \App\Core\CSRF::field() ?>
                                        <button type="submit" style="background: none; border: none; color: #ef4444; cursor: pointer; padding: 0.25rem; font-size: 0.9rem; opacity: 0.5; transition: opacity 0.3s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.5">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </a>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </aside>

        <section>
            <div class="card" style="height: 70vh; display: flex; flex-direction: column; padding: 0; overflow: hidden;">
                <?php if (!isset($otherUser)): ?>
                    <div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted);">
                        <i class="fas fa-comments" style="font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.2;"></i>
                        <p><?= \App\Helpers\Lang::t('select_contact') ?></p>
                    </div>
                <?php else: ?>
                    <div style="padding: 1rem 2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem;">
                        <img src="<?= \App\Helpers\Asset::avatar($otherUser['avatar'] ?? null, $otherUser['username'], 40) ?>" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
                        <h3 style="margin: 0;"><?= $otherUser['username'] ?></h3>
                    </div>

                    <div id="messages-container" style="flex: 1; overflow-y: auto; padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; background: rgba(0,0,0,0.02);">
                        <?php foreach ($messages as $msg): ?>
                            <?php $isMine = $msg['sender_id'] == \App\Core\Session::get('user_id'); ?>
                            <div style="display: flex; flex-direction: column; align-items: <?= $isMine ? 'flex-end' : 'flex-start' ?>;">
                                <div style="max-width: 70%; padding: 0.75rem 1.25rem; border-radius: 1.25rem; <?= $isMine ? 'background: var(--primary); color: white; border-bottom-right-radius: 0.25rem;' : 'background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 0.25rem;' ?>">
                                    <?= nl2br(htmlspecialchars($msg['message'])) ?>
                                </div>
                                <span style="font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem;"><?= date('H:i', strtotime($msg['created_at'])) ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <form action="/messages/store" method="POST" style="padding: 1.5rem 2rem; border-top: 1px solid var(--border); background: var(--card);">
                        <?= \App\Core\CSRF::field() ?>
                        <input type="hidden" name="receiver_id" value="<?= $otherUser['id'] ?>">
                        <div style="display: flex; gap: 1rem;">
                            <input type="text" name="message" id="message-input" class="form-control" placeholder="<?= \App\Helpers\Lang::t('type_message') ?>" required autocomplete="off">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i></button>
                        </div>
                    </form>
                <?php endif; ?>
            </div>
        </section>
    </div>
</div>

<script>
    const container = document.getElementById('messages-container');
    if (container) container.scrollTop = container.scrollHeight;

    const input = document.getElementById('message-input');
    if (input) {
        input.focus();
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.closest('form').submit();
            }
        });
    }
</script>
