import { Card, useThemeColor } from "heroui-native";
import { useAuthActions } from "@convex-dev/auth/react";
import { useState } from "react";
import {
	ActivityIndicator,
	Alert,
	Pressable,
	Text,
	TextInput,
	View,
} from "react-native";

export function SignIn() {
	const { signIn } = useAuthActions();
	const [authMethod, setAuthMethod] = useState<"phone" | "email" | "password">("phone");
	const [step, setStep] = useState<"signIn" | { phone: string } | { email: string }>("signIn");
	const [isLoading, setIsLoading] = useState(false);
	const [error, setError] = useState<string | null>(null);

	const mutedColor = useThemeColor("muted");
	const accentColor = useThemeColor("accent");
	const foregroundColor = useThemeColor("foreground");
	const dangerColor = useThemeColor("danger");

	const handleSendPhoneCode = async (phone: string) => {
		setIsLoading(true);
		setError(null);

		try {
			const formData = new FormData();
			formData.append("phone", phone);
			await signIn("twilio", formData);
			setStep({ phone });
			Alert.alert("Success", `Verification code sent to ${phone}`);
		} catch (err) {
			const errorMessage = "Failed to send verification code";
			setError(errorMessage);
			Alert.alert("Error", errorMessage);
		} finally {
			setIsLoading(false);
		}
	};

	const handleVerifyPhoneCode = async (code: string, phone: string) => {
		setIsLoading(true);
		setError(null);

		try {
			const formData = new FormData();
			formData.append("code", code);
			formData.append("phone", phone);
			await signIn("twilio", formData);
			Alert.alert("Success", "Successfully signed in!");
		} catch (err) {
			const errorMessage = "Invalid verification code";
			setError(errorMessage);
			Alert.alert("Error", errorMessage);
		} finally {
			setIsLoading(false);
		}
	};

	const handleSendCode = async (email: string) => {
		setIsLoading(true);
		setError(null);

		try {
			const formData = new FormData();
			formData.append("email", email);
			await signIn("resend-otp", formData);
			setStep({ email });
			Alert.alert("Success", `Verification code sent to ${email}`);
		} catch (err) {
			const errorMessage = "Failed to send verification code";
			setError(errorMessage);
			Alert.alert("Error", errorMessage);
		} finally {
			setIsLoading(false);
		}
	};

	const handleVerifyCode = async (code: string, email: string) => {
		setIsLoading(true);
		setError(null);

		try {
			const formData = new FormData();
			formData.append("code", code);
			formData.append("email", email);
			await signIn("resend-otp", formData);
			Alert.alert("Success", "Successfully signed in!");
		} catch (err) {
			const errorMessage = "Invalid verification code";
			setError(errorMessage);
			Alert.alert("Error", errorMessage);
		} finally {
			setIsLoading(false);
		}
	};

	const handlePasswordAuth = async (email: string, password: string, flow: "signIn" | "signUp") => {
		console.log("Password auth started:", { email, flow, passwordLength: password.length });
		setIsLoading(true);
		setError(null);

		try {
			const formData = new FormData();
			formData.append("email", email);
			formData.append("password", password);
			formData.append("flow", flow);
			
			console.log("FormData created, calling signIn...");
			await signIn("password", formData);
			console.log("Sign in successful!");
			Alert.alert("Success", `Successfully ${flow === "signIn" ? "signed in" : "signed up"}!`);
		} catch (err) {
			console.error("Password auth error:", err);
			let errorMessage: string;
			if (flow === "signIn") {
				errorMessage = "Could not sign in, did you mean to sign up?";
			} else {
				errorMessage = "Could not sign up, did you mean to sign in?";
			}
			setError(errorMessage);
			Alert.alert("Error", errorMessage);
		} finally {
			setIsLoading(false);
		}
	};

	const getTitle = () => {
		if (step === "signIn") {
			return "Sign In or Create Account";
		}
		if ('phone' in step) {
			return "Check Your Phone";
		}
		return "Check Your Email";
	};

	return (
		<Card variant="secondary" className="mt-6 p-4">
			<Card.Title className="mb-4">{getTitle()}</Card.Title>

			{error && (
				<View className="mb-4 rounded-lg bg-danger/10 p-3">
					<Text className="text-danger text-sm">{error}</Text>
				</View>
			)}

			{step === "signIn" ? (
				<>
					<View className="mb-4 flex-row rounded-lg border border-divider">
						<Pressable
							onPress={() => setAuthMethod("phone")}
							className={`flex-1 p-3 rounded-l-lg ${
								authMethod === "phone" ? "bg-accent" : "bg-surface"
							}`}
						>
							<Text className={`text-center font-medium ${
								authMethod === "phone" ? "text-accent-foreground" : "text-foreground"
							}`}>
								Phone
							</Text>
						</Pressable>
						<Pressable
							onPress={() => setAuthMethod("email")}
							className={`flex-1 p-2 ${
								authMethod === "email" ? "bg-accent" : "bg-surface"
							}`}
						>
							<Text className={`text-center font-medium ${
								authMethod === "email" ? "text-accent-foreground" : "text-foreground"
							}`}>
								Email
							</Text>
						</Pressable>
						<Pressable
							onPress={() => setAuthMethod("password")}
							className={`flex-1 p-3 rounded-r-lg ${
								authMethod === "password" ? "bg-accent" : "bg-surface"
							}`}
						>
							<Text className={`text-center font-medium ${
								authMethod === "password" ? "text-accent-foreground" : "text-foreground"
							}`}>
								Password
							</Text>
						</Pressable>
					</View>

					{authMethod === "phone" ? (
						<PhoneStep
							onSendCode={handleSendPhoneCode}
							isLoading={isLoading}
							mutedColor={mutedColor}
							foregroundColor={foregroundColor}
						/>
					) : authMethod === "email" ? (
						<EmailStep
							onSendCode={handleSendCode}
							isLoading={isLoading}
							mutedColor={mutedColor}
							foregroundColor={foregroundColor}
						/>
					) : (
						<PasswordStep
							onPasswordAuth={handlePasswordAuth}
							isLoading={isLoading}
							mutedColor={mutedColor}
							foregroundColor={foregroundColor}
						/>
					)}
				</>
			) : 'phone' in step ? (
				<PhoneCodeStep
					phone={step.phone}
					onVerifyCode={handleVerifyPhoneCode}
					onCancel={() => setStep("signIn")}
					isLoading={isLoading}
					mutedColor={mutedColor}
					foregroundColor={foregroundColor}
				/>
			) : (
				<CodeStep
					email={step.email}
					onVerifyCode={handleVerifyCode}
					onCancel={() => setStep("signIn")}
					isLoading={isLoading}
					mutedColor={mutedColor}
					foregroundColor={foregroundColor}
				/>
			)}
		</Card>
	);
}

