import { ReactElement } from "react";
import { SignInStatus, SignInOptions } from "../../types/sign-in-types";
import { KiroButton } from "../kiro-button";

interface SignInStepsProps {
	signInStatus: SignInStatus;
	signInError: string;
	portalUrl?: string;
	onSignIn: (signInOptions: SignInOptions) => void;
	onCancel: () => void;
}

function ErrorMessage({ content }: { content: string }): ReactElement {
	return (
		<p className="text-red-300 text-[14px]/7.5 font-medium text-wrap mb-5">
			{content || "There was an error signing you in. Please try again."}
		</p>
	);
}

function SuccessMessage(): ReactElement {
	return (
		<p className="text-white text-[20px]/7.5 font-medium text-wrap">
			You are signed in!
		</p>
	);
}

function PendingMessage({ portalUrl, onCancel }: { portalUrl?: string; onCancel: () => void }): ReactElement {
	return (
		<div className="gap-5 flex flex-col items-center">
			<p className="secondary-text text-[20px]/7.5 font-normal text-wrap mb-5 text-center">
				We will take you to your default web browser to sign in and bring you
				back when it's complete...
			</p>
			{portalUrl && (
				<div className="w-full mb-3">
					<p className="secondary-text text-[13px] font-normal mb-2 text-center">
						Or open this link in your browser:
					</p>
					<a
						className="block w-full px-3 py-2 rounded bg-[var(--vscode-textBlockQuote-background)] border border-[var(--vscode-widget-border)] text-[var(--vscode-textLink-foreground)] font-mono text-[11px] break-all hover:bg-[var(--vscode-list-hoverBackground)] transition-colors"
						href={portalUrl}
						target="_blank"
						rel="noopener noreferrer"
						title={portalUrl}
					>
						{portalUrl}
					</a>
				</div>
			)}
			<div className="w-30">
				<KiroButton type="button" onClick={onCancel}>
					Cancel
				</KiroButton>
			</div>
		</div>
	);
}

function WelcomeMessage(): ReactElement {
	return (
		<p className="secondary-text text-[20px]/7.5 font-normal text-wrap mb-5 text-center">
			An agentic IDE that helps you do your best work.
		</p>
	);
}

/**
 * Sign-in component for web portal authentication.
 * Users click "Sign in" to be redirected to app.kiro.dev for authentication.
 */
export function SignInSteps({
	signInStatus,
	signInError,
	portalUrl,
	onSignIn,
	onCancel,
}: SignInStepsProps): ReactElement {
	return (
		<>
			{signInStatus === "error" && <ErrorMessage content={signInError} />}
			{signInStatus === "success" && <SuccessMessage />}
			{signInStatus === "pending" && <PendingMessage portalUrl={portalUrl} onCancel={onCancel} />}
			{signInStatus === "not-started" && <WelcomeMessage />}
			{(signInStatus === "error" || signInStatus === "not-started") && (
				<div className="w-[350px] mt-5">
					<KiroButton
						type="button"
						onClick={() => {
							onSignIn({ authMethod: "portal" });
						}}
					>
						Sign in
					</KiroButton>
				</div>
			)}
			<TermsFooter />
		</>
	);
}

function TermsFooter(): ReactElement {
	return (
		<div className="text-center mt-5 text-[var(--vscode-disabledForeground)] text-xs">
			By signing in, you agree to the{" "}
			<a
				className="underline text-[var(--vscode-textLink-foreground)]"
				href="https://aws.amazon.com/agreement/"
				target="_blank"
				rel="noopener noreferrer"
			>
				AWS Customer Agreement
			</a>
			,{" "}
			<a
				className="underline text-[var(--vscode-textLink-foreground)]"
				href="https://aws.amazon.com/service-terms/"
				target="_blank"
				rel="noopener noreferrer"
			>
				Service Terms
			</a>
			, and{" "}
			<a
				className="underline text-[var(--vscode-textLink-foreground)]"
				href="https://aws.amazon.com/privacy/"
				target="_blank"
				rel="noopener noreferrer"
			>
				Privacy Notice
			</a>
			.
		</div>
	);
}
