import { Image } from "expo-image";
import { useRouter } from "expo-router";
import { SymbolView } from "expo-symbols";
import { useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { BrandPressable } from "@/components/brand-pressable";
import { BrandTextInput } from "@/components/brand-text-input";
import { Brand, BrandFont } from "@/constants/theme";

import GoogleLogo from "@/assets/Logos/GoogleLogo.svg";
import LoginHero from "@/assets/images/LoginHero.png";

/**
 * Frames `252:281` (Log In) and `412:59` (Sign Up) in the Figma. The hero art
 * in the Figma is replaced with a magenta gradient placeholder; the rest of
 * the form — title, tabs, inputs, social row — is reproduced. Per the Figma,
 * the social row has only Google and Phone buttons (no Apple / Facebook).
 */
export default function LoginScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [tab, setTab] = useState<"signup" | "login">("login");
  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View
      style={[
        styles.root,
        { paddingTop: insets.top, paddingBottom: insets.bottom },
      ]}
    >
      <HeroSilhouette />

      <View style={styles.body}>
        <View style={styles.tabs}>
          <Pressable
            onPress={() => setTab("signup")}
            style={tab === "signup" ? styles.tabIndicator : styles.tab}
          >
            <Text
              style={[
                styles.tabLabel,
                tab === "signup"
                  ? styles.tabLabelActive
                  : styles.tabLabelInactive,
              ]}
            >
              Sign Up
            </Text>
            {/*{tab === "signup" ? <View style={styles.tabIndicator} /> : null}*/}
          </Pressable>
          <Pressable
            onPress={() => setTab("login")}
            style={tab === "login" ? styles.tabIndicator : styles.tab}
          >
            <Text
              style={[
                styles.tabLabel,
                tab === "login"
                  ? styles.tabLabelActive
                  : styles.tabLabelInactive,
              ]}
            >
              Log In
            </Text>
            {/*{tab === "login" ? <View style={styles.tabIndicator} /> : null}*/}
          </Pressable>
        </View>

        <View style={styles.form}>
          {tab === "signup" ? (
            <Text style={styles.subtitle}>Username</Text>
          ) : null}
          {tab === "signup" ? (
            <BrandTextInput
              placeholder="JohnDoe"
              placeholderTextColor={Brand.textFaint}
              autoCapitalize="none"
              keyboardType="default"
              value={username}
              onChangeText={setUsername}
            />
          ) : null}
          <Text style={styles.subtitle}>Email</Text>
          <BrandTextInput
            placeholder="Email"
            placeholderTextColor={Brand.textFaint}
            autoCapitalize="none"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
          />
          <Text style={styles.subtitle}>Password</Text>
          <BrandTextInput
            placeholder="Password"
            placeholderTextColor={Brand.textFaint}
            secureToggle
            value={password}
            onChangeText={setPassword}
          />
        </View>

        {tab === "login" ? (
          <Pressable style={styles.forgotRow}>
            <Text style={styles.forgotText}>Forgot password?</Text>
          </Pressable>
        ) : null}

        <BrandPressable
          label={tab === "login" ? "Log In" : "Create Account"}
          onPress={() => router.push("/(auth)/select-games")}
        />

        <View style={styles.dividerRow}>
          <View style={styles.dividerLine} />
          <Text style={styles.dividerText}>Log In using</Text>
          <View style={styles.dividerLine} />
        </View>

        <View style={styles.socialRow}>
          <SocialButton kind="google" />
          <SocialButton kind="phone" />
        </View>
      </View>
    </View>
  );
}

function HeroSilhouette() {
  return (
    <View style={styles.hero}>
      <Image source={LoginHero} style={styles.image} />
      <Text style={styles.overlayText}>
        Just one step away from finding your teammates
      </Text>
    </View>
  );
}

function SocialButton({ kind }: { kind: "google" | "phone" }) {
  const label = kind === "google" ? "oogle" : "Phone";
  return (
    <Pressable
      accessibilityRole="button"
      style={({ pressed }) => [
        styles.socialButton,
        pressed && styles.socialPressed,
      ]}
    >
      {kind === "google" ? (
        <Image source={GoogleLogo} style={styles.socialGoogle} />
      ) : (
        <SymbolView
          name={"phone" as Parameters<typeof SymbolView>[0]["name"]}
          tintColor={Brand.text}
          size={20}
        />
      )}
      <Text style={styles.socialLabel}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: Brand.bg,
  },
  hero: {
    height: 220,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  body: {
    flex: 1,
    paddingHorizontal: 24,
    paddingTop: 24,
    gap: 16,
  },
  titleBlock: {
    gap: 4,
  },
  title: {
    color: Brand.text,
    fontSize: 28,
    lineHeight: 34,
    fontFamily: BrandFont.montserratBold,
  },
  subtitle: {
    color: Brand.textMuted,
    fontSize: 14,
    lineHeight: 20,
    fontFamily: BrandFont.poppinsRegular,
  },
  tabs: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: 8,
    justifyContent: "center",
    gap: 0,
    backgroundColor: Brand.surface,
    borderColor: Brand.border,
  },
  tab: {
    paddingBottom: 8,
    width: "50%",
    alignItems: "center",
    justifyContent: "center",
  },
  tabLabel: {
    fontSize: 15,
    lineHeight: 20,
    fontFamily: BrandFont.poppinsSemiBold,
  },
  tabLabelActive: {
    color: Brand.text,
  },
  tabLabelInactive: {
    color: Brand.textMuted,
  },
  tabIndicator: {
    marginVertical: 8,
    alignSelf: "stretch",
    marginHorizontal: "2%",
    height: 52,
    width: "46%",
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
    borderColor: Brand.border,
    backgroundColor: Brand.accent,
  },
  form: {
    gap: 12,
    marginTop: 8,
  },
  forgotRow: {
    alignSelf: "flex-end",
    paddingVertical: 4,
  },
  forgotText: {
    color: Brand.accent,
    fontSize: 13,
    lineHeight: 18,
    fontFamily: BrandFont.poppinsMedium,
  },
  dividerRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    marginTop: 4,
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: Brand.border,
  },
  dividerText: {
    color: Brand.textMuted,
    fontSize: 12,
    lineHeight: 16,
    fontFamily: BrandFont.poppinsRegular,
  },
  socialRow: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 12,
    marginTop: 4,
  },
  socialButton: {
    flex: 1,
    height: 52,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Brand.border,
    backgroundColor: Brand.surface,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
  },
  socialPressed: {
    opacity: 0.7,
  },
  socialLabel: {
    color: Brand.text,
    fontSize: 14,
    lineHeight: 18,
    fontFamily: BrandFont.poppinsSemiBold,
  },
  socialGoogle: {
    width: 18,
    height: 18,
  },
  image: {
    width: "100%",
    height: "100%",
    resizeMode: "cover",
  },
  overlayText: {
    fontSize: 26,
    fontWeight: "bold",
    fontFamily: "Poppins_600SemiBold",
    position: "absolute",
    left: 26,
    top: "25%",
    width: "50%",
    color: "#fff",
  },
});
