<?php
/**
 * Template Builder page — block-based template editor with live preview.
 *
 * @package PrivexPasswordProtect
 */

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

$ppmstr_edit_id  = isset( $_GET['template_id'] ) ? sanitize_key( $_GET['template_id'] ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
$ppmstr_preset   = isset( $_GET['preset'] ) ? sanitize_key( $_GET['preset'] ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
$ppmstr_edit_tpl = null;

if ( $ppmstr_edit_id ) {
	$ppmstr_edit_tpl = PPMSTR_Template_Builder::get_template( $ppmstr_edit_id );
} elseif ( $ppmstr_preset ) {
	$ppmstr_edit_tpl = PPMSTR_Template_Builder::get_template( $ppmstr_preset );
	$ppmstr_edit_id  = '';
}


$ppmstr_settings = PPMSTR_Settings::get_all();

$ppmstr_has_pro         = function_exists( 'ppp_fs' ) && ppp_fs()->can_use_premium_code__premium_only();

// Determine free vs PRO mode based on the template being edited.
$ppmstr_free_tpl_ids    = array( 'preset_minimal', 'preset_minimal_dark' );
$ppmstr_current_tpl_id  = $ppmstr_edit_id ? $ppmstr_edit_id : $ppmstr_preset;
$ppmstr_is_free_mode    = ( $ppmstr_edit_tpl && in_array( $ppmstr_current_tpl_id, $ppmstr_free_tpl_ids, true ) );

// Show overlay if trying to access a PRO template/feature without an active PRO license.
$ppmstr_show_pro_overlay = ! $ppmstr_is_free_mode && ! $ppmstr_has_pro;
?>

<div class="ppmstr-builder-wrap" style="position:relative;">


	<!-- PRO LOCK OVERLAY (for PRO templates) -->
	<?php if ( $ppmstr_show_pro_overlay ) : ?>
	<div id="ppmstr-builder-pro-overlay" style="
		position:absolute;inset:0;z-index:999;
		background:rgba(15,12,35,0.82);
		backdrop-filter:blur(4px);
		display:flex;flex-direction:column;align-items:center;justify-content:center;
		border-radius:16px;gap:16px;
		text-align:center;padding:40px;
	">
		<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#A855F7" stroke-width="1.5">
			<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
		</svg>
		<span class="ppmstr-pro-badge" style="font-size:13px;padding:5px 16px;"><?php esc_html_e( 'PRO Feature', 'privex-password-protect' ); ?></span>
		<h2 style="color:#fff;margin:0;font-size:22px;font-weight:700;"><?php esc_html_e( 'Custom Template Builder', 'privex-password-protect' ); ?></h2>
		<p style="color:rgba(255,255,255,0.65);font-size:14px;max-width:420px;margin:0;">
			<?php esc_html_e( 'Build unlimited fully custom password templates with our drag-and-drop block editor. Upgrade to PRO to unlock this feature.', 'privex-password-protect' ); ?>
		</p>
		<a href="<?php echo esc_url( admin_url( 'admin.php?page=ppmstr-templates' ) ); ?>" class="ppmstr-btn ppmstr-btn--secondary" style="margin-top:8px;">
			<?php esc_html_e( '← Back to Templates', 'privex-password-protect' ); ?>
		</a>
	</div>
	<?php endif; ?>

	<!-- FREE MODE NOTICE BAR (for free templates only) -->
	<?php if ( $ppmstr_is_free_mode && ! $ppmstr_has_pro ) : ?>
	<div id="ppmstr-free-mode-bar" style="
		background:linear-gradient(90deg,#6C5CE7,#A855F7);
		color:#fff;font-size:13px;font-weight:500;
		padding:9px 20px;display:flex;align-items:center;justify-content:space-between;
		border-radius:12px 12px 0 0;gap:12px;
	">
		<span>
			<strong><?php esc_html_e( 'Limited Editing Mode', 'privex-password-protect' ); ?></strong>
			&nbsp;—&nbsp;
			<?php esc_html_e( 'You can edit text and basic colors. Upgrade to PRO to add/remove blocks, use gradients, and build custom templates.', 'privex-password-protect' ); ?>
		</span>
		<span class="ppmstr-pro-badge" style="background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.35);white-space:nowrap;">✦ Upgrade</span>
	</div>
	<?php endif; ?>

	<!-- Top Bar (blurred behind overlay) -->

	<div class="ppmstr-builder-topbar">
		<div class="ppmstr-builder-topbar-left">
			<a href="<?php echo esc_url( admin_url( 'admin.php?page=ppmstr-templates' ) ); ?>" class="ppmstr-builder-back" title="<?php esc_attr_e( 'Back to Templates', 'privex-password-protect' ); ?>">
				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
			</a>
			<input type="text" id="ppmstr-builder-name" class="ppmstr-builder-name-input"
				value="<?php echo esc_attr( $ppmstr_edit_tpl ? $ppmstr_edit_tpl['name'] : '' ); ?>"
				placeholder="<?php esc_attr_e( 'Template Name', 'privex-password-protect' ); ?>" />
		</div>
		<div class="ppmstr-builder-topbar-right">
			<span class="ppmstr-builder-status" id="ppmstr-builder-status"></span>
			<button type="button" class="ppmstr-btn ppmstr-btn--secondary ppmstr-btn--sm" id="ppmstr-builder-save">
				<?php esc_html_e( 'Save Draft', 'privex-password-protect' ); ?>
			</button>
			<button type="button" class="ppmstr-btn ppmstr-btn--primary ppmstr-btn--sm" id="ppmstr-builder-publish">
				<?php esc_html_e( 'Publish & Activate', 'privex-password-protect' ); ?>
			</button>
		</div>
	</div>

	<div class="ppmstr-builder-body">
		<!-- Left: Block Palette + Page Background -->
		<div class="ppmstr-builder-sidebar ppmstr-builder-palette" id="ppmstr-block-palette">
			<h4 class="ppmstr-builder-sidebar-title"><?php esc_html_e( 'Blocks', 'privex-password-protect' ); ?></h4>

			<div class="ppmstr-block-item" data-block-type="logo" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
				<span><?php esc_html_e( 'Logo', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="icon" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
				<span><?php esc_html_e( 'Lock Icon', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="heading" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4v16"/><path d="M18 4v16"/><path d="M6 12h12"/></svg>
				<span><?php esc_html_e( 'Heading', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="description" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>
				<span><?php esc_html_e( 'Description', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="error_message" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
				<span><?php esc_html_e( 'Error Message', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item ppmstr-block-item--required" data-block-type="password_input" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h.01M11 7h6"/></svg>
				<span><?php esc_html_e( 'Password Field', 'privex-password-protect' ); ?></span>
				<span class="ppmstr-block-badge"><?php esc_html_e( 'Required', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item ppmstr-block-item--required" data-block-type="submit_button" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="8" width="18" height="8" rx="2"/></svg>
				<span><?php esc_html_e( 'Submit Button', 'privex-password-protect' ); ?></span>
				<span class="ppmstr-block-badge"><?php esc_html_e( 'Required', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="spacer" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
				<span><?php esc_html_e( 'Spacer', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="divider" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/></svg>
				<span><?php esc_html_e( 'Divider', 'privex-password-protect' ); ?></span>
			</div>

			<div class="ppmstr-block-item" data-block-type="custom_text" draggable="true">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
				<span><?php esc_html_e( 'Custom Text', 'privex-password-protect' ); ?></span>
			</div>

			<!-- Page Background -->
			<h4 class="ppmstr-builder-sidebar-title" style="margin-top:24px;"><?php esc_html_e( 'Page Background', 'privex-password-protect' ); ?></h4>
			<div class="ppmstr-builder-global-styles" id="ppmstr-global-styles">
				<!-- Color & Gradient -->
				<div class="ppmstr-gs-row">
					<label><?php esc_html_e( 'Base Color', 'privex-password-protect' ); ?></label>
					<input type="color" id="ppmstr-gs-bg" value="#F0F2F8" />
				</div>
				
				<div class="ppmstr-gs-row" style="flex-direction:column;align-items:flex-start;gap:8px;padding-top:8px;border-top:1px solid #F0F2F5;">
					<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
						<input type="checkbox" id="ppmstr-gs-bg-grad-enable" /> <?php esc_html_e( 'Enable Gradient', 'privex-password-protect' ); ?>
					</label>
					<div id="ppmstr-gs-bg-grad-controls" style="display:none;width:100%;flex-direction:column;gap:8px;">
						<div style="display:flex;gap:6px;align-items:center;">
							<span style="font-size:11px;color:#6C7293;flex:1;">From</span>
							<input type="color" id="ppmstr-gs-bg-grad-from" value="#F0F2F8" />
							<span style="font-size:11px;color:#6C7293;flex:1;text-align:right;">To</span>
							<input type="color" id="ppmstr-gs-bg-grad-to" value="#FFFFFF" />
						</div>
						<div style="display:flex;gap:6px;align-items:center;">
							<span style="font-size:11px;color:#6C7293;">Angle</span>
							<input type="range" id="ppmstr-gs-bg-grad-angle" min="0" max="360" value="135" style="flex:1;" />
						</div>
					</div>
				</div>

				<!-- BG Image -->
				<div class="ppmstr-gs-row" style="flex-direction:column;align-items:stretch;gap:4px;padding-top:8px;border-top:1px solid #F0F2F5;">
					<label><?php esc_html_e( 'Background Image', 'privex-password-protect' ); ?></label>
					<div style="display:flex;gap:4px;">
						<input type="url" id="ppmstr-gs-bg-image" value="" placeholder="https://..." class="ppmstr-gs-url-input" style="flex:1;" />
						<button type="button" class="ppmstr-btn ppmstr-btn--primary ppmstr-btn--sm" id="ppmstr-gs-bg-upload">
							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom:-2px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
						</button>
					</div>
				</div>

				<!-- Overlay -->
				<div class="ppmstr-gs-row" style="flex-direction:column;align-items:flex-start;gap:8px;padding-top:8px;border-top:1px solid #F0F2F5;">
					<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
						<input type="checkbox" id="ppmstr-gs-bg-overlay-enable" /> <?php esc_html_e( 'Background Overlay', 'privex-password-protect' ); ?>
					</label>
					<div id="ppmstr-gs-bg-overlay-controls" style="display:none;width:100%;flex-direction:column;gap:8px;">
						<div style="display:flex;gap:6px;align-items:center;">
							<span style="font-size:11px;color:#6C7293;flex:1;">Color</span>
							<input type="color" id="ppmstr-gs-bg-overlay-color" value="#000000" />
						</div>
						<div style="display:flex;gap:6px;align-items:center;">
							<span style="font-size:11px;color:#6C7293;">Opacity</span>
							<input type="range" id="ppmstr-gs-bg-overlay-opacity" min="0" max="100" value="50" style="flex:1;" />
						</div>
					</div>
				</div>
			</div>

			<p class="ppmstr-text-muted" style="font-size:11px;margin-top:16px;color:#A0A5B8;">
				<?php esc_html_e( 'Click the card in the canvas to edit card settings (BG, radius, padding, etc.)', 'privex-password-protect' ); ?>
			</p>
		</div>

		<!-- Center: Canvas with Zones -->
		<div class="ppmstr-builder-canvas-wrap">
			<div class="ppmstr-builder-canvas" id="ppmstr-builder-canvas">
				<div class="ppmstr-builder-canvas-bg" id="ppmstr-canvas-bg">
					<!-- Before-card zone -->
					<div class="ppmstr-canvas-zone ppmstr-canvas-zone--before" id="ppmstr-zone-before">
						<div class="ppmstr-zone-placeholder" id="ppmstr-before-empty">
							<?php esc_html_e( 'Drop blocks above card', 'privex-password-protect' ); ?>
						</div>
					</div>

					<!-- Card (clickable to edit settings) -->
					<div class="ppmstr-builder-card" id="ppmstr-canvas-card">
						<div class="ppmstr-builder-empty" id="ppmstr-canvas-empty">
							<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:#CCC">
								<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
							</svg>
							<p><?php esc_html_e( 'Drag blocks here or click to add', 'privex-password-protect' ); ?></p>
						</div>
					</div>

					<!-- After-card zone -->
					<div class="ppmstr-canvas-zone ppmstr-canvas-zone--after" id="ppmstr-zone-after">
						<div class="ppmstr-zone-placeholder" id="ppmstr-after-empty">
							<?php esc_html_e( 'Drop blocks below card', 'privex-password-protect' ); ?>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Right: Block / Card Settings -->
		<div class="ppmstr-builder-sidebar ppmstr-builder-inspector" id="ppmstr-block-inspector">
			<h4 class="ppmstr-builder-sidebar-title"><?php esc_html_e( 'Settings', 'privex-password-protect' ); ?></h4>
			<div id="ppmstr-inspector-content">
				<p class="ppmstr-text-muted" style="font-size:13px; padding:8px 0;">
					<?php esc_html_e( 'Click the card or a block to edit.', 'privex-password-protect' ); ?>
				</p>
			</div>
		</div>
	</div>
</div>
