# Deployment Guide for Cloudflare Pages

This guide will walk you through deploying the Call Schedule Manager to Cloudflare Pages.

## Prerequisites

- A Cloudflare account (free tier works)
- A GitHub account (if deploying via Git)
- Google Cloud Project with Calendar API enabled
- Basic knowledge of Git and command line (optional)

## Step 1: Google Calendar API Setup

### 1.1 Create a Google Cloud Project

1. Go to [Google Cloud Console](https://console.cloud.google.com/)
2. Click "Select a project" → "New Project"
3. Name your project (e.g., "Call Schedule Manager")
4. Click "Create"

### 1.2 Enable Google Calendar API

1. In your Google Cloud Project, go to "APIs & Services" → "Library"
2. Search for "Google Calendar API"
3. Click on it and press "Enable"

### 1.3 Create OAuth 2.0 Credentials

1. Go to "APIs & Services" → "Credentials"
2. Click "Create Credentials" → "OAuth client ID"
3. If prompted, configure the OAuth consent screen:
   - User Type: External
   - App name: "Call Schedule Manager"
   - User support email: your email
   - Developer contact: your email
   - Add scopes: `../auth/calendar` and `../auth/calendar.events`
   - Add test users (email addresses of people who will use the app during testing)
   - Click "Save and Continue"

4. Create OAuth Client ID:
   - Application type: "Web application"
   - Name: "Call Schedule Web Client"
   - Authorized JavaScript origins:
     - `http://localhost:8000` (for local testing)
     - `https://your-project.pages.dev` (add after deployment)
   - Authorized redirect URIs: (same as origins)
   - Click "Create"

5. **Copy your Client ID** - you'll need this later

### 1.4 Create API Key

1. Go to "APIs & Services" → "Credentials"
2. Click "Create Credentials" → "API key"
3. Click "Restrict Key" (recommended):
   - Application restrictions: HTTP referrers
   - Add your website URLs
   - API restrictions: Select "Google Calendar API"
4. **Copy your API Key** - you'll need this later

## Step 2: Configure the Application

1. Open `config.js` in a text editor
2. Replace the placeholder values:

```javascript
CLIENT_ID: 'YOUR_CLIENT_ID_HERE.apps.googleusercontent.com',
API_KEY: 'YOUR_API_KEY_HERE',
```

3. Save the file
4. Commit the changes to Git (if using Git deployment)

## Step 3: Deploy to Cloudflare Pages

### Option A: Deploy via Git (Recommended)

1. **Push to GitHub:**
   ```bash
   git add .
   git commit -m "Initial commit: Call Schedule Manager"
   git push origin main
   ```

2. **Connect to Cloudflare:**
   - Log in to [Cloudflare Dashboard](https://dash.cloudflare.com/)
   - Go to "Workers & Pages"
   - Click "Create application" → "Pages"
   - Click "Connect to Git"
   - Authorize Cloudflare to access your GitHub
   - Select your repository

3. **Configure Build:**
   - Project name: `call-schedule-manager` (or your choice)
   - Production branch: `main`
   - Build command: (leave empty)
   - Build output directory: `/`
   - Root directory: `/`

4. **Deploy:**
   - Click "Save and Deploy"
   - Wait for deployment to complete (usually 1-2 minutes)
   - You'll get a URL like: `https://call-schedule-manager.pages.dev`

### Option B: Direct Upload

1. **Prepare files:**
   - Make sure all files are in a single folder
   - Required files:
     - index.html
     - trade.html
     - styles.css
     - schedule.js
     - trade.js
     - config.js
     - _headers (optional)

2. **Upload to Cloudflare:**
   - Log in to Cloudflare Dashboard
   - Go to "Workers & Pages"
   - Click "Create application" → "Pages"
   - Click "Upload assets"
   - Name your project
   - Drag and drop your files or select them
   - Click "Deploy site"

3. **Note your URL:**
   - After deployment, you'll get a URL like: `https://your-project.pages.dev`

### Option C: Wrangler CLI

1. **Install Wrangler:**
   ```bash
   npm install -g wrangler
   ```

2. **Login:**
   ```bash
   wrangler login
   ```

3. **Deploy:**
   ```bash
   wrangler pages deploy . --project-name=call-schedule-manager
   ```

## Step 4: Update Google OAuth Credentials

Now that you have your Cloudflare Pages URL:

1. Go back to [Google Cloud Console](https://console.cloud.google.com/)
2. Navigate to "APIs & Services" → "Credentials"
3. Click on your OAuth 2.0 Client ID
4. Add your Cloudflare Pages URL to:
   - Authorized JavaScript origins: `https://your-project.pages.dev`
   - Authorized redirect URIs: `https://your-project.pages.dev`
5. Click "Save"

6. Update API Key restrictions (optional but recommended):
   - Click on your API key
   - Under "Application restrictions" → "HTTP referrers"
   - Add: `https://your-project.pages.dev/*`
   - Click "Save"

## Step 5: Email Notifications Setup (Optional)

To enable email notifications for call trades:

### 5.1 Create Email Worker

1. In Cloudflare Dashboard, go to "Workers & Pages"
2. Click "Create application" → "Workers"
3. Click "Create Worker"
4. Name it: `call-schedule-email`
5. Copy the contents of `email-worker.js` into the worker editor
6. Click "Save and Deploy"
7. Copy the worker URL (e.g., `https://call-schedule-email.yourname.workers.dev`)

### 5.2 Configure Email Service

1. Open the worker you just created
2. Uncomment the email sending code (lines with MailChannels)
3. Update email configuration:
   - Change `@yourhospital.com` to your organization's domain
   - Update `noreply@yoursite.com` to match your domain
4. Click "Save and Deploy"

### 5.3 Update config.js

1. Open `config.js`
2. Update the EMAIL_WORKER_URL:
   ```javascript
   EMAIL_WORKER_URL: 'https://call-schedule-email.yourname.workers.dev',
   ```
3. Save and redeploy to Cloudflare Pages

## Step 6: Test the Application

### 6.1 Test Schedule Creation

1. Visit your Cloudflare Pages URL
2. Click "Create Schedule"
3. Enter test data:
   - Number of doctors: 3
   - Names: Smith, Jones, Brown
   - Select some preferred days off
   - Date range: Next month
4. Click "Generate Schedule"
5. Review the generated schedule
6. Click "Push to Google Calendar"
7. Sign in with Google
8. Authorize the app
9. Check your Google Calendar for the events

### 6.2 Test Call Trading

1. Go to "Trade Calls" page
2. Sign in with Google
3. Verify you can see the schedule
4. Select a call date
5. Choose another date to trade with
6. Execute the trade
7. Verify:
   - Calendar events are swapped
   - Email notifications sent (if configured)
   - Trade appears in history

## Step 7: Custom Domain (Optional)

To use your own domain:

1. In Cloudflare Pages, go to your project
2. Click "Custom domains"
3. Click "Set up a custom domain"
4. Enter your domain (e.g., `schedule.yourhospital.com`)
5. Follow the instructions to update DNS
6. Update Google OAuth credentials with your custom domain

## Troubleshooting

### "The page isn't redirecting properly"
- Clear browser cookies and cache
- Check OAuth redirect URIs match exactly
- Make sure you're using HTTPS (not HTTP)

### "Access blocked: Authorization Error"
- Add your email as a test user in Google Cloud Console
- Verify OAuth consent screen is configured
- Check that Calendar API is enabled

### Calendar events not creating
- Check browser console for errors
- Verify API key is not restricted to wrong referrer
- Make sure you granted calendar permissions during sign-in

### Email not sending
- Check Cloudflare Worker logs
- Verify worker URL in config.js
- Test worker directly with a POST request
- Confirm MailChannels code is uncommented

## Security Notes

- Never commit API keys to public repositories
- Use environment variables for sensitive data in production
- Restrict API keys to your domain
- Regularly rotate credentials
- Review OAuth consent screen settings
- Monitor Cloudflare Analytics for unusual activity

## Updates and Maintenance

To update the site:

1. **Git deployment:**
   - Make changes locally
   - Commit and push to GitHub
   - Cloudflare automatically redeploys

2. **Direct upload:**
   - Make changes locally
   - Go to Cloudflare Pages → Your project
   - Click "Create deployment"
   - Upload updated files

3. **Wrangler CLI:**
   ```bash
   wrangler pages deploy .
   ```

## Support

For issues:
- Check the [README.md](README.md) for detailed documentation
- Review Cloudflare Pages logs in the dashboard
- Check browser console for JavaScript errors
- Verify Google Cloud Console for API issues

## Cost

- Cloudflare Pages: Free tier (500 builds/month, unlimited requests)
- Cloudflare Workers: Free tier (100,000 requests/day)
- Google Calendar API: Free (1,000,000 queries/day)
- MailChannels: Free for Cloudflare Workers

Total cost: **$0** for typical usage!