<?php
/**
 * Admin dashboard page view.
 *
 * @package    100Prints
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$conn_service = new Hundred_Prints_Connection_Service();
$template_service = new Hundred_Prints_Template_Service();
$analytics_service = new Hundred_Prints_Analytics_Service();

$is_connected = $conn_service->is_connected();
$workspace_info = $conn_service->get_workspace_info();

$bundled_count = count( $template_service->get_bundled_templates() );
$cloud_count = count( $template_service->get_cloud_templates() );
$active_blocks_count = $analytics_service->get_active_blocks_count();

$section_actions = [
	[
		'label' => 'Templates',
		'url'   => admin_url( 'admin.php?page=100prints-templates' ),
		'icon'  => 'ph-files',
	],
	[
		'label' => 'Connections',
		'url'   => admin_url( 'admin.php?page=100prints-connections' ),
		'icon'  => 'ph-plugs-connected',
	],
	[
		'label' => 'Analytics',
		'url'   => admin_url( 'admin.php?page=100prints-analytics' ),
		'icon'  => 'ph-chart-bar',
	],
	[
		'label' => 'Settings',
		'url'   => admin_url( 'admin.php?page=100prints-settings' ),
		'icon'  => 'ph-gear',
	],
];

$generation_steps = [
	[
		'icon'  => 'ph-pencil-simple',
		'title' => 'Create or edit a post',
		'copy'  => 'Open the page where visitors should generate a document.',
	],
	[
		'icon'  => 'ph-squares-four',
		'title' => 'Add the 100Prints block',
		'copy'  => 'Place the document card in the content where it belongs.',
	],
	[
		'icon'  => 'ph-file-text',
		'title' => 'Choose a template',
		'copy'  => 'Use bundled templates instantly or synced cloud templates when connected.',
	],
	[
		'icon'  => 'ph-arrows-left-right',
		'title' => 'Map variables',
		'copy'  => 'Connect template fields to post data, site data, or visitor inputs.',
	],
	[
		'icon'  => 'ph-rocket-launch',
		'title' => 'Publish and download',
		'copy'  => 'Visitors see the same polished card and download their generated file.',
	],
];

$connection_steps = [
    [
        'icon'      => 'ph-user-circle',
        'title'     => 'Create Account',
        'copy'      => 'at 100PrintsWithMe',
        'link'      => 'https://100printswith.me/login',
        'link_text' => 'Sign up',
    ],
    [
        'icon'      => 'ph-folder-plus',
        'title'     => 'Create Project',
        'copy'      => 'Organize your templates.',
    ],
    [
        'icon'      => 'ph-gear',
        'title'     => 'API Settings',
        'copy'      => 'Navigate to developer settings.',
    ],
    [
        'icon'      => 'ph-key',
        'title'     => 'Create API Key',
        'copy'      => 'Select type: WordPress.',
    ],
    [
        'icon'      => 'ph-arrows-left-right',
        'title'     => 'Connect & Sync',
        'copy'      => 'Access templates here.',
    ],
];

?>

<div class="wrap hundredp-wrap">
	<?php
	$args = [
		'title'   => 'Dashboard',
		'actions' => $section_actions,
	];
	require HUNDRED_PRINTS_PATH . 'admin/partials/header.php';

	if ( isset( $_GET['welcome'] ) && $_GET['welcome'] == 1 ) :
		?>
		<div class="hundredp-welcome-banner">
			<button class="hundredp-welcome-dismiss" aria-label="<?php esc_attr_e( 'Dismiss', '100prints' ); ?>">
				<i class="ph-bold ph-x"></i>
			</button>
			<h2><i class="ph-bold ph-sparkle" style="color: var(--hundredp-accent)"></i> Welcome to 100Prints Document</h2>
			<p>Generate personalized certificates, ID cards, tickets, and PDFs directly from your WordPress site.</p>
			<div class="hundredp-welcome-banner-actions">
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-templates' ) ); ?>" class="hundredp-btn hundredp-btn-primary">Browse Templates</a>
				<?php if ( ! $is_connected ) : ?>
					<a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-connections' ) ); ?>" class="hundredp-btn hundredp-btn-ghost">Setup Connection</a>
				<?php endif; ?>
			</div>
		</div>
		<?php
	endif;
	?>

<section class="hundredp-dashboard-hero">
    <div class="hundredp-dashboard-hero-copy">
        <span class="hundredp-dashboard-kicker">Document generation workflow</span>
        <h2>Turn a WordPress page into a live document download point.</h2>
        <p>100Prints connects templates, mapped data, and a frontend download card so visitors can generate the right file without leaving your site.</p>
        <div class="hundredp-dashboard-hero-actions">
            <a href="<?php echo esc_url( admin_url( 'post-new.php?post_type=page' ) ); ?>" class="hundredp-btn hundredp-btn-primary">
                <i class="ph-bold ph-plus"></i> New Page
            </a>
            <a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-templates' ) ); ?>" class="hundredp-btn hundredp-btn-ghost">
                <i class="ph-bold ph-files"></i> Browse Templates
            </a>
        </div>
    </div>
    
    <div aria-hidden="true" style="margin-top: 32px; padding: 24px; background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);">
        <div style="position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 1;">
            
            <div style="position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: #EAEAEA; z-index: -1;"></div>
            
            <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default;">
                <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #64748B; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <i class="ph-bold ph-file-plus"></i>
                </div>
                <span style="margin-top: 12px; font-size: 12px; font-weight: 600; color: #0F172A;">1. Create/Edit Post</span>
            </div>
            
            <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default;">
                <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #64748B; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <i class="ph-bold ph-puzzle-piece"></i>
                </div>
                <span style="margin-top: 12px; font-size: 12px; font-weight: 600; color: #0F172A;">2. Add Block</span>
            </div>
            
            <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default;">
                <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #64748B; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <i class="ph-bold ph-layout"></i>
                </div>
                <span style="margin-top: 12px; font-size: 12px; font-weight: 600; color: #0F172A;">3. Select Template</span>
            </div>
            
            <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default;">
                <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #64748B; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <i class="ph-bold ph-git-merge"></i>
                </div>
                <span style="margin-top: 12px; font-size: 12px; font-weight: 600; color: #0F172A;">4. Map Variables</span>
            </div>
            
            <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: default;">
                <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #16A34A; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #16A34A; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
                    <i class="ph-bold ph-paper-plane-tilt"></i>
                </div>
                <span style="margin-top: 12px; font-size: 12px; font-weight: 600; color: #0F172A;">5. Publish Page</span>
            </div>

         </div>
     </div>
	 
</section>
    <?php if ( ! $is_connected ) : ?>
    <section class="hundredp-panel">
        <div class="hundredp-panel-heading">
            <span class="hundredp-step-count">Optional setup</span>
            <h2>Custom Template Setup</h2>
            <p>Connect a workspace when you want to use templates created outside the bundled plugin library.</p>
        </div>
        
        <div style="position: relative; display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; z-index: 1;">
            
            <div style="position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: #EAEAEA; z-index: -1;"></div>
            
            <?php foreach ( $connection_steps as $index => $step ) : ?>
                <div style="flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;">
                    
                    <div style="width: 48px; height: 48px; background: #FFFFFF; border: 2px solid #EAEAEA; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #0F172A; margin-bottom: 12px;">
                        <i class="ph-bold <?php echo esc_attr( $step['icon'] ); ?>"></i>
                    </div>
                    
                    <h3 style="font-size: 13px; font-weight: 600; margin: 0 0 4px 0; color: #0F172A;">
                        <?php echo esc_html( $index + 1 . '. ' . $step['title'] ); ?>
                    </h3>
                    <p style="font-size: 12px; color: #64748B; margin: 0; line-height: 1.4;">
                        <?php echo esc_html( $step['copy'] ); ?>
                    </p>
                    
                    <?php if ( ! empty( $step['link'] ) && ! empty( $step['link_text'] ) ) : ?>
                        <a href="<?php echo esc_url( $step['link'] ); ?>" target="_blank" style="font-size: 11px; font-weight: 600; color: #0369A1; text-decoration: none; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px;">
                            <?php echo esc_html( $step['link_text'] ); ?> <i class="ph-bold ph-arrow-up-right"></i>
                        </a>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div style="margin-top: 32px; text-align: center;">
             <a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-connections' ) ); ?>" class="hundredp-btn hundredp-btn-primary">
                 Go to Connections <i class="ph-bold ph-arrow-right"></i>
             </a>
        </div>
    </section>
<?php endif; ?>
	<section class="hundredp-dashboard-strip" aria-label="<?php esc_attr_e( 'Setup status', '100prints' ); ?>">
		<div>
			<span><?php esc_html_e( 'Bundled templates', '100prints' ); ?></span>
			<strong><?php echo esc_html( $bundled_count ); ?></strong>
		</div>
		<div>
			<span><?php esc_html_e( 'Cloud templates', '100prints' ); ?></span>
			<strong><?php echo esc_html( $is_connected ? $cloud_count : 'Disconnected' ); ?></strong>
		</div>
		<div>
			<span><?php esc_html_e( 'Published blocks', '100prints' ); ?></span>
			<strong><?php echo esc_html( $active_blocks_count ); ?></strong>
		</div>
		<div>
			<span><?php esc_html_e( 'Account', '100prints' ); ?></span>
			<strong><?php echo esc_html( $is_connected ? ( $workspace_info['workspace_name'] ?? 'Connected' ) : 'Not connected' ); ?></strong>
		</div>
	</section>

	<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 24px;">
    
    <section style="background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column;">
        
        <div style="margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #F1F5F9;">
            <div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; background: #F1F5F9; color: #475569;">
                <i class="ph-bold ph-book-open"></i> Quick Reference
            </div>
            <h2 style="font-size: 15px; font-weight: 600; color: #0F172A; margin: 0 0 4px 0;">Document Generation Flow</h2>
            <p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.4;">A reminder of how to deploy templates to your pages.</p>
        </div>
        
        <div style="display: flex; flex-direction: column; gap: 16px;">
            <?php foreach ( $generation_steps as $step ) : ?>
                <div style="display: flex; align-items: flex-start; gap: 12px;">
                    <div style="width: 28px; height: 28px; border-radius: 6px; background: #F8FAFC; border: 1px solid #EAEAEA; display: flex; align-items: center; justify-content: center; color: #0369A1; font-size: 14px; flex-shrink: 0;">
                        <i class="ph-bold <?php echo esc_attr( $step['icon'] ); ?>"></i>
                    </div>
                    <div>
                        <h3 style="font-size: 13px; font-weight: 600; color: #0F172A; margin: 0 0 2px 0;">
                            <?php echo esc_html( $step['title'] ); ?>
                        </h3>
                        <p style="font-size: 12px; color: #64748B; margin: 0;">
                            <?php echo esc_html( $step['copy'] ); ?>
                        </p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
    </section>

    <section style="background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column;">
        
        <div style="margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #F1F5F9;">
            <?php if ( $is_connected ) : ?>
                <div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; background: #EDF3EC; color: #346538;">
                    <div style="width: 6px; height: 6px; border-radius: 50%; background: #16A34A;"></div> Connected
                </div>
                <h2 style="font-size: 15px; font-weight: 600; color: #0F172A; margin: 0 0 4px 0;">Cloud Sync Active</h2>
                <p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.4;">Your workspace is linked. You can pull the latest template updates directly from 100Prints.</p>
            <?php else : ?>
                <div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 6px; margin-bottom: 12px; background: #F1F5F9; color: #475569;">
                    <div style="width: 6px; height: 6px; border-radius: 50%; background: #94A3B8;"></div> Free Mode
                </div>
                <h2 style="font-size: 15px; font-weight: 600; color: #0F172A; margin: 0 0 4px 0;">Unlock Cloud Templates</h2>
                <p style="font-size: 13px; color: #64748B; margin: 0; line-height: 1.4;">Bundled templates are ready. Connect your account only when you want to import custom cloud templates.</p>
            <?php endif; ?>
        </div>
        
        <div style="display: flex; flex-direction: column; gap: 12px; margin-top: auto;">
            <?php if ( $is_connected ) : ?>
                <button type="button" class="hundredp-btn-sync" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 13px; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; background: #0369A1; color: #fff; border: 1px solid #0369A1;">
                    <i class="ph-bold ph-arrows-clockwise"></i> Sync Cloud Templates
                </button>
            <?php else : ?>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-connections' ) ); ?>" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 13px; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; background: #0369A1; color: #fff; border: 1px solid #0369A1;">
                    <i class="ph-bold ph-plugs-connected"></i> Connect Account
                </a>
            <?php endif; ?>
            
            <a href="<?php echo esc_url( admin_url( 'admin.php?page=100prints-templates' ) ); ?>" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 13px; border-radius: 6px; padding: 8px 16px; cursor: pointer; text-decoration: none; width: 100%; box-sizing: border-box; background: transparent; border: 1px solid #EAEAEA; color: #0F172A;">
                <i class="ph-bold ph-file-text"></i> Review Available Templates
            </a>
        </div>
        
    </section>
</div>
</div>
