import { BorderRadius, Spacing, Typography } from "@/constants/theme";
import { Theme } from "@/types/theme";
import { DimensionValue, StyleSheet } from "react-native";

export const createWelcomeStyles = (theme: Theme, isDark: boolean) => {
  const percent = (value: number): DimensionValue =>
    `${value}%` as DimensionValue;

  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.background,
    },
    scrollContent: {
      flexGrow: 1,
      paddingHorizontal: Spacing.four,
      paddingTop: Spacing.five,
      paddingBottom: Spacing.seven,
    },
    logoMark: {
      flexDirection: "row",
      alignItems: "center",
      marginBottom: Spacing.seven,
    },
    logoBox: {
      width: 34,
      height: 34,
      backgroundColor: theme.accent,
      borderRadius: BorderRadius.small,
      justifyContent: "center",
      alignItems: "center",
      marginHorizontal: Spacing.two,
    },
    logoIcon: {
      fontSize: 18,
      color: "#FFFFFF",
      fontWeight: "bold",
    },
    logoWord: {
      fontSize: 15,
      fontWeight: "500",
      color: theme.text,
      letterSpacing: 0.3,
    },
    heroGrid: {
      flexDirection: "row",
      flexWrap: "wrap",
      justifyContent: "space-between",
      marginBottom: Spacing.five,
    },
    miniCard: {
      width: "48%",
      backgroundColor: theme.backgroundElement,
      borderWidth: 0.5,
      borderColor: theme.border,
      borderRadius: BorderRadius.medium,
      padding: Spacing.two,
      marginBottom: Spacing.three,
    },
    miniCardAccent: {
      backgroundColor: isDark ? "#1a1635" : "#F0EFFF",
      borderColor: isDark ? "#534AB7" : theme.accent + "40",
    },
    mcDot: {
      width: 7,
      height: 7,
      borderRadius: 3.5,
      marginBottom: Spacing.two,
    },
    mcLines: {
      marginBottom: Spacing.one,
    },
    mcLine: {
      height: 3.5,
      borderRadius: 2,
      backgroundColor: isDark ? "#2e2e46" : "#E0E0E6",
      marginVertical: Spacing.half,
    },
    mcTag: {
      alignSelf: "flex-start",
      borderRadius: BorderRadius.small / 2,
      paddingVertical: Spacing.half,
      paddingHorizontal: Spacing.one,
      marginTop: Spacing.two,
    },
    mcTagText: {
      fontSize: 8,
      fontWeight: "500",
    },
    heroCta: {
      marginTop: Spacing.one,
    },
    tagline: {
      fontSize: 18,
      fontWeight: "500",
      color: theme.text,
      lineHeight: 24,
      marginBottom: Spacing.two,
      textAlign: "right",
    },
    taglineAccent: {
      color: isDark ? "#AFA9EC" : theme.accent,
    },
    subText: {
      fontSize: 10,
      color: theme.textSecondary,
      lineHeight: 15,
      marginBottom: Spacing.four,
      textAlign: "right",
    },
    outlineButton: {
      backgroundColor: "transparent",
      borderWidth: 0.5,
      borderColor: theme.border,
      borderRadius: BorderRadius.large,
      paddingVertical: Spacing.three,
      alignItems: "center",
    },
    outlineButtonText: {
      color: theme.textSecondary,
      fontSize: Typography.body.fontSize,
      fontWeight: "500",
    },
    primaryButton: {
      backgroundColor: theme.accent,
      borderRadius: BorderRadius.large,
      paddingVertical: Spacing.three,
      alignItems: "center",
      marginBottom: Spacing.two,
    },
    primaryButtonText: {
      color: "#FFFFFF",
      fontSize: Typography.body.fontSize,
      fontWeight: "500",
    },
  });
};

export const authStyles = (theme: Theme, focusedField: string | null = null) =>
  StyleSheet.create({
    safeArea: {
      flex: 1,
      backgroundColor: theme.background,
    },
    scrollContainer: {
      flexGrow: 1,
      justifyContent: "center",
      paddingVertical: Spacing.six,
      paddingHorizontal: Spacing.four,
    },
    phoneCard: {
      backgroundColor: theme.background,
      borderRadius: 32,
      paddingHorizontal: Spacing.four,
      paddingVertical: Spacing.five,
      borderWidth: 0.5,
      borderColor: theme.border,
    },
    headerRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: Spacing.three,
      marginBottom: Spacing.five,
    },
    iconCircle: {
      width: 44,
      height: 44,
      borderRadius: BorderRadius.large,
      backgroundColor: theme.backgroundElement,
      borderWidth: 0.5,
      borderColor: theme.accent + "80",
      alignItems: "center",
      justifyContent: "center",
    },
    headerTextContainer: {
      flex: 1,
    },
    headerTitle: {
      fontSize: Typography.title.fontSize,
      fontWeight: Typography.title.fontWeight,
      color: theme.text,
      textAlign: "right",
    },
    fieldLabel: {
      fontSize: Typography.fieldLabel.fontSize,
      fontWeight: Typography.fieldLabel.fontWeight as any,
      color: theme.textSecondary,
      letterSpacing: Typography.fieldLabel.letterSpacing,
      marginBottom: Spacing.two,
      marginTop: Spacing.one,
      textAlign: "right",
    },
    inputContainer: {
      flexDirection: "row",
      alignItems: "center",
      backgroundColor: theme.inputBackground,
      borderWidth: 0.5,
      borderColor: focusedField ? theme.accent : theme.border,
      borderRadius: BorderRadius.medium,
      paddingVertical: Spacing.two,
      paddingHorizontal: Spacing.three,
      marginBottom: Spacing.three,
      gap: Spacing.two,
    },
    textInput: {
      flex: 1,
      fontSize: 12,
      color: theme.text,
      padding: 0,
      margin: 0,
      textAlign: "right",
    },
    continueButton: {
      backgroundColor: theme.accent,
      borderRadius: BorderRadius.large,
      paddingVertical: Spacing.three,
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      gap: Spacing.two,
      marginTop: Spacing.two,
      marginBottom: Spacing.four,
    },
    continueText: {
      fontSize: Typography.body.fontSize,
      fontWeight: "500",
      color: "#fff",
    },
    switchContainer: {
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      marginTop: Spacing.two,
    },
    switchText: {
      fontSize: 11,
      color: theme.textSecondary,
    },
    switchLink: {
      fontSize: 11,
      fontWeight: "500",
      color: theme.accent,
    },
    subtitle: {
      fontSize: Typography.subtitle.fontSize,
      fontWeight: Typography.subtitle.fontWeight,
      color: theme.textSecondary,
      lineHeight: Typography.subtitle.lineHeight,
      marginBottom: Spacing.four,
      textAlign: "right",
    },

    secondaryButton: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      gap: Spacing.two,
      backgroundColor: "transparent",
      borderWidth: 0.5,
      borderColor: theme.border,
      borderRadius: BorderRadius.large,
      paddingVertical: Spacing.three,
      marginTop: Spacing.two,
    },
    secondaryButtonDisabled: {
      opacity: 0.6,
    },
    secondaryButtonText: {
      fontSize: Typography.body.fontSize,
      fontWeight: "500",
      color: theme.accent,
    },
    secondaryButtonTextDisabled: {
      color: theme.textSecondary,
    },
  });