function PhoneStep({ onSendCode, isLoading, mutedColor, foregroundColor }) {
	const [phone, setPhone] = useState("");

	const handleSubmit = () => {
		if (phone.trim()) {
			onSendCode(phone);
		}
	};

	return (
		<>
			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="Phone Number"
				value={phone}
				onChangeText={setPhone}
				placeholderTextColor={mutedColor}
				keyboardType="phone-pad"
				autoComplete="tel"
			/>

			<Pressable
				onPress={handleSubmit}
				disabled={isLoading || !phone.trim()}
				className="flex-row items-center justify-center rounded-lg bg-accent p-4 active:opacity-70"
			>
				{isLoading ? (
					<ActivityIndicator size="small" color={foregroundColor} />
				) : (
					<Text className="font-medium text-foreground">Send Code</Text>
				)}
			</Pressable>
		</>
	);
}

function PhoneCodeStep({ phone, onVerifyCode, onCancel, isLoading, mutedColor, foregroundColor }) {
	const [code, setCode] = useState("");

	const handleSubmit = () => {
		if (code.trim()) {
			onVerifyCode(code, phone);
		}
	};

	return (
		<>
			<Text className="mb-3 text-sm text-muted">
				Enter the 6-digit code we sent to {phone}
			</Text>

			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="6-digit code"
				value={code}
				onChangeText={setCode}
				placeholderTextColor={mutedColor}
				keyboardType="numeric"
				maxLength={6}
			/>

			<Pressable
				onPress={handleSubmit}
				disabled={isLoading || !code.trim()}
				className="mb-3 flex-row items-center justify-center rounded-lg bg-accent p-4 active:opacity-70"
			>
				{isLoading ? (
					<ActivityIndicator size="small" color={foregroundColor} />
				) : (
					<Text className="font-medium text-foreground">Continue</Text>
				)}
			</Pressable>

			<Pressable
				onPress={onCancel}
				disabled={isLoading}
				className="flex-row items-center justify-center rounded-lg border border-divider p-4 active:opacity-70"
			>
				<Text className="font-medium text-foreground">Cancel</Text>
			</Pressable>
		</>
	);
}

