<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$notifications = isset($notifications) && is_array($notifications) ? $notifications : array();
$unread_count = isset($unread_count) ? (int) $unread_count : 0;
$is_client_panel = isset($is_client_panel) ? (bool) $is_client_panel : ((int) ($this->session->userdata('user_type') ?? 0) === 2);
$notifications_page_url = isset($notifications_page_url)
	? $notifications_page_url
	: base_url(($is_client_panel ? 'client/user/user_details/' : 'admin/user/user_details/') . $this->session->userdata('user_id') . '?tab=notifications');

$resolve_notification_link = function ($notificationLink) use ($is_client_panel, $notifications_page_url) {
	if (empty($notificationLink)) {
		return '#';
	}

	$notificationLink = trim((string) $notificationLink, '/');
	if ($notificationLink === '') {
		return '#';
	}

	if ($is_client_panel && preg_match('#^admin/user/user_details/\d+/(notifications)?$#', $notificationLink)) {
		return $notifications_page_url;
	}

	if ($is_client_panel && preg_match('#^admin/user/user_details/\d+$#', $notificationLink)) {
		$notificationLink = preg_replace('#^admin/#', 'client/', $notificationLink, 1);
	}

	return base_url($notificationLink);
};
?>
<div class="overflow-hidden rounded-3xl border border-border bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900">
	<div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 dark:border-slate-700">
		<div>
			<p class="text-sm font-semibold text-foreground"><?= lang('notification') ?></p>
			<p class="text-xs text-muted-foreground">
				<?= $unread_count > 0 ? sprintf('%d unread', $unread_count) : 'You are all caught up' ?>
			</p>
		</div>
		<button
			type="button"
			class="inline-flex items-center gap-2 rounded-xl border border-border px-3 py-1.5 text-xs font-semibold text-foreground transition hover:bg-muted dark:border-slate-700 dark:hover:bg-slate-800"
			data-header-notifications-mark-all>
			<i data-lucide="check-check" class="h-4 w-4"></i>
			<span><?= lang('mark_all_as_read') ?></span>
		</button>
	</div>

	<div class="max-h-[26rem] overflow-y-auto p-2">
		<?php if (!empty($notifications)) { ?>
			<div class="space-y-2">
				<?php foreach ($notifications as $notification) {
					$link = $resolve_notification_link($notification->link ?? '');
					$description = lang($notification->description, $notification->value);
					if ($notification->from_user_id != 0) {
						$description = fullname($notification->from_user_id) . ' - ' . $description;
					}
					$avatar = $notification->from_user_id != 0 ? base_url(staffImage($notification->from_user_id)) : '';
					$iconName = normalize_lucide_icon(!empty($notification->icon) ? $notification->icon : 'bell', 'bell');
					$isUnread = (int) $notification->read === 0;
				?>
					<a
						href="<?= $link ?>"
						class="group flex items-start gap-3 rounded-2xl border border-transparent px-3 py-3 text-left transition hover:border-border hover:bg-slate-50 dark:hover:border-slate-700 dark:hover:bg-slate-800/70 <?= $isUnread ? 'bg-amber-50/70 dark:bg-amber-950/10' : '' ?>"
						data-header-notification-item
						data-notification-id="<?= (int) $notification->notifications_id ?>"
						data-unread="<?= $isUnread ? '1' : '0' ?>">
						<?php if ($avatar !== '') { ?>
							<img src="<?= $avatar ?>" alt="" class="h-10 w-10 rounded-2xl object-cover shadow-sm">
						<?php } else { ?>
							<div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200">
								<i data-lucide="<?= html_escape($iconName) ?>" class="h-4 w-4"></i>
							</div>
						<?php } ?>
						<div class="min-w-0 flex-1">
							<div class="flex items-start justify-between gap-3">
								<p class="line-clamp-2 text-sm text-foreground"><?= html_escape($description) ?></p>
								<?php if ($isUnread) { ?>
									<span class="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-amber-500"></span>
								<?php } ?>
							</div>
							<p class="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
								<i data-lucide="clock-3" class="h-3.5 w-3.5"></i>
								<span><?= time_ago($notification->date) ?></span>
							</p>
						</div>
					</a>
				<?php } ?>
			</div>
		<?php } else { ?>
			<div class="px-4 py-10 text-center">
				<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
					<i data-lucide="bell-off" class="h-5 w-5"></i>
				</div>
				<p class="mt-3 text-sm font-medium text-foreground"><?= lang('no_notification') ?></p>
				<p class="mt-1 text-xs text-muted-foreground">You are all caught up</p>
			</div>
		<?php } ?>
	</div>

	<div class="border-t border-border px-4 py-3 dark:border-slate-700">
		<a href="<?= $notifications_page_url ?>" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-border px-3 py-2 text-sm font-semibold text-foreground transition hover:bg-muted dark:border-slate-700 dark:hover:bg-slate-800">
			<i data-lucide="external-link" class="h-4 w-4"></i>
			<span><?= lang('view_all_notifications') ?></span>
		</a>
	</div>
</div>
