<?php
/*
* FormLayer Pro
* https://formlayer.net
* (c) FormLayer Team
*/

namespace FormLayerPro\Settings;

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

class UI{

	static function render_int_card( $name, $desc, $logo, $slug, $tag = '', $connected = false){

		$doc_urls = [
			'mailchimp' => 'https://formlayer.net/doc-article?article=mailchimp',
			'slack' => 'https://formlayer.net/doc-article?article=slack-discord',
			'discord' => 'https://formlayer.net/doc-article?article=slack-discord',
			'sheets' => 'https://formlayer.net/doc-article?article=google-sheets',
			'notion' => 'https://formlayer.net/doc-article?article=notion',
			'trello' => 'https://formlayer.net/doc-article?article=trello',
		];

		$doc_url = isset($doc_urls[$slug]) ? $doc_urls[$slug] : 'https://formlayer.net/docs';

		echo '<div class="formlayer-integration-card" data-slug="' . esc_attr($slug) . '">
			<div class="formlayer-card-header">
				<div class="formlayer-int-icon" style="background:none; padding:0;">
					<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/' . $logo ).'" alt="'.esc_attr($name).'" 
						 style="width:48px; height:48px; object-fit:contain;">
				</div>';

		// Tag
		if(!empty($tag)){
			echo '<span class="formlayer-int-tag">'.esc_html($tag).'</span>';
		}

		echo '</div>
			<h3 class="formlayer-int-title">'.esc_html($name).'</h3>
			<p class="formlayer-int-desc">'.esc_html($desc ).'</p>

			<div class="formlayer-int-footer">';

		// Button
		$all_settings = get_option('formlayer_integration_settings', []);
		$connected = !empty($all_settings[$slug]['enabled']);
		if($connected){
			echo '<button class="formlayer-btn formlayer-btn-outline formlayer-configure-int" data-name="'.esc_attr($name).'" data-slug="'.esc_attr($slug).'">'.esc_html__('Connected', 'formlayer-pro').'</button>';
		} else {
			echo '<button class="formlayer-btn formlayer-btn-action formlayer-configure-int" style="width: 100%;" data-name="'.esc_attr($name).'" data-slug="'.esc_attr($slug).'">'.esc_html__('Configure', 'formlayer-pro').'</button>';
		}

		// Documentation link
		echo '<a href="'.esc_url($doc_url).'" class="formlayer-btn-link" target="_blank" rel="noopener noreferrer">'.esc_html__('Documentation', 'formlayer-pro').'</a>';

		echo '</div>
		</div>';
	}

	static function integrations(){
		// Integration cards
		echo'<div class="formlayer-integrations-grid">';
		self::render_int_card('Slack', __('Receive real-time notifications in your Slack channels whenever a form is submitted.', 'formlayer-pro'), 'slack-logo.png', 'slack', 'MOST POPULAR');

		self::render_int_card('Google Sheets', __('Automatically sync every new entry to a specific spreadsheet. Perfect for reporting.', 'formlayer-pro'), 'sheets-logo.png', 'sheets');

		self::render_int_card('Notion', __('Push form data into your Notion databases or create new pages automatically.', 'formlayer-pro'), 'notion-logo.png', 'notion');

		self::render_int_card('Trello', __('Turn submissions into Trello cards. Ideal for lead management and support.', 'formlayer-pro'), 'trello-logo.png', 'trello');

		self::render_int_card('Mailchimp', __('Subscribe users to your audience lists based on their form inputs.', 'formlayer-pro'), 'mailchimp-logo.png', 'mailchimp');
		
		self::render_int_card('Discord', __('notifications Discord', 'formlayer-pro'), 'discord-logo.png', 'discord');
		
		echo'</div>';
	}

