<?php
/**
 * Chart empty state component view.
 *
 * Displays a blurred placeholder chart with an overlay message
 * when there's insufficient data to render a chart or graph.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.1.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;

/**
 * Chart Empty State Component View.
 *
 * @since 1.1.0
 */
class ChartEmptyStateComponentView extends AbstractView implements ViewInterface {

	/**
	 * Render the chart empty state component.
	 *
	 * @since 1.1.0
	 *
	 * @param array $args {
	 *     Optional. Array of arguments.
	 *
	 *     @type int    $height          Height of the placeholder in pixels. Default 192.
	 *     @type string $color           Color for the placeholder chart. Default '#3B82F6'.
	 *     @type string $title           Title text for the overlay card. Default 'Not enough data'.
	 *     @type string $description     Description text for the overlay card. Default 'Select a longer date range to see trends.'.
	 *     @type bool   $show_background Whether to show the blurred sparkline background. Default true.
	 *     @type bool   $overlay         Whether to render as overlay only (absolute positioned, frosted glass). Default false.
	 * }
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'height'          => 192,
				'color'           => '#3B82F6',
				'title'           => __( 'Not enough data to show trends', 'rewardswp' ),
				'description'     => __( 'Once you\'ve collected more data, trends will appear here.', 'rewardswp' ),
				'show_background' => true,
				'overlay'         => false,
			]
		);

		// Generate dummy sparkline data - smooth curved wave pattern.
		$dummy_data = [ 120, 135, 155, 170, 160, 145, 150, 170, 200, 225, 240, 230, 215, 225, 250, 275, 290, 280, 265, 275, 300, 320, 310, 295 ];

		$color = (string) $args['color'];

		if ( $args['overlay'] ) :
			// Overlay mode: absolute positioned frosted glass card (for overlaying on existing charts).
			?>
			<div class="absolute inset-0 flex items-center justify-center">
				<div class="bg-white rounded-xl shadow-xl shadow-blue-500/10 px-6 py-4 max-w-xs ring-1 ring-blue-200/30 text-center -mt-10">
					<h3 class="text-base font-semibold text-gray-900">
						<?php echo esc_html( $args['title'] ); ?>
					</h3>
					<p class="mt-1 text-sm text-slate-600">
						<?php echo esc_html( $args['description'] ); ?>
					</p>
				</div>
			</div>
			<?php
		elseif ( $args['show_background'] ) :
			?>
			<div class="relative" style="height: <?php echo esc_attr( $args['height'] ); ?>px;">
				<!-- Blurred placeholder chart using ApexCharts -->
				<div class="blur-[5px] pointer-events-none h-full mask-r-from-90% mask-r-to-100% mask-l-from-90% mask-l-to-100%">
					<div class="sparkline-container preserve-styles h-full animate-reveal-ltr"
						id="chart-empty-state-sparkline-<?php echo esc_attr( wp_unique_id() ); ?>"
						data-sparkline="<?php echo esc_attr( wp_json_encode( $dummy_data ) ); ?>"
						data-sparkline-color="<?php echo esc_attr( $color ); ?>"
						data-sparkline-height="<?php echo esc_attr( $args['height'] ); ?>">
					</div>
				</div>
				<!-- Overlay message card -->
				<div class="absolute inset-0 flex items-center justify-center">
					<div class="bg-white/60 rounded-xl shadow-xl shadow-blue-500/10 px-6 py-4 max-w-xs ring-1 ring-blue-200/30 text-center">
						<h3 class="text-base font-semibold text-gray-900">
							<?php echo esc_html( $args['title'] ); ?>
						</h3>
						<p class="mt-1 text-sm text-slate-600">
							<?php echo esc_html( $args['description'] ); ?>
						</p>
					</div>
				</div>
			</div>
			<?php
		else :
			?>
			<div class="flex items-center justify-center py-16">
				<div class="bg-white rounded-xl shadow-xl shadow-blue-500/10 px-6 py-4 max-w-xs ring-1 ring-blue-200/30 text-center">
					<h3 class="text-base font-semibold text-gray-900">
						<?php echo esc_html( $args['title'] ); ?>
					</h3>
					<p class="mt-1 text-sm text-slate-600">
						<?php echo esc_html( $args['description'] ); ?>
					</p>
				</div>
			</div>
			<?php
		endif;
	}
}
