#!/bin/bash

# Navegar al directorio del proyecto
cd /app/frontend

# Instalar dependencias de Mantine
echo "Instalando dependencias de Mantine..."
npm install @mantine/core @mantine/hooks --yes

# Instalar dependencias de desarrollo para PostCSS
echo "Instalando dependencias de desarrollo para PostCSS..."
npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars --yes

# Crear archivo de configuración de PostCSS
echo "Creando archivo de configuración de PostCSS..."
cat <<EOL > postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};
EOL

# Instalar ESLint y Prettier
echo "Instalando ESLint y Prettier..."
npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier --yes

# Crear archivo de configuración de ESLint
echo "Creando archivo de configuración de ESLint..."
cat <<EOL > .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};
EOL

# Crear archivo de configuración de Prettier
echo "Creando archivo de configuración de Prettier..."
cat <<EOL > .prettierrc.json
{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true,
  "jsxSingleQuote": false,
  "tabWidth": 2,
  "useTabs": false
}
EOL

# Agregar scripts de ESLint y Prettier al package.json
echo "Agregando scripts de ESLint y Prettier al package.json..."
npx npm-add-script -k "lint" -v "eslint 'src/**/*.{js,jsx,ts,tsx}'"
npx npm-add-script -k "format" -v "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md}'"


echo "¡Configuración completada! Tu proyecto está listo para desarrollarse."