import { Button, ToggleControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { api } from '../api';
import type { PageViewCaptureFields, SetupStatusResponse } from '../types';
import PageViewCaptureSetting from './PageViewCaptureSetting';

type StepStatus = 'complete' | 'active' | 'locked';

function getStepStatus(complete: boolean, previousComplete: boolean): StepStatus {
	if (complete) return 'complete';
	if (previousComplete) return 'active';
	return 'locked';
}

function StepIcon({ status }: { status: StepStatus }): JSX.Element {
	if (status === 'complete') {
		return (
			<span className="mintall-step-icon mintall-step-icon--complete">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
					<circle cx="10" cy="10" r="10" fill="#00a32a" />
					<path
						d="M6 10l3 3 5-5"
						stroke="#fff"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
					/>
				</svg>
			</span>
		);
	}
	if (status === 'active') {
		return (
			<span className="mintall-step-icon mintall-step-icon--active">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
					<circle cx="10" cy="10" r="10" fill="#2271b1" />
					<rect x="6" y="9" width="8" height="2" rx="1" fill="#fff" />
				</svg>
			</span>
		);
	}
	return (
		<span className="mintall-step-icon mintall-step-icon--locked">
			<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
				<circle cx="10" cy="10" r="10" fill="#ddd" />
				<path d="M10 6v0a2 2 0 012 2v1H8V8a2 2 0 012-2z" stroke="#757575" strokeWidth="1.5" />
				<rect x="7" y="9" width="6" height="5" rx="1" fill="#757575" />
			</svg>
		</span>
	);
}

interface CompletionInput {
	syncProducts: boolean;
	autoProtect: boolean;
	visibilityOnProtect: boolean;
	verifyDomain: boolean;
	pageViewCaptureDecided: boolean;
}

function getCompletion(input: CompletionInput) {
	return {
		syncProducts: input.syncProducts,
		autoProtect: input.syncProducts && input.autoProtect,
		visibility: input.syncProducts && input.visibilityOnProtect,
		verifyDomain: input.verifyDomain,
		pageViewCapture: input.pageViewCaptureDecided,
	};
}

function summarizeCompletion(completion: ReturnType<typeof getCompletion>) {
	const values = Object.values(completion);
	const completed = values.filter(Boolean).length;
	return { completed, total: values.length, allComplete: completed === values.length };
}

export default function SetupChecklist(): JSX.Element | null {
	const [status, setStatus] = useState<SetupStatusResponse | null>(null);
	const [loading, setLoading] = useState(true);
	const [collapsed, setCollapsed] = useState(false);
	const [dismissing, setDismissing] = useState(false);
	const [syncingProducts, setSyncingProducts] = useState(false);
	const [autoProtect, setAutoProtect] = useState(false);
	const [visibilityOnProtect, setVisibilityOnProtect] = useState(false);
	const [togglingAutoProtect, setTogglingAutoProtect] = useState(false);
	const [togglingVisibility, setTogglingVisibility] = useState(false);

	useEffect(() => {
		loadStatus();
	}, []);

	const loadStatus = async (): Promise<void> => {
		try {
			const data = await api.get<SetupStatusResponse>('/setup-status');
			setStatus(data);
			setAutoProtect(data.auto_protect);
			setVisibilityOnProtect(data.visibility_on_protect);

			const { allComplete } = summarizeCompletion(
				getCompletion({
					syncProducts: data.steps.sync_products,
					autoProtect: data.auto_protect,
					visibilityOnProtect: data.visibility_on_protect,
					verifyDomain: data.steps.verify_domain,
					pageViewCaptureDecided: data.page_view_capture_decided,
				}),
			);

			if (allComplete) {
				setCollapsed(true);
			}
		} catch {
			// Silently ignore.
		} finally {
			setLoading(false);
		}
	};

	const handleDismiss = async (): Promise<void> => {
		setDismissing(true);
		try {
			await api.post('/setup-status/dismiss');
			setStatus((prev) => (prev ? { ...prev, dismissed: true } : null));
		} catch {
			// Silently ignore.
		} finally {
			setDismissing(false);
		}
	};

	const handleSyncProducts = async (): Promise<void> => {
		setSyncingProducts(true);
		try {
			await api.post('/products/sync');
			// Reload status to reflect new completion state.
			await loadStatus();
		} catch {
			// Silently ignore.
		} finally {
			setSyncingProducts(false);
		}
	};

	const handleToggleAutoProtect = async (enabled: boolean): Promise<void> => {
		setAutoProtect(enabled);
		setTogglingAutoProtect(true);
		try {
			await api.post('/settings', { auto_protect: enabled });
		} catch {
			setAutoProtect(!enabled);
		} finally {
			setTogglingAutoProtect(false);
		}
	};

	const handleToggleVisibility = async (enabled: boolean): Promise<void> => {
		setVisibilityOnProtect(enabled);
		setTogglingVisibility(true);
		try {
			await api.post('/settings', { visibility_on_protect: enabled });
		} catch {
			setVisibilityOnProtect(!enabled);
		} finally {
			setTogglingVisibility(false);
		}
	};

	const handlePageViewCaptureSaved = (value: PageViewCaptureFields): void => {
		setStatus((prev) => (prev ? { ...prev, ...value } : null));
	};

	if (loading) {
		return null;
	}

	if (!status || status.dismissed) {
		return null;
	}

	const { steps } = status;
	const syncComplete = steps.sync_products;
	const verifyDomainComplete = steps.verify_domain;
	const allStepsComplete = syncComplete;

	const {
		completed: completedCount,
		total: totalSteps,
		allComplete,
	} = summarizeCompletion(
		getCompletion({
			syncProducts: syncComplete,
			autoProtect,
			visibilityOnProtect,
			verifyDomain: verifyDomainComplete,
			pageViewCaptureDecided: status.page_view_capture_decided,
		}),
	);

	return (
		<div className="mintall-card mintall-setup-checklist">
			<div className="mintall-setup-header">
				<div className="mintall-setup-header-left">
					<h2 style={{ margin: 0 }}>Setup checklist</h2>
					{allComplete ? (
						<span className="mintall-setup-badge mintall-setup-badge--success">Complete</span>
					) : (
						<span className="mintall-setup-badge mintall-setup-badge--info">
							{completedCount} of {totalSteps}
						</span>
					)}
				</div>
				<div className="mintall-setup-header-right">
					{allComplete && !dismissing && (
						<Button variant="link" onClick={handleDismiss} style={{ marginRight: 8 }}>
							Dismiss
						</Button>
					)}
					<Button variant="link" onClick={() => setCollapsed((c) => !c)}>
						{collapsed ? 'Show' : 'Hide'}
					</Button>
				</div>
			</div>

			{!collapsed && (
				<div className="mintall-setup-steps">
					{/* Step 1: Sync products to Mintall */}
					<div className="mintall-setup-step">
						<div className="mintall-setup-step-icon">
							<StepIcon status={getStepStatus(syncComplete, true)} />
						</div>
						<div className="mintall-setup-step-content">
							<div className="mintall-setup-step-header">
								<h3>Sync products to Mintall</h3>
								{syncComplete && (
									<span className="mintall-setup-badge mintall-setup-badge--success">Done</span>
								)}
							</div>
							{!syncComplete ? (
								<>
									<p className="mintall-setup-step-description">
										Send all published products to Mintall so they exist on the platform. You can
										run this again from Settings whenever you add new products.
									</p>
									<div className="mintall-setup-step-actions">
										<Button
											variant="primary"
											__next40pxDefaultSize
											isBusy={syncingProducts}
											disabled={syncingProducts}
											onClick={handleSyncProducts}
										>
											{syncingProducts ? 'Syncing...' : 'Sync Products'}
										</Button>
									</div>
								</>
							) : (
								<p className="mintall-setup-step-description">
									Products sent to Mintall. Run again from Settings after adding new products.
								</p>
							)}
						</div>
					</div>

					{/* Step 2: Auto-protect your catalog */}
					<div className="mintall-setup-step">
						<div className="mintall-setup-step-icon">
							<StepIcon status={!allStepsComplete ? 'locked' : autoProtect ? 'complete' : 'active'} />
						</div>
						<div className="mintall-setup-step-content">
							<div className="mintall-setup-step-header">
								<h3>Auto-protect your catalog</h3>
								{allStepsComplete && autoProtect && (
									<span className="mintall-setup-badge mintall-setup-badge--success">On</span>
								)}
								{allStepsComplete && !autoProtect && (
									<span className="mintall-setup-badge mintall-setup-badge--warning">Off</span>
								)}
							</div>
							{!allStepsComplete ? (
								<p className="mintall-setup-step-description">Complete the previous steps to unlock.</p>
							) : (
								<>
									<p className="mintall-setup-step-description">
										All current and future products are automatically protected — free.
									</p>
									<div className="mintall-setup-step-actions">
										<ToggleControl
											label=""
											checked={autoProtect}
											disabled={togglingAutoProtect}
											onChange={handleToggleAutoProtect}
											__nextHasNoMarginBottom
										/>
									</div>
								</>
							)}
						</div>
					</div>

					{/* Step 3: Auto AI visibility */}
					<div className="mintall-setup-step">
						<div className="mintall-setup-step-icon">
							<StepIcon
								status={!allStepsComplete ? 'locked' : visibilityOnProtect ? 'complete' : 'active'}
							/>
						</div>
						<div className="mintall-setup-step-content">
							<div className="mintall-setup-step-header">
								<h3>Auto AI visibility</h3>
								{allStepsComplete && visibilityOnProtect && (
									<span className="mintall-setup-badge mintall-setup-badge--success">On</span>
								)}
								{allStepsComplete && !visibilityOnProtect && (
									<span className="mintall-setup-badge mintall-setup-badge--warning">Off</span>
								)}
							</div>
							{!allStepsComplete ? (
								<p className="mintall-setup-step-description">Complete the previous steps to unlock.</p>
							) : (
								<>
									<p className="mintall-setup-step-description">
										AI visibility is automatically enabled on protect. Uses 1 credit per product.
									</p>
									<div className="mintall-setup-step-actions">
										<ToggleControl
											label=""
											checked={visibilityOnProtect}
											disabled={togglingVisibility}
											onChange={handleToggleVisibility}
											__nextHasNoMarginBottom
										/>
									</div>
								</>
							)}
						</div>
					</div>

					{/* Step 4: Verify your custom domain */}
					<div className="mintall-setup-step">
						<div className="mintall-setup-step-icon">
							<StepIcon status={verifyDomainComplete ? 'complete' : 'active'} />
						</div>
						<div className="mintall-setup-step-content">
							<div className="mintall-setup-step-header">
								<h3>Verify your custom domain</h3>
								{verifyDomainComplete && status.domain_verification_status === 'verified' && (
									<span className="mintall-setup-badge mintall-setup-badge--success">Verified</span>
								)}
							</div>
							{renderVerifyDomainBody(status)}
						</div>
					</div>

					<div className="mintall-setup-step">
						<div className="mintall-setup-step-icon">
							<StepIcon status={status.page_view_capture_decided ? 'complete' : 'active'} />
						</div>
						<div className="mintall-setup-step-content">
							<div className="mintall-setup-step-header">
								<h3>Page-view capture (optional)</h3>
								{status.page_view_capture_decided && (
									<span className="mintall-setup-badge mintall-setup-badge--info">
										{status.page_view_capture ? 'On' : 'Off'}
									</span>
								)}
							</div>
							<PageViewCaptureSetting
								value={status}
								canEnable={true}
								onSaved={handlePageViewCaptureSaved}
							/>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}

function renderVerifyDomainBody(status: SetupStatusResponse): JSX.Element {
	const {
		host_is_verifiable: hostIsVerifiable,
		current_site_host: currentHost,
		domain_verification_status: domainStatus,
		domain_verification_domain: registeredDomain,
	} = status;

	if (!hostIsVerifiable) {
		return (
			<>
				<p className="mintall-setup-step-description">
					Your WordPress Site Address (<code>{currentHost ?? 'unset'}</code>) isn&apos;t a public domain, so
					DNS verification can&apos;t run yet. Update <strong>Settings → General → Site Address (URL)</strong>{' '}
					to your custom domain (for example, <code>https://shop.example.com</code>
					), then reconnect Mintall to register it.
				</p>
				<div className="mintall-setup-step-actions">
					<a href="options-general.php" target="_blank" rel="noopener noreferrer">
						<Button variant="primary" __next40pxDefaultSize>
							Open WordPress Settings
						</Button>
					</a>
				</div>
			</>
		);
	}

	if (domainStatus === 'verified') {
		return (
			<p className="mintall-setup-step-description">
				{registeredDomain ?? currentHost ?? 'Your domain'} is verified. Verified domains earn a trust boost on
				every product certificate.
			</p>
		);
	}

	let description: string;
	if (domainStatus === 'failed') {
		description =
			"Your DNS TXT record was found but the value doesn't match. Open Settings → Domain verification to view the correct value.";
	} else if (domainStatus === 'expired') {
		description =
			'Your verification token has expired. Open Settings → Domain verification to reissue a new token.';
	} else if (domainStatus === 'pending') {
		description = `Verification is in progress for ${
			registeredDomain ?? currentHost ?? 'your domain'
		}. Finish adding the DNS TXT record in Settings → Domain verification.`;
	} else {
		description = `Prove you own ${
			currentHost ?? 'your storefront domain'
		} by adding a DNS TXT record. Verified domains earn a trust boost on every product certificate.`;
	}

	return (
		<>
			<p className="mintall-setup-step-description">{description}</p>
			<div className="mintall-setup-step-actions">
				<a href="#/settings">
					<Button variant="primary" __next40pxDefaultSize>
						{domainStatus ? 'Continue verification' : 'Verify domain'}
					</Button>
				</a>
			</div>
		</>
	);
}