import { useState } from 'react';
import { AlertTriangle, ShieldCheck, Copy, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { getWordPressConfig } from '@/api/client';
import OnboardingLayout from '@/features/onboarding/OnboardingLayout';

/**
 * HttpsRequired
 *
 * Transient onboarding gate shown when the Executor can't reach the site
 * because it isn't served over HTTPS (its application-password calls fail with
 * "Unable to connect"). Nothing is persisted: "Check again" simply reloads the
 * page, and once the site is on HTTPS the onboarding resumes on its own.
 *
 * Detection lives in the polling steps (see utils/executorConnection.js); this
 * component only renders the explanation and the way out.
 */

/** A single numbered step in the "how to switch it on" card. */
const Step = ({ n, children }) => (
	<div className="flex items-start gap-4">
		<span className="flex items-center justify-center w-7 h-7 rounded-full border border-border small-semibold text-muted-foreground shrink-0">
			{n}
		</span>
		<div className="min-w-0 pt-0.5">{children}</div>
	</div>
);

const HttpsRequired = () => {
	const { siteUrl } = getWordPressConfig() || {};
	const url = siteUrl || '';
	const [, protocol = '', domain = url] =
		url.match(/^(https?:\/\/)(.*)$/) || [];

	const [copied, setCopied] = useState(false);

	const copyMessage = async () => {
		const message = `Hi, I'd like to enable a free SSL certificate (Let's Encrypt) for ${
			domain || 'my site'
		} so it loads securely over HTTPS. Most setups have a one-click option for this. Could you switch it on for me? Thanks!`;
		try {
			await navigator.clipboard.writeText(message);
			setCopied(true);
			setTimeout(() => setCopied(false), 1500);
		} catch {
			/* clipboard blocked; silent */
		}
	};

	return (
		<OnboardingLayout
			title="First things first: let's get you on HTTPS."
			wide
		>
			<div className="mb-8">
				<p className="paragraph-regular text-foreground my-0!">
					I work directly on your live site, so before anything else
					it needs to be served securely over HTTPS. Right now it
					isn&apos;t. Once that&apos;s sorted, I can get started.
				</p>
			</div>

			<div className="grid md:grid-cols-2 gap-4">
				{/* YOUR SITE */}
				<div className="rounded-2xl border border-border p-6">
					<p className="small-semibold uppercase tracking-wide text-muted-foreground my-0!">
						Your site
					</p>
					<div className="flex items-center gap-3 mt-4">
						<span className="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-50 text-red-600 shrink-0">
							<AlertTriangle className="w-5 h-5" />
						</span>
						<span className="font-mono text-sm min-w-0 break-all">
							<span className="text-red-600 font-semibold">
								{protocol || 'http://'}
							</span>
							<span className="text-foreground">{domain}</span>
						</span>
						<span className="ml-auto inline-flex items-center gap-1.5 small-medium text-red-600 shrink-0">
							<span className="w-1.5 h-1.5 rounded-full bg-red-500" />
							Not secure
						</span>
					</div>
					<hr className="border-border my-4" />
					<p className="small-regular text-muted-foreground my-0!">
						Your site is being served over{' '}
						<span className="font-mono font-semibold text-foreground">
							http://
						</span>
						, without a certificate. Browsers show a &ldquo;Not
						secure&rdquo; warning to your visitors.
					</p>
				</div>

				{/* HOW TO SWITCH IT ON */}
				<div className="rounded-2xl border border-border p-6">
					<p className="small-semibold uppercase tracking-wide text-muted-foreground my-0! mb-5">
						How to switch it on
					</p>
					<div className="space-y-5 mt-5">
						<Step n={1}>
							<p className="small-regular text-foreground my-0!">
								Contact your hosting provider.
							</p>
						</Step>
						<Step n={2}>
							<p className="small-regular text-foreground my-0!">
								Ask them to enable an SSL certificate (e.g.
								Let&apos;s Encrypt, it&apos;s free). Most hosts
								have a one-click option.
							</p>
							<button
								type="button"
								onClick={copyMessage}
								className="inline-flex items-center gap-1.5 mt-2 small-semibold text-magenta-500 hover:text-magenta-600 transition-colors cursor-pointer"
							>
								{copied ? (
									<>
										<Check className="w-4 h-4" />
										Copied
									</>
								) : (
									<>
										<Copy className="w-4 h-4" />
										Copy a message for them
									</>
								)}
							</button>
						</Step>
						<Step n={3}>
							<p className="small-regular text-foreground my-0!">
								Come back and hit &ldquo;Check again&rdquo;.
								I&apos;ll take it from there.
							</p>
						</Step>
					</div>
				</div>
			</div>

			<div className="mt-10">
				<Button
					onClick={() => window.location.reload()}
					size="lg"
					className="bg-foreground text-background! hover:bg-foreground/90"
				>
					<ShieldCheck />
					Check again
				</Button>
			</div>
		</OnboardingLayout>
	);
};

export default HttpsRequired;