import { Button, Notice, Spinner, TextControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { api } from '../api';
import type { DomainVerificationData, DomainVerificationStatus } from '../types';

interface DomainVerificationCardProps {
	connected: boolean;
}

function formatExpiresAt(value: string | null): string | null {
	if (!value) return null;
	const date = new Date(value);
	if (Number.isNaN(date.getTime())) return null;
	return date.toLocaleDateString(undefined, {
		year: 'numeric',
		month: 'short',
		day: 'numeric',
	});
}

function statusLabel(status: DomainVerificationStatus | null): { text: string; color: string } {
	switch (status) {
		case 'verified':
			return { text: 'Verified', color: '#00a32a' };
		case 'failed':
			return { text: 'Failed', color: '#d63638' };
		case 'expired':
			return { text: 'Expired', color: '#dba617' };
		case 'pending':
			return { text: 'Pending', color: '#2271b1' };
		default:
			return { text: 'Not set up', color: '#757575' };
	}
}

export default function DomainVerificationCard({ connected }: DomainVerificationCardProps): JSX.Element | null {
	const [loading, setLoading] = useState<boolean>(true);
	const [submitting, setSubmitting] = useState<boolean>(false);
	const [data, setData] = useState<DomainVerificationData | null>(null);
	const [error, setError] = useState<string | null>(null);
	const [copied, setCopied] = useState<boolean>(false);

	useEffect(() => {
		if (!connected) {
			setLoading(false);
			return;
		}
		(async () => {
			try {
				const response = await api.get<DomainVerificationData>('/domain-verification');
				setData(response);
			} catch (err: unknown) {
				const message = err instanceof Error ? err.message : 'Failed to load domain verification.';
				setError(message);
			} finally {
				setLoading(false);
			}
		})();
	}, [connected]);

	if (!connected) {
		return null;
	}

	if (loading) {
		return (
			<div className="mintall-card">
				<h2>Domain verification</h2>
				<Spinner />
			</div>
		);
	}

	const status = data?.status ?? null;
	const domain = data?.domain ?? null;
	// The backend's record_name ("mintall-verification") is not a DNS hostname -
	// it's the prefix baked into record_value's content. The actual TXT record
	// has to live on the verified domain itself (lookup(domain) in
	// domain_verification.py queries the bare domain, never a
	// "mintall-verification.<domain>" subdomain), so this is never shown as a
	// host/name to create - doing that is exactly the bug that sent a real
	// merchant's DNS record to the wrong place.
	const recordValue = data?.record_value ?? null;
	const domainLabels = domain ? domain.split('.') : [];
	const subdomainHint = domainLabels.length > 2 ? domainLabels[0] : null;
	const expiresLabel = formatExpiresAt(data?.expires_at ?? null);
	const verifiedLabel = formatExpiresAt(data?.verified_at ?? null);
	const badge = statusLabel(status);

	const handleStart = async (): Promise<void> => {
		setSubmitting(true);
		setError(null);
		try {
			const response = await api.post<DomainVerificationData>('/domain-verification/start');
			setData(response);
		} catch (err: unknown) {
			const message = err instanceof Error ? err.message : 'Failed to start domain verification.';
			setError(message);
		} finally {
			setSubmitting(false);
		}
	};

	const handleCheck = async (): Promise<void> => {
		setSubmitting(true);
		setError(null);
		try {
			const response = await api.post<DomainVerificationData>('/domain-verification/check');
			setData((prev) => ({
				...response,
				record_value: prev?.record_value ?? response.record_value,
			}));
		} catch (err: unknown) {
			const message = err instanceof Error ? err.message : 'Failed to verify domain.';
			setError(message);
		} finally {
			setSubmitting(false);
		}
	};

	const handleCopy = async (): Promise<void> => {
		if (!recordValue) return;
		try {
			await navigator.clipboard.writeText(recordValue);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch {
			// Ignore — clipboard may be unavailable.
		}
	};

	const notStarted = status === null;
	const verified = status === 'verified';
	const inProgress = !verified && !notStarted;

	const currentHost = data?.current_site_host ?? null;
	const hostIsVerifiable = data?.host_is_verifiable ?? true;
	const registeredDomain = domain ? domain.toLowerCase() : null;
	const hostMismatch = !!(currentHost && registeredDomain && currentHost !== registeredDomain);
	const disableActions = submitting || !hostIsVerifiable;

	return (
		<div className="mintall-card">
			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
				<div style={{ flex: 1, minWidth: 0 }}>
					<h2 style={{ margin: 0 }}>
						Domain verification{' '}
						<span style={{ fontSize: 13, fontWeight: 'normal', color: badge.color }}>({badge.text})</span>
					</h2>
					<p style={{ color: '#757575', marginTop: 4 }}>
						Prove you own {domain ?? currentHost ?? 'your storefront domain'} by adding a DNS TXT record.
						Verified domains earn a trust boost on every product certificate.
					</p>
					<p style={{ color: '#757575', fontSize: 13, marginTop: 4 }}>
						Verification uses the customer-facing URL set in{' '}
						<strong>WordPress Admin → Settings → General → Site Address (URL)</strong>. Set this to your
						custom domain before verifying — verifying a default/dev host has no effect on product trust.
					</p>
					{verified && verifiedLabel && (
						<p style={{ color: '#757575', fontSize: 13, margin: '4px 0' }}>Verified on {verifiedLabel}.</p>
					)}
				</div>
				{notStarted && (
					<Button variant="primary" isBusy={submitting} disabled={disableActions} onClick={handleStart}>
						Set up
					</Button>
				)}
				{verified && (
					<Button variant="secondary" isBusy={submitting} disabled={disableActions} onClick={handleCheck}>
						Re-verify
					</Button>
				)}
			</div>

			{!hostIsVerifiable && (
				<div style={{ marginTop: 12 }}>
					<Notice status="warning" isDismissible={false}>
						<strong>Your Site Address isn&apos;t a public domain.</strong> The current value (
						<code>{currentHost ?? 'unset'}</code>) can&apos;t be verified via DNS. Update{' '}
						<strong>Settings → General → Site Address (URL)</strong> to your custom domain (for example,
						<code>https://shop.example.com</code>), then disconnect and reconnect Mintall.
					</Notice>
				</div>
			)}

			{hostMismatch && hostIsVerifiable && (
				<div style={{ marginTop: 12 }}>
					<Notice status="warning" isDismissible={false}>
						<strong>Domain mismatch.</strong> Your WordPress Site Address is <code>{currentHost}</code> but
						Mintall is verifying <code>{registeredDomain}</code>. To verify the current domain, disconnect
						and reconnect Mintall so the new address is registered.
					</Notice>
				</div>
			)}

			{error && (
				<div style={{ marginTop: 12 }}>
					<Notice status="error" isDismissible={false}>
						{error}
					</Notice>
				</div>
			)}

			{status === 'failed' && (
				<div style={{ marginTop: 12 }}>
					<Notice status="error" isDismissible={false}>
						<strong>Token mismatch.</strong> We found a Mintall verification TXT record on{' '}
						{domain ?? 'your domain'}, but its value doesn&apos;t match. Confirm the TXT value matches the
						one shown below exactly, then try again.
					</Notice>
				</div>
			)}

			{status === 'expired' && (
				<div style={{ marginTop: 12 }}>
					<Notice status="warning" isDismissible={false}>
						<strong>Verification token expired.</strong> Tokens are valid for a limited window. Reissue a
						new token and update your DNS TXT record.
					</Notice>
				</div>
			)}

			{inProgress && (
				<div style={{ marginTop: 12 }}>
					{recordValue ? (
						<>
							<p style={{ marginBottom: 8 }}>
								Add a TXT record directly on <strong>{domain ?? 'your domain'}</strong> itself (not a
								new subdomain) with this value:
							</p>
							<div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
								<div style={{ flex: 1 }}>
									<TextControl
										label="Record value"
										value={recordValue}
										readOnly
										onChange={() => undefined}
										__nextHasNoMarginBottom
									/>
								</div>
								<Button variant="secondary" onClick={handleCopy}>
									{copied ? 'Copied' : 'Copy'}
								</Button>
							</div>
							<p style={{ color: '#757575', fontSize: 13, marginTop: 8 }}>
								In your DNS provider&apos;s Host/Name field for this record, use <strong>@</strong> if{' '}
								<code>{domain}</code> is the domain you manage there
								{subdomainHint && (
									<>
										, or just <strong>{subdomainHint}</strong> if <code>{domain}</code> is a
										subdomain of a larger zone you manage there
									</>
								)}
								. Leave the record type as <strong>TXT</strong>.
							</p>
						</>
					) : (
						<p style={{ color: '#757575' }}>
							Verification is in progress for <strong>{domain ?? 'your domain'}</strong>. If you no longer
							have the TXT record value, reissue a new token to see it again.
						</p>
					)}
					{expiresLabel && (
						<p style={{ color: '#757575', fontSize: 13, marginTop: 8 }}>
							Token expires {expiresLabel}. DNS changes can take up to 48 hours to propagate.
						</p>
					)}
					<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
						<Button variant="secondary" isBusy={submitting} disabled={disableActions} onClick={handleStart}>
							Reissue token
						</Button>
						<Button variant="primary" isBusy={submitting} disabled={disableActions} onClick={handleCheck}>
							Check now
						</Button>
					</div>
				</div>
			)}
		</div>
	);
}