<?php
$comment_details = $this->common_model->get_comment_details($id, $module);
$comment_count = !empty($comment_details) ? count($comment_details) : 0;
$comment_attachment_count = 0;
if (!empty($comment_details)) {
    foreach ($comment_details as $comment_item) {
        $comment_attachment_count += !empty($comment_item->comments_attachment) ? count((array) json_decode($comment_item->comments_attachment)) : 0;
    }
}
?>

<div class="project-overview-shell space-y-4">
    <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-blue-50 p-2.5 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
                    <i data-lucide="message-square" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= (int) $comment_count ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground"><?= lang('comments') ?></div>
                </div>
            </div>
        </div>
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-violet-50 p-2.5 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400">
                    <i data-lucide="paperclip" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= (int) $comment_attachment_count ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground"><?= lang('attachments') ?></div>
                </div>
            </div>
        </div>
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-emerald-50 p-2.5 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                    <i data-lucide="send" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= $comment_count > 0 ? 'Live' : 'Start' ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Thread State</div>
                </div>
            </div>
        </div>
    </div>

    <div class="project-section-card rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center justify-between border-b border-slate-200 pb-4 dark:border-gray-700">
            <div>
                <h3 class="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-gray-100">
                    <i data-lucide="message-square" class="h-4 w-4 text-slate-500 dark:text-gray-400"></i>
                    <?= lang('comments') ?>
                </h3>
                <p class="mt-1 text-xs text-muted-foreground">Discussion thread, quick updates, and file-backed feedback.</p>
            </div>
            <div class="flex flex-wrap gap-2 text-xs">
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-blue-500"></span><?= (int) $comment_count ?> <?= lang('comments') ?></span>
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-violet-500"></span><?= (int) $comment_attachment_count ?> <?= lang('attachments') ?></span>
            </div>
        </div>

        <div class="mt-5" id="chat-box">
        <?php echo form_open(base_url("admin/common/save_comments"), array("id" => $module . "-comment-form", "class" => "group", "enctype" => "multipart/form-data", "role" => "form", "data-comment-form" => "true")); ?>

        <input type="hidden" name="module" value="<?php if (!empty($module)) { echo $module; } ?>">
        <input type="hidden" name="module_field_id" value="<?php if (!empty($id)) { echo $id; } ?>">

        <div class="space-y-4">
            
            <!-- <div class="rounded-lg border border-slate-200 bg-slate-50/50 p-1 dark:bg-gray-900 dark:border-gray-700"> -->
                <?= form_editor('comment', null, '', false, ['data-height' => '150px']); ?>
            <!-- </div> -->

            <div class="relative">
                <?= form_attachment_group('files[]', null, 'dropzone', [
                    'dropzone_id' => 'comments-files-dropzone',
                    'list_id' => 'comments-files-list',                                     
                ]); ?>
            </div>
        </div>

        <div class="mt-4 flex justify-end border-t border-slate-100 pt-4 dark:border-gray-700">
            <button type="submit" id="file-save-button" 
                class="inline-flex items-center gap-2 rounded-lg bg-slate-900 px-5 py-2 text-xs font-semibold text-white shadow-md transition-all hover:bg-slate-800 focus:ring-2 focus:ring-slate-500/20 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white">
                <i data-lucide="send" class="h-3 w-3"></i>
                <?= lang('post_comment') ?>
            </button>
        </div>

        <?php echo form_close(); ?>

        <div class="mt-8 space-y-6" data-comment-list>
            <?php $this->load->view('admin/common/comments_list', array(
                'comment_type' => $module,
                'comment_details' => $comment_details
            )) ?>
        </div>
    </div>
</div>
