<?php
/**
 * Contentosapp Studio — Content Hub view (Unified).
 *
 * Single table merging Planning + Productions.
 * Table loaded via AJAX → fosLoadCentralTable()
 *
 * @package Contentosapp_Studio
 * @since   3.1.0
 */
defined( 'ABSPATH' ) || exit;
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals -- Included admin view; local presentation variables are scoped to this template.

$sites_repo = Costudio_Standalone_Sites::get_instance();
$sites      = $sites_repo ? $sites_repo->get_all() : [];

// Standalone: always render the shell immediately (no Module Hub deferred loading).
$defer_central_shell = false;
?>

<div id="fos-content-hub-root" class="fos-content-hub-root"<?php if ( $defer_central_shell ) : ?> aria-busy="true"<?php endif; ?>>

<?php if ( $defer_central_shell ) : ?>
	<?php include COSTUDIO_DIR . 'admin/partials/content-hub-skeleton.php'; ?>
<?php endif; ?>

<div id="fos-content-hub-main" class="fos-content-hub-main"<?php if ( $defer_central_shell ) : ?> hidden<?php endif; ?>>

<div class="fos-hub-card fos-hub-card--table">

	<div class="fos-hub-card__inner">

		<!-- 1st Layer: Pre-header (Context & Global Actions) -->
		<div class="fos-hub-preheader">
			<div class="fos-hub-tabs" id="fos-hub-nav-tabs">
				<button type="button" class="fos-hub-tab is-active" data-filter="all">
					<?php esc_html_e( 'All', 'contentosapp-studio' ); ?>
				</button>
				<button type="button" class="fos-hub-tab" data-filter="planned">
					<?php esc_html_e( 'Planning', 'contentosapp-studio' ); ?>
				</button>
				<button type="button" class="fos-hub-tab" data-filter="producing">
					<?php esc_html_e( 'In Production', 'contentosapp-studio' ); ?>
				</button>
				<button type="button" class="fos-hub-tab" data-filter="completed">
					<?php esc_html_e( 'History', 'contentosapp-studio' ); ?>
				</button>
			</div>

			<div class="fos-hub-preheader__actions">
				<button type="button" id="fos-sync-posts-btn"
					class="cts-btn cts-btn--ghost cts-btn--sm" title="<?php esc_attr_e( 'Sync remote posts status', 'contentosapp-studio' ); ?>">
					🔄 <?php esc_html_e( 'Sync', 'contentosapp-studio' ); ?>
				</button>
				<button type="button" id="fos-export-csv-btn"
					class="cts-btn cts-btn--ghost cts-btn--sm">
					↓ <?php esc_html_e( 'CSV', 'contentosapp-studio' ); ?>
				</button>
				<button type="button" id="fos-add-plan-btn"
					class="cts-btn cts-btn--primary cts-btn--sm">
					+ <?php esc_html_e( 'New idea', 'contentosapp-studio' ); ?>
				</button>
			</div>
		</div>

		<!-- 2nd Layer: Filter Bar (Search & Specific Filters) -->
		<form id="fos-filter-form" class="fos-filter-bar">
			<div class="fos-filter-bar__search-wrap">
				<span class="fos-filter-bar__search-icon">🔍</span>
				<input type="search" id="fos-filter-search" name="search"
					class="cts-input fos-filter-bar__search"
					placeholder="<?php esc_attr_e( 'Search by keyword or title…', 'contentosapp-studio' ); ?>">
			</div>

			<div class="fos-filter-bar__filters">
				<select id="fos-filter-site-key" name="site_key" class="cts-input fos-filter-bar__select">
					<option value=""><?php esc_html_e( 'All sites', 'contentosapp-studio' ); ?></option>
					<?php foreach ( $sites as $key => $cfg ) : ?>
						<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( costudio_site_display_name( $cfg, $key ) ); ?></option>
					<?php endforeach; ?>
				</select>

				<select id="fos-filter-status" name="filter_status" class="cts-input fos-filter-bar__select" aria-label="<?php esc_attr_e( 'Status', 'contentosapp-studio' ); ?>">
					<option value=""><?php esc_html_e( 'Status', 'contentosapp-studio' ); ?></option>
					<option value="planned"><?php esc_html_e( 'Planned', 'contentosapp-studio' ); ?></option>
					<option value="queued"><?php esc_html_e( 'Queued', 'contentosapp-studio' ); ?></option>
					<option value="producing"><?php esc_html_e( 'Producing', 'contentosapp-studio' ); ?></option>
					<option value="published"><?php esc_html_e( 'Published', 'contentosapp-studio' ); ?></option>
					<option value="draft"><?php esc_html_e( 'Draft', 'contentosapp-studio' ); ?></option>
					<option value="error"><?php esc_html_e( 'Failed', 'contentosapp-studio' ); ?></option>
					<option value="cancelled"><?php esc_html_e( 'Cancelled', 'contentosapp-studio' ); ?></option>
				</select>

				<select id="fos-filter-priority" name="filter_priority" class="cts-input fos-filter-bar__select" aria-label="<?php esc_attr_e( 'Priority', 'contentosapp-studio' ); ?>">
					<option value=""><?php esc_html_e( 'Priority', 'contentosapp-studio' ); ?></option>
					<option value="high"><?php esc_html_e( 'High', 'contentosapp-studio' ); ?></option>
					<option value="medium"><?php esc_html_e( 'Medium', 'contentosapp-studio' ); ?></option>
					<option value="low"><?php esc_html_e( 'Low', 'contentosapp-studio' ); ?></option>
				</select>
			</div>
		</form>
	</div> <!-- /.fos-hub-card__inner -->

	<div id="fos-central-table-wrap"></div>

	<!-- ── BULK ACTIONS BAR ─────────────────────────────────────── -->
	<div id="fos-bulk-bar" class="fos-bulk-bar">
		<div class="fos-bulk-bar__count">
			<span class="fos-bulk-bar__count-badge fos-bulk-count-num">0</span>
			<span><?php esc_html_e( 'selected', 'contentosapp-studio' ); ?></span>
		</div>

		<div class="fos-bulk-bar__actions">
			<button type="button" id="fos-bulk-export-btn" class="cts-btn cts-btn--ghost cts-btn--sm" title="<?php esc_attr_e( 'Export to CSV', 'contentosapp-studio' ); ?>">
				↓ <?php esc_html_e( 'CSV', 'contentosapp-studio' ); ?>
			</button>

			<select id="fos-bulk-priority" class="cts-input cts-input--sm" style="min-width: 130px;">
				<option value=""><?php esc_html_e( 'Set priority…', 'contentosapp-studio' ); ?></option>
				<option value="high"><?php esc_html_e( 'High', 'contentosapp-studio' ); ?></option>
				<option value="medium"><?php esc_html_e( 'Medium', 'contentosapp-studio' ); ?></option>
				<option value="low"><?php esc_html_e( 'Low', 'contentosapp-studio' ); ?></option>
			</select>

			<button type="button" id="fos-bulk-delete-btn" class="cts-btn cts-btn--danger cts-btn--sm">
				🗑️ <?php esc_html_e( 'Delete', 'contentosapp-studio' ); ?>
			</button>
		</div>
	</div>
	<!-- /#fos-bulk-bar -->

