<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php $active_tab = isset($active_tab) && $active_tab === 'plantillas' ? 'plantillas' : 'reglas'; ?>
<section class="panel">
	<div class="actions" style="justify-content:space-between; margin-top:0; margin-bottom:18px; gap:12px;">
		<a class="btn btn-outline" href="<?php echo site_url('configuracion'); ?>">Regresar</a>
		<div class="actions" style="margin-top:0;">
			<a class="btn btn-outline" href="<?php echo site_url('configuracion/tareas/seguimiento'); ?>">Seguimiento</a>
			<a class="btn btn-outline" href="<?php echo site_url('configuracion/tareas/plantillas/nueva'); ?>">Nueva plantilla</a>
			<a class="btn" href="<?php echo site_url('configuracion/tareas/reglas/nueva'); ?>">Nueva tarea</a>
		</div>
	</div>

	<h2 style="margin-bottom:10px;">Tareas</h2>
	<p style="margin-bottom:18px;">Administra plantillas de tareas, subtareas y reglas de asignacion para empleados o grupos.</p>

	<?php if (!empty($flash_message)) { ?>
		<div style="margin-bottom:14px; padding:12px 14px; border-radius:16px; background:#e8f6ed; color:#1f6a35; font-weight:700;">
			<?php echo htmlspecialchars($flash_message, ENT_QUOTES, 'UTF-8'); ?>
		</div>
	<?php } ?>

	<?php if (!empty($flash_error)) { ?>
		<div style="margin-bottom:14px; padding:12px 14px; border-radius:16px; background:#fdecec; color:#8a1f1f; font-weight:700;">
			<?php echo htmlspecialchars($flash_error, ENT_QUOTES, 'UTF-8'); ?>
		</div>
	<?php } ?>

	<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:18px; gap:10px;">
		<a
			class="btn <?php echo $active_tab === 'plantillas' ? '' : 'btn-outline'; ?>"
			href="<?php echo site_url('configuracion/tareas?tab=plantillas'); ?>"
		>Plantillas</a>
		<a
			class="btn <?php echo $active_tab === 'reglas' ? '' : 'btn-outline'; ?>"
			href="<?php echo site_url('configuracion/tareas?tab=reglas'); ?>"
		>Tareas</a>
	</div>

	<div style="display:grid; gap:18px;">
		<?php if ($active_tab === 'plantillas') { ?>
		<div style="display:grid; gap:14px;">
			<h2 style="margin-bottom:0;">Plantillas</h2>
			<?php if (empty($templates)) { ?>
				<div class="empty">Todavia no hay plantillas creadas.</div>
			<?php } else { ?>
				<?php foreach ($templates as $template) { ?>
					<div style="padding:16px 18px; border-radius:22px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:10px;">
						<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:12px;">
							<div>
								<div style="font-size:calc(1rem * var(--app-text-size)); font-weight:800; color:var(--ink);">
									<?php echo htmlspecialchars($template['name'], ENT_QUOTES, 'UTF-8'); ?>
								</div>
								<div style="font-size:calc(0.88rem * var(--app-text-size)); color:var(--muted);">
									<?php echo !empty($template['is_active']) ? 'Activa' : 'Inactiva'; ?>
								</div>
							</div>
							<div class="actions" style="margin-top:0;">
								<a class="btn btn-outline" href="<?php echo site_url('configuracion/tareas/plantillas/'.(int) $template['id']); ?>">Editar</a>
								<form method="post" action="<?php echo site_url('configuracion/tareas'); ?>" style="display:inline-flex;">
									<input type="hidden" name="action_type" value="toggle_template" />
									<input type="hidden" name="tab" value="plantillas" />
									<input type="hidden" name="template_id" value="<?php echo (int) $template['id']; ?>" />
									<input type="hidden" name="is_active" value="<?php echo !empty($template['is_active']) ? '0' : '1'; ?>" />
									<button class="btn btn-outline" type="submit"><?php echo !empty($template['is_active']) ? 'Desactivar' : 'Activar'; ?></button>
								</form>
							</div>
						</div>
						<?php if (!empty($template['description'])) { ?>
							<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--muted);">
								<?php echo nl2br(htmlspecialchars($template['description'], ENT_QUOTES, 'UTF-8')); ?>
							</div>
						<?php } ?>
						<?php if (!empty($template['items'])) { ?>
							<div style="display:grid; gap:6px;">
								<?php foreach ($template['items'] as $item) { ?>
									<div style="display:flex; align-items:center; gap:10px; color:var(--ink); padding-left:<?php echo !empty($item['parent_item_id']) ? '20px' : '0'; ?>;">
										<span style="width:8px; height:8px; border-radius:999px; background:var(--theme); display:inline-block;"></span>
										<span><?php echo htmlspecialchars((!empty($item['parent_item_id']) ? '- ' : '').$item['name'], ENT_QUOTES, 'UTF-8'); ?></span>
									</div>
								<?php } ?>
							</div>
						<?php } else { ?>
							<div style="font-size:calc(0.88rem * var(--app-text-size)); color:var(--muted);">Sin subtareas configuradas.</div>
						<?php } ?>
					</div>
				<?php } ?>
			<?php } ?>
		</div>
		<?php } else { ?>
		<div style="display:grid; gap:14px;">
			<h2 style="margin-bottom:0;">Tareas</h2>
			<?php if (empty($rules)) { ?>
				<div class="empty">Todavia no hay tareas creadas.</div>
			<?php } else { ?>
				<?php foreach ($rules as $rule) { ?>
					<div style="padding:16px 18px; border-radius:22px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:10px;">
						<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:12px;">
							<div>
								<div style="font-size:calc(1rem * var(--app-text-size)); font-weight:800; color:var(--ink);">
									<?php echo htmlspecialchars($rule['display_name'], ENT_QUOTES, 'UTF-8'); ?>
								</div>
								<div style="font-size:calc(0.88rem * var(--app-text-size)); color:var(--muted);">
									<?php echo !empty($rule['is_active']) ? 'Activa' : 'Inactiva'; ?>
								</div>
							</div>
							<div class="actions" style="margin-top:0;">
								<a class="btn btn-outline" href="<?php echo site_url('configuracion/tareas/reglas/'.(int) $rule['id']); ?>">Editar</a>
								<form method="post" action="<?php echo site_url('configuracion/tareas'); ?>" style="display:inline-flex;">
									<input type="hidden" name="action_type" value="toggle_rule" />
									<input type="hidden" name="tab" value="reglas" />
									<input type="hidden" name="rule_id" value="<?php echo (int) $rule['id']; ?>" />
									<input type="hidden" name="is_active" value="<?php echo !empty($rule['is_active']) ? '0' : '1'; ?>" />
									<button class="btn btn-outline" type="submit"><?php echo !empty($rule['is_active']) ? 'Desactivar' : 'Activar'; ?></button>
								</form>
							</div>
						</div>
						<div style="display:grid; gap:6px; font-size:calc(0.9rem * var(--app-text-size)); color:var(--muted);">
							<div><strong style="color:var(--ink);">Plantilla:</strong> <?php echo htmlspecialchars($rule['template_name'], ENT_QUOTES, 'UTF-8'); ?></div>
							<div><strong style="color:var(--ink);">Destino:</strong> <?php echo htmlspecialchars($rule['target_label'], ENT_QUOTES, 'UTF-8'); ?></div>
							<div><strong style="color:var(--ink);">Recurrencia:</strong> <?php echo htmlspecialchars($rule['recurrence_label'], ENT_QUOTES, 'UTF-8'); ?></div>
							<div><strong style="color:var(--ink);">Proxima ejecucion:</strong> <?php echo !empty($rule['next_due_date']) ? htmlspecialchars(date('d/m/Y', strtotime($rule['next_due_date'])), ENT_QUOTES, 'UTF-8') : 'Sin fecha proxima'; ?></div>
							<div><strong style="color:var(--ink);">Modo de grupo:</strong> <?php echo htmlspecialchars(isset($rule['group_distribution_mode']) ? $rule['group_distribution_mode'] : 'all_members', ENT_QUOTES, 'UTF-8'); ?></div>
							<div><strong style="color:var(--ink);">Nota:</strong> <?php echo !empty($rule['requires_note_on_complete']) ? 'Obligatoria' : 'Opcional'; ?></div>
						</div>
					</div>
				<?php } ?>
			<?php } ?>
		</div>
		<?php } ?>
	</div>
</section>
