<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$selected_user = !empty($selected_user) ? $selected_user : null;
$thread_title = !empty($selected_user) ? fullname($user_id) : lang('conversation');
$thread_avatar = !empty($selected_user->user_id) ? base_url(staffImage($selected_user->user_id)) : base_url('assets/img/user/02.jpg');
$messages = array();
if (!empty($all_messages)) {
    foreach ($all_messages as $message) {
        $messages[] = $message;
    }
    $messages = array_reverse($messages);
}
$chat_id = !empty($chats->private_chat_id) ? (int) $chats->private_chat_id : 0;
$chat_window_id = $chat_id > 0 ? 'conversation_chat_' . $chat_id : 'conversation_chat_empty_' . (int) $user_id;
$oldest_message_id = !empty($messages) ? (int) $messages[0]->private_chat_messages_id : 0;
$newest_message_id = !empty($messages) ? (int) end($messages)->private_chat_messages_id : 0;
?>
<style>
    .conversation-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
    }

    .conversation-scrollbar::-webkit-scrollbar {
        width: 10px;
    }

    .conversation-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .conversation-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.35);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    .conversation-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(148, 163, 184, 0.55);
    }

    .conversation-thread-shell {
        height: 560px;
        min-height: 560px;
        max-height: 560px;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .conversation-message-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: 100%;
        justify-content: flex-end;
    }
</style>
<div class="flex h-[662px] min-h-[662px] max-h-[662px] flex-col overflow-hidden rounded-3xl border border-border bg-card shadow-sm" data-conversation-thread-panel data-user-id="<?= (int) $user_id ?>">
    <div class="border-b border-border px-5 py-4 dark:border-slate-700">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex min-w-0 items-center gap-3">
                <img src="<?= html_escape($thread_avatar) ?>" alt="<?= html_escape($thread_title) ?>" class="h-12 w-12 rounded-xl border border-border object-cover dark:border-slate-700">
                <div class="min-w-0">
                    <p class="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground"><?= lang('conversation') ?></p>
                    <h2 class="mt-0.5 truncate text-base font-semibold text-foreground"><?= html_escape($thread_title) ?></h2>
                    <p class="text-sm text-muted-foreground"><?= !empty($selected_user) ? lang('private') . ' ' . lang('chat') . ' ' . lang('with') . ' ' . html_escape($thread_title) : lang('select') . ' ' . lang('user') ?></p>
                </div>
            </div>
            <div class="flex shrink-0 items-center gap-2">
                <?php if ($chat_id > 0) { ?>
                    <a href="<?= base_url('chat/conversations/' . (int) $user_id) ?>" class="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-semibold text-foreground transition hover:bg-muted dark:border-slate-700 dark:bg-slate-900">
                        <i data-lucide="link" class="h-4 w-4"></i>
                        <span>Open thread</span>
                    </a>
                <?php } ?>
                <button type="button"
                        data-user-id="<?= (int) $user_id ?>"
                        data-chat-start
                        class="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-primary/90 start_chat">
                    <i data-lucide="message-circle" class="h-4 w-4"></i>
                    <span><?= lang('start') . ' ' . lang('chat') ?></span>
                </button>
            </div>
        </div>
    </div>

    <?php if ($chat_id > 0) { ?>
        <div class="conversation-thread-shell">
            <div class="conversation-scrollbar min-h-0 overflow-y-auto bg-background/20 px-5 py-4" id="<?= html_escape($chat_window_id) ?>" data-conversation-messages data-chat-id="<?= $chat_id ?>" data-user-id="<?= (int) $user_id ?>" data-oldest-id="<?= $oldest_message_id ?>" data-newest-id="<?= $newest_message_id ?>" data-has-more="<?= !empty($has_more_messages) ? '1' : '0' ?>">
                <div class="hidden justify-center pb-3" data-conversation-history-loader>
                    <span class="rounded-full border border-border bg-background px-3 py-1 text-[11px] font-medium text-muted-foreground dark:border-slate-700 dark:bg-slate-900">Loading older messages...</span>
                </div>
                <?php if (!empty($messages)) { ?>
                    <div class="conversation-message-stack" data-conversation-message-list>
                        <?= $this->load->view('chat/partials/conversation_message_items', array('messages' => $messages), true); ?>
                    </div>
                <?php } else { ?>
                    <div class="flex h-full flex-col items-center justify-center text-center" data-conversation-empty-state>
                        <div class="flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                            <i data-lucide="message-square-more" class="h-6 w-6"></i>
                        </div>
                        <h3 class="mt-4 text-base font-semibold text-foreground"><?= lang('no_data_found') ?></h3>
                        <p class="mt-2 text-sm text-muted-foreground">No messages yet. Start the conversation below.</p>
                    </div>
                    <div class="space-y-4 hidden" data-conversation-message-list></div>
                <?php } ?>
            </div>

            <div class="border-t border-border bg-card px-5 py-3 dark:border-slate-700">
                <div class="flex items-end gap-3 rounded-2xl border border-border bg-background px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                        <div class="flex-1">
                            <textarea id="chat_input_message_<?= $chat_id ?>" data-chat-input="<?= $chat_id ?>" rows="1" placeholder="Write a message..." class="min-h-[26px] max-h-28 w-full resize-none border-0 bg-transparent px-0 py-1 text-sm leading-6 text-foreground outline-none transition placeholder:text-muted-foreground focus:ring-0"></textarea>
                            <p class="mt-1 text-[11px] text-muted-foreground">Enter to send</p>
                        </div>
                        <button type="button" data-conversation-send data-chat-id="<?= $chat_id ?>" class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary text-white transition hover:bg-primary/90">
                            <i data-lucide="send" class="h-4 w-4"></i>
                        </button>
                </div>
            </div>
        </div>
    <?php } else { ?>
        <div class="flex min-h-[560px] flex-col items-center justify-center px-8 py-12 text-center">
            <div class="flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                <i data-lucide="messages-square" class="h-6 w-6"></i>
            </div>
            <h3 class="mt-5 text-lg font-semibold text-foreground"><?= lang('start') . ' ' . lang('chat') ?></h3>
            <p class="mt-2 max-w-md text-sm text-muted-foreground">Open a fresh private conversation with <?= html_escape($thread_title) ?> and the thread will appear here instantly.</p>
        </div>
    <?php } ?>
</div>
