#!/bin/bash

# Page Layouts Setup Script
# This script helps set up and test the page layouts feature

set -e

echo "🎨 Page Layouts Setup"
echo "===================="
echo ""

# Colors for output
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

# Check if we're in the right directory
if [ ! -d "backend" ] || [ ! -d "frontend" ]; then
    echo "❌ Error: This script must be run from the project root directory"
    echo "   (The directory containing backend/ and frontend/ folders)"
    exit 1
fi

echo -e "${BLUE}Step 1: Database migration${NC}"
echo "Note: You'll need to run the migration for each tenant."
echo ""
echo "Run the following command for each tenant:"
echo "  cd backend && npm run migrate:tenant <tenant-slug-or-id>"
echo ""
read -p "Press Enter to continue with frontend setup..."
echo ""

echo -e "${BLUE}Step 2: Installing frontend dependencies...${NC}"
cd frontend
if ! npm list gridstack &> /dev/null; then
    npm install gridstack
    echo -e "${GREEN}✓ GridStack installed${NC}"
else
    echo -e "${YELLOW}⚠ GridStack already installed${NC}"
fi
cd ..
echo ""

echo -e "${BLUE}Step 3: Checking GridStack CSS...${NC}"
if [ -f "frontend/node_modules/gridstack/dist/gridstack.min.css" ]; then
    echo -e "${GREEN}✓ GridStack CSS available${NC}"
else
    echo -e "${YELLOW}⚠ GridStack CSS not found, may need manual installation${NC}"
fi
echo ""

echo -e "${GREEN}✅ Setup Complete!${NC}"
echo ""
echo "📚 Next Steps:"
echo "1. Start the backend: cd backend && npm run start:dev"
echo "2. Start the frontend: cd frontend && npm run dev"
echo "3. Navigate to Setup → Objects → [Object] → Page Layouts tab"
echo "4. Create and configure your first page layout"
echo ""
echo "📖 For more information, see PAGE_LAYOUTS_GUIDE.md"