/** @type {import('tailwindcss').Config} */
const path = require('path');

const toPosix = (p) => p.replace(/\\/g, '/');

// Detecta si el config está corriendo desde node_modules (tu paquete)
const isNpmPackage = __dirname.includes('node_modules');

// Construye globs POSIX y evita negaciones absolutas frágiles
function getTemplatePaths() {
  // Raíces
  const packageRoot = __dirname;               // donde está este config
  const projectRoot = process.cwd();           // raíz del consumidor

  const pkgTpl = [
    toPosix(path.join(packageRoot, 'template/src/**/*.{ts,tsx,html,js,css}')),
    toPosix(path.join(packageRoot, 'template/index.html')),
  ];

  // NOTA: En v4 es más robusto evitar '!' absolutos. Mejor limita el alcance de forma positiva.
  const consumer = [
    toPosix(path.join(projectRoot, 'src/**/*.{html,md,mdx,js,jsx,ts,tsx}')),
    toPosix(path.join(projectRoot, 'app/**/*.{html,md,mdx,js,jsx,ts,tsx}')),
    toPosix(path.join(projectRoot, 'pages/**/*.{html,md,mdx,js,jsx,ts,tsx}')),
    toPosix(path.join(projectRoot, 'components/**/*.{html,md,mdx,js,jsx,ts,tsx}')),
    // Si quieres incluir markdown fuera de src/app/pages/components, deja la línea siguiente:
    // toPosix(path.join(projectRoot, '**/*.{html,md,mdx,js,jsx,ts,tsx}')),
  ];

  // Re-incluye explícitamente plantillas del paquete tal como llegan al consumidor
  const installedTpl = [
    'node_modules/@hrefcl/apidoc/template/src/**/*.{ts,tsx,html,js,css}',
    'node_modules/@hrefcl/apidoc/template/index.html',
  ];

  // En local queremos tanto templates locales como los de node_modules (por pruebas)
  if (!isNpmPackage) {
    return [...pkgTpl, ...installedTpl];
  }

  // En consumer: incluye tus templates + los del paquete instalado + fuentes reales del proyecto
  return [...pkgTpl, ...installedTpl, ...consumer];
}

const contentPaths = getTemplatePaths();

module.exports = {
    content: contentPaths,
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                    950: '#172554',
                },
                gray: {
                    50: '#f9fafb',
                    100: '#f3f4f6',
                    200: '#e5e7eb',
                    300: '#d1d5db',
                    400: '#9ca3af',
                    500: '#6b7280',
                    600: '#4b5563',
                    700: '#374151',
                    800: '#1f2937',
                    900: '#111827',
                    950: '#030712',
                },
                success: {
                    50: '#f0fdf4',
                    100: '#dcfce7',
                    200: '#bbf7d0',
                    300: '#86efac',
                    400: '#4ade80',
                    500: '#22c55e',
                    600: '#16a34a',
                    700: '#15803d',
                    800: '#166534',
                    900: '#14532d',
                    950: '#052e16',
                },
                warning: {
                    50: '#fffbeb',
                    100: '#fef3c7',
                    200: '#fde68a',
                    300: '#fcd34d',
                    400: '#fbbf24',
                    500: '#f59e0b',
                    600: '#d97706',
                    700: '#b45309',
                    800: '#92400e',
                    900: '#78350f',
                    950: '#451a03',
                },
                error: {
                    50: '#fef2f2',
                    100: '#fee2e2',
                    200: '#fecaca',
                    300: '#fca5a5',
                    400: '#f87171',
                    500: '#ef4444',
                    600: '#dc2626',
                    700: '#b91c1c',
                    800: '#991b1b',
                    900: '#7f1d1d',
                    950: '#450a0a',
                },
            },
            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
                mono: ['Fira Code', 'Monaco', 'Consolas', 'monospace'],
            },
            spacing: {
                '18': '4.5rem',
                '88': '22rem',
                '128': '32rem',
            },
            typography: {
                DEFAULT: {
                    css: {
                        maxWidth: 'none',
                        color: 'inherit',
                        a: {
                            color: 'inherit',
                            textDecoration: 'underline',
                            fontWeight: '500',
                        },
                        strong: {
                            color: 'inherit',
                            fontWeight: '600',
                        },
                        code: {
                            color: 'inherit',
                            backgroundColor: 'rgb(243 244 246)',
                            paddingLeft: '0.25rem',
                            paddingRight: '0.25rem',
                            paddingTop: '0.125rem',
                            paddingBottom: '0.125rem',
                            borderRadius: '0.25rem',
                            fontSize: '0.875em',
                        },
                        'code::before': {
                            content: '""',
                        },
                        'code::after': {
                            content: '""',
                        },
                    },
                },
                invert: {
                    css: {
                        code: {
                            backgroundColor: 'rgb(55 65 81)',
                        },
                    },
                },
            },
            animation: {
                'fade-in': 'fadeIn 0.5s ease-in-out',
                'slide-in': 'slideIn 0.3s ease-out',
                'bounce-subtle': 'bounceSubtle 0.6s ease-in-out',
            },
            keyframes: {
                fadeIn: {
                    '0%': { opacity: '0' },
                    '100%': { opacity: '1' },
                },
                slideIn: {
                    '0%': { transform: 'translateY(-10px)', opacity: '0' },
                    '100%': { transform: 'translateY(0)', opacity: '1' },
                },
                bounceSubtle: {
                    '0%, 100%': { transform: 'translateY(0)' },
                    '50%': { transform: 'translateY(-4px)' },
                },
            },
        },
    },
    // ⚠️ Cambios importantes en SAFELIST para que funcione igual en v3 y v4:
    //   * No dependemos de `variants: [...]` (ignorado en v4).
    //   * Incluimos las variantes en el propio patrón.
    safelist: [
        // Colores + variantes comunes
        { pattern: /(?:^|:)(hover|focus|active)?:?(bg|text|border)-(red|blue|green|gray|yellow|purple|orange|slate)-(50|100|200|300|400|500|600|700|800|900)$/ },
        // Redondeados
        { pattern: /^rounded(-(none|sm|md|lg|xl|2xl|3xl|full))?$/ },
        { pattern: /^rounded-(l|r|t|b)-(none|sm|md|lg|xl)$/ },
        // Sombras
        { pattern: /^shadow(-(sm|md|lg|xl|2xl|inner|none))?$/ },
        // Dimensiones
        { pattern: /^(w|h|max-w|max-h|min-w|min-h)-(0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|72|80|96|auto|px|full|screen)$/ },
        // Espaciados
        { pattern: /^(p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml)-(0|1|2|3|4|5|6|8|10|12|16|20|24|32|40|48|56|64|72|80|96|auto)$/ },
        // Display/position
        { pattern: /^(flex|grid|hidden|block|inline|inline-block|relative|absolute|fixed|sticky)$/ },
        // Tipografía
        { pattern: /^(text|font)-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|thin|light|normal|medium|semibold|bold|extrabold|black)$/ },
        // Dark variants más usadas
        { pattern: /^dark:(bg|text|border)-(gray|slate)-(50|100|200|300|400|500|600|700|800|900)$/ },
        { pattern: /^dark:(hover|focus):?(bg|text|border)-(gray|slate)-(100|200|300|400|500|600|700|800)$/ },

        // Clases explícitas frecuentes en el template
        'transition-all','duration-200','duration-300','ease-in-out','transform',
        'scale-105','opacity-0','opacity-100','translate-x-full','translate-x-0',
        'translate-y-full','translate-y-0'
    ],
    plugins: [require('@tailwindcss/typography')],
};