	static function render_form_integrations(){
		echo '<div class="formlayer-pro-form-settings">
			<div class="formlayer-settings-field">
				<label>' . esc_html__('Active Integrations', 'formlayer-pro') . '</label>
				<p class="description" style="margin-bottom: 20px;">' . esc_html__('Enable and configure integrations for this specific form. Form settings override global settings.', 'formlayer-pro') . '</p>
				
				<div id="formlayer-active-integrations-container">
					<!-- Slack -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/slack-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Slack</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-slack-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="slack-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('Override Webhook URL', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-slack-webhook" class="formlayer-input" placeholder="Leave empty to use global webhook">
							</div>
						</div>
					</div>

					<!-- Mailchimp -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/mailchimp-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Mailchimp</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-mailchimp-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="mailchimp-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('Override Audience ID', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-mailchimp-list" class="formlayer-input" placeholder="Leave empty to use global list">
							</div>
						</div>
					</div>

					<!-- Google Sheets -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/sheets-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Google Sheets</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-sheets-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="sheets-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('Spreadsheet ID', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-sheets-id" class="formlayer-input" placeholder="e.g. 1a2b3c4d...">
							</div>
							<div class="formlayer-settings-field" style="margin-top:15px;">
								<label>' . esc_html__('Sheet Name', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-sheets-name" class="formlayer-input" placeholder="e.g. Sheet1">
							</div>
						</div>
					</div>

					<!-- Notion -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/notion-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Notion</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-notion-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="notion-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('Override Database ID', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-notion-db" class="formlayer-input" placeholder="Leave empty to use global database">
							</div>
						</div>
					</div>

					<!-- Trello -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/trello-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Trello</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-trello-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="trello-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('List ID', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-trello-list" class="formlayer-input" placeholder="Enter Trello List ID">
							</div>
						</div>
					</div>

					<!-- Discord -->
					<div class="formlayer-integration-setting-row" style="background:#f8fafc; border:1px solid #f1f5f9; border-radius:12px; padding:20px; margin-bottom:15px;">
						<div style="display:flex; justify-content:space-between; align-items:center;">
							<div style="display:flex; align-items:center; gap:12px;">
								<img src="'.esc_url(FORMLAYER_PRO_ASSETS_URL . '/img/discord-logo.png').'" style="width:32px; height:32px;">
								<span style="font-weight:700; font-size:16px;">Discord</span>
							</div>
							<label class="formlayer-switch">
								<input type="checkbox" id="form-setting-int-discord-enabled">
								<span class="slider round"></span>
							</label>
						</div>
						<div class="integration-row-content" id="discord-integration-fields" style="margin-top:20px; padding-top:20px; border-top:1px solid #edf2f7; display:none;">
							<div class="formlayer-settings-field">
								<label>' . esc_html__('Override Webhook URL', 'formlayer-pro') . '</label>
								<input type="text" id="form-setting-int-discord-webhook" class="formlayer-input" placeholder="Leave empty to use global webhook">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>';
	}

	static function render_modal(){
		echo '<div id="formlayer-integration-modal" class="formlayer-modal-overlay" style="display:none;">
			<div class="formlayer-modal-content" style="max-width: 600px;">
				<div class="formlayer-modal-header" style="border-bottom: 1px solid #f1f5f9; padding-bottom: 20px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center;">
					<div>
						<h3 id="int-modal-title" style="margin: 0; font-size: 22px; font-weight: 700; color: #1e293b;">' . esc_html__('Configure Integration', 'formlayer-pro') . '</h3>
						<p id="int-modal-desc" style="margin: 6px 0 0 0; font-size: 14px; color: #64748b;">' . esc_html__('Enter your credentials to connect.', 'formlayer-pro') . '</p>
					</div>
				</div>
				
				<div id="int-settings-fields" class="formlayer-settings-body">
					<!-- Fields will be injected here via JS -->
				</div>

				<div class="formlayer-modal-footer" style="margin-top: 30px; padding-top: 25px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 12px;">
					<button class="formlayer-btn formlayer-btn-outline" id="close-int-modal">' . esc_html__('Cancel', 'formlayer-pro') . '</button>
					<button class="formlayer-btn formlayer-btn-primary" id="save-int-settings">' . esc_html__('Save & Connect', 'formlayer-pro') . '</button>
				</div>
			</div>
		</div>';
	}

