<?php
$activity_items_only = !empty($activity_items_only);
$activity_style = isset($activity_style) ? $activity_style : config_item('activity_style');
if (empty($activity_style)) {
	$activity_style = 'timeline';
}
if (is_numeric($activity_style)) {
	$style_map = array('1' => 'timeline', '2' => 'feed', '3' => 'cards', '4' => 'stacked', '5' => 'compact');
	$activity_style = isset($style_map[$activity_style]) ? $style_map[$activity_style] : 'timeline';
}
if (!in_array($activity_style, array('timeline', 'feed', 'cards', 'stacked', 'compact'), true)) {
	$activity_style = 'timeline';
}

$activity_limit = (int) config_item('activity_pagination_limit');
if ($activity_limit <= 0) {
	$activity_limit = 20;
}

if (!isset($activities_info)) {
	$activities_info = $this->common_model->get_activities_info($module, $id, $activity_limit, 0);
}
$activity_count = isset($activity_count) ? (int) $activity_count : $this->common_model->count_activities_info($module, $id);
$activity_user_count = isset($activity_user_count) ? (int) $activity_user_count : $this->common_model->count_activity_users($module, $id);
$latest_activity = isset($latest_activity) ? $latest_activity : $this->common_model->get_latest_activity($module, $id);
$current_count = !empty($activities_info) ? count($activities_info) : 0;

