<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$smallpict_opts   = get_option( 'smallpict_settings', array() );
$smallpict_is_pro = function_exists( 'smallpict_is_pro' ) ? smallpict_is_pro() : false;

// Mock Usage Data (Replace with real API call result passed from Controller)
// In a real scenario, $this->api->get_usage() would populate this.
$smallpict_usage_data = array(
	'plan'     => $smallpict_is_pro ? 'Pro' : 'Free',
	'used_mb'  => 0, // TODO: Fetch from API
	'quota_mb' => $smallpict_is_pro ? 1000 : 200,
);
$smallpict_pct        = ( $smallpict_usage_data['used_mb'] / $smallpict_usage_data['quota_mb'] ) * 100;

function smallpict_sp_val( $opts, $key, $default = '' ) {
	return isset( $opts[ $key ] ) ? esc_attr( $opts[ $key ] ) : $default;
}
?>

<div class="smallpict-wrap">
	
	<div class="smallpict-header">
		<div class="smallpict-logo">
			<div class="sp-icon">⚡</div>
		</div>
		<div class="smallpict-title">
			<h1>SmallPict Optimizer</h1>
			<span class="description">Managed Serverless Image Optimization</span>
		</div>
		<div class="smallpict-status">
			<?php if ( $smallpict_is_pro ) : ?>
				<span class="smallpict-badge pro">Pro Active</span>
			<?php else : ?>
				<span class="smallpict-badge">Free Tier</span>
			<?php endif; ?>
		</div>
	</div>

	<!-- USAGE DASHBOARD -->
	<div class="smallpict-card dashboard-card">
		<div class="card-header">
			<h2>Monthly Usage</h2>
		</div>
		<div class="usage-stats">
			<div class="quota-bar-wrap">
				<div class="quota-bar-fill" style="width: <?php echo esc_attr( min( $smallpict_pct, 100 ) ); ?>%;"></div>
			</div>
			<div class="quota-labels">
				<span><?php echo esc_html( $smallpict_usage_data['used_mb'] ); ?> MB Used</span>
				<span><?php echo esc_html( $smallpict_usage_data['quota_mb'] ); ?> MB Limit</span>
			</div>
		</div>
	</div>

	<form method="post" action="options.php">
		<?php settings_fields( 'smallpict_settings_group' ); ?>
		
		<div class="smallpict-grid">
			<div class="smallpict-left">
				
				<!-- OPTIMIZATION SETTINGS -->
				<div class="smallpict-card">
					<div class="card-header">
						<h2>Optimization Settings</h2>
						<span class="card-subtitle">Configure how your images are processed.</span>
					</div>
					
					<div class="sp-settings-block">
						<div class="form-row">
							<div class="form-col">
								<label>Output Format</label>
								<select name="smallpict_settings[output_format]" style="width:100%;">
									<option value="webp" <?php selected( smallpict_sp_val( $smallpict_opts, 'output_format' ), 'webp' ); ?>>WebP (Default)</option>
									<option value="avif" <?php selected( smallpict_sp_val( $smallpict_opts, 'output_format' ), 'avif' ); ?>>AVIF (Best Compression)</option>
									<option value="jpeg" <?php selected( smallpict_sp_val( $smallpict_opts, 'output_format' ), 'jpeg' ); ?>>JPEG</option>
									<option value="png" <?php selected( smallpict_sp_val( $smallpict_opts, 'output_format' ), 'png' ); ?>>PNG</option>
								</select>
							</div>
							<div class="form-col">
								<label>Compression Mode</label>
								<select name="smallpict_settings[compression_mode]" style="width:100%;">
									<option value="balanced" <?php selected( smallpict_sp_val( $smallpict_opts, 'compression_mode' ), 'balanced' ); ?>>Balanced (Recommended)</option>
									<option value="lossy" <?php selected( smallpict_sp_val( $smallpict_opts, 'compression_mode' ), 'lossy' ); ?>>Lossy (Max Compression)</option>
									<option value="lossless" <?php selected( smallpict_sp_val( $smallpict_opts, 'compression_mode' ), 'lossless' ); ?>>Lossless (Original Quality)</option>
								</select>
							</div>
						</div>

						<div class="form-group" style="margin-top:15px;">
							<label>
								<input type="checkbox" name="smallpict_auto_optimize" value="1" <?php checked( get_option( 'smallpict_auto_optimize' ), 1 ); ?>>
								Automatically optimize new uploads
							</label>
						</div>
					</div>
				</div>

				<div class="save-bar">
					<?php submit_button( 'Save Changes', 'primary large', 'submit', false ); ?>
				</div>
			</div>
			
			<div class="smallpict-right">
				<div class="smallpict-card sp-info-card">
					<h3>About</h3>
					<p>SmallPict v2.0.0<br>
					Running on Managed Cloud.</p>
					<p><a href="#">Documentation</a> | <a href="#">Support</a></p>
				</div>
			</div>

		</div>
	</form>
</div>