	static function turnstile($settings){

		echo'<div class="pane-header">
			<h4 style="margin: 0; font-size: 15px;">Cloudflare Turnstile Configuration</h4>
			<p>' . esc_html__('Cloudflare Turnstile provides a seamless, non-intrusive CAPTCHA experience. Get your keys from the Cloudflare Dashboard.', 'formlayer-pro') . '</p>
		</div>
		<div class="formlayer-setting-row-v">
			<label>' . esc_html__('Site Key', 'formlayer-pro') . '</label>
			<input type="text" name="captcha_t_site_key" class="formlayer-input" value="' . esc_attr($settings['captcha_t_site_key']) . '" placeholder="Enter your Turnstile site key">
			</div>
			<div class="formlayer-setting-row-v">
			<label>' . esc_html__('Secret Key', 'formlayer-pro') . '</label>
			<input type="password" name="captcha_t_secret_key" class="formlayer-input" value="' . esc_attr($settings['captcha_t_secret_key']) . '" placeholder="••••••••••••••••">
			</div>
			<div class="formlayer-setting-row-v">
			<label>' . esc_html__('Default Theme', 'formlayer-pro') . '</label>
			<select name="captcha_t_theme" class="formlayer-select">
				<option value="light" ' . selected($settings['captcha_t_theme'], 'light', false) . '>Light</option>
				<option value="dark" ' . selected($settings['captcha_t_theme'], 'dark', false) . '>Dark</option>
			</select>
		</div>';
	}

	static function recaptcha($settings){
		echo'<div class="pane-header">
			<h4 style="margin: 0; font-size: 15px;">Google reCAPTCHA Configuration</h4>
			<p>' . esc_html__('Google reCAPTCHA is a widely used spam protection service. Use either v2 keys here.', 'formlayer-pro') . '</p>
		</div>
		<div class="formlayer-setting-row-v">
			<label>' . esc_html__('reCAPTCHA Site Key', 'formlayer-pro') . '</label>
			<input type="text" name="captcha_r_site_key" class="formlayer-input" value="' . esc_attr($settings['captcha_r_site_key']) . '">
		</div>
		<div class="formlayer-setting-row-v">
			<label>' . esc_html__('reCAPTCHA Secret Key', 'formlayer-pro') . '</label>
			<input type="password" name="captcha_r_secret_key" class="formlayer-input" value="' . esc_attr($settings['captcha_r_secret_key']) . '">
		</div>
		<div class="formlayer-setting-row-v">
			<label>' . esc_html__('Default Theme', 'formlayer-pro') . '</label>
			<select name="captcha_r_theme" class="formlayer-select">
				<option value="light" ' . selected($settings['captcha_r_theme'], 'light', false) . '>Light</option>
				<option value="dark" ' . selected($settings['captcha_r_theme'], 'dark', false) . '>Dark</option>
			</select>
		</div>';
	}

