{ pkgs ? import <nixpkgs> {} }:

pkgs.mkShell {
  buildInputs = with pkgs; [
    # Node.js and package managers
    nodejs_20
    nodePackages.npm
    nodePackages.yarn
    
    # Utilities
    git
    curl
    wget
    
    # Optional: Additional helpful tools
    direnv            # Environment management
    nodePackages.prettier  # Code formatting
    nodePackages.eslint    # Linting
  ];

  shellHook = ''
    echo "React + Tailwind development environment"
    echo "Node version: $(node -v)"
    echo "npm version: $(npm -v)"
    
    # Automatically set up a new project if package.json doesn't exist
    if [ ! -f package.json ]; then
      echo "No package.json found. Would you like to initialize a new React + Tailwind project? (y/n)"
      read response
      if [ "$response" = "y" ]; then
        # Create React project with Vite
        npm create vite@latest . -- --template react
        
        # Install dependencies
        npm install
        
        # Install Tailwind CSS and its dependencies
        echo "Installing Tailwind CSS..."
        npm install -D tailwindcss postcss autoprefixer
        
        # Initialize Tailwind config
        echo "Initializing Tailwind configuration..."
        npx tailwindcss init -p
        
        # Update src/index.css with Tailwind directives
        echo "Updating CSS with Tailwind directives..."
        if [ -f src/index.css ]; then
          cat > src/index.css << 'EOL'
@tailwind base;
@tailwind components;
@tailwind utilities;
EOL
          echo "Tailwind CSS directives added to src/index.css"
        else
          echo "Warning: src/index.css not found. You'll need to manually add Tailwind directives."
        fi
        
        echo -e "\nSetup complete! Start your development server with: npm run dev"
      fi
    fi
  '';
}