<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$edited = can_action('58', 'edited');
$can_edit = $this->bugs_model->can_action('tbl_bug', 'edit', array('bug_id' => $bug_details->bug_id));

$status_tone = isset($status_tones[$bug_details->bug_status]) ? $status_tones[$bug_details->bug_status] : 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-200';
$priority_tone = isset($priority_tones[$bug_details->priority]) ? $priority_tones[$bug_details->priority] : 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-200';
$severity_tone = isset($severity_tones[$bug_details->severity]) ? $severity_tones[$bug_details->severity] : 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-200';

$project_name = !empty($project_info->project_name) ? $project_info->project_name : '-';
$opportunity_name = !empty($opportunity_info->opportunity_name) ? $opportunity_info->opportunity_name : '-';
$reporter_name = !empty($reporter_profile->fullname) ? $reporter_profile->fullname : '-';

$custom_field_items = array();
if (!empty($custom_fields)) {
	foreach ($custom_fields as $c_label => $v_fields) {
		if (empty($v_fields)) {
			continue;
		}

		$decoded = json_decode($v_fields, true);
		$custom_field_items[] = array(
			'label' => $c_label,
			'value' => is_array($decoded) ? implode(', ', $decoded) : $v_fields,
		);
	}
}
?>

<div class="space-y-4">
	<section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900">
		<div class="space-y-3">
			<h2 class="text-xl font-semibold tracking-[-0.02em] text-slate-900 dark:text-slate-100 sm:text-sl sm:leading-[1.05]">
				<?= html_escape($bug_details->bug_title) ?>
			</h2>
			<div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] text-slate-500 dark:text-slate-400">
				<div class="inline-flex items-center gap-2">
					<i data-lucide="user" class="h-3.5 w-3.5"></i>
					<span><?= html_escape($reporter_name) ?></span>
				</div>
				<div class="inline-flex items-center gap-2">
					<i data-lucide="clock-3" class="h-3.5 w-3.5"></i>
					<span><?= display_date($bug_details->created_time) . ' at ' . display_time($bug_details->created_time) ?></span>
				</div>
			</div>
		</div>
	</section>

	<section class="grid grid-cols-1 gap-6 xl:grid-cols-12">
		<div class="space-y-6 xl:col-span-8">

			<div class="">
				<?php if (!empty($bug_details->bug_description)) { ?>
					<div class="rounded-2xl border border-slate-200 bg-slate-50 p-8 text-sm leading-7 text-slate-600 dark:border-slate-700 dark:bg-slate-800/40 dark:text-slate-300">
						<?= nl2br(html_escape($bug_details->bug_description)) ?>
					</div>
				<?php } else { ?>
					<div class="rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-6 py-14 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-800/40 dark:text-slate-400">
						<?= lang('nothing_selected') ?>
					</div>
				<?php } ?>
			</div>

			<?php if (!empty($custom_field_items)) { ?>
				<article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
					<header class="border-b border-slate-200 px-5 py-3 dark:border-slate-700">
						<h3 class="text-base font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400"><?= lang('custom_field') ?></h3>
					</header>
					<div class="grid gap-4 p-5 sm:grid-cols-2">
						<?php foreach ($custom_field_items as $field) { ?>
							<div class="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800/40">
								<p class="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400"><?= html_escape($field['label']) ?></p>
								<p class="mt-2 text-sm text-slate-700 dark:text-slate-200"><?= nl2br(html_escape($field['value'])) ?></p>
							</div>
						<?php } ?>
					</div>
				</article>
			<?php } ?>
		</div>

		<aside class="space-y-6 xl:col-span-4">
			<article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
				<header class="border-b border-slate-200 px-5 py-3 dark:border-slate-700">
					<h3 class="text-base font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Properties</h3>
				</header>
				<div class="space-y-5 px-5 py-5">
					<div class="flex items-center justify-between gap-3">
						<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
							<i data-lucide="activity" class="h-3.5 w-3.5"></i>
							<span class="text-sm font-medium text-slate-500 dark:text-slate-400"><?= lang('status') ?></span>
						</div>
						<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold <?= $status_tone ?>"><?= lang($bug_details->bug_status) ?></span>
					</div>
					<div class="flex items-center justify-between gap-3">
						<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
							<i data-lucide="bar-chart-3" class="h-3.5 w-3.5"></i>
							<span class="text-sm font-medium text-slate-500 dark:text-slate-400"><?= lang('priority') ?></span>
						</div>
						<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold <?= $priority_tone ?>"><?= lang($bug_details->priority) ?></span>
					</div>
					<div class="flex items-center justify-between gap-3">
						<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
							<i data-lucide="shield-alert" class="h-3.5 w-3.5"></i>
							<span class="text-sm font-medium text-slate-500 dark:text-slate-400"><?= lang('severity') ?></span>
						</div>
						<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold <?= $severity_tone ?>"><?= lang($bug_details->severity) ?></span>
					</div>
					<div class="border-t border-slate-200 pt-4 dark:border-slate-700">
						<div class="flex items-center justify-between gap-3 pb-3">
							<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
								<i data-lucide="folder-open" class="h-3.5 w-3.5"></i>
								<span class="text-sm font-medium text-slate-500 dark:text-slate-400"><?= lang('project_name') ?></span>
							</div>
							<span class="max-w-[60%] truncate text-sm font-semibold text-slate-800 dark:text-slate-100"><?= html_escape($project_name) ?></span>
						</div>
						<div class="flex items-center justify-between gap-3">
							<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
								<i data-lucide="hash" class="h-3.5 w-3.5"></i>
								<span class="text-sm font-medium text-slate-500 dark:text-slate-400"><?= lang('opportunity_name') ?></span>
							</div>
							<span class="max-w-[60%] truncate text-sm font-semibold text-slate-800 dark:text-slate-100"><?= !empty($opportunity_info) ? html_escape($opportunity_name) : lang('none') ?></span>
						</div>
					</div>
				</div>
			</article>

			<article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
				<header class="border-b border-slate-200 px-5 py-3 dark:border-slate-700">
					<div class="flex items-center justify-between gap-2">
						<h3 class="text-base font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Participants</h3>
						<?php if (!empty($can_edit) && !empty($edited)) { ?>
							<?= btn_modal(
								'admin/bugs/update_users/' . $bug_details->bug_id,
								'',
								lang('add_more'),
								'md',
								'plus',
								array('class' => 'inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-foreground hover:bg-muted')
							) ?>
						<?php } ?>
					</div>
				</header>
				<div class="p-4" data-bug-participants="<?= (int) $bug_details->bug_id ?>">
					<?php if (!empty($participants_all)) { ?>
						<div class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-800/40">
							<div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">E</div>
							<div class="min-w-0 flex-1">
								<p class="text-sm font-semibold text-slate-800 dark:text-slate-100"><?= lang('everyone') ?></p>
								<p class="text-xs text-slate-500 dark:text-slate-400"><?= lang('permission_for_all') ?></p>
							</div>
						</div>
					<?php } elseif (!empty($participants)) { ?>
						<div class="space-y-2">
							<?php foreach ($participants as $participant) { ?>
								<?php
								$avatar = !empty($participant['avatar']) ? $participant['avatar'] : staffImage($participant['user_id']);
								if (!preg_match('/^https?:\/\//', $avatar)) {
									$avatar = base_url(ltrim($avatar, '/'));
								}
								?>
								<div class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-800/40">
									<img src="<?= $avatar ?>" alt="<?= html_escape($participant['fullname']) ?>" class="h-10 w-10 rounded-full object-cover">
									<div class="min-w-0 flex-1">
										<p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100"><?= html_escape($participant['fullname']) ?></p>
										<p class="text-xs text-slate-500 dark:text-slate-400"><?= ((int) $participant['role_id'] === 1) ? 'Admin' : 'Staff' ?></p>
									</div>
								</div>
							<?php } ?>
						</div>
					<?php } else { ?>
						<p class="text-sm text-slate-500 dark:text-slate-400"><?= lang('nothing_to_display') ?></p>
					<?php } ?>
				</div>
			</article>
		</aside>
	</section>
</div>
