import { type Config } from 'tailwindcss';

import { convertTwColor, hexToRgb, remCalc } from '@agiflowai/frontend-shared-theme';
import baseConfig from '@agiflowai/frontend-shared-theme/configs/baseTheme.json';
import lightConfig from '@agiflowai/frontend-shared-theme/configs/lightTheme.json';
import darkConfig from '@agiflowai/frontend-shared-theme/configs/darkTheme.json';

export const tailwindTheme: Config['theme'] = {
  screens: {
    sm: remCalc(baseConfig.layout.breakpoints.xs),
    md: remCalc(baseConfig.layout.breakpoints.sm),
    lg: remCalc(baseConfig.layout.breakpoints.md),
    xl: remCalc(baseConfig.layout.breakpoints.lg),
    '2xl': remCalc(baseConfig.layout.breakpoints.xlg),
    '3xl': remCalc(baseConfig.layout.breakpoints.xxxlg),
  },
  colors: {
    background: convertTwColor('--colors-background'),
    'background-shade': convertTwColor('--colors-background-shade'),
    foreground: convertTwColor('--colors-foreground'),
    primary: convertTwColor('--colors-primary'),
    'primary-foreground': convertTwColor('--colors-primary-foreground'),
    'primary-text': convertTwColor('--colors-primary-text'),
    secondary: convertTwColor('--colors-secondary'),
    'secondary-foreground': convertTwColor('--colors-secondary-foreground'),
    'secondary-text': convertTwColor('--colors-secondary-text'),
    muted: convertTwColor('--colors-muted'),
    'muted-foreground': convertTwColor('--colors-muted-foreground'),
    card: convertTwColor('--colors-card'),
    'card-foreground': convertTwColor('--colors-card-foreground'),
    popover: convertTwColor('--colors-popover'),
    'popover-foreground': convertTwColor('--colors-popover-foreground'),
    border: convertTwColor('--colors-border'),
    input: convertTwColor('--colors-input'),
    ring: convertTwColor('--colors-ring'),
    accent: convertTwColor('--colors-accent'),
    'accent-foreground': convertTwColor('--colors-accent-foreground'),
    destructive: convertTwColor('--colors-destructive'),
    'destructive-foreground': convertTwColor('--colors-destructive-foreground'),
    black: convertTwColor('--colors-black'),
    white: convertTwColor('--colors-white'),
    text: convertTwColor('--colors-text'),
    'text-inverted': convertTwColor('--colors-text-inverted'),
    mono: convertTwColor('--colors-mono'),
    'mono-light': convertTwColor('--colors-mono-light'),
    'mono-xlight': convertTwColor('--colors-mono-xlight'),
    'mono-2xlight': convertTwColor('--colors-mono-2xlight'),
    'mono-3xlight': convertTwColor('--colors-mono-3xlight'),
    transparent: 'var(--colors-transparent)',
    info: convertTwColor('--colors-info'),
    success: convertTwColor('--colors-success'),
    error: convertTwColor('--colors-error'),
    alert: convertTwColor('--colors-alert'),
  },
  fontFamily: {
    sans: ['var(--fonts-main)'],
    serif: ['var(--fonts-head)'],
  },
  fontSize: {
    '3xs': remCalc(baseConfig.fonts.sizes.xxxsml),
    '2xs': remCalc(baseConfig.fonts.sizes.xxsml),
    xs: remCalc(baseConfig.fonts.sizes.xsml),
    sm: remCalc(baseConfig.fonts.sizes.sml),
    md: remCalc(baseConfig.fonts.sizes.md),
    lg: remCalc(baseConfig.fonts.sizes.lg),
    h6: remCalc(baseConfig.fonts.sizes.h6),
    h5: remCalc(baseConfig.fonts.sizes.h5),
    h4: remCalc(baseConfig.fonts.sizes.h4),
    h3: remCalc(baseConfig.fonts.sizes.h3),
    h2: remCalc(baseConfig.fonts.sizes.h2),
    h1: remCalc(baseConfig.fonts.sizes.h1),
    heading: remCalc(baseConfig.fonts.sizes.h1),
  },
  iconSize: {
    sm: remCalc(baseConfig.icons.sizes.sml),
    md: remCalc(baseConfig.icons.sizes.md),
    lg: remCalc(baseConfig.icons.sizes.lg),
    xlg: remCalc(baseConfig.icons.sizes.xlg),
    '2xlg': remCalc(baseConfig.icons.sizes.xxlg),
    '3xlg': remCalc(baseConfig.icons.sizes.xxxlg),
  },
  extend: {
    boxShadow: {
      sm: `0 1px 2px 0 rgb(var(--colors-shadow-dark) / 0.05)`,
      default: `0 1px 3px 0 rgb(var(--colors-shadow-dark) / 0.1), 0 1px 2px -1px rgb(var(--colors-shadow-dark) / 0.1)`,
      md: `0 4px 6px -1px rgb(var(--colors-shadow-dark) / 0.1), 0 2px 4px -2px rgb(var(--colors-shadow-dark) / 0.1)`,
      lg: `0 10px 15px -3px rgb(var(--colors-shadow-dark) / 0.1), 0 4px 6px -4px rgb(var(--colors-shadow-dark) / 0.1)`,
      xl: `0 20px 25px -5px rgb(var(--colors-shadow-dark) / 0.1), 0 8px 10px -6px rgb(var(--colors-shadow-dark) / 0.1)`,
      '2xl': `0 25px 50px -12px rgb(var(--colors-shadow-dark) / 0.40)`,
    },
    gridTemplateColumns: {
      // Complex site-specific column configuration
      'cards-2': 'repeat(2, minmax(250px, 1fr))',
      'cards-3': 'repeat(3, minmax(250px, 1fr))',
      'cards-4': 'repeat(4, minmax(250px, 1fr))',
    },
    scale: {
      '105': '1.01',
    },
    keyframes: {
      'accordion-down': {
        from: { height: '0' },
        to: { height: 'var(--radix-accordion-content-height)' },
      },
      'accordion-up': {
        from: { height: 'var(--radix-accordion-content-height)' },
        to: { height: '0' },
      },
    },
    animation: {
      'accordion-down': 'accordion-down 0.2s ease-out',
      'accordion-up': 'accordion-up 0.2s ease-out',
    },
  },
  variables: {
    DEFAULT: {
      colors: {
        background: hexToRgb(lightConfig.colors.background.default),
        'background-shade': hexToRgb(lightConfig.colors.background.shade),
        foreground: hexToRgb(lightConfig.colors.mono.default),
        muted: hexToRgb(lightConfig.colors.mono.xxlight),
        'muted-foreground': hexToRgb(lightConfig.colors.mono.default),
        card: hexToRgb(lightConfig.colors.background.default),
        'card-foreground': hexToRgb(lightConfig.colors.mono.default),
        popover: hexToRgb(lightConfig.colors.background.default),
        'popover-foreground': hexToRgb(lightConfig.colors.mono.default),
        border: hexToRgb(lightConfig.colors.border),
        input: hexToRgb(lightConfig.colors.mono.default),
        inputText: hexToRgb(lightConfig.colors.text.default),
        primary: hexToRgb(baseConfig.colors.primary.default),
        'primary-foreground': hexToRgb(baseConfig.colors.primary.text),
        'primary-text': hexToRgb(baseConfig.colors.primary.text),
        secondary: hexToRgb(baseConfig.colors.secondary.default),
        'secondary-foreground': hexToRgb(baseConfig.colors.secondary.text),
        'secondary-text': hexToRgb(baseConfig.colors.secondary.text),
        accent: hexToRgb(lightConfig.colors.mono.xxxlight),
        'accent-foreground': hexToRgb(lightConfig.colors.mono.default),
        destructive: hexToRgb(baseConfig.colors.semantic.error),
        'destructive-foreground': hexToRgb(lightConfig.colors.mono.xxxlight),
        ring: hexToRgb(lightConfig.colors.mono.xxlight),
        black: hexToRgb(baseConfig.colors.black),
        white: hexToRgb(baseConfig.colors.white),
        text: hexToRgb(lightConfig.colors.text.default),
        'text-inverted': hexToRgb(lightConfig.colors.text.inverted),
        mono: hexToRgb(lightConfig.colors.mono.default),
        'mono-light': hexToRgb(lightConfig.colors.mono.light),
        'mono-xlight': hexToRgb(lightConfig.colors.mono.xlight),
        'mono-2xlight': hexToRgb(lightConfig.colors.mono.xxlight),
        'mono-3xlight': hexToRgb(lightConfig.colors.mono.xxxlight),
        transparent: baseConfig.colors.transparent,
        info: hexToRgb(baseConfig.colors.semantic.info),
        success: hexToRgb(baseConfig.colors.semantic.success),
        error: hexToRgb(baseConfig.colors.semantic.error),
        alert: hexToRgb(baseConfig.colors.semantic.alert),
        'shadow-dark': hexToRgb(lightConfig.colors.shadow.dark),
      },
    },
  },
  darkVariables: {
    DEFAULT: {
      colors: {
        background: hexToRgb(darkConfig.colors.background.default),
        'background-shade': hexToRgb(darkConfig.colors.background.shade),
        foreground: hexToRgb(darkConfig.colors.mono.default),
        muted: hexToRgb(darkConfig.colors.mono.xxlight),
        'muted-foreground': hexToRgb(darkConfig.colors.mono.default),
        card: hexToRgb(darkConfig.colors.background.default),
        'card-foreground': hexToRgb(darkConfig.colors.mono.default),
        popover: hexToRgb(darkConfig.colors.background.default),
        'popover-foreground': hexToRgb(darkConfig.colors.mono.default),
        border: hexToRgb(darkConfig.colors.border),
        input: hexToRgb(darkConfig.colors.mono.default),
        inputText: hexToRgb(darkConfig.colors.text.default),
        primary: hexToRgb(baseConfig.colors.primary.default),
        'primary-foreground': hexToRgb(baseConfig.colors.primary.text),
        'primary-text': hexToRgb(baseConfig.colors.primary.text),
        secondary: hexToRgb(baseConfig.colors.secondary.default),
        'secondary-foreground': hexToRgb(baseConfig.colors.secondary.text),
        'secondary-text': hexToRgb(baseConfig.colors.secondary.text),
        accent: hexToRgb(darkConfig.colors.mono.xxxlight),
        'accent-foreground': hexToRgb(darkConfig.colors.mono.default),
        destructive: hexToRgb(baseConfig.colors.semantic.error),
        'destructive-foreground': hexToRgb(darkConfig.colors.mono.xxxlight),
        ring: hexToRgb(darkConfig.colors.mono.xxlight),
        black: hexToRgb(baseConfig.colors.black),
        white: hexToRgb(baseConfig.colors.white),
        text: hexToRgb(darkConfig.colors.text.default),
        'text-inverted': hexToRgb(darkConfig.colors.text.inverted),
        mono: hexToRgb(darkConfig.colors.mono.default),
        'mono-light': hexToRgb(darkConfig.colors.mono.light),
        'mono-xlight': hexToRgb(darkConfig.colors.mono.xlight),
        'mono-2xlight': hexToRgb(darkConfig.colors.mono.xxlight),
        'mono-3xlight': hexToRgb(darkConfig.colors.mono.xxxlight),
        transparent: baseConfig.colors.transparent,
        info: hexToRgb(baseConfig.colors.semantic.info),
        success: hexToRgb(baseConfig.colors.semantic.success),
        error: hexToRgb(baseConfig.colors.semantic.error),
        alert: hexToRgb(baseConfig.colors.semantic.alert),
        'shadow-dark': hexToRgb(darkConfig.colors.shadow.dark),
      },
    },
  },
};