import { Platform, 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 },
    keyboardView: { flex: 1 },
    scroll: { flex: 1 },
    scrollContent: {
      paddingHorizontal: spacing.lg,
      paddingTop: spacing.xxl,
      paddingBottom: 48,
      gap: spacing.lg,
    },
    contentColumn: {
      gap: spacing.lg,
    },
    endpointList: {
      gap: spacing.md,
    },

    addBtn: {
      flexDirection: "row",
      alignItems: "center",
      gap: 4,
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: radius.md,
      backgroundColor: colors.primary,
    },
    addBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.primaryForeground,
    },

    endpointCard: {
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.card,
      overflow: "hidden",
    },
    endpointCardActive: { borderColor: colors.primary },
    endpointHeader: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.md,
    },
    endpointInfo: { flex: 1 },
    endpointNameRow: { flexDirection: "row", alignItems: "center", gap: 6 },
    endpointName: {
      fontSize: fontSize.base,
      fontWeight: fontWeight.semibold,
      color: colors.foreground,
    },
    currentBadge: {
      paddingHorizontal: 6,
      paddingVertical: 2,
      borderRadius: radius.sm,
      backgroundColor: withOpacity(colors.primary, 0.15),
    },
    currentBadgeText: {
      fontSize: fontSize.xs,
      fontWeight: fontWeight.medium,
      color: colors.primary,
    },
    endpointProvider: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      marginTop: 2,
      lineHeight: 20,
    },
    chevron: { fontSize: fontSize.sm, color: colors.mutedForeground },

    expandedContent: {
      paddingHorizontal: spacing.md,
      paddingBottom: spacing.md,
      gap: spacing.md,
    },

    row: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingVertical: spacing.xs,
    },
    label: { fontSize: fontSize.sm, color: colors.foreground },
    toggle: {
      width: 44,
      height: 24,
      borderRadius: 12,
      backgroundColor: colors.muted,
      padding: 2,
    },
    toggleActive: { backgroundColor: colors.primary },
    toggleThumb: {
      width: 20,
      height: 20,
      borderRadius: 10,
      backgroundColor: colors.background,
      transform: [{ translateX: 0 }],
    },
    toggleThumbActive: { transform: [{ translateX: 20 }] },

    fieldGroup: { gap: spacing.xs },
    fieldLabel: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.foreground,
    },
    input: {
      height: 36,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      paddingHorizontal: spacing.sm,
      fontSize: fontSize.sm,
      color: colors.foreground,
      textAlignVertical: "center",
    },
    baseUrlHint: {
      fontSize: fontSize.sm,
      lineHeight: 20,
      color: colors.mutedForeground,
    },
    exactUrlCard: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      gap: spacing.md,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: withOpacity(colors.border, 0.8),
      backgroundColor: withOpacity(colors.background, 0.6),
      paddingHorizontal: spacing.sm,
      paddingVertical: spacing.sm,
    },
    exactUrlInfo: { flex: 1, gap: 2 },
    previewCard: {
      gap: spacing.xs,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: withOpacity(colors.border, 0.8),
      backgroundColor: withOpacity(colors.background, 0.7),
      padding: spacing.sm,
    },
    previewHeader: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      gap: spacing.sm,
    },
    previewLabel: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },
    previewValue: {
      fontSize: fontSize.sm,
      color: colors.foreground,
      fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
    },
    previewCopyButton: {
      paddingHorizontal: spacing.sm,
      paddingVertical: 4,
      borderRadius: radius.sm,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
    },
    previewCopyButtonText: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      fontWeight: fontWeight.medium,
    },
    testModelChips: { flexDirection: "row", flexWrap: "wrap", gap: spacing.xs },
    testModelChip: {
      paddingHorizontal: spacing.sm,
      paddingVertical: 4,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
    },
    testModelChipActive: {
      borderColor: colors.primary,
      backgroundColor: withOpacity(colors.primary, 0.1),
    },
    testModelChipText: { fontSize: fontSize.xs, color: colors.foreground },
    testModelChipTextActive: { color: colors.primary, fontWeight: fontWeight.medium },

    providerGrid: { flexDirection: "row", flexWrap: "wrap", gap: spacing.xs },
    providerBtn: {
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.xs,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
    },
    providerBtnActive: {
      borderColor: colors.primary,
      backgroundColor: withOpacity(colors.primary, 0.1),
    },
    providerBtnText: { fontSize: fontSize.sm, color: colors.foreground },
    providerBtnTextActive: { color: colors.primary, fontWeight: fontWeight.medium },

    modelsHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
    modelsActions: { flexDirection: "row", alignItems: "center", gap: spacing.xs },
    fetchBtn: {
      paddingHorizontal: spacing.sm,
      paddingVertical: spacing.xs,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
    },
    fetchBtnText: { fontSize: fontSize.sm, color: colors.foreground },
    endpointTestResult: {
      fontSize: fontSize.sm,
      marginTop: spacing.xs,
      lineHeight: 20,
    },
    endpointTestSuccess: { color: "#16a34a" },
    endpointTestError: { color: colors.destructive },
    errorText: {
      fontSize: fontSize.sm,
      color: colors.destructive,
      marginTop: spacing.xs,
      lineHeight: 20,
    },
    modelTags: { flexDirection: "row", flexWrap: "wrap", gap: spacing.xs, maxHeight: 120, overflow: "hidden" },
    modelTag: {
      flexDirection: "row",
      alignItems: "center",
      gap: 4,
      paddingHorizontal: spacing.sm,
      paddingVertical: 4,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
    },
    modelTagActive: {
      borderColor: colors.primary,
      backgroundColor: withOpacity(colors.primary, 0.1),
    },
    modelTagText: { fontSize: fontSize.xs, color: colors.foreground, maxWidth: 180 },
    modelTagTextActive: { color: colors.primary, fontWeight: fontWeight.medium },

    addModelRow: { flexDirection: "row", alignItems: "center", gap: spacing.xs },
    addModelBtn: {
      paddingHorizontal: spacing.md,
      paddingVertical: spacing.xs,
      borderRadius: radius.md,
      backgroundColor: colors.primary,
    },
    addModelBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.primaryForeground,
    },

    deleteBtn: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      gap: 6,
      paddingVertical: spacing.sm,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.destructive,
      backgroundColor: withOpacity(colors.destructive, 0.05),
    },
    deleteBtnText: {
      fontSize: fontSize.sm,
      fontWeight: fontWeight.medium,
      color: colors.destructive,
    },

    sectionCard: {
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.card,
      padding: spacing.md,
      gap: spacing.lg,
    },
    sectionTitle: {
      fontSize: fontSize.base,
      fontWeight: fontWeight.semibold,
      color: colors.foreground,
    },
    sectionDesc: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      lineHeight: 20,
    },

    paramRow: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      gap: spacing.md,
    },
    paramLabel: { fontSize: fontSize.sm, color: colors.foreground },
    paramValue: { fontSize: fontSize.sm, fontWeight: fontWeight.medium, color: colors.primary },
    paramInput: {
      width: 80,
      height: 32,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      paddingHorizontal: spacing.sm,
      fontSize: fontSize.sm,
      color: colors.foreground,
      textAlign: "right",
    },

    stepperContainer: { flexDirection: "row", alignItems: "center", gap: spacing.sm },
    stepperBtn: {
      width: 32,
      height: 32,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      alignItems: "center",
      justifyContent: "center",
    },
    stepperInput: {
      width: 60,
      height: 32,
      borderRadius: radius.md,
      borderWidth: 1,
      borderColor: colors.border,
      backgroundColor: colors.background,
      fontSize: fontSize.sm,
      color: colors.foreground,
      paddingHorizontal: 4,
      paddingVertical: 6,
      textAlign: "center",
    },
  });
