<?php
/**
 * Dashboard page content template.
 *
 * @package MonitorCat
 *
 * @var \MonitorCat\Module\ModuleInterface[] $modules     Active modules.
 * @var array[]                              $coming_soon Coming-soon placeholders.
 * @var \MonitorCat\Module\ModuleRegistry    $registry    Module registry.
 */

defined( 'ABSPATH' ) || exit;

/**
 * Map module slugs to pedestal color classes.
 */
$monitorcat_pedestal_colors = array(
	'seo'         => 'mc-pedestal-primary',
	'speed'       => 'mc-pedestal-cyan',
	'diagnostics' => 'mc-pedestal-mint',
);

/**
 * Map module slugs to FA icon color classes.
 */
$monitorcat_icon_colors = array(
	'seo'         => 'mc-fa-primary',
	'speed'       => 'mc-fa-cyan',
	'diagnostics' => 'mc-fa-mint',
);
?>

<div class="mc-dashboard">

	<!-- Welcome hero card -->
	<div class="mc-hero-card">
		<div class="mc-hero-card-inner">
			<div class="mc-hero-card-content">
				<h1>
					<?php esc_html_e( 'Welcome to', 'monitor-cat' ); ?> Monitor<span class="mc-text-gradient-primary">.CAT</span>
				</h1>
				<p>
					<?php esc_html_e( 'Your all-in-one WordPress health dashboard. Optimize for search engines and AI, speed, and diagnostics.', 'monitor-cat' ); ?>
				</p>
			</div>
			<div class="mc-hero-card-image">
				<img
					src="<?php echo esc_url( MONITORCAT_URL . 'assets/img/cat-protects.webp' ); ?>"
					alt="<?php esc_attr_e( 'Monitor.Cat mascot', 'monitor-cat' ); ?>"
					width="180"
				/>
			</div>
		</div>
	</div>

	<!-- Active module cards grid -->
	<?php if ( ! empty( $modules ) ) : ?>
		<h2 class="mc-section-title">
			<?php esc_html_e( 'Modules', 'monitor-cat' ); ?>
		</h2>
		<div class="mc-module-grid">
			<?php foreach ( $modules as $monitorcat_module ) : ?>
				<?php
				$monitorcat_card_slug = $monitorcat_module->slug();
				$monitorcat_ped_cls   = isset( $monitorcat_pedestal_colors[ $monitorcat_card_slug ] ) ? $monitorcat_pedestal_colors[ $monitorcat_card_slug ] : '';
				$monitorcat_ico_cls   = isset( $monitorcat_icon_colors[ $monitorcat_card_slug ] ) ? $monitorcat_icon_colors[ $monitorcat_card_slug ] : 'mc-fa-text';
				?>
				<a
					href="<?php echo esc_url( admin_url( 'admin.php?page=monitor-cat-' . $monitorcat_card_slug ) ); ?>"
					class="mc-card mc-card-hover mc-module-card"
					data-module="<?php echo esc_attr( $monitorcat_card_slug ); ?>"
				>
					<div class="mc-card-body">
						<div class="mc-module-card-header">
							<div class="mc-pedestal <?php echo esc_attr( $monitorcat_ped_cls ); ?>">
								<i class="fa-duotone <?php echo esc_attr( $monitorcat_module->icon() ); ?> <?php echo esc_attr( $monitorcat_ico_cls ); ?>" style="font-size: 1.5rem;"></i>
							</div>
						</div>
						<h3 class="mc-card-title"><?php echo esc_html( $monitorcat_module->name() ); ?></h3>
						<p class="mc-text-medium"><?php echo esc_html( $monitorcat_module->description() ); ?></p>
					</div>
					<div class="mc-card-footer">
						<span class="mc-btn mc-btn-primary mc-btn-sm">
							<?php esc_html_e( 'Explore', 'monitor-cat' ); ?>
							<i class="fa-duotone fa-arrow-right"></i>
						</span>
					</div>
				</a>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

	<!-- Coming soon section -->
	<?php if ( ! empty( $coming_soon ) ) : ?>
		<h2 class="mc-section-title">
			<?php esc_html_e( 'Coming Soon', 'monitor-cat' ); ?>
		</h2>
		<div class="mc-module-grid">
			<?php
			/**
			 * Map coming-soon slugs to pedestal colors.
			 */
			$monitorcat_cs_ped_colors = array(
				'security'  => 'mc-pedestal-lavender',
				'backup'    => 'mc-pedestal-coral',
				'smtp'      => '',
				'redirects' => 'mc-pedestal-pink',
				'scanner'   => 'mc-pedestal-cyan',
			);

			$monitorcat_cs_ico_colors = array(
				'security'  => 'mc-fa-lavender',
				'backup'    => 'mc-fa-coral',
				'smtp'      => 'mc-fa-text',
				'redirects' => 'mc-fa-pink',
				'scanner'   => 'mc-fa-cyan',
			);
			?>
			<?php foreach ( $coming_soon as $monitorcat_cs_slug => $monitorcat_placeholder ) : ?>
				<?php
				$monitorcat_cs_ped = isset( $monitorcat_cs_ped_colors[ $monitorcat_cs_slug ] ) ? $monitorcat_cs_ped_colors[ $monitorcat_cs_slug ] : '';
				$monitorcat_cs_ico = isset( $monitorcat_cs_ico_colors[ $monitorcat_cs_slug ] ) ? $monitorcat_cs_ico_colors[ $monitorcat_cs_slug ] : 'mc-fa-text';
				?>
				<div class="mc-coming-soon-wrap">
					<span class="mc-coming-soon-badge">
						<i class="fa-duotone fa-lock" style="font-size: 0.625rem;"></i>
						<?php esc_html_e( 'Coming Soon', 'monitor-cat' ); ?>
					</span>
					<div class="mc-card mc-module-card mc-coming-soon">
						<div class="mc-card-body">
							<div class="mc-module-card-header">
								<div class="mc-pedestal <?php echo esc_attr( $monitorcat_cs_ped ); ?>">
									<i class="fa-duotone <?php echo esc_attr( $monitorcat_placeholder['icon'] ); ?> <?php echo esc_attr( $monitorcat_cs_ico ); ?>" style="font-size: 1.5rem;"></i>
								</div>
							</div>
							<h3 class="mc-card-title"><?php echo esc_html( $monitorcat_placeholder['name'] ); ?></h3>
							<p class="mc-text-medium"><?php echo esc_html( $monitorcat_placeholder['desc'] ); ?></p>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

</div>
