<?php
/**
 * Form Submissions page template.
 *
 * @package GoValid_QR
 */

defined( 'ABSPATH' ) || exit;

// Only administrators/editors may access this page (defence-in-depth; menu already restricts access).
if ( ! current_user_can( 'edit_posts' ) ) {
	wp_die( esc_html__( 'You do not have permission to access this page.', 'govalid-qr-validator' ) );
}

// $govalid_form_id is pre-set by render_form_submissions_page() after nonce verification.
$govalid_form = $govalid_form_id ? GoValid_Form_Model::get_form( $govalid_form_id ) : null;
?>
<div class="wrap govalid-forms">
	<div class="govalid-page-header">
		<img src="<?php echo esc_url( GOVALID_QR_PLUGIN_URL . 'assets/images/govalid-hero.png' ); ?>"
			 alt="GoValid" class="govalid-page-header-logo" />
		<div style="flex: 1;">
			<h1>
				<?php
				if ( $govalid_form ) {
					/* translators: %s: form title */
					printf( esc_html__( 'Submissions: %s', 'govalid-qr-validator' ), esc_html( $govalid_form->title ) );
				} else {
					esc_html_e( 'Form Submissions', 'govalid-qr-validator' );
				}
				?>
			</h1>
			<p class="govalid-page-subtitle"><?php esc_html_e( 'View and manage form submissions.', 'govalid-qr-validator' ); ?></p>
		</div>
		<div style="display: flex; gap: 8px;">
			<a href="<?php echo esc_url( admin_url( 'admin.php?page=govalid-qr-forms' ) ); ?>"
			   class="button"><?php esc_html_e( 'Back to Forms', 'govalid-qr-validator' ); ?></a>
			<?php if ( $govalid_form_id ) : ?>
				<a href="<?php echo esc_url( add_query_arg( '_wpnonce', wp_create_nonce( 'govalid-admin' ), admin_url( 'admin.php?page=govalid-qr-form-builder&form_id=' . $govalid_form_id ) ) ); ?>"
				   class="button">
					<span class="dashicons dashicons-edit" style="margin-top: 4px;"></span>
					<?php esc_html_e( 'Edit Form', 'govalid-qr-validator' ); ?>
				</a>
				<button type="button" class="button button-primary" onclick="govalidExportCSV(<?php echo (int) $govalid_form_id; ?>)">
					<span class="dashicons dashicons-download" style="margin-top: 4px;"></span>
					<?php esc_html_e( 'Export CSV', 'govalid-qr-validator' ); ?>
				</button>
			<?php endif; ?>
		</div>
	</div>

	<?php if ( ! $govalid_form ) : ?>
		<div class="notice notice-error">
			<p><?php esc_html_e( 'Form not found. Please select a form from the forms list.', 'govalid-qr-validator' ); ?></p>
		</div>
	<?php else : ?>
		<!-- Statistics Dashboard -->
		<div id="govalid-stats-dashboard" data-form-id="<?php echo esc_attr( $govalid_form_id ); ?>" style="margin-bottom: 20px;">
			<!-- Summary Cards -->
			<div class="govalid-stats-cards">
				<div class="govalid-stat-card">
					<div class="govalid-stat-icon" style="background: var(--gv-primary-light); color: var(--gv-primary);">
						<span class="dashicons dashicons-forms"></span>
					</div>
					<div class="govalid-stat-body">
						<span class="govalid-stat-value" id="govalid-stat-total">—</span>
						<span class="govalid-stat-label"><?php esc_html_e( 'Total Submissions', 'govalid-qr-validator' ); ?></span>
					</div>
				</div>
				<div class="govalid-stat-card">
					<div class="govalid-stat-icon" style="background: #f0fdf4; color: var(--gv-success);">
						<span class="dashicons dashicons-calendar-alt"></span>
					</div>
					<div class="govalid-stat-body">
						<span class="govalid-stat-value" id="govalid-stat-today">—</span>
						<span class="govalid-stat-label"><?php esc_html_e( 'Today', 'govalid-qr-validator' ); ?></span>
					</div>
				</div>
				<div class="govalid-stat-card">
					<div class="govalid-stat-icon" style="background: #eff6ff; color: #3b82f6;">
						<span class="dashicons dashicons-chart-bar"></span>
					</div>
					<div class="govalid-stat-body">
						<span class="govalid-stat-value" id="govalid-stat-week">—</span>
						<span class="govalid-stat-label"><?php esc_html_e( 'This Week', 'govalid-qr-validator' ); ?></span>
					</div>
				</div>
				<div class="govalid-stat-card">
					<div class="govalid-stat-icon" style="background: #faf5ff; color: #8b5cf6;">
						<span class="dashicons dashicons-chart-line"></span>
					</div>
					<div class="govalid-stat-body">
						<span class="govalid-stat-value" id="govalid-stat-month">—</span>
						<span class="govalid-stat-label"><?php esc_html_e( 'This Month', 'govalid-qr-validator' ); ?></span>
					</div>
				</div>
			</div>

			<!-- Charts Row: Timeline -->
			<div class="govalid-card govalid-stats-chart-card" style="max-width: none;">
				<h3 class="govalid-stats-chart-title">
					<span class="dashicons dashicons-chart-area"></span>
					<?php esc_html_e( 'Submission Timeline (Last 30 Days)', 'govalid-qr-validator' ); ?>
				</h3>
				<div style="position: relative; height: 260px;">
					<canvas id="govalid-chart-timeline"></canvas>
				</div>
			</div>

			<!-- Dynamic Field Charts + Hourly + Devices (rendered by JS) -->
			<div id="govalid-stats-charts-grid" class="govalid-stats-grid"></div>
		</div>

		<!-- Submissions Table -->
		<div class="govalid-card" style="max-width: none; overflow-x: auto;">
			<div id="govalid-submissions-list" data-form-id="<?php echo esc_attr( $govalid_form_id ); ?>">
				<p class="govalid-loading">
					<span class="dashicons dashicons-update govalid-spin"></span>
					<?php esc_html_e( 'Loading submissions...', 'govalid-qr-validator' ); ?>
				</p>
			</div>
		</div>
	<?php endif; ?>
</div>