	static function tools(){
		$forms = get_posts([
			'post_type' => 'formlayer_form',
			'posts_per_page' => -1,
			'post_status' => 'any'
		]);

		$checkboxes_html = '';
		foreach($forms as $form){
			$display_id = get_post_meta($form->ID, '_formlayer_display_id', true);
			$display_id = $display_id ? $display_id : $form->ID;
			$checkboxes_html .= '
			<label class="formlayer-export-form-checkbox-label" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; user-select: none; transition: all 0.2s;">
				<input type="checkbox" class="formlayer-export-form-checkbox" value="' . esc_attr($form->ID) . '" style="margin: 0; width: 16px; height: 16px; accent-color: #3b82f6;">
				<span style="font-weight: 600; color: #334155; font-size: 13px;">' . esc_html(get_the_title($form->ID)) . '</span>
				<span style="color: #64748b; font-size: 11px; margin-left: auto; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;">ID: #' . esc_html($display_id) . '</span>
			</label>';
		}

		echo '<div class="formlayer-transfer-view">
			<div style="grid-template-columns: 1fr 1fr; gap: 30px;">

				<!-- Export Card -->
				<div class="formlayer-settings-card">
					<div class="formlayer-settings-header">
						<div style="display: flex; align-items: center; gap: 12px;">
							<div style="background: #eff6ff; color: #3b82f6; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
								<span class="dashicons dashicons-external"></span>
							</div>
							<div>
								<h3 style="margin: 0; font-size: 18px; font-weight: 700;">' . esc_html__('Export Forms', 'formlayer-pro') . '</h3>
								<p style="margin: 4px 0 0 0; font-size: 13px; color: var(--formlayer-text-muted);">' . esc_html__('Download your form configurations as a JSON file.', 'formlayer-pro') . '</p>
							</div>
						</div>
					</div>
					<div class="formlayer-settings-body" style="padding: 24px 32px 32px 32px;">
						<div class="formlayer-setting-row-v" style="display: block;">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
								<label style="font-weight: 600; font-size: 14px; color: #334155; margin: 0;">' . esc_html__('Select Forms to Export', 'formlayer-pro') . '</label>
								<div style="display: flex; gap: 8px;">
									<button type="button" class="formlayer-export-select-all button button-small" style="font-size: 11px; height: 26px; line-height: 24px;">' . esc_html__('Select All', 'formlayer-pro') . '</button>
									<button type="button" class="formlayer-export-deselect-all button button-small" style="font-size: 11px; height: 26px; line-height: 24px;">' . esc_html__('Clear', 'formlayer-pro') . '</button>
								</div>
							</div>
							
							<div class="formlayer-export-forms-grid" style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; background: #fafafa; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;">
								' . $checkboxes_html . '
							</div>
							<p class="description">' . esc_html__('Select individual forms using the checkboxes above. If no forms are selected, all forms will be exported by default.', 'formlayer-pro') . '</p>
						</div>
						
						<div style="margin-top: 24px;">
							<button id="formlayer-btn-export-forms" class="formlayer-btn formlayer-btn-primary" style="width: 100%; justify-content: center; height: 42px;">
								<span class="dashicons dashicons-download" style="font-size: 18px; margin-top: 2px;"></span>
								' . esc_html__('Export Selected Forms', 'formlayer-pro') . '
							</button>
						</div>
					</div>
				</div>

				<!-- Import Card -->
				<div class="formlayer-settings-card">
					<div class="formlayer-settings-header">
						<div style="display: flex; align-items: center; gap: 12px;">
							<div style="background: #f0fdf4; color: #22c55e; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
								<span class="dashicons dashicons-upload"></span>
							</div>
							<div>
								<h3 style="margin: 0; font-size: 18px; font-weight: 700;">' . esc_html__('Import Forms', 'formlayer-pro') . '</h3>
								<p style="margin: 4px 0 0 0; font-size: 13px; color: var(--formlayer-text-muted);">' . esc_html__('Upload a FormLayer JSON file to import forms.', 'formlayer-pro') . '</p>
							</div>
						</div>
					</div>
					<div class="formlayer-settings-body" style="padding: 24px 32px 32px 32px;">
						<div class="formlayer-import-dropzone" style="border: 2px dashed #e2e8f0; border-radius: 12px; padding: 40px 20px; text-align: center; background: #f8fafc; cursor: pointer; transition: all 0.2s;" onclick="document.getElementById(\'formlayer-import-file\').click()">
							<span class="dashicons dashicons-cloud-upload" style="font-size: 48px; width: 48px; height: 48px; color: #94a3b8; margin-bottom: 12px;"></span>
							<h4 style="margin: 0; font-size: 15px; color: #475569;">' . esc_html__('Click to browse or drag & drop JSON file', 'formlayer-pro') . '</h4>
							<p style="margin: 8px 0 0 0; font-size: 12px; color: #94a3b8;">' . esc_html__('Only .json files exported from FormLayer are supported.', 'formlayer-pro') . '</p>
							<input type="file" id="formlayer-import-file" style="display: none;" accept=".json">
						</div>
						
						<div id="formlayer-import-file-info" style="margin-top: 15px; display: none; align-items: center; gap: 8px; color: #475569; font-size: 13px; background: #eff6ff; padding: 10px 15px; border-radius: 8px;">
							<span class="dashicons dashicons-media-text" style="color: #3b82f6;"></span>
							<span id="formlayer-import-filename"></span>
							<span class="dashicons dashicons-no-alt" id="formlayer-import-remove" style="margin-left: auto; cursor: pointer; color: #ef4444;" title="' . esc_attr__('Remove', 'formlayer-pro') . '"></span>
						</div>

						<div style="margin-top: 24px;">
							<button id="formlayer-btn-import-forms" class="formlayer-btn formlayer-btn-action" style="width: 100%; justify-content: center; height: 42px;" disabled>
								<span class="dashicons dashicons-migrate" style="font-size: 18px; margin-top: 2px;"></span>
								' . esc_html__('Import Forms Now', 'formlayer-pro') . '
							</button>
						</div>
						
						<div id="formlayer-import-status" style="margin-top: 15px;"></div>
					</div>
				</div>

			</div>
		</div>';
	}

