import { StyleSheet } from "react-native";
import {
  type ThemeColors,
  fontSize,
  fontWeight,
  radius,
  spacing,
  withOpacity,
} from "../../../styles/theme";

export const makeStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: { flex: 1, backgroundColor: colors.background },
    keyboardView: { flex: 1 },
    scroll: { flex: 1 },
    scrollContent: {
      paddingHorizontal: spacing.lg,
      paddingTop: spacing.xxl,
      paddingBottom: 56,
      gap: 24,
    },
    contentColumn: {},
    section: {},
    sectionSpaced: {
      marginTop: spacing.xl,
    },
    sectionTitle: {
      fontSize: fontSize.base,
      fontWeight: fontWeight.semibold,
      color: colors.foreground,
      marginBottom: 10,
    },
    layoutNotice: {
      fontSize: fontSize.xs,
      color: colors.mutedForeground,
      lineHeight: 18,
      marginBottom: 4,
    },
    card: {
      borderRadius: radius.xl,
      backgroundColor: colors.card,
      borderWidth: 1,
      borderColor: colors.border,
      padding: spacing.lg,
      gap: 12,
    },
    conflictCard: {
      borderRadius: radius.xl,
      backgroundColor: colors.card,
      borderWidth: 2,
      borderColor: withOpacity("#f59e0b", 0.5),
      padding: spacing.lg,
      gap: 12,
    },
    conflictTitle: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    conflictDesc: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    uploadBtn: {
      flex: 1,
      borderRadius: radius.lg,
      backgroundColor: colors.primary,
      paddingVertical: 8,
      alignItems: "center",
    },
    uploadBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.primaryForeground,
    },
    downloadBtn: {
      flex: 1,
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      paddingVertical: 8,
      alignItems: "center",
    },
    downloadBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    fieldGroup: { gap: 6, marginBottom: 12 },
    fieldLabel: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    input: {
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      paddingHorizontal: 12,
      paddingVertical: 8,
      fontSize: fontSize.sm,
      color: colors.foreground,
    },
    btnRow: { flexDirection: "row", gap: 12, paddingTop: 4 },
    outlineBtn: {
      flex: 1,
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      paddingVertical: 8,
      alignItems: "center",
    },
    outlineBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    primaryBtn: {
      flex: 1,
      borderRadius: radius.lg,
      backgroundColor: colors.primary,
      paddingVertical: 8,
      alignItems: "center",
    },
    primaryBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.primaryForeground,
    },
    btnDisabled: { opacity: 0.4 },
    successText: { fontSize: fontSize.sm, color: colors.emerald },
    errorText: { fontSize: fontSize.sm, color: colors.destructive },
    syncRow: {
      flexDirection: "row",
      alignItems: "flex-start",
      justifyContent: "space-between",
      gap: 12,
    },
    syncInfo: {
      flex: 1,
      minWidth: 0,
    },
    syncLabel: {
      fontSize: fontSize.sm,
      color: colors.foreground,
      fontWeight: fontWeight.medium,
    },
    syncValue: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
      marginTop: 2,
    },
    statusText: {
      fontSize: fontSize.sm,
      color: colors.primary,
      marginTop: 2,
    },
    syncBtn: {
      flexDirection: "row",
      alignItems: "center",
      alignSelf: "flex-start",
      gap: 6,
      borderRadius: radius.lg,
      backgroundColor: colors.primary,
      paddingHorizontal: 12,
      paddingVertical: 6,
    },
    syncBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.primaryForeground,
    },
    resultCard: {
      borderRadius: radius.lg,
      backgroundColor: colors.background,
      padding: 12,
      gap: 2,
    },
    resultText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    autoSyncRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: colors.border,
      paddingTop: 12,
    },
    intervalRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      borderTopWidth: StyleSheet.hairlineWidth,
      borderTopColor: colors.border,
      paddingTop: 12,
      marginTop: 12,
      gap: 12,
    },
    autoSyncLabel: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    autoSyncDesc: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginTop: 2,
      lineHeight: 20,
    },
    toggle: {
      width: 44,
      height: 24,
      borderRadius: 12,
      backgroundColor: colors.muted,
      justifyContent: "center",
      padding: 2,
    },
    toggleActive: { backgroundColor: colors.primary },
    toggleThumb: {
      width: 20,
      height: 20,
      borderRadius: 10,
      backgroundColor: colors.card,
    },
    toggleThumbActive: { alignSelf: "flex-end" },
    intervalInputWrap: {
      minWidth: 116,
      alignItems: "flex-end",
      gap: 4,
    },
    intervalInput: {
      width: 72,
      borderWidth: 1,
      borderColor: colors.border,
      borderRadius: radius.md,
      backgroundColor: colors.background,
      color: colors.foreground,
      paddingHorizontal: 10,
      paddingVertical: 8,
      textAlign: "right",
      fontSize: fontSize.sm,
    },
    intervalSuffix: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
    },
    advancedHeader: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
    },
    chevron: { fontSize: 12, color: colors.mutedForeground },
    resetBtn: {
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: withOpacity(colors.destructive, 0.3),
      paddingVertical: 8,
      alignItems: "center",
    },
    resetBtnText: {
      fontSize: fontSize.sm,
      color: colors.destructive,
    },
    resetDesc: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginTop: 8,
      textAlign: "center",
      lineHeight: 20,
    },
    progressContainer: {
      marginTop: 8,
    },
    progressTrack: {
      height: 4,
      backgroundColor: colors.muted,
      borderRadius: 2,
      overflow: "hidden",
    },
    progressFill: {
      height: "100%",
      backgroundColor: colors.primary,
      borderRadius: 2,
    },
    progressText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginTop: 4,
      lineHeight: 20,
    },
    backendSelector: {
      flexDirection: "row",
      gap: 8,
    },
    backendBtn: {
      flex: 1,
      paddingVertical: 10,
      paddingHorizontal: 12,
      borderRadius: radius.lg,
      backgroundColor: colors.muted,
      alignItems: "center",
    },
    backendBtnActive: {
      backgroundColor: colors.primary,
    },
    backendBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.mutedForeground,
    },
    backendBtnTextActive: {
      color: colors.primaryForeground,
    },
    lanDesc: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginBottom: 12,
      lineHeight: 20,
    },
    lanModeSelector: {
      flexDirection: "row",
      gap: 8,
      marginBottom: 12,
    },
    lanModeBtn: {
      flex: 1,
      paddingVertical: 8,
      borderRadius: radius.md,
      backgroundColor: colors.muted,
      alignItems: "center",
    },
    lanModeBtnActive: {
      backgroundColor: colors.primary,
    },
    lanModeBtnText: {
      fontSize: fontSize.xs,
      fontWeight: fontWeight.medium,
      color: colors.mutedForeground,
    },
    lanModeBtnTextActive: {
      color: colors.primaryForeground,
    },
    lanStatusRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 8,
      marginBottom: 12,
    },
    lanStatusDot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: colors.muted,
    },
    lanStatusDotGreen: {
      backgroundColor: colors.emerald,
    },
    lanStatusText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
    },
    lanQrSection: {
      alignItems: "center",
      marginBottom: 12,
    },
    lanQrPlaceholder: {
      width: 160,
      height: 160,
      backgroundColor: colors.muted,
      borderRadius: radius.lg,
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 12,
    },
    lanQrText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    lanPairCodeLabel: {
      fontSize: fontSize.xs,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    lanPairCode: {
      fontSize: 24,
      fontWeight: fontWeight.bold,
      letterSpacing: 4,
      color: colors.foreground,
      marginVertical: 8,
    },
    lanAddress: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    lanBtn: {
      flex: 1,
    },
    lanServerSection: {},
    lanClientSection: {},
    lanStatusDotRed: {
      backgroundColor: colors.destructive,
    },
    manualIPCard: {
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: withOpacity(colors.destructive, 0.3),
      backgroundColor: withOpacity(colors.destructive, 0.05),
      padding: 12,
      marginBottom: 12,
    },
    manualIPHint: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginBottom: 8,
      lineHeight: 20,
    },
    manualIPRow: {
      flexDirection: "row",
      gap: 8,
      alignItems: "center",
    },
    separator: {
      flexDirection: "row",
      alignItems: "center",
      marginVertical: 16,
      gap: 8,
    },
    separatorLine: {
      flex: 1,
      height: 1,
      backgroundColor: colors.border,
    },
    separatorText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      fontWeight: "500",
    },
    scannerContainer: {
      flex: 1,
      backgroundColor: "#000",
    },
    scannerOverlay: {
      flex: 1,
      backgroundColor: "rgba(0,0,0,0.5)",
      justifyContent: "center",
      alignItems: "center",
    },
    scannerTarget: {
      width: 250,
      height: 250,
      borderWidth: 2,
      borderColor: colors.primary,
      backgroundColor: "transparent",
      borderRadius: 12,
    },
    scannerText: {
      color: "#fff",
      fontSize: 16,
      marginTop: 24,
      textAlign: "center",
      paddingHorizontal: 32,
    },
    scannerCloseBtn: {
      position: "absolute",
      bottom: 64,
      paddingVertical: 12,
      paddingHorizontal: 32,
      backgroundColor: "rgba(255,255,255,0.2)",
      borderRadius: 24,
    },
    scannerCloseText: {
      color: "#fff",
      fontSize: 16,
      fontWeight: "600",
    },
  });

export type SyncStyles = ReturnType<typeof makeStyles>;
