@push('styles')
<style>
	.coupon-performance-page { background-color: #f8fafc; min-height: 100vh; padding: 0 10px 10px; }
	.py-8 { padding-bottom: 0.75rem; padding-top: 0; }
	body:has(.coupon-performance-page) .fi-header,
	body:has(.coupon-performance-page) .fi-breadcrumbs,
	body:has(.coupon-performance-page) .fi-page > .fi-section:first-child { margin-top: 0 !important; }
	.coupon-performance-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
	.coupon-page-title { margin: 0 0 4px; font-size: 42px; line-height: 1.05; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; }
	.coupon-filter-card { margin: 0 0 12px; padding-top: 12px; padding-bottom: 12px; }
	.coupon-filter-bar { display: flex; align-items: end; gap: 10px; margin: 0; flex-wrap: wrap; }
	.coupon-filter-field { display: flex; flex-direction: column; gap: 4px; }
	.coupon-filter-label { font-size: 12px; font-weight: 600; color: #64748b; }
	.coupon-date-input { height: 38px; padding: 0 10px; border: 1px solid #dbe4f0; border-radius: 10px; background: #fff; color: #0f172a; font-size: 14px; min-width: 160px; }
	.coupon-filter-btn { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #dbe4f0; background: #fff; color: #334155; font-size: 14px; font-weight: 600; cursor: pointer; }
	.coupon-filter-btn.apply { background: #000; color: #fff; border-color: #000; }
	.coupon-filter-btn.apply:hover { background: #111827; border-color: #111827; }
	.coupon-filter-btn:not(.apply):hover { background: #f8fafc; }
	.coupon-performance-actions { display: flex; align-items: center; gap: 10px; }
	.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid #e2e8f0; background-color: #fff; color: #334155; cursor: pointer; transition: all .2s ease; text-decoration: none; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
	.btn-ghost:hover { background-color: #f8fafc; }
	.coupon-card {
		background: #fff;
		border: 1px solid #e9eef6;
		border-radius: 16px;
		box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
		padding: 18px 20px;
	}
	.coupon-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
	.coupon-top-label { font-size: 16px; line-height: 1.2; font-weight: 600; color: #0f172a; margin: 0 0 14px; }
	.coupon-top-value { margin: 0; font-size: 24px; line-height: 1; font-weight: 700; color: #0f172a; }
	.coupon-last-used { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
	.coupon-calendar-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: #eef4ff; color: #3f6df8; align-items: center; justify-content: center; }
	.coupon-last-used-pill { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 12px; background: #f8fafc; color: #0f172a; font-size: 17px; font-weight: 600; }
	.coupon-performance-card { margin-bottom: 0; }
	.coupon-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
	.coupon-section-title { margin: 0 0 18px; font-size: 38px; line-height: 1.08; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
	.coupon-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.coupon-stat-item { padding: 0 24px; min-height: 104px; }
	.coupon-stat-item:first-child { padding-left: 0; }
	.coupon-stat-item:not(:last-child) { border-right: 1px solid #edf2f7; }
	.coupon-metric-label { font-size: 14px; font-weight: 600; color: #66748b; line-height: 1.3; margin-bottom: 10px; }
	.coupon-metric-value { font-size: 24px; font-weight: 700; line-height: 1.08; color: #0f172a; }
	.coupon-metric-value.is-green { color: #10b981; }
	.coupon-metric-value.is-indigo { color: #6373ff; }
	.coupon-progress-wrap { margin-top: 2px; }
	.coupon-progress { width: 100%; height: 7px; border-radius: 999px; background: #eff3fd; overflow: hidden; }
	.coupon-progress-fill { height: 100%; background: #4976ff; border-radius: 999px; width: 0; transition: width .3s ease; }
	.coupon-trend { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.2; }
	.coupon-trend.is-positive { color: #0e9f6e; }
	.coupon-trend.is-negative { color: #e11d48; }
	.coupon-trend.is-neutral { color: #64748b; }
	.coupon-loading { color: #64748b; font-size: 15px; }
	.coupon-error { color: #dc2626; font-size: 15px; }
	@media (max-width: 1024px) {
		.coupon-page-title { font-size: 34px; }
		.coupon-top-label { font-size: 15px; margin-bottom: 10px; }
		.coupon-top-value { font-size: 22px; }
		.coupon-last-used-pill { font-size: 15px; }
		.coupon-section-title { font-size: 32px; }
		.coupon-metric-label { font-size: 14px; }
		.coupon-metric-value { font-size: 34px; }
		.coupon-trend { font-size: 14px; }
		.coupon-stat-item { padding: 0 16px; min-height: 84px; }
	}
	@media (max-width: 768px) {
		.coupon-performance-header { flex-direction: column; align-items: stretch; }
		.coupon-performance-actions { justify-content: flex-end; }
		.coupon-filter-bar { align-items: stretch; }
		.coupon-top-grid { grid-template-columns: 1fr; }
		.coupon-page-title { font-size: 28px; }
		.coupon-last-used-pill { font-size: 16px; }
		.coupon-section-title { font-size: 26px; }
		.coupon-metric-label { font-size: 16px; }
		.coupon-metric-value { font-size: 26px; }
		.coupon-trend { font-size: 16px; }
		.coupon-insights-grid { grid-template-columns: 1fr; gap: 14px; }
		.coupon-stat-grid { grid-template-columns: 1fr; }
		.coupon-stat-item { padding: 0; min-height: 0; margin-bottom: 12px; }
		.coupon-stat-item:not(:last-child) { border-right: 0; border-bottom: 1px solid #edf2f7; padding-bottom: 10px; }
	}
</style>
@endpush

@php
	$allowedTabs = ['email', 'sms', 'coupons', 'vouchers'];
	$returnTab = request()->query('tab');
	if (!in_array($returnTab, $allowedTabs, true)) {
		$returnTab = 'coupons';
	}
	$returnUrl = route('filament.admin.resources.back-office-admin.index', ['tab' => $returnTab]);
	$couponId = (string) request()->route('id');
	$currentAppId = \App\Helpers\QueryHelper::getAppId();
	$currentRoleId = auth()->user()?->role_id ?? null;
	$encryptedAppId = $currentAppId ? \App\Services\AppIdEncryptionService::encryptForUrl($currentAppId) : null;
@endphp

<x-filament-panels::page>
	<div class="coupon-performance-page">
		<div class="coupon-performance-header">
			<div>
				<x-breadcrumbs :breadcrumbs="$this->getBreadcrumbs()" />
			</div>
			<div class="coupon-performance-actions">
				<a class="btn-ghost" href="{{ $returnUrl }}">
					<span aria-hidden="true">‹</span>
					<span>Back</span>
				</a>
			</div>
		</div>

		<div class="coupon-card coupon-filter-card">
			<div class="coupon-filter-bar">
				<div class="coupon-filter-field">
					<label class="coupon-filter-label" for="coupon-filter-start-date">From Date</label>
					<input id="coupon-filter-start-date" class="coupon-date-input" type="date" value="">
				</div>
				<div class="coupon-filter-field">
					<label class="coupon-filter-label" for="coupon-filter-end-date">To Date</label>
					<input id="coupon-filter-end-date" class="coupon-date-input" type="date" value="">
				</div>
				<button type="button" id="coupon-filter-apply" class="coupon-filter-btn apply">Apply</button>
				<button type="button" id="coupon-filter-clear" class="coupon-filter-btn">Clear</button>
			</div>
		</div>

		<div id="coupon-performance-content">
			<div class="coupon-card">
				<div class="coupon-loading">Loading coupon analytics...</div>
			</div>
		</div>
	</div>
</x-filament-panels::page>

@push('scripts')
<script>
(function () {
	const couponId = String(JSON.parse('{!! json_encode($couponId) !!}') || '').trim();
	const encryptedAppId = JSON.parse('{!! json_encode($encryptedAppId) !!}');
	const roleId = JSON.parse('{!! json_encode($currentRoleId) !!}');
	const startDateInput = document.getElementById('coupon-filter-start-date');
	const endDateInput = document.getElementById('coupon-filter-end-date');
	const applyFilterBtn = document.getElementById('coupon-filter-apply');
	const clearFilterBtn = document.getElementById('coupon-filter-clear');

	let bearerToken = window.API_BEARER_TOKEN ||
		document.querySelector('meta[name="api-bearer-token"]')?.getAttribute('content') ||
		sessionStorage.getItem('api_bearer_token') ||
		localStorage.getItem('api_bearer_token');

	function formatNumber(value) {
		const n = Number(value || 0);
		return Number.isFinite(n) ? n.toLocaleString('en-IN') : '0';
	}

	function formatPercent(value, digits = 1) {
		const n = Number(value || 0);
		if (!Number.isFinite(n)) return '0.0%';
		return n.toFixed(digits) + '%';
	}

	function formatMoney(value, currency = '₹') {
		const n = Number(value || 0);
		if (!Number.isFinite(n)) return `${currency}0`;
		return `${currency}${n.toLocaleString('en-IN', { maximumFractionDigits: 0 })}`;
	}

	function formatDateTime(value) {
		if (!value) return 'Not available';
		let raw = String(value).trim();
		// Normalize malformed timezone offsets like +5:300 -> +05:30
		raw = raw.replace(/([+-])(\d{1,2}):(\d{3})$/, (_, sign, hh, mmm) => {
			const hours = String(hh).padStart(2, '0');
			const minutes = String(mmm).slice(0, 2);
			return `${sign}${hours}:${minutes}`;
		});
		raw = raw.replace(/([+-])(\d{1}):(\d{2})$/, (_, sign, hh, mm) => `${sign}0${hh}:${mm}`);
		const date = new Date(raw);
		if (Number.isNaN(date.getTime())) return 'Not available';
		const parts = new Intl.DateTimeFormat('en-IN', {
			day: '2-digit',
			month: 'short',
			year: 'numeric',
			hour: '2-digit',
			minute: '2-digit',
			hour12: true,
			timeZone: 'UTC',
		}).formatToParts(date);
		const map = {};
		for (const p of parts) {
			map[p.type] = p.value;
		}

		return `${map.day} ${map.month} ${map.year}, ${map.hour}:${map.minute} ${String(map.dayPeriod || '').toUpperCase()}`;
	}

	function getTrendText(trend = {}) {
		const delta = Number(trend.vs_last_month_pct ?? trend.delta_pct ?? 0);
		const abs = Math.abs(delta).toFixed(1);

		if (delta > 0) {
			return { text: `${abs}% vs last month`, klass: 'is-positive' };
		}
		if (delta < 0) {
			return { text: `${abs}% vs last month`, klass: 'is-negative' };
		}
		return { text: '0.0% vs last month', klass: 'is-neutral' };
	}

	async function fetchBearerToken() {
		try {
			const response = await fetch('/admin/api/tokens/current', {
				method: 'GET',
				headers: {
					'Accept': 'application/json',
					'X-Requested-With': 'XMLHttpRequest',
				},
				credentials: 'same-origin',
			});

			if (!response.ok) return null;

			const result = await response.json();
			if (result?.success && result?.token) {
				bearerToken = result.token;
				window.bearerToken = bearerToken;
				sessionStorage.setItem('api_bearer_token', bearerToken);
				return bearerToken;
			}
		} catch (error) {
			console.error('Error fetching bearer token:', error);
		}
		return null;
	}

	function buildApiUrl(endpoint) {
		const url = new URL(endpoint, window.location.origin);
		if (encryptedAppId) {
			url.searchParams.append('app_id', encryptedAppId);
		}
		if (roleId) {
			url.searchParams.append('role_id', roleId);
		}
		const startDate = (startDateInput?.value || '').trim();
		const endDate = (endDateInput?.value || '').trim();
		if (startDate) {
			url.searchParams.append('start_date', startDate);
		}
		if (endDate) {
			url.searchParams.append('end_date', endDate);
		}
		return url;
	}

	function render(payload = {}) {
		const content = document.getElementById('coupon-performance-content');
		if (!content) return;

		const couponCode = payload?.coupon?.code || `Coupon #${payload?.coupon_id || couponId}`;
		const currency = payload.currency_symbol || '₹';
		const trend = getTrendText(payload.trend || {});
		const progressWidth = Math.max(0, Math.min(100, Number(payload.success_rate || 0)));
		const lastUsed = formatDateTime(payload.last_used_at || payload.last_used || payload?.coupon?.last_used_at);

		content.innerHTML = `
			<div class="coupon-top-grid">
				<div class="coupon-card">
					<div class="coupon-top-label">Coupon Code</div>
					<p class="coupon-top-value">${couponCode}</p>
				</div>
				<div class="coupon-card">
					<div class="coupon-top-label">Last Used</div>
					<div class="coupon-last-used">
						<span class="coupon-calendar-icon" aria-hidden="true">
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M8 2V5M16 2V5M3 9H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</span>
						<span class="coupon-last-used-pill">${lastUsed}</span>
					</div>
				</div>
			</div>

			<div class="coupon-insights-grid">
				<div class="coupon-card coupon-performance-card">
					<h2 class="coupon-section-title">Performance</h2>
					<div class="coupon-stat-grid">
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">Total Usage (Hits)</div>
							<div class="coupon-metric-value">${formatNumber(payload.total_usage || 0)}</div>
						</div>
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">Successful Redemptions</div>
							<div class="coupon-metric-value is-green">${formatNumber(payload.successful_redemptions || 0)}</div>
						</div>
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">Success / Redemption Rate</div>
							<div class="coupon-metric-value">${formatPercent(payload.success_rate || 0, 1)}</div>
						</div>
					</div>
					<div class="coupon-progress-wrap">
						<div class="coupon-progress">
							<div class="coupon-progress-fill" style="width:${progressWidth}%;"></div>
						</div>
					</div>
					<div class="coupon-trend ${trend.klass}">${trend.text}</div>
				</div>

				<div class="coupon-card">
					<h2 class="coupon-section-title">Revenue Impact</h2>
					<div class="coupon-stat-grid">
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">Total Discount Given</div>
							<div class="coupon-metric-value">${formatMoney(payload.total_discount_given || 0, currency)}</div>
						</div>
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">Revenue Generated</div>
							<div class="coupon-metric-value is-green">${formatMoney(payload.total_revenue || 0, currency)}</div>
						</div>
						<div class="coupon-stat-item">
							<div class="coupon-metric-label">ROI</div>
							<div class="coupon-metric-value is-indigo">${payload.roi === null ? 'N/A' : formatPercent(payload.roi, 1)}</div>
						</div>
					</div>
				</div>
			</div>
		`;
	}

	function renderError(message) {
		const content = document.getElementById('coupon-performance-content');
		if (!content) return;
		content.innerHTML = `<div class="coupon-card"><div class="coupon-error">${message}</div></div>`;
	}

	async function fetchCouponAnalytics() {
		const token = bearerToken || await fetchBearerToken();
		if (!token) {
			throw new Error('Missing auth token');
		}

		const url = buildApiUrl(`/admin/api/back-office/coupons/analytics/${couponId}`);

		const response = await fetch(url.toString(), {
			method: 'GET',
			headers: {
				'Authorization': 'Bearer ' + token,
				'Accept': 'application/json',
				'X-Requested-With': 'XMLHttpRequest',
			},
			credentials: 'same-origin',
		});

		if (!response.ok) {
			throw new Error(`Analytics request failed with status ${response.status}`);
		}

		const result = await response.json();
		if (result?.success && result?.data) {
			return result.data;
		}

		throw new Error('Analytics payload missing');
	}

	async function loadCouponPerformance() {
		if (!couponId) {
			renderError('Invalid coupon id.');
			return;
		}

		const startDate = (startDateInput?.value || '').trim();
		const endDate = (endDateInput?.value || '').trim();
		if (startDate && endDate && startDate > endDate) {
			renderError('From Date cannot be greater than To Date.');
			return;
		}

		try {
			const data = await fetchCouponAnalytics();
			render(data);
		} catch (error) {
			console.error('Error loading coupon analytics:', error);
			renderError('Failed to load coupon analytics.');
		}
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', loadCouponPerformance);
	} else {
		loadCouponPerformance();
	}

	if (applyFilterBtn) {
		applyFilterBtn.addEventListener('click', loadCouponPerformance);
	}

	if (clearFilterBtn) {
		clearFilterBtn.addEventListener('click', function () {
			if (startDateInput) startDateInput.value = '';
			if (endDateInput) endDateInput.value = '';
			loadCouponPerformance();
		});
	}
})();
</script>
@endpush