	static function entries(){
		global $wpdb;

		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
		$total_entries = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}formlayer_entries");
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
		$today_entries = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}formlayer_entries WHERE DATE(created_at) = CURDATE()");

		$forms = get_posts([
			'post_type' => 'formlayer_form',
			'posts_per_page' => -1,
			'post_status' => 'any'
		]);

		$page = 1;
		$per_page = 10;
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
		$total_entries = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}formlayer_entries");
		$total_pages = ceil($total_entries / $per_page);
		// phpcs:ignore WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching
		$recent_entries = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}formlayer_entries ORDER BY created_at DESC LIMIT 10");

		echo '<div class="formlayer-entries-view">
			<div class="formlayer-entries-header" style="margin-bottom: 24px;">
				<div class="formlayer-entries-filter-bar">
					<div class="formlayer-entries-filter-left">
						<div class="formlayer-search-wrap formlayer-entries-search-wrapper">
							<span class="dashicons dashicons-search formlayer-entries-search-icon"></span>
							<input type="text" id="formlayer-entries-search" class="formlayer-entries-search-input-el" placeholder="' . esc_attr__('Search entries...', 'formlayer-pro') . '">
						</div>
						<select id="formlayer-entries-filter-form" class="formlayer-select formlayer-select-compact">
							<option value="">' . esc_html__('All Forms', 'formlayer-pro') . '</option>';
								foreach($forms as $form){
									echo '<option value="' . esc_attr($form->ID) . '">' . esc_html(get_the_title($form->ID)) . '</option>';
								}

						echo'</select>
						<select id="formlayer-entries-filter-status" class="formlayer-select formlayer-select-compact">
							<option value="">' . esc_html__('All Status', 'formlayer-pro') . '</option>
							<option value="read">' . esc_html__('Read', 'formlayer-pro') . '</option>
							<option value="unread">' . esc_html__('Unread', 'formlayer-pro') . '</option>
						</select>
					</div>
					<div style="display: flex; gap: 12px;">
						<button id="formlayer-btn-export-entries" class="formlayer-btn formlayer-btn-outline formlayer-export-btn">
							<span class="dashicons dashicons-migrate" style="font-size: 16px; margin-top: 2px;"></span>
							' . esc_html__('Export (CSV)', 'formlayer-pro') . '
						</button>
					</div>
				</div>
			</div>';

		echo '<div class="formlayer-table-card formlayer-entries-table-card">
				<div class="formlayer-entries-table-actions">
					<select id="formlayer-entries-bulk-action" class="formlayer-select formlayer-select-compact" style="min-width: 140px;">
						<option value="">' . esc_html__('Bulk Actions', 'formlayer-pro') . '</option>
						<option value="mark_read">' . esc_html__('Mark as Read', 'formlayer-pro') . '</option>
						<option value="mark_unread">' . esc_html__('Mark as Unread', 'formlayer-pro') . '</option>
						<option value="delete">' . esc_html__('Delete Permanently', 'formlayer-pro') . '</option>
					</select>
					<button id="formlayer-entries-apply-bulk" class="formlayer-btn formlayer-btn-outline" style="height: 34px; padding: 0 15px; font-size: 13px;">' . esc_html__('Apply', 'formlayer-pro') . '</button>
				</div>
				<div style="padding: 30px;">
					<table class="formlayer-table">
						<thead>
							<tr>
								<th style="width: 40px;"><input type="checkbox" id="formlayer-entries-select-all"></th>
								<th>' . esc_html__('ID', 'formlayer-pro') . '</th>
								<th>' . esc_html__('Status', 'formlayer-pro') . '</th>
								<th>' . esc_html__('Form Name', 'formlayer-pro') . '</th>
								<th>' . esc_html__('Submited At', 'formlayer-pro') . '</th>
								<th style="text-align: right; padding-right: 32px;">' . esc_html__('Actions', 'formlayer-pro') . '</th>
							</tr>
						</thead>
						<tbody id="formlayer-entries-tbody">';

		if (empty($recent_entries)) {
			echo '<tr><td colspan="6" style="text-align:center; padding:80px 0; color:var(--formlayer-text-muted);">
					<div style="font-size: 40px; margin-bottom: 20px;">📂</div>
					<div style="font-weight: 600; font-size: 16px;">' . esc_html__('No submissions found', 'formlayer-pro') . '</div>
					<p>' . esc_html__('Wait for your first form submission to see the data here.', 'formlayer-pro') . '</p>
				</td></tr>';
		} else {
			foreach ($recent_entries as $entry) {
				$form = get_post($entry->form_id);
				$form_title = $form ? get_the_title($form->ID) : 'Unknown Form';
				$data_raw = $entry->data;
				$data = json_decode($data_raw, true);

				if ($data === null && !empty($data_raw)) {
					$data = json_decode(stripslashes($data_raw), true);
				}

				$field_labels = \FormLayer\Util::get_form_field_labels($entry->form_id);
				$summary = [];
				if (is_array($data)) {
					foreach (array_slice($data, 0, 6) as $k => $v) {

						if (empty($v) || $k === '__source_url') {
							continue;
						}

						$label = isset($field_labels[$k]) ? $field_labels[$k] : ucfirst(str_replace(['field_', '_'], ['', ' '], $k));

						if(is_array($v)){
							$v = implode(', ', array_map('strval', $v));
						}

						$summary[] = '<strong>' . esc_html($label) . ':</strong> ' . esc_html(mb_strimwidth(wp_strip_all_tags($v), 0, 40, '...'));
					}
				}

				if(empty($summary)){
					$data_html = '<span style="color:#94a3b8; font-style:italic;">' . esc_html__('No displayable data', 'formlayer-pro') . '</span>';
					if (!empty($data_raw)) {
						$data_html = esc_html(mb_strimwidth(wp_strip_all_tags($data_raw), 0, 100, '...'));
					}
				} else {
					$data_html = implode(' <span style="color:#e2e8f0; margin:0 4px;">|</span> ', $summary);
				}

				$status_class = !empty($entry->status) ? $entry->status : 'unread';
				$status_label = ucfirst($status_class);

				echo'<tr data-entry-id="' . esc_attr($entry->id) . '" class="entry-row-' . esc_attr($status_class) . '">
						<td><input type="checkbox" class="entry-cb" value="' . esc_attr($entry->id) . '"></td>
						<td style="color: #64748b; font-weight: 500;">#' . esc_html($entry->id) . '</td>
						<td><span class="formlayer-badge status-' . esc_attr($status_class) . '">' . esc_html($status_label) . '</span></td>
						<td style="font-weight: 600;">' . esc_html($form_title) . '</td>
						<td style="color: #64748b; font-size: 13px;">' . esc_html(gmdate('M j, Y h:i A', strtotime($entry->created_at))) . '</td>
						<td style="text-align: right; padding-right: 32px;">
							<div class="formlayer-entry-row-actions">
								<button class="formlayer-toggle-status" data-entry-id="' . esc_attr($entry->id) . '" data-status="' . ($status_class === 'read' ? 'unread' : 'read') . '" title="Mark as ' . ($status_class === 'read' ? 'Unread' : 'Read') . '" style="background: none; border: none; color: ' . ($status_class === 'read' ? '#94a3b8' : 'var(--fl-primary)') . '; cursor: pointer; transition: color 0.2s;">
									<span class="dashicons dashicons-' . ($status_class === 'read' ? 'marker' : 'email-alt') . '"></span>
								</button>
								<button class="formlayer-view-entry" data-entry-id="' . esc_attr($entry->id) . '" title="View Details" style="background: none; border: none; color: #94a3b8; cursor: pointer; transition: color 0.2s;">
									<span class="dashicons dashicons-visibility"></span>
								</button>
								<button class="formlayer-delete-entry" data-entry-id="' . esc_attr($entry->id) . '" title="Delete" style="background: none; border: none; color: #94a3b8; cursor: pointer; transition: color 0.2s;">
									<span class="dashicons dashicons-trash"></span>
								</button>
							</div>
						</td>
					</tr>';
			}
		}
		echo '</tbody>
					</table>
				</div>
				<div class="formlayer-table-footer formlayer-table-footer-wrap">
					<div class="formlayer-pagination-info" style="color: #64748b; font-size: 13px;">
						Showing <span id="formlayer-entries-count-current">' . count($recent_entries) . '</span> of <span id="formlayer-entries-total">' . intval($total_entries) . '</span> entries
					</div>
					<div class="formlayer-pagination-controls" data-total-pages="'.esc_html($total_pages).'" style="display: flex; gap: 8px;">
						<button id="formlayer-pagination-prev" class="formlayer-btn formlayer-btn-outline" style="padding: 0 12px; height: 32px;" disabled><span class="dashicons dashicons-arrow-left-alt2"></span> Prev</button>
						<button id="formlayer-pagination-next" class="formlayer-btn formlayer-btn-outline" style="padding: 0 12px; height: 32px;" ' . ($total_pages <= 1 ? 'disabled' : '') . '>Next <span class="dashicons dashicons-arrow-right-alt2"></span></button>
					</div>
				</div>
			</div>
		</div>';
	}

	static function reports(){
		global $wpdb;

		$forms = get_posts([
			'post_type' => 'formlayer_form',
			'posts_per_page' => -1,
			'post_status' => 'any'
		]);

		echo '<div class="formlayer-reports-view">
			<!-- Consistent Filter Bar Layout -->
			<div class="formlayer-reports-filter-bar" style="margin-bottom: 24px;">
				<div class="formlayer-reports-filter-left" style="display: flex; align-items: center; gap: 15px;">
					<span class="dashicons dashicons-filter" style="color: var(--formlayer-text-muted); font-size: 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;"></span>
					<select id="formlayer-reports-filter-form" class="formlayer-select formlayer-select-compact" style="min-width: 200px; height: 38px;">
						<option value="">' . esc_html__('All Forms', 'formlayer-pro') . '</option>';
						foreach($forms as $form){
							echo '<option value="' . esc_attr($form->ID) . '">' . esc_html(get_the_title($form->ID)) . '</option>';
						}
					echo '</select>
					<select id="formlayer-reports-filter-range" class="formlayer-select formlayer-select-compact" style="min-width: 150px; height: 38px;">
						<option value="7">' . esc_html__('Last 7 Days', 'formlayer-pro') . '</option>
						<option value="30" selected>' . esc_html__('Last 30 Days', 'formlayer-pro') . '</option>
						<option value="90">' . esc_html__('Last 90 Days', 'formlayer-pro') . '</option>
						<option value="0">' . esc_html__('All Time', 'formlayer-pro') . '</option>
					</select>
				</div>
			</div>

			<!-- Stat Cards -->
			<div class="formlayer-stats-grid" style="margin-bottom:24px;">
				<div class="formlayer-stat-card stat-total">
					<div class="formlayer-stat-icon"><span class="dashicons dashicons-email-alt"></span></div>
					<div>
						<span class="formlayer-stat-label">' . esc_html__('Total Submissions', 'formlayer-pro') . '</span>
						<span class="formlayer-stat-value" id="reports-stat-total">0</span>
					</div>
				</div>
				<div class="formlayer-stat-card stat-unread">
					<div class="formlayer-stat-icon"><span class="dashicons dashicons-warning"></span></div>
					<div>
						<span class="formlayer-stat-label">' . esc_html__('Unread Entries', 'formlayer-pro') . '</span>
						<span class="formlayer-stat-value" id="reports-stat-unread">0</span>
					</div>
				</div>
				<div class="formlayer-stat-card stat-read">
					<div class="formlayer-stat-icon"><span class="dashicons dashicons-yes-alt"></span></div>
					<div>
						<span class="formlayer-stat-label">' . esc_html__('Read Entries', 'formlayer-pro') . '</span>
						<span class="formlayer-stat-value" id="reports-stat-read">0</span>
					</div>
				</div>
				<div class="formlayer-stat-card stat-conversion">
					<div class="formlayer-stat-icon"><span class="dashicons dashicons-chart-line"></span></div>
					<div>
						<span class="formlayer-stat-label">' . esc_html__('Conversion Rate', 'formlayer-pro') . '</span>
						<span class="formlayer-stat-value" id="reports-stat-conversion">0%</span>
					</div>
				</div>
			</div>

			<!-- Row 1: Trend + Device -->
			<div class="formlayer-reports-charts-grid" style="margin-bottom:24px;">
				<div class="formlayer-reports-chart-card">
					<div class="formlayer-reports-chart-card-header">
						<h3 class="formlayer-reports-chart-card-title">
							<span class="dashicons dashicons-chart-line" style="color:var(--formlayer-primary);"></span>
							' . esc_html__('Submission Trend', 'formlayer-pro') . '
						</h3>
						<div class="formlayer-trend-tabs">
							<button class="formlayer-trend-tab active" data-mode="daily">' . esc_html__('Daily', 'formlayer-pro') . '</button>
							<button class="formlayer-trend-tab" data-mode="weekly">' . esc_html__('Weekly', 'formlayer-pro') . '</button>
							<button class="formlayer-trend-tab" data-mode="monthly">' . esc_html__('Monthly', 'formlayer-pro') . '</button>
						</div>
					</div>
					<div class="formlayer-reports-chart-container"><canvas id="reports-chart-trend"></canvas></div>
				</div>
				<div class="formlayer-reports-chart-card">
					<h3 class="formlayer-reports-chart-card-title">
						<span class="dashicons dashicons-smartphone" style="color:var(--formlayer-primary);"></span>
						' . esc_html__('Device Type', 'formlayer-pro') . '
					</h3>
					<div class="formlayer-reports-chart-container" style="height:200px;"><canvas id="reports-chart-device"></canvas></div>
					<div id="reports-device-legend" class="formlayer-device-legend"></div>
				</div>
			</div>
			
			<div class="formlayer-reports-charts-grid" style="margin-bottom:24px;">
				<div class="formlayer-reports-chart-card">
					<h3 class="formlayer-reports-chart-card-title">
						<span class="dashicons dashicons-forms" style="color:var(--formlayer-primary);"></span>' . esc_html__('Top Performing Forms', 'formlayer-pro') . '
					</h3>
					<div class="formlayer-reports-chart-container"><canvas id="reports-chart-form"></canvas></div>
				</div>
				
				<div class="formlayer-reports-chart-card">
					<h3 class="formlayer-reports-chart-card-title">
						<span class="dashicons dashicons-calendar-alt" style="color:var(--formlayer-primary);"></span>
						' . esc_html__('Submission Heatmap', 'formlayer-pro') . '
					</h3>
					<p style="font-size:12px;color:#94a3b8;margin:-10px 0 14px;">' . esc_html__('Peak engagement days &amp; hours', 'formlayer-pro') . '</p>
					<div id="reports-heatmap-container" class="formlayer-heatmap-wrap"></div>
				</div>
				
			</div>

			<!-- Row 4: Form Performance Table -->
			<div class="formlayer-reports-chart-card" style="margin-bottom:24px;">
				<h3 class="formlayer-reports-chart-card-title">
					<span class="dashicons dashicons-editor-table" style="color:var(--formlayer-primary);"></span>
					' . esc_html__('Form Performance', 'formlayer-pro') . '
				</h3>
				<div style="overflow-x:auto;">
					<table class="formlayer-table formlayer-perf-table">
						<thead><tr>
							<th>' . esc_html__('Form', 'formlayer-pro') . '</th>
							<th>' . esc_html__('Views (est.)', 'formlayer-pro') . '</th>
							<th>' . esc_html__('Submissions', 'formlayer-pro') . '</th>
							<th>' . esc_html__('Conversion', 'formlayer-pro') . '</th>
							<th style="min-width:120px;">' . esc_html__('Rate Bar', 'formlayer-pro') . '</th>
						</tr></thead>
						<tbody id="reports-form-table-body">
							<tr><td colspan="5" style="text-align:center;padding:30px;color:#94a3b8;">' . esc_html__('Loading&hellip;', 'formlayer-pro') . '</td></tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>';
	}
}