import React, { useState } from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { type Href } from "expo-router";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import * as Haptics from "expo-haptics";
import { MutedText, Text } from "../../components/text";
import { Button, IconButton } from "../../components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/card";
import { withClickTracking } from "../../services/telemetry";
import { EmailInput } from "../../components/input";
import AuthService from "../../services/auth.service";
import { validateEmail } from "../../utils/validation";
import { useAppConfig } from "../../context/AppConfigContext";

export function ForgotPasswordScreen() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const router = useNavigation();
  const { routes } = useAppConfig();

  const handleSubmit = async () => {
    // Re-entry guard against double-submit (button + form-submit
    // keypress) firing before React flushes `setIsLoading(true)`
    // and disables the button.
    if (isLoading) {
      return;
    }
    if (!email) {
      setError("Email is required");
      return;
    }
    if (!validateEmail(email)) {
      setError("Please enter a valid email address");
      return;
    }

    setIsLoading(true);
    try {
      await AuthService.forgotPassword(email);
    } catch (e: unknown) {
      // Deliberately swallow — the server is supposed to respond
      // identically for known and unknown emails, but a 5xx (or a
      // rate-limit, network blip, etc.) would otherwise let the UI
      // branch on "did this email exist or not?". Surface the same
      // confirmation regardless; the server retries on its own
      // schedule and ops can read the failure from the server logs.
      if (__DEV__) {
        console.warn("[forgot-password] request failed; showing generic confirmation:", e);
      }
    }
    await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
    setSent(true);
    setIsLoading(false);
  };

  return (
    <SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"} />
      <ScrollView
        className="flex-1"
        contentContainerClassName="flex-1 items-center justify-center p-6"
        keyboardShouldPersistTaps="handled"
      >
        <View className="mt-4 self-start absolute top-4 left-6">
          <IconButton
            variant="ghost"
            telemetryId="auth.forgot_password.back"
            onPress={() => router.back()}
            accessibilityLabel="Go back"
            accessibilityRole="button"
          >
            <Ionicons name="arrow-back" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
          </IconButton>
        </View>

        <Card className="w-full max-w-[360px]">
          <CardHeader>
            <CardTitle>{sent ? "Check your email" : "Forgot password?"}</CardTitle>
            <CardDescription>
              {sent
                ? `If an account exists for ${email}, you will receive a password reset code.`
                : "Enter your email to reset your password"}
            </CardDescription>
          </CardHeader>

          {!sent ? (
            <>
              <CardContent className="gap-4">
                <EmailInput
                  label="Email"
                  value={email}
                  onChangeText={(text) => {
                    setEmail(text);
                    if (error) {
                      setError("");
                    }
                  }}
                  error={error}
                  autoFocus
                  returnKeyType="done"
                  onSubmitEditing={handleSubmit}
                  accessibilityLabel="Email address"
                />
              </CardContent>

              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                <Button
                  className="w-full"
                  telemetryId="auth.forgot_password.submit"
                  onPress={handleSubmit}
                  isLoading={isLoading}
                  accessibilityLabel="Reset your password"
                  accessibilityRole="button"
                >
                  Reset your password
                </Button>

                <MutedText className="text-center text-sm">
                  Remember your password?{" "}
                  <Text
                    className="text-sm text-foreground underline"
                    onPress={withClickTracking("auth.forgot_password.push", () =>
                      router.push(routes.login)
                    )}
                    accessibilityRole="link"
                    accessibilityLabel="Sign in"
                  >
                    Sign In
                  </Text>
                </MutedText>
              </CardFooter>
            </>
          ) : (
            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
              <Button
                className="w-full"
                telemetryId="auth.forgot_password.push_2"
                onPress={() =>
                  router.push({
                    pathname: routes.resetPassword,
                    params: { email },
                  } as Href)
                }
                accessibilityLabel="Enter reset code"
                accessibilityRole="button"
              >
                Enter reset code
              </Button>

              <MutedText className="text-center text-sm">
                Didn't receive the code?{" "}
                <Text
                  className="text-sm text-foreground underline"
                  onPress={withClickTracking("auth.forgot_password.sent", () => {
                    setSent(false);
                    setError("");
                  })}
                  accessibilityRole="button"
                  accessibilityLabel="Resend reset email"
                >
                  Resend
                </Text>
              </MutedText>
            </CardFooter>
          )}
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

export default ForgotPasswordScreen;