<?php
/**
 * Contentosapp Studio Standalone Dashboard (AJAX + Skeletons Refined)
 *
 * @package Contentosapp_Studio
 * @since   3.0.0
 */

defined( 'ABSPATH' ) || exit;
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals -- Included admin view; local presentation variables are scoped to this template.

$url_studio_prod = admin_url( 'admin.php?page=costudio-studio&tab=producao' );
$url_studio_hub  = admin_url( 'admin.php?page=costudio-studio&tab=hub' );
$url_settings    = admin_url( 'admin.php?page=costudio-settings' );
$url_license     = admin_url( 'admin.php?page=costudio-license' );
?>

<div class="wrap fos-standalone-wrap" id="fos-dashboard-app">

	<div class="fos-dash-wrap">

		<!-- ── Brand Card Header ─────────────────────────────────────────────── -->
		<?php
		$costudio_header_is_hero = true;
		$costudio_logo_mark_path = COSTUDIO_DIR . 'assets/images/costudio-logo-mark.png';
		$costudio_header_icon_url = COSTUDIO_URL . 'assets/images/costudio-logo-mark.png';
		if ( is_readable( $costudio_logo_mark_path ) && filesize( $costudio_logo_mark_path ) <= 128 * 1024 ) {
			$costudio_header_icon_url = 'data:image/png;base64,' . base64_encode( file_get_contents( $costudio_logo_mark_path ) );
		}
		$costudio_header_right = '<a href="' . esc_url( $url_studio_prod ) . '" class="fos-btn-new">🚀 ' . esc_html__( 'New production', 'contentosapp-studio' ) . '</a>'
			. '<span id="fos-plan-badge" class="cts-badge cts-badge--success fos-skeleton-loading">' . esc_html__( 'AUTO', 'contentosapp-studio' ) . '</span>';
		include __DIR__ . '/../partials/partial-page-header.php';
		?>

		<!-- ── Welcome Banner (hidden by default — shown via JS after wizard exit) ── -->
		<div class="fos-wizard-welcome-banner" id="fos-welcome-banner" style="display:none">
			<div class="fos-wizard-welcome-banner__content">
				<span class="fos-wizard-welcome-banner__icon">🎉</span>
				<div class="fos-wizard-welcome-banner__text">
					<strong><?php esc_html_e('Welcome to Contentosapp Studio!', 'contentosapp-studio'); ?></strong>
					<?php esc_html_e('Your setup is complete. Start your first production whenever you\'re ready.', 'contentosapp-studio'); ?>
				</div>
			</div>
			<div class="fos-wizard-welcome-banner__actions">
				<a href="<?php echo esc_url($url_studio_prod); ?>" class="fos-wizard-welcome-banner__btn">
					🚀 <?php esc_html_e('Start now', 'contentosapp-studio'); ?>
				</a>
				<button type="button" class="fos-wizard-welcome-banner__close" id="fos-dismiss-welcome" title="<?php esc_attr_e('Dismiss', 'contentosapp-studio'); ?>">✕</button>
			</div>
		</div>

		<!-- ── State-dependent Banner Container ──────────────────────────────── -->
		<div id="fos-dash-banner-root"></div>

		<!-- ── Period Filter ────────────────────────────────────────────────── -->
		<div class="fos-dash-period" id="fos-dash-period" role="tablist" aria-label="<?php esc_attr_e( 'Period filter', 'contentosapp-studio' ); ?>">
			<span class="fos-dash-period__label"><?php esc_html_e( 'Period:', 'contentosapp-studio' ); ?></span>
			<button type="button" class="fos-dash-period__pill is-active" data-period="this_month" role="tab" aria-selected="true">
				<?php esc_html_e( 'This month', 'contentosapp-studio' ); ?>
			</button>
			<button type="button" class="fos-dash-period__pill" data-period="last_month" role="tab" aria-selected="false">
				<?php esc_html_e( 'Last month', 'contentosapp-studio' ); ?>
			</button>
			<button type="button" class="fos-dash-period__pill" data-period="last_90" role="tab" aria-selected="false">
				<?php esc_html_e( 'Last 90 days', 'contentosapp-studio' ); ?>
			</button>
			<button type="button" class="fos-dash-period__pill" data-period="all" role="tab" aria-selected="false">
				<?php esc_html_e( 'All time', 'contentosapp-studio' ); ?>
			</button>
		</div>

		<!-- ── Metrics Strip ────────────────────────────────────────────────── -->
		<div class="fos-dash-metrics">
			<div class="fos-dash-metric">
				<div class="fos-dash-metric__label"><?php esc_html_e( 'Articles generated', 'contentosapp-studio' ); ?></div>
				<div class="fos-dash-metric__val"><span class="fos-skeleton-loading">000</span></div>
				<div class="fos-dash-metric__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'Total since install', 'contentosapp-studio' ); ?></span></div>
			</div>
			<div class="fos-dash-metric">
				<div class="fos-dash-metric__label"><?php esc_html_e( 'Published this month', 'contentosapp-studio' ); ?></div>
				<div class="fos-dash-metric__val"><span class="fos-skeleton-loading">00</span></div>
				<div class="fos-dash-metric__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'vs last month', 'contentosapp-studio' ); ?></span></div>
			</div>
			<div class="fos-dash-metric">
				<div class="fos-dash-metric__label"><?php esc_html_e( 'Hours saved', 'contentosapp-studio' ); ?></div>
				<div class="fos-dash-metric__val"><span class="fos-skeleton-loading">000h</span></div>
				<div class="fos-dash-metric__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'articles × 3.7h', 'contentosapp-studio' ); ?></span></div>
			</div>
			<div class="fos-dash-metric fos-dash-metric--dual">
				<div class="fos-dash-metric__label">
					<?php esc_html_e( 'Productions / month', 'contentosapp-studio' ); ?>
					<button type="button" id="fos-dash-sync-quota" class="fos-dash-sync-btn" title="<?php esc_attr_e( 'Sync with server', 'contentosapp-studio' ); ?>">
						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
					</button>
				</div>
				<div class="fos-dash-metric__dual-rows" id="fos-dash-quota-root">
					<div class="fos-dash-metric__val"><span class="fos-skeleton-loading">0 / 5</span></div>
					<div class="fos-dash-metric__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'Service quota', 'contentosapp-studio' ); ?></span></div>
				</div>
			</div>
		</div>

		<!-- ── Main Grid ────────────────────────────────────────────────────── -->
		<div class="fos-dash-main">

			<div class="fos-dash-zone fos-dash-zone-health"><?php esc_html_e( 'System health', 'contentosapp-studio' ); ?></div>
			<div class="fos-dash-zone fos-dash-zone-queue"><?php esc_html_e( 'Production queue', 'contentosapp-studio' ); ?></div>

			<!-- System Health Card -->
			<div class="fos-dash-card fos-dash-card-health">
				<div class="fos-dash-health-grid" id="fos-health-root">
					<div class="fos-dash-health-item">
						<div class="fos-dash-health-item__label"><?php esc_html_e( 'AI Provider', 'contentosapp-studio' ); ?></div>
						<div class="fos-dash-health-item__val"><span class="fos-skeleton-loading">Google Gemini Pro</span></div>
						<div class="fos-dash-health-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'API key saved', 'contentosapp-studio' ); ?></span></div>
					</div>
					<div class="fos-dash-health-item">
						<div class="fos-dash-health-item__label"><?php esc_html_e( 'Image Provider', 'contentosapp-studio' ); ?></div>
						<div class="fos-dash-health-item__val"><span class="fos-skeleton-loading">OpenAI DALL-E 3</span></div>
						<div class="fos-dash-health-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'API key saved', 'contentosapp-studio' ); ?></span></div>
					</div>
					<div class="fos-dash-health-item">
						<div class="fos-dash-health-item__label"><?php esc_html_e( 'Sites connected', 'contentosapp-studio' ); ?></div>
						<div class="fos-dash-health-item__val"><span class="fos-skeleton-loading">1 / 3</span></div>
						<div class="fos-dash-health-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'sites active', 'contentosapp-studio' ); ?></span></div>
					</div>
					<div class="fos-dash-health-item">
						<div class="fos-dash-health-item__label"><?php esc_html_e( 'License', 'contentosapp-studio' ); ?></div>
						<div class="fos-dash-health-item__val"><span class="fos-skeleton-loading"><?php esc_html_e( 'Service status', 'contentosapp-studio' ); ?></span></div>
						<div class="fos-dash-health-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'BYOK remains unlimited', 'contentosapp-studio' ); ?></span></div>
					</div>
				</div>
			</div>

			<!-- Queue Card -->
			<div class="fos-dash-card fos-dash-card-queue">
				<div id="fos-queue-root">
					<?php for($i=0; $i<3; $i++): ?>
					<div class="fos-dash-queue-item">
						<div class="fos-dash-priority" style="background:#e2e8f0"></div>
						<div style="flex:1">
							<div class="fos-dash-queue-item__kw"><span class="fos-skeleton-loading">Placeholder Keyword Title</span></div>
							<div class="fos-dash-queue-item__meta"><span class="fos-skeleton-loading">Site Name · Category</span></div>
						</div>
					</div>
					<?php endfor; ?>
				</div>
				<div class="fos-dash-card__footer">
					<a href="<?php echo esc_url( $url_studio_hub ); ?>" class="fos-dash-card__action">
						<span class="fos-skeleton-loading"><?php esc_html_e( 'View all productions →', 'contentosapp-studio' ); ?></span>
					</a>
				</div>
			</div>

			<div class="fos-dash-zone fos-dash-zone-articles"><?php esc_html_e( 'Recent articles', 'contentosapp-studio' ); ?></div>
			<div class="fos-dash-zone fos-dash-zone-actions"><?php esc_html_e( 'Quick actions', 'contentosapp-studio' ); ?></div>

			<!-- Recent Articles Card -->
			<div class="fos-dash-card fos-dash-card-articles">
				<div class="fos-dash-recent-header">
					<span class="fos-dash-recent-header__icon" aria-hidden="true">📋</span>
					<div id="fos-recent-filters-root" class="fos-dash-recent-header__filters"></div>
					<a href="<?php echo esc_url( $url_studio_hub ); ?>" class="fos-dash-recent-header__link">
						<?php esc_html_e( 'View all', 'contentosapp-studio' ); ?> →
					</a>
				</div>
				<div id="fos-recent-root">
					<table class="fos-dash-recent-table">
						<thead>
							<tr>
								<th class="fos-dash-recent-table__col-title"><?php esc_html_e( 'Article', 'contentosapp-studio' ); ?></th>
								<th class="fos-dash-recent-table__col-site"><?php esc_html_e( 'Site', 'contentosapp-studio' ); ?></th>
								<th class="fos-dash-recent-table__col-priority"><?php esc_html_e( 'Priority', 'contentosapp-studio' ); ?></th>
								<th class="fos-dash-recent-table__col-date"><?php esc_html_e( 'Date', 'contentosapp-studio' ); ?></th>
								<th class="fos-dash-recent-table__col-status"><?php esc_html_e( 'Status', 'contentosapp-studio' ); ?></th>
							</tr>
						</thead>
						<tbody>
							<?php for($i=0; $i<5; $i++): ?>
							<tr>
								<td><span class="fos-skeleton-loading">Recent Article Title Placeholder</span></td>
								<td><span class="fos-skeleton-loading">Site</span></td>
								<td><span class="fos-skeleton-loading">—</span></td>
								<td><span class="fos-skeleton-loading">dd/MM/yyyy</span></td>
								<td><span class="fos-skeleton-loading">Status</span></td>
							</tr>
							<?php endfor; ?>
						</tbody>
					</table>
				</div>
			</div>

			<!-- Quick Actions Card -->
			<div class="fos-dash-card fos-dash-card-actions">
				<div class="fos-dash-actions-grid" id="fos-actions-root">
					<a href="<?php echo esc_url( $url_studio_prod ); ?>" class="fos-dash-action-item">
						<div class="fos-dash-action-item__icon fos-dash-action-item__icon--purple">🚀</div>
						<div>
							<div class="fos-dash-action-item__label"><span class="fos-skeleton-loading"><?php esc_html_e( 'New production', 'contentosapp-studio' ); ?></span></div>
							<div class="fos-dash-action-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'Start pipeline now', 'contentosapp-studio' ); ?></span></div>
						</div>
					</a>
					<a href="<?php echo esc_url( $url_studio_hub ); ?>" class="fos-dash-action-item">
						<div class="fos-dash-action-item__icon fos-dash-action-item__icon--green">📋</div>
						<div>
							<div class="fos-dash-action-item__label"><span class="fos-skeleton-loading"><?php esc_html_e( 'Content Hub', 'contentosapp-studio' ); ?></span></div>
							<div class="fos-dash-action-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'View all articles', 'contentosapp-studio' ); ?></span></div>
						</div>
					</a>
					<a href="<?php echo esc_url( $url_settings ); ?>" class="fos-dash-action-item">
						<div class="fos-dash-action-item__icon fos-dash-action-item__icon--blue">⚙️</div>
						<div>
							<div class="fos-dash-action-item__label"><span class="fos-skeleton-loading"><?php esc_html_e( 'Settings', 'contentosapp-studio' ); ?></span></div>
							<div class="fos-dash-action-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'API, sites, agents', 'contentosapp-studio' ); ?></span></div>
						</div>
					</a>
					<a href="<?php echo esc_url( $url_license ); ?>" class="fos-dash-action-item">
						<div class="fos-dash-action-item__icon fos-dash-action-item__icon--amber">🔑</div>
						<div>
							<div class="fos-dash-action-item__label"><span class="fos-skeleton-loading"><?php esc_html_e( 'License', 'contentosapp-studio' ); ?></span></div>
							<div class="fos-dash-action-item__sub"><span class="fos-skeleton-loading"><?php esc_html_e( 'Service status', 'contentosapp-studio' ); ?></span></div>
						</div>
					</a>
				</div>
			</div>

		</div><!-- .fos-dash-main -->

	</div><!-- .fos-dash-wrap -->

	<?php
	// Sprint B.3 — Buy Extra Quotas modal partial. Stays hidden until
	// window.costudioAddonModal() is called by the dashboard's "+ Buy"
	// button (#fos-dash-addon-buy) on the productions card.
	include __DIR__ . '/partials/modal-buy-addon.php';
	?>

</div><!-- .wrap -->
