<?php
/**
 * File: src/shared/includes/admin/views/view-guide-page.php -> client-sync/includes/admin/views/view-guide-page.php
 * Standalone Guide page combining the Setup Checklist with educational content.
 *
 * @package    ClientSync
 * @subpackage ClientSync/Admin/Views
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Variables passed to this view from Dashboard_Manager::render_guide_page():
 * @var array  $setup_milestones  Data about setup progress, including completion status and URLs.
 * @var array  $guide_tabs        Associative array of tab slug => label (setup_checklist, directions, shortcodes).
 * @var string $active_guide_tab  The currently active tab slug.
 */

// Calculate progress percentage for the setup checklist.
$clisyc_completed_count                = 0;
$clisyc_total_milestones               = 0;
$clisyc_first_incomplete_milestone_key = null;

if ( is_array( $setup_milestones ) ) {
	foreach ( $setup_milestones as $clisyc_key => $clisyc_milestone ) {
		if ( ! ( $clisyc_milestone['is_optional'] ?? false ) ) {
			$clisyc_total_milestones++;
			if ( $clisyc_milestone['is_complete'] ) {
				$clisyc_completed_count++;
			} elseif ( ! $clisyc_first_incomplete_milestone_key ) {
				$clisyc_first_incomplete_milestone_key = $clisyc_key;
			}
		}
	}
}
$clisyc_progress_percentage = ( $clisyc_total_milestones > 0 ) ? round( ( $clisyc_completed_count / $clisyc_total_milestones ) * 100 ) : 100;
if ( $clisyc_progress_percentage > 100 ) {
	$clisyc_progress_percentage = 100;
}