</div><!-- /.fos-hub-card -->

</div><!-- /#fos-content-hub-main -->

</div><!-- /#fos-content-hub-root -->


<!-- ── PLAN MODAL ────────────────────────────────────────────────────────────── -->
<div id="fos-plan-modal" class="fos-modal fos-modal--plan-idea" style="display:none" role="dialog" aria-modal="true" aria-labelledby="fos-plan-modal-title">
	<div class="fos-modal__box fos-modal__box--plan-idea">

		<div class="fos-modal__header">
			<div class="fos-plan-modal__heading">
				<span class="fos-plan-modal__title-icon" aria-hidden="true">💡</span>
				<h2 id="fos-plan-modal-title" class="fos-modal__title"><?php esc_html_e( 'New content idea', 'contentosapp-studio' ); ?></h2>
			</div>
			<button type="button" id="fos-plan-modal-close" class="fos-modal__close fos-modal__close--text" aria-label="<?php esc_attr_e( 'Close', 'contentosapp-studio' ); ?>">&times;</button>
		</div>

		<form id="fos-plan-form" class="fos-plan-modal__form">
			<input type="hidden" name="plan_id" id="fos-plan-id" value="0">

			<div class="fos-modal__body fos-modal__body--plan-idea">
				<div class="fos-plan-field fos-plan-field--primary">
					<label class="fos-plan-field__label" for="fos-plan-keyword">
						<?php esc_html_e( 'Main keyword', 'contentosapp-studio' ); ?> <span class="fos-plan-field__required">*</span>
					</label>
					<input type="text" id="fos-plan-keyword" name="keyword" class="fos-plan-field__control" required
						placeholder="<?php esc_attr_e( 'e.g. protect whatsapp scams', 'contentosapp-studio' ); ?>">
				</div>

				<div class="fos-plan-field">
					<label class="fos-plan-field__label" for="fos-plan-title">
						<?php esc_html_e( 'Title / angle', 'contentosapp-studio' ); ?> <span class="fos-plan-field__required">*</span>
					</label>
					<div class="fos-plan-ai-input-wrap">
						<input type="text" id="fos-plan-title" name="title" class="fos-plan-field__control" required
							placeholder="<?php esc_attr_e( 'e.g. How to protect your WhatsApp from attacks', 'contentosapp-studio' ); ?>">
						<button type="button" id="fos-plan-title-ai-btn" class="fos-plan-ai-input-btn"
							title="<?php esc_attr_e( 'Suggest with AI', 'contentosapp-studio' ); ?>"
							aria-label="<?php esc_attr_e( 'Suggest with AI', 'contentosapp-studio' ); ?>"
							aria-busy="false">
							<span class="fos-plan-ai-input-btn__icon" aria-hidden="true">✦</span>
							<span class="fos-plan-ai-input-btn__spinner" aria-hidden="true"></span>
						</button>
					</div>
					<p class="fos-plan-field__hint"><?php esc_html_e( 'This will be the article H1 — be specific.', 'contentosapp-studio' ); ?></p>
					<div id="fos-plan-title-suggestions" class="fos-title-suggestions" aria-live="polite" hidden></div>
				</div>

				<div class="fos-plan-field-row">
					<div class="fos-plan-field">
						<label class="fos-plan-field__label" for="fos-plan-site-key">
							<?php esc_html_e( 'Destination site', 'contentosapp-studio' ); ?> <span class="fos-plan-field__required">*</span>
						</label>
						<select id="fos-plan-site-key" name="site_key" class="fos-plan-field__control fos-plan-field__select" required>
							<option value=""><?php esc_html_e( '— Select —', 'contentosapp-studio' ); ?></option>
							<?php foreach ( $sites as $k => $cfg ) : ?>
								<option value="<?php echo esc_attr( $k ); ?>"><?php echo esc_html( costudio_site_display_name( $cfg, $k ) ); ?></option>
							<?php endforeach; ?>
						</select>
					</div>
					<div class="fos-plan-field">
						<label class="fos-plan-field__label" for="fos-plan-category"><?php esc_html_e( 'Category', 'contentosapp-studio' ); ?></label>
						<select id="fos-plan-category" name="category" class="fos-plan-field__control fos-plan-field__select">
							<option value=""><?php esc_html_e( '— Select site first —', 'contentosapp-studio' ); ?></option>
						</select>
					</div>
				</div>

				<div class="fos-plan-field-row">
					<div class="fos-plan-field">
						<label class="fos-plan-field__label" for="fos-plan-date"><?php esc_html_e( 'Planned date', 'contentosapp-studio' ); ?></label>
						<input type="date" id="fos-plan-date" name="planned_date" class="fos-plan-field__control">
					</div>
					<div class="fos-plan-field">
						<label class="fos-plan-field__label" for="fos-plan-priority"><?php esc_html_e( 'Priority', 'contentosapp-studio' ); ?></label>
						<select id="fos-plan-priority" name="priority" class="fos-plan-field__control fos-plan-field__select fos-plan-priority-select fos-plan-priority-select--medium">
							<option value="high"><?php esc_html_e( 'High', 'contentosapp-studio' ); ?></option>
							<option value="medium" selected><?php esc_html_e( 'Medium', 'contentosapp-studio' ); ?></option>
							<option value="low"><?php esc_html_e( 'Low', 'contentosapp-studio' ); ?></option>
						</select>
					</div>
				</div>
			</div><!-- /.fos-modal__body -->

			<div class="fos-modal__footer fos-modal__footer--plan-idea">
				<button type="button" id="fos-plan-modal-cancel" class="cts-btn cts-btn--ghost cts-btn--sm fos-plan-modal__btn-cancel">
					<?php esc_html_e( 'Cancel', 'contentosapp-studio' ); ?>
				</button>
				<button type="submit" id="fos-plan-save-btn" class="cts-btn cts-btn--primary cts-btn--sm">
					<?php esc_html_e( 'Save idea', 'contentosapp-studio' ); ?>
				</button>
			</div>
		</form>
	</div>
</div><!-- /#fos-plan-modal -->
