import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
import animate from 'tailwindcss-animate';
import type { PluginAPI } from 'tailwindcss/types/config';

export const unraidPreset = {
  darkMode: ['selector', '[data-mode="dark"]'],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      borderColor: {
        DEFAULT: 'hsl(var(--border))',
      },
      fontFamily: {
        sans: 'clear-sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
      },
      gridTemplateColumns: {
        'settings': '35% 1fr',
      },
      colors: {
        inherit: 'inherit',
        transparent: 'transparent',

        black: '#1c1b1b',
        'grey-darkest': '#222',
        'grey-darker': '#606f7b',
        'grey-dark': '#383735',
        'grey-mid': '#999999',
        grey: '#e0e0e0',
        'grey-light': '#dae1e7',
        'grey-lighter': '#f1f5f8',
        'grey-lightest': '#f2f2f2',
        white: '#ffffff',

        // unraid colors
        'yellow-accent': '#E9BF41',
        'orange-dark': '#f15a2c',
        orange: '#ff8c2f',
        'unraid-red': {
          DEFAULT: '#E22828',
          '50': '#fef2f2',
          '100': '#ffe1e1',
          '200': '#ffc9c9',
          '300': '#fea3a3',
          '400': '#fc6d6d',
          '500': '#f43f3f',
          '600': '#e22828',
          '700': '#bd1818',
          '800': '#9c1818',
          '900': '#821a1a',
          '950': '#470808',
        },
        'unraid-green': {
          DEFAULT: '#63A659',
          '50': '#f5f9f4',
          '100': '#e7f3e5',
          '200': '#d0e6cc',
          '300': '#aad1a4',
          '400': '#7db474',
          '500': '#63a659',
          '600': '#457b3e',
          '700': '#396134',
          '800': '#314e2d',
          '900': '#284126',
          '950': '#122211',
        },
        'header-text-primary': 'var(--header-text-primary)',
        'header-text-secondary': 'var(--header-text-secondary)',
        'header-background-color': 'var(--header-background-color)',
        // ShadCN
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      fontSize: {
        '10px': '10px',
        '12px': '12px',
        '14px': '14px',
        '16px': '16px',
        '18px': '18px',
        '20px': '20px',
        '24px': '24px',
        '30px': '30px',
      },
      spacing: {
        '4.5': '1.125rem',
        '-8px': '-8px',
        '2px': '2px',
        '4px': '4px',
        '6px': '6px',
        '8px': '8px',
        '10px': '10px',
        '12px': '12px',
        '14px': '14px',
        '16px': '16px',
        '20px': '20px',
        '24px': '24px',
        '28px': '28px',
        '32px': '32px',
        '36px': '36px',
        '40px': '40px',
        '64px': '64px',
        '80px': '80px',
        '90px': '90px',
        '150px': '150px',
        '160px': '160px',
        '200px': '200px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '448px': '448px',
        '512px': '512px',
        '640px': '640px',
        '800px': '800px',
      },
      minWidth: {
        '86px': '86px',
        '160px': '160px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '800px': '800px',
      },
      maxWidth: {
        '86px': '86px',
        '160px': '160px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '640px': '640px',
        '800px': '800px',
        '1024px': '1024px',
      },
      screens: {
        '2xs': '470px',
        xs: '530px',
        tall: { raw: '(min-height: 700px)' },
      },
      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' },
        },
        'collapsible-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-collapsible-content-height)' },
        },
        'collapsible-up': {
          from: { height: 'var(--radix-collapsible-content-height)' },
          to: { height: '0' },
        },
        'mark-2': {
          '50%': { transform: 'translateY(-40px)' },
          '100%': { transform: 'translateY(0)' },
        },
        'mark-3': {
          '50%': { transform: 'translateY(-62px)' },
          '100%': { transform: 'translateY(0)' },
        },
        'mark-6': {
          '50%': { transform: 'translateY(40px)' },
          '100%': { transform: 'translateY(0)' },
        },
        'mark-7': {
          '50%': { transform: 'translateY(62px)' },
          '100%': { transform: 'translateY(0)' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
        'mark-2': 'mark-2 1.5s ease infinite',
        'mark-3': 'mark-3 1.5s ease infinite',
        'mark-6': 'mark-6 1.5s ease infinite',
        'mark-7': 'mark-7 1.5s ease infinite',
      },
      typography: (theme: PluginAPI['theme']) => ({
        DEFAULT: {
          css: {
            color: theme('colors.foreground'),
            a: {
              color: theme('colors.primary'),
              textDecoration: 'underline',
              '&:hover': {
                color: theme('colors.primary-foreground'),
              },
            },
            '--tw-prose-body': theme('colors.foreground'),
            '--tw-prose-headings': theme('colors.foreground'),
            '--tw-prose-lead': theme('colors.foreground'),
            '--tw-prose-links': theme('colors.primary'),
            '--tw-prose-bold': theme('colors.foreground'),
            '--tw-prose-counters': theme('colors.foreground'),
            '--tw-prose-bullets': theme('colors.foreground'),
            '--tw-prose-hr': theme('colors.foreground'),
            '--tw-prose-quotes': theme('colors.foreground'),
            '--tw-prose-quote-borders': theme('colors.foreground'),
            '--tw-prose-captions': theme('colors.foreground'),
            '--tw-prose-code': theme('colors.foreground'),
            '--tw-prose-pre-code': theme('colors.foreground'),
            '--tw-prose-pre-bg': theme('colors.background'),
            '--tw-prose-th-borders': theme('colors.foreground'),
            '--tw-prose-td-borders': theme('colors.foreground'),
            '--tw-prose-invert-body': theme('colors.background'),
            '--tw-prose-invert-headings': theme('colors.background'),
            '--tw-prose-invert-lead': theme('colors.background'),
            '--tw-prose-invert-links': theme('colors.primary'),
            '--tw-prose-invert-bold': theme('colors.background'),
            '--tw-prose-invert-counters': theme('colors.background'),
            '--tw-prose-invert-bullets': theme('colors.background'),
            '--tw-prose-invert-hr': theme('colors.background'),
            '--tw-prose-invert-quotes': theme('colors.background'),
            '--tw-prose-invert-quote-borders': theme('colors.background'),
            '--tw-prose-invert-captions': theme('colors.background'),
            '--tw-prose-invert-code': theme('colors.background'),
            '--tw-prose-invert-pre-code': theme('colors.background'),
            '--tw-prose-invert-pre-bg': theme('colors.foreground'),
            '--tw-prose-invert-th-borders': theme('colors.background'),
            '--tw-prose-invert-td-borders': theme('colors.background'),
          },
        },
      }),
    },
  },
  plugins: [typography, animate],
} satisfies Partial<Config>;
