<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$contacts = !empty($contacts) ? $contacts : array();
$current_start = $total > 0 ? (($page - 1) * $page_size) + 1 : 0;
$current_end = min($total, $page * $page_size);
$role_labels = array(
    1 => array('label' => lang('admin'), 'class' => 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300'),
    2 => array('label' => lang('client'), 'class' => 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300'),
    3 => array('label' => lang('staff'), 'class' => 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300'),
);
?>
<div class="flex h-full min-h-0 flex-1 flex-col">
    <div class="flex-1 overflow-y-auto">
        <?php if (!empty($contacts)) { ?>
            <div class="divide-y divide-border dark:divide-slate-700">
                <?php foreach ($contacts as $contact) {
                    $role_meta = isset($role_labels[$contact['role_id']]) ? $role_labels[$contact['role_id']] : array(
                        'label' => ucfirst((string) $contact['role_id']),
                        'class' => 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300',
                    );
                    $preview = trim(strip_tags($contact['latest_message']));
                    if ($preview === '') {
                        $preview = $role_meta['label'];
                    }
                ?>
                    <button type="button"
                            class="group flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-muted/30 <?= !empty($contact['selected']) ? 'bg-primary/6 ring-1 ring-primary/12' : '' ?>"
                            data-conversation-user
                            data-user-id="<?= (int) $contact['user_id'] ?>">
                        <img src="<?= html_escape($contact['avatar']) ?>" alt="<?= html_escape($contact['fullname']) ?>" class="h-11 w-11 rounded-xl border border-border object-cover dark:border-slate-700">
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <p class="truncate text-sm font-semibold text-foreground"><?= html_escape($contact['fullname']) ?></p>
                                        <?php if (!empty($contact['selected'])) { ?>
                                            <span class="inline-flex h-2.5 w-2.5 rounded-full bg-primary"></span>
                                        <?php } ?>
                                    </div>
                                    <p class="mt-0.5 line-clamp-2 text-xs leading-5 text-muted-foreground"><?= html_escape($preview) ?></p>
                                </div>
                                <div class="flex shrink-0 flex-col items-end gap-1.5">
                                    <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] <?= $role_meta['class'] ?>">
                                        <?= html_escape($role_meta['label']) ?>
                                    </span>
                                    <?php if (!empty($contact['latest_time'])) { ?>
                                        <span class="text-[10px] text-muted-foreground"><?= time_ago($contact['latest_time']) ?></span>
                                    <?php } ?>
                                    <?php if (!empty($contact['unread'])) { ?>
                                        <span class="inline-flex min-w-[1.3rem] items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-bold text-white"><?= (int) $contact['unread'] ?></span>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </button>
                <?php } ?>
            </div>
        <?php } else { ?>
            <div class="flex min-h-[420px] flex-col items-center justify-center px-6 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-4 text-base font-semibold text-foreground"><?= lang('no_data_found') ?></h3>
                <p class="mt-2 text-sm text-muted-foreground">No matching people were found for this search.</p>
            </div>
        <?php } ?>
    </div>

    <div class="border-t border-border px-4 py-3 dark:border-slate-700">
        <div class="flex items-center justify-between gap-3">
            <button type="button"
                    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 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900"
                    data-conversation-prev
                    <?= $page <= 1 ? 'disabled' : '' ?>>
                <i data-lucide="chevron-left" class="h-4 w-4"></i>
                <span>Prev</span>
            </button>
            <div class="text-center">
                <p class="text-sm font-semibold text-foreground"><?= $page ?> of <?= $total_pages ?></p>
                <p class="text-xs text-muted-foreground"><?= $current_start ?>-<?= $current_end ?> of <?= $total ?></p>
            </div>
            <button type="button"
                    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 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900"
                    data-conversation-next
                    <?= $page >= $total_pages ? 'disabled' : '' ?>>
                <span>Next</span>
                <i data-lucide="chevron-right" class="h-4 w-4"></i>
            </button>
        </div>
    </div>
</div>