if (!function_exists('render_activity_entry')) {
	function render_activity_entry($v_activities, $module, $activity_style)
	{
		$avatar = !empty($v_activities->avatar) ? base_url() . ltrim($v_activities->avatar, '/') : '';
		$name = !empty($v_activities->fullname) ? $v_activities->fullname : lang('system');
		$module_label = lang($module);
		ob_start();
		if ($activity_style === 'feed') { ?>
			<div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
				<div class="flex flex-wrap items-center justify-between gap-2">
					<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
						<span data-tooltip="<?= display_datetime($v_activities->activity_date) ?>"><?= time_ago($v_activities->activity_date); ?></span>
						<?php if (!empty($v_activities->fullname)) { ?>
							<span class="text-slate-300 dark:text-slate-600">&bull;</span>
							<span class="font-semibold text-indigo-600 dark:text-indigo-300"><?= html_escape($v_activities->fullname) ?></span>
						<?php } ?>
					</div>
					<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300"><?= $module_label ?></span>
				</div>
				<div class="mt-2">
					<?= sprintf(lang($v_activities->activity)) ?>
					<?php if (!empty($v_activities->value1)) { ?><strong><?= html_escape($v_activities->value1) ?></strong><?php } ?>
				</div>
				<?php if (!empty($v_activities->value2)) { ?>
					<div class="mt-2 text-xs font-semibold text-slate-600 dark:text-slate-200"><?= html_escape($v_activities->value2) ?></div>
				<?php } ?>
			</div>
		<?php } elseif ($activity_style === 'cards') { ?>
			<div class="rounded-2xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
				<div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
					<span data-tooltip="<?= display_datetime($v_activities->activity_date) ?>"><?= time_ago($v_activities->activity_date); ?></span>
					<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-200"><?= $module_label ?></span>
				</div>
				<div class="mt-3 text-sm">
					<?php if (!empty($v_activities->fullname)) { ?>
						<span class="font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($v_activities->fullname) ?></span>
						<span class="text-slate-400 dark:text-slate-600">&bull;</span>
					<?php } ?>
					<?= sprintf(lang($v_activities->activity)) ?>
					<?php if (!empty($v_activities->value1)) { ?><strong><?= html_escape($v_activities->value1) ?></strong><?php } ?>
				</div>
				<?php if (!empty($v_activities->value2)) { ?>
					<div class="mt-2 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-xs text-slate-600 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200"><?= html_escape($v_activities->value2) ?></div>
				<?php } ?>
			</div>
		<?php } elseif ($activity_style === 'compact') { ?>
			<tr class="transition-colors hover:bg-slate-50/70 dark:hover:bg-slate-800/50">
				<td class="px-4 py-3">
					<div class="flex items-center gap-2.5">
						<?php if (!empty($avatar)) { ?>
							<img src="<?= $avatar ?>" alt="<?= html_escape($name) ?>" class="h-8 w-8 rounded-full border border-slate-200 object-cover dark:border-slate-700">
						<?php } else { ?>
							<span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><i data-lucide="user" class="h-4 w-4"></i></span>
						<?php } ?>
						<span class="font-semibold text-slate-800 dark:text-slate-100"><?= html_escape($name) ?></span>
					</div>
				</td>
				<td class="px-4 py-3">
					<div class="leading-relaxed">
						<?= sprintf(lang($v_activities->activity)) ?>
						<?php if (!empty($v_activities->value1)) { ?><strong><?= html_escape($v_activities->value1) ?></strong><?php } ?>
					</div>
					<?php if (!empty($v_activities->value2)) { ?><div class="mt-1 text-xs text-slate-500 dark:text-slate-400"><?= html_escape($v_activities->value2) ?></div><?php } ?>
				</td>
				<td class="px-4 py-3 text-xs text-slate-500 dark:text-slate-400" data-tooltip="<?= display_datetime($v_activities->activity_date) ?>">
					<span class="inline-flex rounded-full bg-slate-100 px-2 py-1 font-medium dark:bg-slate-800 dark:text-slate-300"><?= time_ago($v_activities->activity_date); ?></span>
				</td>
			</tr>
		<?php } else {
			$is_stacked = $activity_style === 'stacked'; ?>
			<div class="relative pl-10">
				<span class="absolute left-4 top-0 bottom-0 w-px bg-slate-200 dark:bg-slate-700"></span>
				<span class="absolute left-[11px] top-6 h-2.5 w-2.5 rounded-full <?= $is_stacked ? 'bg-indigo-500 ring-2 ring-white dark:ring-slate-900' : 'border border-indigo-300 bg-indigo-500 dark:border-indigo-800' ?>"></span>
				<div class="w-full min-w-0 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
					<div class="flex items-start gap-3">
						<?php if (!empty($avatar)) { ?>
							<img src="<?= $avatar ?>" alt="<?= html_escape($name) ?>" class="h-9 w-9 rounded-full border border-slate-200 object-cover dark:border-slate-700">
						<?php } else { ?>
							<span class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><i data-lucide="user" class="h-4 w-4"></i></span>
						<?php } ?>
						<div class="min-w-0 flex-1">
							<div class="flex flex-wrap items-start justify-between gap-3">
								<div>
									<div class="text-sm font-semibold text-slate-800 dark:text-slate-100">
										<?php if (!empty($v_activities->fullname)) { ?>
											<a href="<?= base_url() ?>admin/user/user_details/<?= $v_activities->user ?>" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-300 dark:hover:text-indigo-200"><?= html_escape($name) ?></a>
										<?php } else { ?>
											<?= html_escape($name) ?>
										<?php } ?>
									</div>
									<div class="text-xs text-slate-500 dark:text-slate-400" data-tooltip="<?= display_datetime($v_activities->activity_date) ?>"><?= time_ago($v_activities->activity_date); ?></div>
								</div>
								<span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300"><?= $module_label ?></span>
							</div>
							<div class="mt-3 leading-relaxed">
								<?= sprintf(lang($v_activities->activity)) ?>
								<?php if (!empty($v_activities->value1)) { ?><strong><?= html_escape($v_activities->value1) ?></strong><?php } ?>
								<?php if (!empty($v_activities->value2)) { ?>
									<div class="mt-2 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-100"><?= html_escape($v_activities->value2) ?></div>
								<?php } ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		<?php }
		return ob_get_clean();
	}
}

if ($activity_items_only) {
	foreach ((array) $activities_info as $v_activities) {
		echo render_activity_entry($v_activities, $module, $activity_style);
	}
	return;
}
?>