?>
<div class="wrap clisyc-guide-page">
	<h1><?php esc_html_e( 'Client Sync Guide', 'client-sync' ); ?></h1>
	<p class="about-text">
		<?php esc_html_e( 'Your setup progress and a comprehensive walkthrough of Client Sync features.', 'client-sync' ); ?>
	</p>

	<div class="clisyc-docs-banner" style="display: flex; align-items: center; gap: 12px; background: #f0f6fc; border: 1px solid #c8d8e9; border-left: 4px solid #2271b1; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px;">
		<span class="dashicons dashicons-book" style="font-size: 24px; width: 24px; height: 24px; color: #2271b1;"></span>
		<div>
			<strong><?php esc_html_e( 'Full Documentation', 'client-sync' ); ?></strong>
			<span style="margin-left: 4px;">&mdash;</span>
			<span style="margin-left: 4px;">
				<?php esc_html_e( 'Setup guides, shortcode reference, payment configuration, and more.', 'client-sync' ); ?>
			</span>
			<a href="https://github.com/hsojhsoj/client-sync-monorepo/wiki" target="_blank" rel="noopener noreferrer" style="margin-left: 8px; font-weight: 600; text-decoration: none;">
				<?php esc_html_e( 'View Documentation', 'client-sync' ); ?>
				<span class="dashicons dashicons-external" style="font-size: 16px; width: 16px; height: 16px; text-decoration: none; vertical-align: text-bottom;"></span>
			</a>
		</div>
	</div>

	<nav class="nav-tab-wrapper">
		<?php foreach ( $guide_tabs as $clisyc_tab_slug => $clisyc_tab_label ) : ?>
			<a href="?page=clisyc-guide&tab=<?php echo esc_attr( $clisyc_tab_slug ); ?>" class="nav-tab <?php echo $active_guide_tab === $clisyc_tab_slug ? 'nav-tab-active' : ''; ?>">
				<?php echo esc_html( $clisyc_tab_label ); ?>
			</a>
		<?php endforeach; ?>
	</nav>

	<div class="tab-content" style="margin-top: 1em;">

	<?php if ( 'shortcodes' === $active_guide_tab ) : ?>
		<?php include_once clisyc_PLUGIN_DIR . 'includes/admin/views/view-shortcodes-page.php'; ?>

	<?php elseif ( 'directions' === $active_guide_tab ) : ?>

	<?php // ============================================================== ?>
	<?php // DIRECTIONS TAB: Educational content & walkthroughs             ?>
	<?php // ============================================================== ?>

	<?php include_once clisyc_PLUGIN_DIR . 'includes/admin/views/view-directions-page.php'; ?>

	<?php else : ?>

	<?php // ============================================================== ?>
	<?php // SETUP CHECKLIST TAB (default)                                  ?>
	<?php // ============================================================== ?>

	<?php if ( $clisyc_progress_percentage >= 100 ) : ?>
		<div class="clisyc-guide-setup-complete">
			<span class="dashicons dashicons-yes-alt"></span>
			<strong><?php esc_html_e( 'Setup complete!', 'client-sync' ); ?></strong>
			<?php esc_html_e( 'All required steps have been finished. Visit the Directions tab for advanced configuration.', 'client-sync' ); ?>
		</div>
	<?php else : ?>
		<div id="clisyc-setup-progress-section" class="postbox">
			<div class="postbox-header">
				<h2 class="hndle"><?php esc_html_e( 'Setup Checklist', 'client-sync' ); ?></h2>
			</div>
			<div class="inside">
				<p><?php
					/*
					 * translators: %s: The completion percentage number, wrapped in a <strong> tag.
					 */
					$clisyc_progress_text = __( 'You are <strong>%s%%</strong> of the way through the basic setup!', 'client-sync' );
					printf(
						wp_kses(
							$clisyc_progress_text,
							[
								'strong' => [],
							]
						),
						esc_html( $clisyc_progress_percentage )
					);
				?></p>
				<div class="client-sync-progress-bar-container">
					<div class="client-sync-progress-bar" style="width: <?php echo esc_attr( $clisyc_progress_percentage ); ?>%;">
						<?php echo esc_html( $clisyc_progress_percentage ); ?>%
					</div>
				</div>

				<ul class="clisyc-milestone-list">
					<?php foreach ( $setup_milestones as $clisyc_key => $clisyc_milestone ) : ?>
						<li class="clisyc-milestone-item <?php echo $clisyc_milestone['is_complete'] ? 'completed' : 'pending'; ?>">
							<span class="dashicons <?php echo $clisyc_milestone['is_complete'] ? 'dashicons-yes-alt' : 'dashicons-marker'; ?>"></span>
							<strong><?php echo esc_html( $clisyc_milestone['label'] ); ?></strong>
							<?php if ( $clisyc_milestone['is_optional'] ?? false ) : ?>
								<em>(<?php esc_html_e( 'Optional', 'client-sync' ); ?>)</em>
							<?php endif; ?>

							<p class="description"><?php echo wp_kses_post( $clisyc_milestone['description'] ); ?></p>

							<div class="clisyc-milestone-actions">
								<?php if ( ! $clisyc_milestone['is_complete'] ) : ?>
									<a href="<?php echo esc_url( $clisyc_milestone['next_step_url'] ); ?>" class="button button-small <?php echo ( $clisyc_key === $clisyc_first_incomplete_milestone_key ) ? 'button-primary' : 'button-secondary'; ?>">
										<?php echo esc_html( $clisyc_milestone['next_step_label'] ); ?>
									</a>
									<?php if ( $clisyc_milestone['is_manual_completion'] ?? false ) : ?>
										<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" style="display: inline-block; margin-left: 5px;">
											<input type="hidden" name="action" value="clisyc_mark_milestone_complete">
											<input type="hidden" name="milestone_key" value="<?php echo esc_attr( $clisyc_key ); ?>">
											<?php wp_nonce_field( 'clisyc_mark_milestone_' . $clisyc_key ); ?>
											<button type="submit" class="button button-small">
												<?php esc_html_e( 'Mark as Done', 'client-sync' ); ?>
											</button>
										</form>
									<?php endif; ?>
								<?php elseif ( ! empty( $clisyc_milestone['settings_url'] ) ) : ?>
									<a href="<?php echo esc_url( $clisyc_milestone['settings_url'] ); ?>" class="button button-small button-secondary">
										<?php esc_html_e( 'View/Edit Settings', 'client-sync' ); ?>
									</a>
								<?php endif; ?>
							</div>
						</li>
					<?php endforeach; ?>
				</ul>
			</div>
		</div>
	<?php endif; ?>

	<?php endif; // End setup_checklist tab ?>

	</div><?php // End .tab-content ?>
</div>