function EmailStep({ onSendCode, isLoading, mutedColor, foregroundColor }) {
	const [email, setEmail] = useState("");

	const handleSubmit = () => {
		if (email.trim()) {
			onSendCode(email);
		}
	};

	return (
		<>
			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="Email"
				value={email}
				onChangeText={setEmail}
				placeholderTextColor={mutedColor}
				keyboardType="email-address"
				autoCapitalize="none"
			/>

			<Pressable
				onPress={handleSubmit}
				disabled={isLoading || !email.trim()}
				className="flex-row items-center justify-center rounded-lg bg-accent p-4 active:opacity-70"
			>
				{isLoading ? (
					<ActivityIndicator size="small" color={foregroundColor} />
				) : (
					<Text className="font-medium text-foreground">Send Code</Text>
				)}
			</Pressable>
		</>
	);
}

function CodeStep({ email, onVerifyCode, onCancel, isLoading, mutedColor, foregroundColor }) {
	const [code, setCode] = useState("");

	const handleSubmit = () => {
		if (code.trim()) {
			onVerifyCode(code, email);
		}
	};

	return (
		<>
			<Text className="mb-3 text-sm text-muted">
				Enter the verification code sent to {email}
			</Text>

			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="Verification Code"
				value={code}
				onChangeText={setCode}
				placeholderTextColor={mutedColor}
				keyboardType="numeric"
			/>

			<Pressable
				onPress={handleSubmit}
				disabled={isLoading || !code.trim()}
				className="mb-3 flex-row items-center justify-center rounded-lg bg-accent p-4 active:opacity-70"
			>
				{isLoading ? (
					<ActivityIndicator size="small" color={foregroundColor} />
				) : (
					<Text className="font-medium text-foreground">Continue</Text>
				)}
			</Pressable>

			<Pressable
				onPress={onCancel}
				disabled={isLoading}
				className="flex-row items-center justify-center rounded-lg border border-divider p-4 active:opacity-70"
			>
				<Text className="font-medium text-foreground">Cancel</Text>
			</Pressable>
		</>
	);
}

function PasswordStep({ onPasswordAuth, isLoading, mutedColor, foregroundColor }) {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");
	const [flow, setFlow] = useState<"signIn" | "signUp">("signIn");

	const handleSubmit = () => {
		console.log("Password submit clicked:", { email, passwordLength: password.length, flow });
		
		if (!email.trim()) {
			Alert.alert("Error", "Please enter your email");
			return;
		}
		
		if (!password.trim()) {
			Alert.alert("Error", "Please enter your password");
			return;
		}
		
		if (password.length < 6) {
			Alert.alert("Error", "Password must be at least 6 characters");
			return;
		}
		
		console.log("Validation passed, calling onPasswordAuth...");
		onPasswordAuth(email, password, flow);
	};

	return (
		<>
			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="Email"
				value={email}
				onChangeText={(text) => {
					console.log("Email changed:", text);
					setEmail(text);
				}}
				placeholderTextColor={mutedColor}
				keyboardType="email-address"
				autoCapitalize="none"
				autoComplete="email"
			/>

			<TextInput
				className="mb-4 rounded-lg border border-divider bg-surface px-4 py-3 text-foreground"
				placeholder="Password"
				value={password}
				onChangeText={(text) => {
					console.log("Password changed, length:", text.length);
					setPassword(text);
				}}
				placeholderTextColor={mutedColor}
				secureTextEntry
				autoComplete={flow === "signIn" ? "current-password" : "new-password"}
			/>

			<Pressable
				onPress={() => {
					console.log("Submit button pressed");
					handleSubmit();
				}}
				disabled={isLoading}
				className={`mb-3 flex-row items-center justify-center rounded-lg p-4 ${
					isLoading || !email.trim() || !password.trim() 
						? "bg-gray-400 opacity-50" 
						: "bg-accent active:opacity-70"
				}`}
			>
				{isLoading ? (
					<ActivityIndicator size="small" color={foregroundColor} />
				) : (
					<Text className="font-medium text-foreground">
						{flow === "signIn" ? "Sign In" : "Sign Up"}
					</Text>
				)}
			</Pressable>

			<Pressable
				onPress={() => {
					console.log("Flow toggle clicked, current flow:", flow);
					setFlow(flow === "signIn" ? "signUp" : "signIn");
				}}
				disabled={isLoading}
				className="flex-row items-center justify-center p-2"
			>
				<Text className="text-center text-sm text-muted">
					{flow === "signIn" 
						? "Don't have an account? Sign up"
						: "Already have an account? Sign in"
					}
				</Text>
			</Pressable>
		</>
	);
}