import { createSignal, Show } from 'solid-js';
import Button from './Button';
import API from '@util/api';

/**
 * AjaxPress Pro migration banner for the settings app.
 *
 * The settings-app face of Pro_Notice (includes/admin/class-pro-notice.php),
 * which decides who sees it and hands over everything to render through
 * ajaxpress_admin_vars.pro_notice: null means no banner.
 */
export default function ProNotice() {
	const data = window?.ajaxpress_admin_vars?.pro_notice || null;
	const [visible, setVisible] = createSignal(!!data);
	const [dismissing, setDismissing] = createSignal(false);

	const dismiss = async () => {
		setDismissing(true);
		try {
			await API.post('pro-notice/dismiss', {});
		} catch (err) {
			// Hide it anyway; it comes back on the next load if the save failed.
		}
		setVisible(false);
	};

	return (
		<Show when={visible()}>
			<div class="ap-mb-6 ap-rounded-xl ap-border ap-border-amber-200 ap-bg-amber-50 ap-p-4 sm:ap-p-5">
				<div class="ap-flex ap-flex-col sm:ap-flex-row ap-gap-4">
					<div class="ap-flex-shrink-0 ap-w-10 ap-h-10 ap-rounded-lg ap-bg-amber-100 ap-text-amber-700 ap-flex ap-items-center ap-justify-center">
						<svg class="ap-w-5 ap-h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
						</svg>
					</div>

					<div class="ap-flex-1 ap-min-w-0">
						<h3 class="ap-text-sm ap-font-semibold ap-text-slate-900">
							Install AjaxPress Pro to keep your Pro features
						</h3>
						<p class="ap-mt-1 ap-text-sm ap-text-slate-600">
							From AjaxPress 2.4.4, releasing on <strong class="ap-font-semibold ap-text-slate-800">{data.cutoff}</strong>,
							Pro features need the separate AjaxPress Pro plugin, installed and activated. Until then they keep
							working here as they do now.
						</p>
						<p class="ap-mt-1 ap-text-sm ap-text-slate-600">{data.steps}</p>

						<Show when={data.failed}>
							<p class="ap-mt-2 ap-text-sm ap-text-red-600">
								The download could not be started. Get AjaxPress Pro from your account at{' '}
								<a href={data.account_url} target="_blank" rel="noopener noreferrer" class="ap-underline">
									arraystory.com/account
								</a>
								, or contact support.
							</p>
						</Show>

						<div class="ap-mt-4 ap-flex ap-flex-wrap ap-items-center ap-gap-2">
							{/* rel="external": a full page load, not a route inside this app. */}
							<Button a href={data.action_url} rel="external" size="sm">
								{data.action_label}
							</Button>
							<Button variant="ghost" size="sm" onClick={dismiss} disabled={dismissing()}>
								Remind me later
							</Button>
						</div>
					</div>
				</div>
			</div>
		</Show>
	);
}