<?php
/**
 * Subscription forms list + Alpine-powered builder (designer card + live preview).
 *
 * @package SuiteMkt3k
 */
defined( 'ABSPATH' ) || exit;
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

use SuiteMkt3k\Utils\Sanitizer;

$view    = Sanitizer::get( 'form', 'key' );
$view    = '' !== $view ? $view : 'list';
$forms   = \SuiteMkt3k\Modules\Newsletter\Newsletter_Form::list();
$edit_id = max( 0, (int) Sanitizer::get( 'form_id', 'int' ) );
$updated = Sanitizer::flag( INPUT_GET, 'updated' );

if ( 'edit' === $view ) {
	$existing = $edit_id ? \SuiteMkt3k\Modules\Newsletter\Newsletter_Form::get( $edit_id ) : null;
	$design   = $existing ? (array) ( $existing['design'] ?? array() ) : \SuiteMkt3k\Modules\Newsletter\Newsletter_Form::default_design();

	$fields = (array) ( $design['fields'] ?? array() );
	$has_field = function ( string $key ) use ( $fields ) {
		foreach ( $fields as $f ) {
			if ( ( $f['key'] ?? '' ) === $key ) {
				return true;
			}
		}
		return false;
	};

	$state = wp_json_encode(
		array(
			'name'           => (string) ( $existing['name'] ?? '' ),
			'title'          => (string) ( $design['title'] ?? '' ),
			'description'    => (string) ( $design['description'] ?? '' ),
			'cta_label'      => (string) ( $design['cta_label'] ?? '' ),
			'success_text'   => (string) ( $design['success_text'] ?? '' ),
			'consent_text'   => (string) ( $design['consent_text'] ?? '' ),
			'accent'         => (string) ( $design['accent'] ?? '#2AB2E5' ),
			'text_color'     => (string) ( $design['text_color'] ?? '#0F172A' ),
			'bg_color'       => (string) ( $design['bg_color'] ?? '#FFFFFF' ),
			'border_color'   => (string) ( $design['border_color'] ?? '#E2E8F0' ),
			'cta_text_color' => (string) ( $design['cta_text_color'] ?? '#FFFFFF' ),
			'field_radius'   => (int) ( $design['field_radius'] ?? 8 ),
			'button_radius'  => (int) ( $design['button_radius'] ?? 10 ),
			'show_labels'    => (bool) ( $design['show_labels'] ?? true ),
			'label_name'     => (string) ( $design['label_name'] ?? __( 'Name', 'suitemkt3k' ) ),
			'label_email'    => (string) ( $design['label_email'] ?? __( 'Email', 'suitemkt3k' ) ),
			'label_phone'    => (string) ( $design['label_phone'] ?? __( 'Phone', 'suitemkt3k' ) ),
			'label_birth'    => (string) ( $design['label_birth'] ?? __( 'Birth date', 'suitemkt3k' ) ),
			'show_name'      => (bool) $has_field( 'name' ),
			'show_email'     => true,
			'show_phone'     => (bool) $has_field( 'phone' ),
			'show_birth'     => (bool) $has_field( 'birth_date' ),
		)
	);
	?>
	<div class="wmk-toolbar wmk-card">
		<div class="wmk-toolbar-actions">
			<a class="wmk-btn wmk-btn-ghost" href="<?php echo esc_url( admin_url( 'admin.php?page=suitemkt3k-newsletter&view=forms' ) ); ?>"><?php esc_html_e( 'Back to list', 'suitemkt3k' ); ?></a>
		</div>
	</div>

	<?php if ( $updated ) : ?><div class="wmk-flash wmk-flash-success"><?php esc_html_e( 'Settings saved.', 'suitemkt3k' ); ?></div><?php endif; ?>

	<div class="wmk-designer-grid" x-data='<?php echo esc_attr( $state ); ?>'>
		<form class="wmk-card" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
			<input type="hidden" name="action" value="suitemkt3k_form_save">
			<input type="hidden" name="id" value="<?php echo (int) ( $existing['id'] ?? 0 ); ?>">
			<?php wp_nonce_field( \SuiteMkt3k\Security\Nonces::ADMIN_ACTION ); ?>

			<h3><?php esc_html_e( 'Form designer', 'suitemkt3k' ); ?></h3>
			<p class="wmk-help"><?php esc_html_e( 'Manage marketing contacts captured through coupons and newsletter forms', 'suitemkt3k' ); ?></p>

			<div class="wmk-grid wmk-grid-2">
				<label class="wmk-field"><span><?php esc_html_e( 'Form name (internal)', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" name="name" required x-model="name"></label>
				<label class="wmk-field"><span><?php esc_html_e( 'Title', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" name="design[title]" x-model="title"></label>
				<label class="wmk-field wmk-field-full"><span><?php esc_html_e( 'Description', 'suitemkt3k' ); ?></span>
					<textarea class="wmk-input" name="design[description]" rows="2" x-model="description"></textarea></label>
			</div>

			<h4 style="margin-top:18px;"><?php esc_html_e( 'Fields to show', 'suitemkt3k' ); ?></h4>
			<div class="wmk-toggle-row">
				<label class="wmk-toggle"><input type="checkbox" name="design[show_labels]" value="1" x-model="show_labels"> <?php esc_html_e( 'Show field titles (labels)', 'suitemkt3k' ); ?></label>
			</div>
			<div class="wmk-toggle-row">
				<label class="wmk-toggle"><input type="checkbox" name="design[show_name]" value="1" x-model="show_name"> <?php esc_html_e( 'Show name field', 'suitemkt3k' ); ?></label>
				<template x-if="show_name">
					<input class="wmk-input" name="design[label_name]" x-model="label_name" style="margin-left:28px;max-width:280px;" placeholder="<?php esc_attr_e( 'Field title', 'suitemkt3k' ); ?>">
				</template>
			</div>
			<div class="wmk-toggle-row">
				<label class="wmk-toggle"><input type="checkbox" disabled checked> <?php esc_html_e( 'Show email field', 'suitemkt3k' ); ?> <small class="wmk-help-inline" style="display:inline;margin-left:6px;">(<?php esc_html_e( 'Required', 'suitemkt3k' ); ?>)</small></label>
				<input class="wmk-input" name="design[label_email]" x-model="label_email" style="margin-left:28px;max-width:280px;" placeholder="<?php esc_attr_e( 'Field title', 'suitemkt3k' ); ?>">
			</div>
			<div class="wmk-toggle-row">
				<label class="wmk-toggle"><input type="checkbox" name="design[show_phone]" value="1" x-model="show_phone"> <?php esc_html_e( 'Show phone field', 'suitemkt3k' ); ?></label>
				<template x-if="show_phone">
					<input class="wmk-input" name="design[label_phone]" x-model="label_phone" style="margin-left:28px;max-width:280px;" placeholder="<?php esc_attr_e( 'Field title', 'suitemkt3k' ); ?>">
				</template>
			</div>
			<div class="wmk-toggle-row">
				<label class="wmk-toggle"><input type="checkbox" name="design[show_birth]" value="1" x-model="show_birth"> <?php esc_html_e( 'Show birth date field', 'suitemkt3k' ); ?></label>
				<template x-if="show_birth">
					<input class="wmk-input" name="design[label_birth]" x-model="label_birth" style="margin-left:28px;max-width:280px;" placeholder="<?php esc_attr_e( 'Field title', 'suitemkt3k' ); ?>">
				</template>
			</div>

			<h4 style="margin-top:18px;"><?php esc_html_e( 'Shape', 'suitemkt3k' ); ?></h4>
			<div class="wmk-grid wmk-grid-2">
				<label class="wmk-field"><span><?php esc_html_e( 'Field border radius (px)', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" type="number" min="0" max="40" name="design[field_radius]" x-model.number="field_radius"></label>
				<label class="wmk-field"><span><?php esc_html_e( 'Button border radius (px)', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" type="number" min="0" max="40" name="design[button_radius]" x-model.number="button_radius"></label>
			</div>

			<h4 style="margin-top:18px;"><?php esc_html_e( 'Colors', 'suitemkt3k' ); ?></h4>
			<div class="wmk-grid wmk-grid-2">
				<label class="wmk-field"><span><?php esc_html_e( 'Background color', 'suitemkt3k' ); ?></span>
					<?php \SuiteMkt3k\Admin\UI::color_input( 'design[bg_color]', (string) ( $design['bg_color'] ?? '#FFFFFF' ), 'x-model="bg_color"' ); ?>
				</label>
				<label class="wmk-field"><span><?php esc_html_e( 'Text color', 'suitemkt3k' ); ?></span>
					<?php \SuiteMkt3k\Admin\UI::color_input( 'design[text_color]', (string) ( $design['text_color'] ?? '#0F172A' ), 'x-model="text_color"' ); ?>
				</label>
				<label class="wmk-field"><span><?php esc_html_e( 'Border color', 'suitemkt3k' ); ?></span>
					<?php \SuiteMkt3k\Admin\UI::color_input( 'design[border_color]', (string) ( $design['border_color'] ?? '#E2E8F0' ), 'x-model="border_color"' ); ?>
				</label>
				<label class="wmk-field"><span><?php esc_html_e( 'Button background', 'suitemkt3k' ); ?></span>
					<?php \SuiteMkt3k\Admin\UI::color_input( 'design[accent]', (string) ( $design['accent'] ?? '#2AB2E5' ), 'x-model="accent"' ); ?>
				</label>
				<label class="wmk-field"><span><?php esc_html_e( 'Button text color', 'suitemkt3k' ); ?></span>
					<?php \SuiteMkt3k\Admin\UI::color_input( 'design[cta_text_color]', (string) ( $design['cta_text_color'] ?? '#FFFFFF' ), 'x-model="cta_text_color"' ); ?>
				</label>
			</div>

			<h4 style="margin-top:18px;"><?php esc_html_e( 'Copy', 'suitemkt3k' ); ?></h4>
			<div class="wmk-grid wmk-grid-2">
				<label class="wmk-field"><span><?php esc_html_e( 'CTA label', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" name="design[cta_label]" x-model="cta_label"></label>
				<label class="wmk-field"><span><?php esc_html_e( 'Success message', 'suitemkt3k' ); ?></span>
					<input class="wmk-input" name="design[success_text]" x-model="success_text"></label>
				<label class="wmk-field wmk-field-full"><span><?php esc_html_e( 'Consent text', 'suitemkt3k' ); ?></span>
					<textarea class="wmk-input" name="design[consent_text]" rows="2" x-model="consent_text"></textarea></label>
			</div>

			<div class="wmk-form-actions">
				<button class="wmk-btn wmk-btn-primary" type="submit"><?php esc_html_e( 'Save', 'suitemkt3k' ); ?></button>
			</div>
		</form>

		<div class="wmk-designer-preview">
			<div class="wmk-card">
				<h3><?php esc_html_e( 'Preview', 'suitemkt3k' ); ?></h3>
				<div class="wmk-preview-frame">
					<div class="wmk-preview-form"
						:style="'background:' + bg_color + '; color:' + text_color + '; border: 1px solid ' + border_color + ';'">
						<h3 x-text="title"></h3>
						<p x-text="description"></p>
						<template x-if="show_name">
							<div class="wmk-pf-field">
								<template x-if="show_labels"><label x-text="label_name"></label></template>
								<input type="text"
									:style="'border:1px solid ' + border_color + '; background:transparent; color:' + text_color + '; border-radius:' + field_radius + 'px;'"
									:placeholder="label_name">
							</div>
						</template>
						<div class="wmk-pf-field">
							<template x-if="show_labels"><label><span x-text="label_email"></span> *</label></template>
							<input type="email"
								:style="'border:1px solid ' + border_color + '; background:transparent; color:' + text_color + '; border-radius:' + field_radius + 'px;'"
								:placeholder="label_email">
						</div>
						<template x-if="show_phone">
							<div class="wmk-pf-field">
								<template x-if="show_labels"><label x-text="label_phone"></label></template>
								<input type="tel"
									:style="'border:1px solid ' + border_color + '; background:transparent; color:' + text_color + '; border-radius:' + field_radius + 'px;'"
									:placeholder="label_phone">
							</div>
						</template>
						<template x-if="show_birth">
							<div class="wmk-pf-field">
								<template x-if="show_labels"><label x-text="label_birth"></label></template>
								<input type="date"
									:style="'border:1px solid ' + border_color + '; background:transparent; color:' + text_color + '; border-radius:' + field_radius + 'px;'"
									:placeholder="label_birth">
							</div>
						</template>
						<label class="wmk-pf-consent"><input type="checkbox"><span x-text="consent_text"></span></label>
						<button type="button" class="wmk-pf-cta"
							:style="'background:' + accent + '; color:' + cta_text_color + '; border-radius:' + button_radius + 'px;'"
							x-text="cta_label"></button>
					</div>
				</div>
			</div>

			<div class="wmk-card" style="margin-top:16px;">
				<h3><?php esc_html_e( 'How to embed this form', 'suitemkt3k' ); ?></h3>
				<div class="wmk-instructions">
					<p><?php esc_html_e( 'Save the form and copy the shortcode below. Paste it into any page, post or widget area to publish the form.', 'suitemkt3k' ); ?></p>
					<?php if ( ! empty( $existing['id'] ) ) : ?>
						<p><strong><?php esc_html_e( 'Shortcode:', 'suitemkt3k' ); ?></strong> <code>[suitemkt3k_newsletter_form id="<?php echo (int) $existing['id']; ?>"]</code></p>
					<?php else : ?>
						<p><strong><?php esc_html_e( 'Shortcode:', 'suitemkt3k' ); ?></strong> <code>[suitemkt3k_newsletter_form id="N"]</code> <small>(<?php esc_html_e( 'shortcode appears after the first save with the assigned form ID', 'suitemkt3k' ); ?>)</small></p>
					<?php endif; ?>
					<p><strong><?php esc_html_e( 'PHP usage:', 'suitemkt3k' ); ?></strong> <code>echo do_shortcode( '[suitemkt3k_newsletter_form id="N"]' );</code></p>
					<p><?php esc_html_e( 'Submissions feed the global subscribers list and respect the consent text above.', 'suitemkt3k' ); ?></p>
				</div>
			</div>
		</div>
	</div>
	<?php
	return;
}
?>
<div class="wmk-toolbar wmk-card">
	<div class="wmk-toolbar-actions">
		<a class="wmk-btn wmk-btn-primary" href="<?php echo esc_url( add_query_arg( array( 'view' => 'forms', 'form' => 'edit', 'form_id' => 0 ), admin_url( 'admin.php?page=suitemkt3k-newsletter' ) ) ); ?>">
			<?php esc_html_e( '+ New subscription form', 'suitemkt3k' ); ?>
		</a>
		<a class="wmk-btn wmk-btn-ghost" href="<?php echo esc_url( admin_url( 'admin.php?page=suitemkt3k-newsletter' ) ); ?>"><?php esc_html_e( 'Back to campaigns', 'suitemkt3k' ); ?></a>
	</div>
</div>
<div class="wmk-card">
	<table class="wmk-table">
		<thead><tr>
			<th>#</th>
			<th><?php esc_html_e( 'Name', 'suitemkt3k' ); ?></th>
			<th><?php esc_html_e( 'Shortcode', 'suitemkt3k' ); ?></th>
			<th><?php esc_html_e( 'Created', 'suitemkt3k' ); ?></th>
			<th class="wmk-col-actions"><?php esc_html_e( 'Actions', 'suitemkt3k' ); ?></th>
		</tr></thead>
		<tbody>
			<?php if ( ! $forms ) : ?>
				<tr><td colspan="5" class="wmk-empty"><?php esc_html_e( 'No subscription forms yet.', 'suitemkt3k' ); ?></td></tr>
			<?php endif; ?>
			<?php foreach ( $forms as $f ) : ?>
				<tr>
					<td>#<?php echo esc_html( (string) $f['id'] ); ?></td>
					<td><strong><?php echo esc_html( (string) $f['name'] ); ?></strong></td>
					<td><code>[suitemkt3k_newsletter_form id="<?php echo (int) $f['id']; ?>"]</code></td>
					<td><?php echo esc_html( (string) $f['created_at'] ); ?></td>
					<td class="wmk-col-actions">
						<a class="wmk-icon-btn" href="<?php echo esc_url( add_query_arg( array( 'view' => 'forms', 'form' => 'edit', 'form_id' => (int) $f['id'] ), admin_url( 'admin.php?page=suitemkt3k-newsletter' ) ) ); ?>" title="<?php esc_attr_e( 'Edit', 'suitemkt3k' ); ?>">
							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4v16h16v-7"/><path d="M18.5 2.5a2.12 2.12 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
						</a>
					</td>
				</tr>
			<?php endforeach; ?>
		</tbody>
	</table>
</div>