<div class="project-overview-shell space-y-4">
	<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
		<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="history" class="h-5 w-5"></i></div>
				<div>
					<div class="text-2xl font-bold text-foreground"><?= (int) $activity_count ?></div>
					<div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground"><?= lang('activities') ?></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="users" class="h-5 w-5"></i></div>
				<div>
					<div class="text-2xl font-bold text-foreground"><?= (int) $activity_user_count ?></div>
					<div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Contributors</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="list" class="h-5 w-5"></i></div>
				<div>
					<div class="text-2xl font-bold text-foreground"><?= ucfirst($activity_style) ?></div>
					<div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Settings View</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-amber-50 p-2.5 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400"><i data-lucide="clock-3" class="h-5 w-5"></i></div>
				<div>
					<div class="text-2xl font-bold text-foreground"><?= !empty($latest_activity) ? time_ago($latest_activity->activity_date) : '--' ?></div>
					<div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Latest Update</div>
				</div>
			</div>
		</div>
	</div>

	<div class="project-section-card rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/40">
		<div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-700">
			<div>
				<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('activities') ?></h3>
				<p class="text-xs text-slate-500 dark:text-slate-400"><?= lang('recent_activity') ?> and system history</p>
			</div>
			<?php if ($this->session->userdata('user_type') == 1) { ?>
				<a class="project-action-btn inline-flex items-center px-3 py-1.5 text-xs font-semibold text-slate-600 hover:border-slate-300 dark:text-slate-200" href="<?= base_url() ?>admin/tasks/claer_activities/<?= $module . '/' . $id ?>">
					<?= lang('clear') . ' ' . lang('activities') ?>
				</a>
			<?php } ?>
		</div>

		<div class="p-5" data-activity-list data-module="<?= html_escape($module) ?>" data-id="<?= (int) $id ?>" data-offset="<?= (int) $current_count ?>" data-limit="<?= (int) $activity_limit ?>">
			<?php if (!empty($activities_info)) { ?>
				<?php if ($activity_style === 'compact') { ?>
					<div class="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
						<div class="overflow-x-auto">
							<table class="min-w-full text-sm">
								<thead class="bg-slate-200 text-xs uppercase tracking-wide text-slate-500 dark:bg-slate-800/60 dark:text-slate-300">
									<tr>
										<th class="px-4 py-3 text-left"><?= lang('user') ?></th>
										<th class="px-4 py-3 text-left"><?= lang('activity') ?></th>
										<th class="px-4 py-3 text-left"><?= lang('date') ?></th>
									</tr>
								</thead>
								<tbody class="divide-y divide-slate-100 text-slate-700 dark:divide-slate-800 dark:text-slate-200" data-activity-items>
									<?php foreach ($activities_info as $v_activities) { echo render_activity_entry($v_activities, $module, $activity_style); } ?>
								</tbody>
							</table>
						</div>
					</div>
				<?php } else { ?>
					<div class="<?= $activity_style === 'cards' ? 'grid gap-4 md:grid-cols-2' : ($activity_style === 'feed' ? 'space-y-3' : 'space-y-4') ?>" data-activity-items>
						<?php foreach ($activities_info as $v_activities) { echo render_activity_entry($v_activities, $module, $activity_style); } ?>
					</div>
				<?php } ?>
				<?php if ($current_count < $activity_count) {
					$load_label = lang('load_more');
					if ($load_label === 'load_more') {
						$load_label = 'Load more';
					}
				?>
					<div class="mt-5 text-center">
						<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-semibold text-foreground hover:bg-muted" data-activity-load-more>
							<i data-lucide="chevrons-down" class="h-4 w-4"></i>
							<span><?= $load_label ?></span>
						</button>
					</div>
				<?php } ?>
			<?php } else { ?>
				<div class="rounded-xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500 dark:border-slate-600 dark:text-slate-400"><?= lang('no_record_found') ?></div>
			<?php } ?>
		</div>
	</div>
</div>

<script>
	(function() {
		const root = document.querySelector('[data-activity-list][data-module="<?= html_escape($module) ?>"][data-id="<?= (int) $id ?>"]');
		if (!root) return;
		const button = root.querySelector('[data-activity-load-more]');
		const items = root.querySelector('[data-activity-items]');
		if (!button || !items) return;
		button.addEventListener('click', function() {
			const label = button.querySelector('span');
			const original = label ? label.textContent : '';
			button.disabled = true;
			if (label) label.textContent = 'Loading...';
			const params = new URLSearchParams({
				module: root.dataset.module,
				id: root.dataset.id,
				offset: root.dataset.offset || '0',
				limit: root.dataset.limit || '20'
			});
			fetch('<?= base_url('admin/common/activity_page') ?>?' + params.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
				.then((response) => response.json())
				.then((data) => {
					if (data.html) {
						items.insertAdjacentHTML('beforeend', data.html);
					}
					root.dataset.offset = data.next_offset || root.dataset.offset;
					if (!data.has_more) {
						button.parentElement.remove();
					} else {
						button.disabled = false;
						if (label) label.textContent = original;
					}
					if (window.lucide) {
						window.lucide.createIcons();
					}
				})
				.catch(() => {
					button.disabled = false;
					if (label) label.textContent = original;
				});
		});
	})();
</script>
