# Response Wall Implementation Guide

## Overview
The Response Wall is a community-driven feature that allows campaign participants to share and vote on responses they receive from elected representatives. This creates transparency, accountability, and demonstrates which representatives are actually engaging with constituents.

## User Story
**As a campaign participant**, I want to share the response I received from my representative so that:
- Other community members can see which representatives are responsive
- Good/helpful responses get visibility through upvoting
- We can hold representatives accountable publicly
- Future participants know what to expect

## Feature Requirements

### Core Functionality
1. **Post Responses**: Users can submit responses they received from representatives
2. **Upvote System**: Community can upvote helpful/interesting responses
3. **Moderation**: Admin can verify, edit, or remove responses
4. **Campaign Context**: Responses are tied to specific campaigns
5. **Representative Tracking**: Track which representatives respond most/least
6. **Anonymous Option**: Users can choose to post anonymously

### Display Features
- Sort by: Most Recent, Most Upvoted, Verified Responses
- Filter by: Representative Level (Federal/Provincial/Municipal), Representative Name
- Response cards show: Representative info, response excerpt, upvote count, date, verified badge
- Pagination or infinite scroll for large volumes

---

## Implementation Plan

### Phase 1: Database Schema (NocoDB)

#### New Table: `representative_responses`

**Run this NocoDB setup script:**

```bash
# Add to scripts/build-nocodb.sh

# Create representative_responses table
curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "table_name": "representative_responses",
    "title": "Representative Responses",
    "columns": [
      {
        "column_name": "id",
        "title": "ID",
        "uidt": "ID",
        "pk": true,
        "ai": true
      },
      {
        "column_name": "campaign_id",
        "title": "Campaign ID",
        "uidt": "Number",
        "rqd": true
      },
      {
        "column_name": "user_id",
        "title": "User ID",
        "uidt": "Number",
        "rqd": false
      },
      {
        "column_name": "representative_name",
        "title": "Representative Name",
        "uidt": "SingleLineText",
        "rqd": true
      },
      {
        "column_name": "representative_level",
        "title": "Representative Level",
        "uidt": "SingleSelect",
        "dtxp": "Federal,Provincial,Municipal",
        "rqd": true
      },
      {
        "column_name": "representative_district",
        "title": "District/Riding",
        "uidt": "SingleLineText"
      },
      {
        "column_name": "response_type",
        "title": "Response Type",
        "uidt": "SingleSelect",
        "dtxp": "Email,Phone,Letter,Meeting,Other",
        "rqd": true
      },
      {
        "column_name": "response_text",
        "title": "Response Text",
        "uidt": "LongText",
        "rqd": true
      },
      {
        "column_name": "response_screenshot",
        "title": "Response Screenshot",
        "uidt": "Attachment"
      },
      {
        "column_name": "user_comment",
        "title": "User Comment",
        "uidt": "LongText"
      },
      {
        "column_name": "upvotes",
        "title": "Upvotes",
        "uidt": "Number",
        "cdf": "0"
      },
      {
        "column_name": "verified",
        "title": "Verified",
        "uidt": "Checkbox",
        "cdf": "false"
      },
      {
        "column_name": "is_anonymous",
        "title": "Post Anonymously",
        "uidt": "Checkbox",
        "cdf": "false"
      },
      {
        "column_name": "status",
        "title": "Status",
        "uidt": "SingleSelect",
        "dtxp": "pending,approved,rejected",
        "cdf": "pending"
      },
      {
        "column_name": "created_at",
        "title": "Created At",
        "uidt": "DateTime",
        "cdf": "CURRENT_TIMESTAMP"
      },
      {
        "column_name": "updated_at",
        "title": "Updated At",
        "uidt": "DateTime",
        "cdf": "CURRENT_TIMESTAMP"
      }
    ]
  }'
```

#### New Table: `response_upvotes`

**Track who upvoted what (prevent duplicate upvotes):**

```bash
# Create response_upvotes table
curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "table_name": "response_upvotes",
    "title": "Response Upvotes",
    "columns": [
      {
        "column_name": "id",
        "title": "ID",
        "uidt": "ID",
        "pk": true,
        "ai": true
      },
      {
        "column_name": "response_id",
        "title": "Response ID",
        "uidt": "Number",
        "rqd": true
      },
      {
        "column_name": "user_id",
        "title": "User ID",
        "uidt": "Number",
        "rqd": false
      },
      {
        "column_name": "ip_address",
        "title": "IP Address",
        "uidt": "SingleLineText"
      },
      {
        "column_name": "created_at",
        "title": "Created At",
        "uidt": "DateTime",
        "cdf": "CURRENT_TIMESTAMP"
      }
    ]
  }'

# Create unique constraint to prevent duplicate upvotes
# Note: This may need to be done via NocoDB UI or direct database access
```

---

### Phase 2: Backend API Implementation

#### File: `app/controllers/responses.js` (NEW FILE)

Create a new controller to handle response operations:

```javascript
const nocodbService = require('../services/nocodb');
const { validateResponse } = require('../utils/validators');

/**
 * Get all responses for a campaign
 * GET /api/campaigns/:slug/responses
 */
async function getCampaignResponses(req, res) {
  try {
    const { slug } = req.params;
    const { sort = 'recent', level, representative, limit = 20, offset = 0 } = req.query;

    // Get campaign ID from slug
    const campaign = await nocodbService.getCampaignBySlug(slug);
    if (!campaign) {
      return res.status(404).json({ error: 'Campaign not found' });
    }

    // Build filters
    let whereClause = `(campaign_id,eq,${campaign.Id})~and(status,eq,approved)`;
    
    if (level) {
      whereClause += `~and(representative_level,eq,${level})`;
    }
    
    if (representative) {
      whereClause += `~and(representative_name,like,%${representative}%)`;
    }

    // Determine sort order
    let sortParam = '-created_at'; // Default: newest first
    if (sort === 'popular') {
      sortParam = '-upvotes,-created_at';
    } else if (sort === 'verified') {
      sortParam = '-verified,-upvotes,-created_at';
    }

    // Fetch responses
    const responses = await nocodbService.getRecords('representative_responses', {
      where: whereClause,
      sort: sortParam,
      limit,
      offset
    });

    // For logged-in users, check which responses they've upvoted
    let userUpvotes = [];
    if (req.user) {
      userUpvotes = await nocodbService.getRecords('response_upvotes', {
        where: `(user_id,eq,${req.user.id})`,
        fields: 'response_id'
      });
    }

    const userUpvotedIds = userUpvotes.map(u => u.response_id);

    // Enrich responses with upvote status
    const enrichedResponses = responses.map(response => ({
      ...response,
      user_has_upvoted: userUpvotedIds.includes(response.Id)
    }));

    res.json({
      success: true,
      responses: enrichedResponses,
      pagination: {
        limit: parseInt(limit),
        offset: parseInt(offset),
        hasMore: responses.length === parseInt(limit)
      }
    });

  } catch (error) {
    console.error('Error fetching campaign responses:', error);
    res.status(500).json({ error: 'Failed to fetch responses' });
  }
}

/**
 * Submit a new response
 * POST /api/campaigns/:slug/responses
 */
async function submitResponse(req, res) {
  try {
    const { slug } = req.params;
    const {
      representative_name,
      representative_level,
      representative_district,
      response_type,
      response_text,
      user_comment,
      is_anonymous = false
    } = req.body;

    // Validate input
    const validation = validateResponse(req.body);
    if (!validation.valid) {
      return res.status(400).json({ error: validation.error });
    }

    // Get campaign
    const campaign = await nocodbService.getCampaignBySlug(slug);
    if (!campaign) {
      return res.status(404).json({ error: 'Campaign not found' });
    }

    // Require authentication for non-anonymous posts
    if (!is_anonymous && !req.user) {
      return res.status(401).json({ error: 'Authentication required' });
    }

    // Handle file upload (screenshot) if present
    let screenshot_url = null;
    if (req.file) {
      screenshot_url = `/uploads/${req.file.filename}`;
    }

    // Create response record
    const responseData = {
      campaign_id: campaign.Id,
      user_id: is_anonymous ? null : req.user?.id,
      representative_name,
      representative_level,
      representative_district,
      response_type,
      response_text,
      response_screenshot: screenshot_url,
      user_comment,
      is_anonymous,
      upvotes: 0,
      verified: false,
      status: 'pending', // Requires admin approval
      created_at: new Date().toISOString()
    };

    const newResponse = await nocodbService.createRecord('representative_responses', responseData);

    res.status(201).json({
      success: true,
      message: 'Response submitted successfully. It will appear after admin approval.',
      response: newResponse
    });

  } catch (error) {
    console.error('Error submitting response:', error);
    res.status(500).json({ error: 'Failed to submit response' });
  }
}

/**
 * Upvote a response
 * POST /api/responses/:id/upvote
 */
async function upvoteResponse(req, res) {
  try {
    const { id } = req.params;
    const userId = req.user?.id;
    const ipAddress = req.ip || req.connection.remoteAddress;

    // Check if response exists
    const response = await nocodbService.getRecord('representative_responses', id);
    if (!response) {
      return res.status(404).json({ error: 'Response not found' });
    }

    // Check if user/IP already upvoted
    let whereClause = `(response_id,eq,${id})`;
    if (userId) {
      whereClause += `~and(user_id,eq,${userId})`;
    } else {
      whereClause += `~and(ip_address,eq,${ipAddress})`;
    }

    const existingUpvote = await nocodbService.getRecords('response_upvotes', {
      where: whereClause,
      limit: 1
    });

    if (existingUpvote.length > 0) {
      return res.status(400).json({ error: 'You have already upvoted this response' });
    }

    // Create upvote record
    await nocodbService.createRecord('response_upvotes', {
      response_id: parseInt(id),
      user_id: userId || null,
      ip_address: ipAddress,
      created_at: new Date().toISOString()
    });

    // Increment upvote count
    const newUpvoteCount = (response.upvotes || 0) + 1;
    await nocodbService.updateRecord('representative_responses', id, {
      upvotes: newUpvoteCount
    });

    res.json({
      success: true,
      upvotes: newUpvoteCount,
      message: 'Response upvoted successfully'
    });

  } catch (error) {
    console.error('Error upvoting response:', error);
    res.status(500).json({ error: 'Failed to upvote response' });
  }
}

/**
 * Remove upvote from a response
 * DELETE /api/responses/:id/upvote
 */
async function removeUpvote(req, res) {
  try {
    const { id } = req.params;
    const userId = req.user?.id;
    const ipAddress = req.ip || req.connection.remoteAddress;

    // Find upvote record
    let whereClause = `(response_id,eq,${id})`;
    if (userId) {
      whereClause += `~and(user_id,eq,${userId})`;
    } else {
      whereClause += `~and(ip_address,eq,${ipAddress})`;
    }

    const upvotes = await nocodbService.getRecords('response_upvotes', {
      where: whereClause,
      limit: 1
    });

    if (upvotes.length === 0) {
      return res.status(400).json({ error: 'You have not upvoted this response' });
    }

    // Delete upvote record
    await nocodbService.deleteRecord('response_upvotes', upvotes[0].Id);

    // Decrement upvote count
    const response = await nocodbService.getRecord('representative_responses', id);
    const newUpvoteCount = Math.max(0, (response.upvotes || 0) - 1);
    await nocodbService.updateRecord('representative_responses', id, {
      upvotes: newUpvoteCount
    });

    res.json({
      success: true,
      upvotes: newUpvoteCount,
      message: 'Upvote removed successfully'
    });

  } catch (error) {
    console.error('Error removing upvote:', error);
    res.status(500).json({ error: 'Failed to remove upvote' });
  }
}

/**
 * Get response statistics for a campaign
 * GET /api/campaigns/:slug/response-stats
 */
async function getResponseStats(req, res) {
  try {
    const { slug } = req.params;

    const campaign = await nocodbService.getCampaignBySlug(slug);
    if (!campaign) {
      return res.status(404).json({ error: 'Campaign not found' });
    }

    const responses = await nocodbService.getRecords('representative_responses', {
      where: `(campaign_id,eq,${campaign.Id})~and(status,eq,approved)`,
      fields: 'representative_name,representative_level,verified'
    });

    // Calculate stats
    const stats = {
      total_responses: responses.length,
      verified_responses: responses.filter(r => r.verified).length,
      by_level: {
        Federal: responses.filter(r => r.representative_level === 'Federal').length,
        Provincial: responses.filter(r => r.representative_level === 'Provincial').length,
        Municipal: responses.filter(r => r.representative_level === 'Municipal').length
      },
      unique_representatives: new Set(responses.map(r => r.representative_name)).size
    };

    res.json({ success: true, stats });

  } catch (error) {
    console.error('Error fetching response stats:', error);
    res.status(500).json({ error: 'Failed to fetch stats' });
  }
}

module.exports = {
  getCampaignResponses,
  submitResponse,
  upvoteResponse,
  removeUpvote,
  getResponseStats
};
```

#### File: `app/routes/api.js` (UPDATE)

Add response routes to existing API routes:

```javascript
// Add at top with other requires
const responsesController = require('../controllers/responses');
const upload = require('../middleware/upload'); // Need to create this for file uploads

// Add these routes (around line 40-50, after campaign routes)
// Response Wall Routes
router.get('/campaigns/:slug/responses', responsesController.getCampaignResponses);
router.get('/campaigns/:slug/response-stats', responsesController.getResponseStats);
router.post('/campaigns/:slug/responses', 
  optionalAuth, // Allows anonymous submissions
  upload.single('screenshot'), 
  responsesController.submitResponse
);
router.post('/responses/:id/upvote', optionalAuth, responsesController.upvoteResponse);
router.delete('/responses/:id/upvote', optionalAuth, responsesController.removeUpvote);
```

#### File: `app/middleware/upload.js` (NEW FILE)

Create file upload middleware for screenshots:

```javascript
const multer = require('multer');
const path = require('path');
const fs = require('fs');

// Ensure uploads directory exists
const uploadDir = path.join(__dirname, '../public/uploads/responses');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// Configure storage
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, 'response-' + uniqueSuffix + path.extname(file.originalname));
  }
});

// File filter - only images
const fileFilter = (req, file, cb) => {
  const allowedTypes = /jpeg|jpg|png|gif|webp/;
  const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
  const mimetype = allowedTypes.test(file.mimetype);

  if (mimetype && extname) {
    return cb(null, true);
  } else {
    cb(new Error('Only image files are allowed (jpeg, jpg, png, gif, webp)'));
  }
};

// Configure multer
const upload = multer({
  storage: storage,
  limits: {
    fileSize: 5 * 1024 * 1024 // 5MB max
  },
  fileFilter: fileFilter
});

module.exports = upload;
```

#### File: `app/middleware/auth.js` (UPDATE)

Add optional authentication middleware:

```javascript
// Add this new function to existing auth.js
async function optionalAuth(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1] || req.cookies?.token;
  
  if (!token) {
    // No token provided, but that's OK - continue without user
    req.user = null;
    return next();
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    const user = await nocodbService.getUserById(decoded.userId);
    
    if (user) {
      req.user = user;
    } else {
      req.user = null;
    }
    
    next();
  } catch (error) {
    // Invalid token, but continue anyway
    req.user = null;
    next();
  }
}

// Export it
module.exports = {
  requireAuth,
  requireAdmin,
  optionalAuth // Add this
};
```

#### File: `app/utils/validators.js` (UPDATE)

Add response validation:

```javascript
// Add this function to existing validators.js
function validateResponse(data) {
  const { representative_name, representative_level, response_type, response_text } = data;

  if (!representative_name || representative_name.trim().length < 2) {
    return { valid: false, error: 'Representative name is required (min 2 characters)' };
  }

  const validLevels = ['Federal', 'Provincial', 'Municipal'];
  if (!representative_level || !validLevels.includes(representative_level)) {
    return { valid: false, error: 'Valid representative level is required (Federal, Provincial, or Municipal)' };
  }

  const validTypes = ['Email', 'Phone', 'Letter', 'Meeting', 'Other'];
  if (!response_type || !validTypes.includes(response_type)) {
    return { valid: false, error: 'Valid response type is required' };
  }

  if (!response_text || response_text.trim().length < 10) {
    return { valid: false, error: 'Response text is required (min 10 characters)' };
  }

  if (response_text.length > 5000) {
    return { valid: false, error: 'Response text is too long (max 5000 characters)' };
  }

  return { valid: true };
}

// Export it
module.exports = {
  validateEmail,
  validatePostalCode,
  validateCampaign,
  validateResponse // Add this
};
```

#### File: `package.json` (UPDATE)

Add multer dependency:

```json
"dependencies": {
  // ... existing dependencies
  "multer": "^1.4.5-lts.1"
}
```

---

### Phase 3: Frontend Implementation

#### File: `app/public/response-wall.html` (NEW FILE)

Create dedicated response wall page (can be accessed standalone or embedded):

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Community Responses - BNKops Influence</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="stylesheet" href="/css/response-wall.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Community Response Wall</h1>
            <p>See what responses community members are getting from their representatives</p>
        </header>

        <!-- Stats Banner -->
        <div id="response-stats" class="stats-banner">
            <div class="stat-item">
                <span class="stat-number" id="total-responses">0</span>
                <span class="stat-label">Total Responses</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="verified-responses">0</span>
                <span class="stat-label">Verified</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="unique-reps">0</span>
                <span class="stat-label">Representatives</span>
            </div>
        </div>

        <!-- Filters and Sort -->
        <div class="response-controls">
            <div class="filter-group">
                <label for="level-filter">Level:</label>
                <select id="level-filter">
                    <option value="">All Levels</option>
                    <option value="Federal">Federal</option>
                    <option value="Provincial">Provincial</option>
                    <option value="Municipal">Municipal</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="sort-select">Sort by:</label>
                <select id="sort-select">
                    <option value="recent">Most Recent</option>
                    <option value="popular">Most Popular</option>
                    <option value="verified">Verified First</option>
                </select>
            </div>

            <button id="submit-response-btn" class="btn btn-primary">
                Share Your Response
            </button>
        </div>

        <!-- Loading Spinner -->
        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>Loading responses...</p>
        </div>

        <!-- Responses Container -->
        <div id="responses-container"></div>

        <!-- Load More Button -->
        <div id="load-more-container" style="display: none; text-align: center; margin-top: 2rem;">
            <button id="load-more-btn" class="btn btn-secondary">Load More Responses</button>
        </div>

        <!-- Empty State -->
        <div id="empty-state" class="empty-state" style="display: none;">
            <p>No responses yet. Be the first to share your experience!</p>
            <button class="btn btn-primary" onclick="openSubmitModal()">Share Your Response</button>
        </div>
    </div>

    <!-- Submit Response Modal -->
    <div id="submit-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" onclick="closeSubmitModal()">&times;</span>
            <h2>Share Your Representative's Response</h2>
            
            <form id="submit-response-form">
                <div class="form-group">
                    <label for="rep-name">Representative Name *</label>
                    <input type="text" id="rep-name" required>
                </div>

                <div class="form-group">
                    <label for="rep-level">Government Level *</label>
                    <select id="rep-level" required>
                        <option value="">Select level</option>
                        <option value="Federal">Federal (MP)</option>
                        <option value="Provincial">Provincial (MLA)</option>
                        <option value="Municipal">Municipal (Councillor/Mayor)</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="rep-district">District/Riding</label>
                    <input type="text" id="rep-district" placeholder="e.g., Edmonton Centre">
                </div>

                <div class="form-group">
                    <label for="response-type">Response Type *</label>
                    <select id="response-type" required>
                        <option value="">Select type</option>
                        <option value="Email">Email</option>
                        <option value="Phone">Phone Call</option>
                        <option value="Letter">Physical Letter</option>
                        <option value="Meeting">In-Person Meeting</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="response-text">Response Content *</label>
                    <textarea id="response-text" rows="6" required 
                              placeholder="Share what your representative said or wrote..."></textarea>
                    <small class="text-muted">Minimum 10 characters</small>
                </div>

                <div class="form-group">
                    <label for="user-comment">Your Thoughts (Optional)</label>
                    <textarea id="user-comment" rows="3" 
                              placeholder="What did you think of this response?"></textarea>
                </div>

                <div class="form-group">
                    <label for="screenshot">Upload Screenshot (Optional)</label>
                    <input type="file" id="screenshot" accept="image/*">
                    <small class="text-muted">Max 5MB. Helps verify authenticity.</small>
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="is-anonymous">
                        Post anonymously
                    </label>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Submit Response</button>
                    <button type="button" class="btn btn-secondary" onclick="closeSubmitModal()">Cancel</button>
                </div>

                <p class="text-muted" style="margin-top: 1rem; font-size: 0.9rem;">
                    Your response will be reviewed by moderators before appearing publicly.
                </p>
            </form>
        </div>
    </div>

    <script src="/js/api-client.js"></script>
    <script src="/js/response-wall.js"></script>
</body>
</html>
```

#### File: `app/public/css/response-wall.css` (NEW FILE)

Styles for the response wall:

```css
/* Response Wall Styles */

.stats-banner {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-label {
    display: block;
    font-size: 1rem;
    opacity: 0.9;
}

.response-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 0;
}

.filter-group select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

#submit-response-btn {
    margin-left: auto;
}

/* Response Card */
.response-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.response-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.response-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.response-rep-info {
    flex: 1;
}

.response-rep-info h3 {
    margin: 0 0 0.25rem 0;
    color: #2c3e50;
    font-size: 1.2rem;
}

.response-rep-info .rep-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.response-rep-info .rep-meta span {
    margin-right: 1rem;
}

.response-badges {
    display: flex;
    gap: 0.5rem;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-verified {
    background: #27ae60;
    color: white;
}

.badge-level {
    background: #3498db;
    color: white;
}

.badge-type {
    background: #95a5a6;
    color: white;
}

.response-content {
    margin-bottom: 1rem;
}

.response-text {
    background: #f8f9fa;
    padding: 1rem;
    border-left: 4px solid #3498db;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-style: italic;
    color: #2c3e50;
    line-height: 1.6;
}

.user-comment {
    padding: 0.75rem;
    background: #fff9e6;
    border-left: 4px solid #f39c12;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.user-comment-label {
    font-weight: 600;
    color: #f39c12;
    margin-bottom: 0.5rem;
    display: block;
}

.response-screenshot {
    margin-bottom: 1rem;
}

.response-screenshot img {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.response-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #e1e8ed;
}

.response-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.response-actions {
    display: flex;
    gap: 1rem;
}

.upvote-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 2px solid #3498db;
    color: #3498db;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.upvote-btn:hover {
    background: #3498db;
    color: white;
    transform: translateY(-2px);
}

.upvote-btn.upvoted {
    background: #3498db;
    color: white;
}

.upvote-btn .upvote-icon {
    font-size: 1.2rem;
}

.upvote-count {
    font-weight: bold;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #7f8c8d;
}

.empty-state p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    position: relative;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.form-actions .btn {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-banner {
        flex-direction: column;
        gap: 1.5rem;
    }

    .response-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #submit-response-btn {
        margin-left: 0;
        width: 100%;
    }

    .response-header {
        flex-direction: column;
        gap: 1rem;
    }

    .response-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .modal-content {
        margin: 10% auto;
        width: 95%;
        padding: 1.5rem;
    }
}
```

#### File: `app/public/js/response-wall.js` (NEW FILE)

JavaScript for response wall functionality:

```javascript
// Response Wall JavaScript

let currentCampaignSlug = null;
let currentOffset = 0;
let currentSort = 'recent';
let currentLevel = '';
const LIMIT = 20;

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    // Get campaign slug from URL if present
    const urlParams = new URLSearchParams(window.location.search);
    currentCampaignSlug = urlParams.get('campaign');

    if (!currentCampaignSlug) {
        showError('No campaign specified');
        return;
    }

    loadResponseStats();
    loadResponses();

    // Event listeners
    document.getElementById('sort-select').addEventListener('change', (e) => {
        currentSort = e.target.value;
        currentOffset = 0;
        loadResponses(true);
    });

    document.getElementById('level-filter').addEventListener('change', (e) => {
        currentLevel = e.target.value;
        currentOffset = 0;
        loadResponses(true);
    });

    document.getElementById('submit-response-btn').addEventListener('click', openSubmitModal);
    document.getElementById('load-more-btn').addEventListener('click', loadMoreResponses);
    document.getElementById('submit-response-form').addEventListener('submit', handleSubmitResponse);
});

// Load response statistics
async function loadResponseStats() {
    try {
        const response = await fetch(`/api/campaigns/${currentCampaignSlug}/response-stats`);
        const data = await response.json();

        if (data.success) {
            document.getElementById('total-responses').textContent = data.stats.total_responses;
            document.getElementById('verified-responses').textContent = data.stats.verified_responses;
            document.getElementById('unique-reps').textContent = data.stats.unique_representatives;
        }
    } catch (error) {
        console.error('Error loading stats:', error);
    }
}

// Load responses
async function loadResponses(reset = false) {
    if (reset) {
        currentOffset = 0;
        document.getElementById('responses-container').innerHTML = '';
    }

    showLoading(true);

    try {
        let url = `/api/campaigns/${currentCampaignSlug}/responses?sort=${currentSort}&limit=${LIMIT}&offset=${currentOffset}`;
        
        if (currentLevel) {
            url += `&level=${currentLevel}`;
        }

        const response = await fetch(url);
        const data = await response.json();

        if (data.success) {
            if (data.responses.length === 0 && currentOffset === 0) {
                showEmptyState();
            } else {
                renderResponses(data.responses);
                
                // Show/hide load more button
                const loadMoreContainer = document.getElementById('load-more-container');
                if (data.pagination.hasMore) {
                    loadMoreContainer.style.display = 'block';
                } else {
                    loadMoreContainer.style.display = 'none';
                }
            }
        } else {
            showError('Failed to load responses');
        }
    } catch (error) {
        console.error('Error loading responses:', error);
        showError('Failed to load responses');
    } finally {
        showLoading(false);
    }
}

// Render responses
function renderResponses(responses) {
    const container = document.getElementById('responses-container');
    document.getElementById('empty-state').style.display = 'none';

    responses.forEach(response => {
        const card = createResponseCard(response);
        container.appendChild(card);
    });
}

// Create response card element
function createResponseCard(response) {
    const card = document.createElement('div');
    card.className = 'response-card';
    card.dataset.responseId = response.Id;

    // Format date
    const date = new Date(response.created_at);
    const formattedDate = date.toLocaleDateString('en-US', { 
        year: 'numeric', 
        month: 'short', 
        day: 'numeric' 
    });

    // Build badges
    let badges = `<span class="badge badge-level">${response.representative_level}</span>`;
    badges += `<span class="badge badge-type">${response.response_type}</span>`;
    if (response.verified) {
        badges = `<span class="badge badge-verified">✓ Verified</span>` + badges;
    }

    // Build screenshot if present
    let screenshotHTML = '';
    if (response.response_screenshot) {
        screenshotHTML = `
            <div class="response-screenshot">
                <img src="${response.response_screenshot}" alt="Response screenshot" 
                     onclick="viewImage('${response.response_screenshot}')">
            </div>
        `;
    }

    // Build user comment if present
    let commentHTML = '';
    if (response.user_comment) {
        commentHTML = `
            <div class="user-comment">
                <span class="user-comment-label">Community Member's Thoughts:</span>
                ${escapeHtml(response.user_comment)}
            </div>
        `;
    }

    // Build district info
    let districtInfo = '';
    if (response.representative_district) {
        districtInfo = `<span>📍 ${escapeHtml(response.representative_district)}</span>`;
    }

    card.innerHTML = `
        <div class="response-header">
            <div class="response-rep-info">
                <h3>${escapeHtml(response.representative_name)}</h3>
                <div class="rep-meta">
                    ${districtInfo}
                </div>
            </div>
            <div class="response-badges">
                ${badges}
            </div>
        </div>

        <div class="response-content">
            <div class="response-text">
                "${escapeHtml(response.response_text)}"
            </div>
            ${commentHTML}
            ${screenshotHTML}
        </div>

        <div class="response-footer">
            <div class="response-meta">
                Posted ${formattedDate}
                ${response.is_anonymous ? ' by Anonymous' : ''}
            </div>
            <div class="response-actions">
                <button class="upvote-btn ${response.user_has_upvoted ? 'upvoted' : ''}" 
                        onclick="toggleUpvote(${response.Id}, this)">
                    <span class="upvote-icon">👍</span>
                    <span class="upvote-count">${response.upvotes || 0}</span>
                </button>
            </div>
        </div>
    `;

    return card;
}

// Toggle upvote
async function toggleUpvote(responseId, button) {
    const isUpvoted = button.classList.contains('upvoted');
    const countElement = button.querySelector('.upvote-count');
    const currentCount = parseInt(countElement.textContent);

    try {
        const method = isUpvoted ? 'DELETE' : 'POST';
        const response = await fetch(`/api/responses/${responseId}/upvote`, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            }
        });

        const data = await response.json();

        if (data.success) {
            button.classList.toggle('upvoted');
            countElement.textContent = data.upvotes;
        } else {
            showError(data.error || 'Failed to update upvote');
        }
    } catch (error) {
        console.error('Error toggling upvote:', error);
        showError('Failed to update upvote');
    }
}

// Load more responses
function loadMoreResponses() {
    currentOffset += LIMIT;
    loadResponses(false);
}

// Open submit modal
function openSubmitModal() {
    document.getElementById('submit-modal').style.display = 'block';
}

// Close submit modal
function closeSubmitModal() {
    document.getElementById('submit-modal').style.display = 'none';
    document.getElementById('submit-response-form').reset();
}

// Handle response submission
async function handleSubmitResponse(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append('representative_name', document.getElementById('rep-name').value.trim());
    formData.append('representative_level', document.getElementById('rep-level').value);
    formData.append('representative_district', document.getElementById('rep-district').value.trim());
    formData.append('response_type', document.getElementById('response-type').value);
    formData.append('response_text', document.getElementById('response-text').value.trim());
    formData.append('user_comment', document.getElementById('user-comment').value.trim());
    formData.append('is_anonymous', document.getElementById('is-anonymous').checked);

    const screenshotFile = document.getElementById('screenshot').files[0];
    if (screenshotFile) {
        formData.append('screenshot', screenshotFile);
    }

    try {
        const submitButton = e.target.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.textContent = 'Submitting...';

        const response = await fetch(`/api/campaigns/${currentCampaignSlug}/responses`, {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            showSuccess('Response submitted successfully! It will appear after admin approval.');
            closeSubmitModal();
        } else {
            showError(data.error || 'Failed to submit response');
        }
    } catch (error) {
        console.error('Error submitting response:', error);
        showError('Failed to submit response');
    } finally {
        const submitButton = e.target.querySelector('button[type="submit"]');
        submitButton.disabled = false;
        submitButton.textContent = 'Submit Response';
    }
}

// View image in modal/new tab
function viewImage(url) {
    window.open(url, '_blank');
}

// Utility functions
function showLoading(show) {
    document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showEmptyState() {
    document.getElementById('empty-state').style.display = 'block';
    document.getElementById('responses-container').innerHTML = '';
}

function showError(message) {
    // Could integrate with existing error display system
    alert(message);
}

function showSuccess(message) {
    // Could integrate with existing success display system
    alert(message);
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('submit-modal');
    if (event.target === modal) {
        closeSubmitModal();
    }
};
```

---

### Phase 4: Admin Panel Integration

#### File: `app/public/admin.html` (UPDATE)

Add response moderation section to existing admin panel:

```html
<!-- Add this new section after campaigns section -->
<section id="responses-section" style="display: none;">
    <h2>Response Moderation</h2>
    
    <div class="admin-filters">
        <select id="admin-response-status">
            <option value="pending">Pending Approval</option>
            <option value="approved">Approved</option>
            <option value="rejected">Rejected</option>
        </select>
        
        <button onclick="loadAdminResponses()" class="btn btn-secondary">Refresh</button>
    </div>

    <div id="admin-responses-container"></div>
</section>
```

#### File: `app/public/js/admin.js` (UPDATE)

Add response moderation functions:

```javascript
// Add these functions to existing admin.js

async function loadAdminResponses() {
    const status = document.getElementById('admin-response-status').value;
    
    try {
        const response = await fetch(`/api/admin/responses?status=${status}`, {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            renderAdminResponses(data.responses);
        }
    } catch (error) {
        console.error('Error loading responses:', error);
    }
}

function renderAdminResponses(responses) {
    const container = document.getElementById('admin-responses-container');
    
    if (responses.length === 0) {
        container.innerHTML = '<p>No responses found.</p>';
        return;
    }
    
    container.innerHTML = responses.map(response => `
        <div class="admin-response-card">
            <h4>${response.representative_name} (${response.representative_level})</h4>
            <p><strong>Response:</strong> ${response.response_text.substring(0, 200)}...</p>
            ${response.user_comment ? `<p><strong>User Comment:</strong> ${response.user_comment}</p>` : ''}
            ${response.response_screenshot ? `<img src="${response.response_screenshot}" style="max-width: 300px;">` : ''}
            
            <div class="admin-actions">
                ${response.status === 'pending' ? `
                    <button onclick="approveResponse(${response.Id})" class="btn btn-success">Approve</button>
                    <button onclick="rejectResponse(${response.Id})" class="btn btn-danger">Reject</button>
                ` : ''}
                <button onclick="toggleVerified(${response.Id}, ${response.verified})" class="btn btn-secondary">
                    ${response.verified ? 'Unverify' : 'Verify'}
                </button>
                <button onclick="deleteResponse(${response.Id})" class="btn btn-danger">Delete</button>
            </div>
        </div>
    `).join('');
}

async function approveResponse(id) {
    await updateResponseStatus(id, 'approved');
}

async function rejectResponse(id) {
    await updateResponseStatus(id, 'rejected');
}

async function updateResponseStatus(id, status) {
    try {
        const response = await fetch(`/api/admin/responses/${id}/status`, {
            method: 'PATCH',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ status })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess(`Response ${status}`);
            loadAdminResponses();
        }
    } catch (error) {
        console.error('Error updating response:', error);
        showError('Failed to update response');
    }
}

async function toggleVerified(id, currentlyVerified) {
    try {
        const response = await fetch(`/api/admin/responses/${id}`, {
            method: 'PATCH',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ verified: !currentlyVerified })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('Response updated');
            loadAdminResponses();
        }
    } catch (error) {
        console.error('Error toggling verified:', error);
    }
}

async function deleteResponse(id) {
    if (!confirm('Are you sure you want to delete this response?')) return;
    
    try {
        const response = await fetch(`/api/admin/responses/${id}`, {
            method: 'DELETE',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('Response deleted');
            loadAdminResponses();
        }
    } catch (error) {
        console.error('Error deleting response:', error);
    }
}
```

#### File: `app/controllers/responses.js` (UPDATE)

Add admin endpoints:

```javascript
// Add these admin functions to responses controller

async function getAdminResponses(req, res) {
    try {
        const { status = 'pending' } = req.query;
        
        const responses = await nocodbService.getRecords('representative_responses', {
            where: `(status,eq,${status})`,
            sort: '-created_at',
            limit: 100
        });
        
        res.json({ success: true, responses });
    } catch (error) {
        console.error('Error fetching admin responses:', error);
        res.status(500).json({ error: 'Failed to fetch responses' });
    }
}

async function updateResponseStatus(req, res) {
    try {
        const { id } = req.params;
        const { status } = req.body;
        
        if (!['pending', 'approved', 'rejected'].includes(status)) {
            return res.status(400).json({ error: 'Invalid status' });
        }
        
        await nocodbService.updateRecord('representative_responses', id, {
            status,
            updated_at: new Date().toISOString()
        });
        
        res.json({ success: true, message: 'Response status updated' });
    } catch (error) {
        console.error('Error updating response status:', error);
        res.status(500).json({ error: 'Failed to update status' });
    }
}

async function updateResponse(req, res) {
    try {
        const { id } = req.params;
        const updates = req.body;
        
        updates.updated_at = new Date().toISOString();
        
        await nocodbService.updateRecord('representative_responses', id, updates);
        
        res.json({ success: true, message: 'Response updated' });
    } catch (error) {
        console.error('Error updating response:', error);
        res.status(500).json({ error: 'Failed to update response' });
    }
}

async function deleteResponse(req, res) {
    try {
        const { id } = req.params;
        
        await nocodbService.deleteRecord('representative_responses', id);
        
        res.json({ success: true, message: 'Response deleted' });
    } catch (error) {
        console.error('Error deleting response:', error);
        res.status(500).json({ error: 'Failed to delete response' });
    }
}

// Export these new functions
module.exports = {
    getCampaignResponses,
    submitResponse,
    upvoteResponse,
    removeUpvote,
    getResponseStats,
    // Admin functions
    getAdminResponses,
    updateResponseStatus,
    updateResponse,
    deleteResponse
};
```

#### File: `app/routes/api.js` (UPDATE)

Add admin routes:

```javascript
// Add these admin routes (after other admin routes)
router.get('/admin/responses', requireAdmin, responsesController.getAdminResponses);
router.patch('/admin/responses/:id/status', requireAdmin, responsesController.updateResponseStatus);
router.patch('/admin/responses/:id', requireAdmin, responsesController.updateResponse);
router.delete('/admin/responses/:id', requireAdmin, responsesController.deleteResponse);
```

---

### Phase 5: Integration with Campaign Page

#### File: `app/public/campaign.html` (UPDATE)

Add response wall section to existing campaign page:

```html
<!-- Add this section before the footer, after email composer -->
<section id="response-wall-section" style="margin-top: 3rem;">
    <h2>Community Responses</h2>
    <p>See what responses community members are getting from their representatives</p>
    
    <div id="campaign-response-preview">
        <!-- Shows top 3 responses -->
    </div>
    
    <button onclick="viewAllResponses()" class="btn btn-secondary" style="margin-top: 1rem;">
        View All Responses
    </button>
</section>
```

#### File: `app/public/js/campaign.js` (UPDATE)

Add response preview loading:

```javascript
// Add this function to existing campaign.js

async function loadResponsePreview() {
    try {
        const response = await fetch(`/api/campaigns/${campaignSlug}/responses?limit=3&sort=popular`);
        const data = await response.json();
        
        if (data.success && data.responses.length > 0) {
            renderResponsePreview(data.responses);
            document.getElementById('response-wall-section').style.display = 'block';
        }
    } catch (error) {
        console.error('Error loading response preview:', error);
    }
}

function renderResponsePreview(responses) {
    const container = document.getElementById('campaign-response-preview');
    
    container.innerHTML = responses.map(response => `
        <div class="response-preview-card">
            <strong>${response.representative_name}</strong> (${response.representative_level})
            <p>${response.response_text.substring(0, 150)}...</p>
            <span>👍 ${response.upvotes || 0}</span>
        </div>
    `).join('');
}

function viewAllResponses() {
    window.location.href = `/response-wall.html?campaign=${campaignSlug}`;
}

// Call this in your campaign init function
loadResponsePreview();
```

---

## Testing Checklist

### Backend Testing
- [ ] Database tables created successfully
- [ ] POST response submission works (with/without auth)
- [ ] GET responses returns correct data
- [ ] Upvote/downvote works correctly
- [ ] Duplicate upvote prevention works
- [ ] File upload works for screenshots
- [ ] Admin endpoints require authentication
- [ ] Status updates work (pending/approved/rejected)

### Frontend Testing
- [ ] Response wall page loads correctly
- [ ] Responses display with correct formatting
- [ ] Sorting works (recent, popular, verified)
- [ ] Filtering by level works
- [ ] Upvote button updates correctly
- [ ] Submit modal opens and closes
- [ ] Form validation works
- [ ] File upload works
- [ ] Anonymous posting works
- [ ] Admin moderation panel works

### Integration Testing
- [ ] Campaign page shows response preview
- [ ] Stats update correctly
- [ ] Pagination/load more works
- [ ] Mobile responsive design
- [ ] Error handling shows appropriate messages

---

## Deployment Steps

1. **Update NocoDB Schema:**
   ```bash
   cd /path/to/influence
   chmod +x scripts/build-nocodb.sh
   ./scripts/build-nocodb.sh
   ```

2. **Install Dependencies:**
   ```bash
   cd app
   npm install multer
   ```

3. **Create Upload Directory:**
   ```bash
   mkdir -p app/public/uploads/responses
   ```

4. **Rebuild Docker Container:**
   ```bash
   docker compose down
   docker compose build
   docker compose up -d
   ```

5. **Test Endpoints:**
   - Visit campaign page
   - Try submitting a response
   - Check admin panel for moderation

---

---

## Phase 6: Representative Accounts & Direct Response System

### Overview
Allow elected representatives to create verified accounts and respond directly to campaign emails through the platform. These responses get a special "Verified by Representative" badge, creating authentic two-way dialogue.

### Benefits
- **Authenticity**: Representatives control their own responses
- **Transparency**: Public record of representative positions
- **Engagement**: Encourages reps to participate directly
- **Accountability**: Official statements are permanently visible
- **Credibility**: Community trusts verified responses more

---

### Database Schema Updates

#### Update Table: `users` (Add Representative Fields)

Add these columns to the existing `users` table:

```bash
# Add to scripts/build-nocodb.sh

# Add representative-specific columns to users table
curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "user_type",
    "title": "User Type",
    "uidt": "SingleSelect",
    "dtxp": "regular,representative,admin",
    "cdf": "regular"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_name",
    "title": "Representative Name",
    "uidt": "SingleLineText"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_level",
    "title": "Representative Level",
    "uidt": "SingleSelect",
    "dtxp": "Federal,Provincial,Municipal"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_district",
    "title": "District/Riding",
    "uidt": "SingleLineText"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_verified",
    "title": "Representative Verified",
    "uidt": "Checkbox",
    "cdf": "false"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_bio",
    "title": "Representative Bio",
    "uidt": "LongText"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_photo",
    "title": "Representative Photo",
    "uidt": "Attachment"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{users_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "verification_document",
    "title": "Verification Document",
    "uidt": "Attachment"
  }'
```

#### Update Table: `representative_responses` (Add Representative Fields)

Add these columns:

```bash
curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{responses_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "posted_by_representative",
    "title": "Posted by Representative",
    "uidt": "Checkbox",
    "cdf": "false"
  }'

curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables/{responses_table_id}/columns" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "column_name": "representative_user_id",
    "title": "Representative User ID",
    "uidt": "Number"
  }'
```

#### New Table: `representative_inbox`

Track emails sent to representatives through campaigns:

```bash
curl -X POST "$NOCODB_API_URL/api/v1/db/meta/tables" \
  -H "xc-token: $NOCODB_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "table_name": "representative_inbox",
    "title": "Representative Inbox",
    "columns": [
      {
        "column_name": "id",
        "title": "ID",
        "uidt": "ID",
        "pk": true,
        "ai": true
      },
      {
        "column_name": "campaign_id",
        "title": "Campaign ID",
        "uidt": "Number",
        "rqd": true
      },
      {
        "column_name": "email_log_id",
        "title": "Email Log ID",
        "uidt": "Number"
      },
      {
        "column_name": "representative_name",
        "title": "Representative Name",
        "uidt": "SingleLineText",
        "rqd": true
      },
      {
        "column_name": "representative_email",
        "title": "Representative Email",
        "uidt": "SingleLineText",
        "rqd": true
      },
      {
        "column_name": "representative_level",
        "title": "Representative Level",
        "uidt": "SingleSelect",
        "dtxp": "Federal,Provincial,Municipal",
        "rqd": true
      },
      {
        "column_name": "email_subject",
        "title": "Email Subject",
        "uidt": "SingleLineText"
      },
      {
        "column_name": "email_body",
        "title": "Email Body",
        "uidt": "LongText"
      },
      {
        "column_name": "sender_postal_code",
        "title": "Sender Postal Code",
        "uidt": "SingleLineText"
      },
      {
        "column_name": "has_response",
        "title": "Has Response",
        "uidt": "Checkbox",
        "cdf": "false"
      },
      {
        "column_name": "response_id",
        "title": "Response ID",
        "uidt": "Number"
      },
      {
        "column_name": "created_at",
        "title": "Created At",
        "uidt": "DateTime",
        "cdf": "CURRENT_TIMESTAMP"
      }
    ]
  }'
```

---

### Backend Implementation

#### File: `app/controllers/representativeController.js` (NEW FILE)

```javascript
const nocodbService = require('../services/nocodb');
const emailService = require('../services/email');
const { validateResponse } = require('../utils/validators');

/**
 * Get representative's inbox - emails sent to them through campaigns
 * GET /api/representative/inbox
 */
async function getRepresentativeInbox(req, res) {
  try {
    if (!req.user || req.user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    if (!req.user.representative_verified) {
      return res.status(403).json({ error: 'Your representative account is pending verification' });
    }

    const { limit = 20, offset = 0, has_response } = req.query;

    // Build filters
    let whereClause = `(representative_email,eq,${req.user.email})`;
    
    if (has_response !== undefined) {
      whereClause += `~and(has_response,eq,${has_response})`;
    }

    const emails = await nocodbService.getRecords('representative_inbox', {
      where: whereClause,
      sort: '-created_at',
      limit,
      offset
    });

    // Get campaign details for each email
    const enrichedEmails = await Promise.all(emails.map(async (email) => {
      const campaign = await nocodbService.getRecord('campaigns', email.campaign_id);
      return {
        ...email,
        campaign_title: campaign?.title || 'Unknown Campaign',
        campaign_slug: campaign?.slug
      };
    }));

    res.json({
      success: true,
      emails: enrichedEmails,
      pagination: {
        limit: parseInt(limit),
        offset: parseInt(offset),
        hasMore: emails.length === parseInt(limit)
      }
    });

  } catch (error) {
    console.error('Error fetching representative inbox:', error);
    res.status(500).json({ error: 'Failed to fetch inbox' });
  }
}

/**
 * Get inbox statistics
 * GET /api/representative/inbox/stats
 */
async function getInboxStats(req, res) {
  try {
    if (!req.user || req.user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    const allEmails = await nocodbService.getRecords('representative_inbox', {
      where: `(representative_email,eq,${req.user.email})`,
      fields: 'has_response,campaign_id'
    });

    const stats = {
      total_emails: allEmails.length,
      unanswered: allEmails.filter(e => !e.has_response).length,
      answered: allEmails.filter(e => e.has_response).length,
      unique_campaigns: new Set(allEmails.map(e => e.campaign_id)).size
    };

    res.json({ success: true, stats });

  } catch (error) {
    console.error('Error fetching inbox stats:', error);
    res.status(500).json({ error: 'Failed to fetch stats' });
  }
}

/**
 * Submit official response from representative
 * POST /api/representative/respond/:inboxId
 */
async function submitOfficialResponse(req, res) {
  try {
    if (!req.user || req.user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    if (!req.user.representative_verified) {
      return res.status(403).json({ error: 'Your representative account is pending verification' });
    }

    const { inboxId } = req.params;
    const { response_text, user_comment, response_type = 'Email' } = req.body;

    // Validate
    if (!response_text || response_text.trim().length < 10) {
      return res.status(400).json({ error: 'Response text is required (min 10 characters)' });
    }

    // Get inbox item
    const inboxItem = await nocodbService.getRecord('representative_inbox', inboxId);
    if (!inboxItem) {
      return res.status(404).json({ error: 'Email not found' });
    }

    // Verify this email was sent to this representative
    if (inboxItem.representative_email !== req.user.email) {
      return res.status(403).json({ error: 'You can only respond to emails sent to you' });
    }

    // Handle file upload (screenshot) if present
    let screenshot_url = null;
    if (req.file) {
      screenshot_url = `/uploads/responses/${req.file.filename}`;
    }

    // Create verified response record
    const responseData = {
      campaign_id: inboxItem.campaign_id,
      user_id: req.user.id,
      representative_user_id: req.user.id,
      representative_name: req.user.representative_name,
      representative_level: req.user.representative_level,
      representative_district: req.user.representative_district,
      response_type,
      response_text,
      response_screenshot: screenshot_url,
      user_comment,
      is_anonymous: false,
      posted_by_representative: true,
      upvotes: 0,
      verified: true, // Auto-verified since it's from the rep
      status: 'approved', // Auto-approved
      created_at: new Date().toISOString()
    };

    const newResponse = await nocodbService.createRecord('representative_responses', responseData);

    // Update inbox item
    await nocodbService.updateRecord('representative_inbox', inboxId, {
      has_response: true,
      response_id: newResponse.Id
    });

    res.status(201).json({
      success: true,
      message: 'Response published successfully',
      response: newResponse
    });

  } catch (error) {
    console.error('Error submitting official response:', error);
    res.status(500).json({ error: 'Failed to submit response' });
  }
}

/**
 * Get representative profile (public)
 * GET /api/representative/profile/:id
 */
async function getRepresentativeProfile(req, res) {
  try {
    const { id } = req.params;

    const user = await nocodbService.getRecord('users', id);
    
    if (!user || user.user_type !== 'representative') {
      return res.status(404).json({ error: 'Representative not found' });
    }

    // Get response stats
    const responses = await nocodbService.getRecords('representative_responses', {
      where: `(representative_user_id,eq,${id})~and(status,eq,approved)`,
      fields: 'Id,created_at,campaign_id,upvotes'
    });

    const profile = {
      id: user.Id,
      name: user.representative_name,
      level: user.representative_level,
      district: user.representative_district,
      bio: user.representative_bio,
      photo: user.representative_photo,
      verified: user.representative_verified,
      stats: {
        total_responses: responses.length,
        total_upvotes: responses.reduce((sum, r) => sum + (r.upvotes || 0), 0),
        campaigns_responded: new Set(responses.map(r => r.campaign_id)).size,
        member_since: user.created_at
      }
    };

    res.json({ success: true, profile });

  } catch (error) {
    console.error('Error fetching representative profile:', error);
    res.status(500).json({ error: 'Failed to fetch profile' });
  }
}

/**
 * Update representative profile
 * PATCH /api/representative/profile
 */
async function updateRepresentativeProfile(req, res) {
  try {
    if (!req.user || req.user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    const { representative_bio } = req.body;
    const updates = {};

    if (representative_bio !== undefined) {
      updates.representative_bio = representative_bio;
    }

    if (req.file) {
      updates.representative_photo = `/uploads/representatives/${req.file.filename}`;
    }

    if (Object.keys(updates).length > 0) {
      await nocodbService.updateRecord('users', req.user.id, updates);
    }

    res.json({ success: true, message: 'Profile updated successfully' });

  } catch (error) {
    console.error('Error updating profile:', error);
    res.status(500).json({ error: 'Failed to update profile' });
  }
}

/**
 * Request representative verification
 * POST /api/representative/request-verification
 */
async function requestVerification(req, res) {
  try {
    if (!req.user || req.user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    const { representative_name, representative_level, representative_district } = req.body;

    if (!representative_name || !representative_level || !representative_district) {
      return res.status(400).json({ error: 'All representative details are required' });
    }

    const updates = {
      representative_name,
      representative_level,
      representative_district
    };

    if (req.file) {
      updates.verification_document = `/uploads/verification/${req.file.filename}`;
    }

    await nocodbService.updateRecord('users', req.user.id, updates);

    // Notify admins (could send email here)
    console.log(`Verification requested by ${representative_name}`);

    res.json({ 
      success: true, 
      message: 'Verification request submitted. An administrator will review your request.' 
    });

  } catch (error) {
    console.error('Error requesting verification:', error);
    res.status(500).json({ error: 'Failed to submit verification request' });
  }
}

module.exports = {
  getRepresentativeInbox,
  getInboxStats,
  submitOfficialResponse,
  getRepresentativeProfile,
  updateRepresentativeProfile,
  requestVerification
};
```

#### File: `app/middleware/auth.js` (UPDATE)

Add representative check middleware:

```javascript
// Add this new middleware function
async function requireRepresentative(req, res, next) {
  try {
    const token = req.headers.authorization?.split(' ')[1] || req.cookies?.token;
    
    if (!token) {
      return res.status(401).json({ error: 'Authentication required' });
    }

    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    const user = await nocodbService.getUserById(decoded.userId);
    
    if (!user) {
      return res.status(401).json({ error: 'Invalid token' });
    }

    if (user.user_type !== 'representative') {
      return res.status(403).json({ error: 'Representative access required' });
    }

    req.user = user;
    next();
  } catch (error) {
    return res.status(401).json({ error: 'Invalid or expired token' });
  }
}

// Export it
module.exports = {
  requireAuth,
  requireAdmin,
  optionalAuth,
  requireRepresentative // Add this
};
```

#### File: `app/routes/api.js` (UPDATE)

Add representative routes:

```javascript
// Add at top with other requires
const representativeController = require('../controllers/representativeController');

// Add these routes (around line 60, after response routes)
// Representative Routes
router.get('/representative/inbox', requireRepresentative, representativeController.getRepresentativeInbox);
router.get('/representative/inbox/stats', requireRepresentative, representativeController.getInboxStats);
router.post('/representative/respond/:inboxId', 
  requireRepresentative, 
  upload.single('screenshot'), 
  representativeController.submitOfficialResponse
);
router.get('/representative/profile/:id', representativeController.getRepresentativeProfile); // Public
router.patch('/representative/profile', 
  requireRepresentative, 
  upload.single('photo'), 
  representativeController.updateRepresentativeProfile
);
router.post('/representative/request-verification', 
  requireRepresentative, 
  upload.single('verification_document'), 
  representativeController.requestVerification
);
```

#### File: `app/controllers/emails.js` (UPDATE)

Log emails sent to representatives:

```javascript
// Add this function call in your existing sendEmail function
// After successfully sending email to a representative

async function logEmailToRepresentativeInbox(campaignId, representative, emailSubject, emailBody, senderPostalCode) {
  try {
    await nocodbService.createRecord('representative_inbox', {
      campaign_id: campaignId,
      representative_name: representative.name,
      representative_email: representative.email,
      representative_level: representative.elected_office, // Adjust based on your data structure
      email_subject: emailSubject,
      email_body: emailBody,
      sender_postal_code: senderPostalCode,
      has_response: false,
      created_at: new Date().toISOString()
    });
  } catch (error) {
    console.error('Error logging email to representative inbox:', error);
    // Don't fail the email send if logging fails
  }
}

// Call this function in your sendCampaignEmail function:
// logEmailToRepresentativeInbox(campaign.Id, representative, subject, body, postalCode);
```

---

### Frontend Implementation

#### File: `app/public/representative-dashboard.html` (NEW FILE)

Representative inbox and response interface:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Representative Dashboard - BNKops Influence</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="stylesheet" href="/css/representative.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Representative Dashboard</h1>
            <p>Respond to your constituents directly</p>
            <div class="header-actions">
                <button onclick="window.location.href='/'" class="btn btn-secondary">View Public Site</button>
                <button onclick="logout()" class="btn btn-secondary">Logout</button>
            </div>
        </header>

        <!-- Stats Dashboard -->
        <div class="rep-stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📧</div>
                <div class="stat-content">
                    <span class="stat-number" id="total-emails">0</span>
                    <span class="stat-label">Total Emails Received</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">⏳</div>
                <div class="stat-content">
                    <span class="stat-number" id="unanswered-emails">0</span>
                    <span class="stat-label">Awaiting Response</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">✅</div>
                <div class="stat-content">
                    <span class="stat-number" id="answered-emails">0</span>
                    <span class="stat-label">Responded</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">📊</div>
                <div class="stat-content">
                    <span class="stat-number" id="unique-campaigns">0</span>
                    <span class="stat-label">Active Campaigns</span>
                </div>
            </div>
        </div>

        <!-- Verification Notice -->
        <div id="verification-notice" class="notice notice-warning" style="display: none;">
            <strong>⚠️ Verification Pending</strong>
            <p>Your representative account is awaiting administrator verification. You'll be able to respond to emails once verified.</p>
        </div>

        <!-- Filters -->
        <div class="inbox-controls">
            <div class="filter-group">
                <label for="status-filter">Show:</label>
                <select id="status-filter">
                    <option value="">All Emails</option>
                    <option value="false" selected>Unanswered</option>
                    <option value="true">Answered</option>
                </select>
            </div>
            <button onclick="loadInbox()" class="btn btn-secondary">Refresh</button>
        </div>

        <!-- Loading -->
        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>Loading inbox...</p>
        </div>

        <!-- Inbox Container -->
        <div id="inbox-container"></div>

        <!-- Load More -->
        <div id="load-more-container" style="display: none; text-align: center; margin-top: 2rem;">
            <button id="load-more-btn" class="btn btn-secondary">Load More</button>
        </div>

        <!-- Empty State -->
        <div id="empty-state" class="empty-state" style="display: none;">
            <p>No emails found. Constituents haven't contacted you through any campaigns yet.</p>
        </div>
    </div>

    <!-- Response Modal -->
    <div id="response-modal" class="modal" style="display: none;">
        <div class="modal-content modal-large">
            <span class="close" onclick="closeResponseModal()">&times;</span>
            <h2>Respond to Constituent Email</h2>
            
            <div id="original-email" class="original-email-box"></div>

            <form id="response-form">
                <input type="hidden" id="inbox-id">
                
                <div class="form-group">
                    <label for="response-type">Response Type</label>
                    <select id="response-type">
                        <option value="Email">Email Response</option>
                        <option value="Phone">Phone Call</option>
                        <option value="Meeting">In-Person Meeting</option>
                        <option value="Letter">Written Letter</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="response-text">Your Official Response *</label>
                    <textarea id="response-text" rows="8" required 
                              placeholder="Write your official response here..."></textarea>
                    <small class="text-muted">This will be publicly visible on the Response Wall with a "Verified by Representative" badge.</small>
                </div>

                <div class="form-group">
                    <label for="response-comment">Additional Context (Optional)</label>
                    <textarea id="response-comment" rows="3" 
                              placeholder="Add any additional context or notes about this response..."></textarea>
                </div>

                <div class="form-group">
                    <label for="response-screenshot">Attach Screenshot (Optional)</label>
                    <input type="file" id="response-screenshot" accept="image/*">
                    <small class="text-muted">Max 5MB. Attach proof of response if applicable.</small>
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Publish Response</button>
                    <button type="button" class="btn btn-secondary" onclick="closeResponseModal()">Cancel</button>
                </div>

                <p class="text-muted" style="margin-top: 1rem;">
                    ✓ This response will be automatically verified and published to the campaign's Response Wall.
                </p>
            </form>
        </div>
    </div>

    <script src="/js/api-client.js"></script>
    <script src="/js/representative-dashboard.js"></script>
</body>
</html>
```

#### File: `app/public/css/representative.css` (NEW FILE)

```css
/* Representative Dashboard Styles */

.header-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.rep-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
}

.stat-label {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 0.25rem;
}

.notice {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.notice-warning {
    background: #fff9e6;
    border: 1px solid #f39c12;
    color: #856404;
}

.inbox-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.inbox-item {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease;
}

.inbox-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inbox-item.unread {
    border-left: 4px solid #3498db;
    background: #f8f9ff;
}

.inbox-item.answered {
    opacity: 0.7;
}

.inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.inbox-campaign-info h3 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.inbox-campaign-info .campaign-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.inbox-badges {
    display: flex;
    gap: 0.5rem;
}

.inbox-body {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    max-height: 150px;
    overflow: hidden;
    position: relative;
}

.inbox-body.expanded {
    max-height: none;
}

.inbox-body-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, #f8f9fa);
}

.inbox-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inbox-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.inbox-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-respond {
    background: #27ae60;
    color: white;
}

.btn-respond:hover {
    background: #229954;
}

.btn-expand {
    background: transparent;
    border: 1px solid #3498db;
    color: #3498db;
}

.original-email-box {
    background: #f8f9fa;
    padding: 1.5rem;
    border-left: 4px solid #3498db;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.original-email-box h4 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
}

.original-email-box .email-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.original-email-box .email-body {
    color: #2c3e50;
    line-height: 1.6;
}

.modal-large {
    max-width: 800px;
}

.badge-answered {
    background: #27ae60;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .rep-stats-grid {
        grid-template-columns: 1fr;
    }

    .inbox-header {
        flex-direction: column;
        gap: 1rem;
    }

    .inbox-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .inbox-actions {
        width: 100%;
    }

    .inbox-actions button {
        flex: 1;
    }
}
```

#### File: `app/public/js/representative-dashboard.js` (NEW FILE)

```javascript
// Representative Dashboard JavaScript

let currentOffset = 0;
let currentFilter = 'false'; // Show unanswered by default
const LIMIT = 20;
let isVerified = false;

// Initialize
document.addEventListener('DOMContentLoaded', async () => {
    await checkVerificationStatus();
    loadStats();
    loadInbox();

    // Event listeners
    document.getElementById('status-filter').addEventListener('change', (e) => {
        currentFilter = e.target.value;
        currentOffset = 0;
        loadInbox(true);
    });

    document.getElementById('load-more-btn').addEventListener('click', loadMoreEmails);
    document.getElementById('response-form').addEventListener('submit', handleSubmitResponse);
});

// Check if representative is verified
async function checkVerificationStatus() {
    try {
        const response = await fetch('/api/auth/me', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        const data = await response.json();

        if (data.success && data.user.user_type === 'representative') {
            isVerified = data.user.representative_verified;

            if (!isVerified) {
                document.getElementById('verification-notice').style.display = 'block';
            }
        } else {
            window.location.href = '/login.html';
        }
    } catch (error) {
        console.error('Error checking verification:', error);
        window.location.href = '/login.html';
    }
}

// Load inbox statistics
async function loadStats() {
    try {
        const response = await fetch('/api/representative/inbox/stats', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        const data = await response.json();

        if (data.success) {
            document.getElementById('total-emails').textContent = data.stats.total_emails;
            document.getElementById('unanswered-emails').textContent = data.stats.unanswered;
            document.getElementById('answered-emails').textContent = data.stats.answered;
            document.getElementById('unique-campaigns').textContent = data.stats.unique_campaigns;
        }
    } catch (error) {
        console.error('Error loading stats:', error);
    }
}

// Load inbox emails
async function loadInbox(reset = false) {
    if (reset) {
        currentOffset = 0;
        document.getElementById('inbox-container').innerHTML = '';
    }

    showLoading(true);

    try {
        let url = `/api/representative/inbox?limit=${LIMIT}&offset=${currentOffset}`;

        if (currentFilter !== '') {
            url += `&has_response=${currentFilter}`;
        }

        const response = await fetch(url, {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });

        const data = await response.json();

        if (data.success) {
            if (data.emails.length === 0 && currentOffset === 0) {
                showEmptyState();
            } else {
                renderEmails(data.emails);

                const loadMoreContainer = document.getElementById('load-more-container');
                if (data.pagination.hasMore) {
                    loadMoreContainer.style.display = 'block';
                } else {
                    loadMoreContainer.style.display = 'none';
                }
            }
        } else {
            showError('Failed to load inbox');
        }
    } catch (error) {
        console.error('Error loading inbox:', error);
        showError('Failed to load inbox');
    } finally {
        showLoading(false);
    }
}

// Render inbox emails
function renderEmails(emails) {
    const container = document.getElementById('inbox-container');
    document.getElementById('empty-state').style.display = 'none';

    emails.forEach(email => {
        const item = createInboxItem(email);
        container.appendChild(item);
    });
}

// Create inbox item element
function createInboxItem(email) {
    const item = document.createElement('div');
    item.className = `inbox-item ${!email.has_response ? 'unread' : 'answered'}`;
    item.dataset.emailId = email.Id;

    const date = new Date(email.created_at);
    const formattedDate = date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });

    let badges = '';
    if (email.has_response) {
        badges = `<span class="badge badge-answered">✓ Answered</span>`;
    }

    // Truncate email body for preview
    const bodyPreview = email.email_body.length > 200 
        ? email.email_body.substring(0, 200) + '...' 
        : email.email_body;

    item.innerHTML = `
        <div class="inbox-header">
            <div class="inbox-campaign-info">
                <h3>${escapeHtml(email.campaign_title)}</h3>
                <div class="campaign-meta">
                    <span>From constituent in ${escapeHtml(email.sender_postal_code)}</span>
                </div>
            </div>
            <div class="inbox-badges">
                ${badges}
            </div>
        </div>

        <div class="inbox-body" id="body-${email.Id}">
            <strong>Subject:</strong> ${escapeHtml(email.email_subject)}<br><br>
            ${escapeHtml(bodyPreview)}
            ${email.email_body.length > 200 ? '<div class="inbox-body-fade"></div>' : ''}
        </div>

        <div class="inbox-footer">
            <div class="inbox-meta">
                Received ${formattedDate}
            </div>
            <div class="inbox-actions">
                ${email.email_body.length > 200 ? `
                    <button class="btn btn-expand" onclick="toggleEmailBody(${email.Id})">
                        Read Full Email
                    </button>
                ` : ''}
                ${!email.has_response && isVerified ? `
                    <button class="btn btn-respond" onclick="openResponseModal(${email.Id})">
                        Respond Publicly
                    </button>
                ` : ''}
                ${email.has_response ? `
                    <button class="btn btn-secondary" onclick="viewResponse(${email.response_id})">
                        View Response
                    </button>
                ` : ''}
            </div>
        </div>
    `;

    // Store full email data for later use
    item.dataset.emailData = JSON.stringify(email);

    return item;
}

// Toggle email body expansion
function toggleEmailBody(emailId) {
    const bodyElement = document.getElementById(`body-${emailId}`);
    const item = document.querySelector(`[data-email-id="${emailId}"]`);
    const email = JSON.parse(item.dataset.emailData);

    if (bodyElement.classList.contains('expanded')) {
        bodyElement.classList.remove('expanded');
        bodyElement.innerHTML = `
            <strong>Subject:</strong> ${escapeHtml(email.email_subject)}<br><br>
            ${escapeHtml(email.email_body.substring(0, 200))}...
            <div class="inbox-body-fade"></div>
        `;
    } else {
        bodyElement.classList.add('expanded');
        bodyElement.innerHTML = `
            <strong>Subject:</strong> ${escapeHtml(email.email_subject)}<br><br>
            ${escapeHtml(email.email_body)}
        `;
    }
}

// Open response modal
function openResponseModal(emailId) {
    const item = document.querySelector(`[data-email-id="${emailId}"]`);
    const email = JSON.parse(item.dataset.emailData);

    document.getElementById('inbox-id').value = email.Id;

    // Show original email in modal
    document.getElementById('original-email').innerHTML = `
        <h4>Original Email from Constituent</h4>
        <div class="email-meta">
            <strong>Campaign:</strong> ${escapeHtml(email.campaign_title)}<br>
            <strong>From:</strong> Constituent in ${escapeHtml(email.sender_postal_code)}<br>
            <strong>Subject:</strong> ${escapeHtml(email.email_subject)}<br>
            <strong>Date:</strong> ${new Date(email.created_at).toLocaleDateString()}
        </div>
        <div class="email-body">
            ${escapeHtml(email.email_body)}
        </div>
    `;

    document.getElementById('response-modal').style.display = 'block';
}

// Close response modal
function closeResponseModal() {
    document.getElementById('response-modal').style.display = 'none';
    document.getElementById('response-form').reset();
}

// Handle response submission
async function handleSubmitResponse(e) {
    e.preventDefault();

    const inboxId = document.getElementById('inbox-id').value;
    const formData = new FormData();

    formData.append('response_type', document.getElementById('response-type').value);
    formData.append('response_text', document.getElementById('response-text').value.trim());
    formData.append('user_comment', document.getElementById('response-comment').value.trim());

    const screenshotFile = document.getElementById('response-screenshot').files[0];
    if (screenshotFile) {
        formData.append('screenshot', screenshotFile);
    }

    try {
        const submitButton = e.target.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.textContent = 'Publishing...';

        const response = await fetch(`/api/representative/respond/${inboxId}`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            },
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            showSuccess('Response published successfully! It now appears on the Response Wall.');
            closeResponseModal();
            loadStats();
            currentOffset = 0;
            loadInbox(true);
        } else {
            showError(data.error || 'Failed to publish response');
        }
    } catch (error) {
        console.error('Error submitting response:', error);
        showError('Failed to publish response');
    } finally {
        const submitButton = e.target.querySelector('button[type="submit"]');
        submitButton.disabled = false;
        submitButton.textContent = 'Publish Response';
    }
}

// View existing response
function viewResponse(responseId) {
    // Could open response in modal or redirect to response wall
    window.open(`/response-wall.html?response=${responseId}`, '_blank');
}

// Load more emails
function loadMoreEmails() {
    currentOffset += LIMIT;
    loadInbox(false);
}

// Utility functions
function showLoading(show) {
    document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showEmptyState() {
    document.getElementById('empty-state').style.display = 'block';
    document.getElementById('inbox-container').innerHTML = '';
}

function showError(message) {
    alert(message); // Could be improved with toast notifications
}

function showSuccess(message) {
    alert(message); // Could be improved with toast notifications
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function logout() {
    localStorage.removeItem('token');
    window.location.href = '/login.html';
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('response-modal');
    if (event.target === modal) {
        closeResponseModal();
    }
};
```

#### File: `app/public/css/response-wall.css` (UPDATE)

Add representative badge styling:

```css
/* Add to existing response-wall.css */

.badge-verified-rep {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-verified-rep::before {
    content: "✓";
    font-weight: bold;
}

.response-card.verified-by-rep {
    border: 2px solid #667eea;
    background: linear-gradient(to bottom, #f8f9ff 0%, white 100%);
}

.response-card.verified-by-rep .response-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 1.5rem;
    border-radius: 8px 8px 0 0;
}

.response-card.verified-by-rep .response-header h3,
.response-card.verified-by-rep .response-header .rep-meta {
    color: white;
}

.response-card.verified-by-rep .response-header .rep-meta {
    opacity: 0.9;
}

.rep-profile-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rep-profile-link:hover {
    text-decoration: underline;
}
```

#### File: `app/public/js/response-wall.js` (UPDATE)

Update response card rendering to show representative badge:

```javascript
// Update the createResponseCard function to detect representative responses

function createResponseCard(response) {
    const card = document.createElement('div');
    
    // Add special class for representative responses
    card.className = response.posted_by_representative 
        ? 'response-card verified-by-rep' 
        : 'response-card';
    
    card.dataset.responseId = response.Id;

    // ... existing code ...

    // Build badges - add representative badge first if applicable
    let badges = '';
    if (response.posted_by_representative) {
        badges = `<span class="badge badge-verified-rep">Official Response</span>`;
    }
    if (response.verified && !response.posted_by_representative) {
        badges += `<span class="badge badge-verified">✓ Verified</span>`;
    }
    badges += `<span class="badge badge-level">${response.representative_level}</span>`;
    badges += `<span class="badge badge-type">${response.response_type}</span>`;

    // ... rest of existing code ...
}
```

---

### Admin Panel Updates

#### File: `app/public/admin.html` (UPDATE)

Add representative verification section:

```html
<!-- Add this new section after responses section -->
<section id="rep-verification-section" style="display: none;">
    <h2>Representative Verification</h2>
    
    <div class="admin-filters">
        <select id="rep-verification-status">
            <option value="pending">Pending Verification</option>
            <option value="verified">Verified</option>
            <option value="all">All Representatives</option>
        </select>
        
        <button onclick="loadRepresentatives()" class="btn btn-secondary">Refresh</button>
    </div>

    <div id="admin-representatives-container"></div>
</section>
```

#### File: `app/public/js/admin.js` (UPDATE)

Add representative verification functions:

```javascript
// Add these functions to existing admin.js

async function loadRepresentatives() {
    const status = document.getElementById('rep-verification-status').value;
    
    try {
        const response = await fetch(`/api/admin/representatives?status=${status}`, {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            renderRepresentatives(data.representatives);
        }
    } catch (error) {
        console.error('Error loading representatives:', error);
    }
}

function renderRepresentatives(reps) {
    const container = document.getElementById('admin-representatives-container');
    
    if (reps.length === 0) {
        container.innerHTML = '<p>No representatives found.</p>';
        return;
    }
    
    container.innerHTML = reps.map(rep => `
        <div class="admin-rep-card">
            <h4>${rep.representative_name} (${rep.representative_level})</h4>
            <p><strong>District:</strong> ${rep.representative_district}</p>
            <p><strong>Email:</strong> ${rep.email}</p>
            <p><strong>Status:</strong> ${rep.representative_verified ? 'Verified' : 'Pending Verification'}</p>
            ${rep.verification_document ? `
                <p><a href="${rep.verification_document}" target="_blank">View Verification Document</a></p>
            ` : ''}
            
            <div class="admin-actions">
                ${!rep.representative_verified ? `
                    <button onclick="verifyRepresentative(${rep.Id})" class="btn btn-success">
                        Verify Representative
                    </button>
                ` : `
                    <button onclick="unverifyRepresentative(${rep.Id})" class="btn btn-danger">
                        Revoke Verification
                    </button>
                `}
            </div>
        </div>
    `).join('');
}

async function verifyRepresentative(id) {
    if (!confirm('Verify this representative account? They will be able to post official responses.')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/admin/representatives/${id}/verify`, {
            method: 'PATCH',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ verified: true })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('Representative verified successfully');
            loadRepresentatives();
        }
    } catch (error) {
        console.error('Error verifying representative:', error);
    }
}

async function unverifyRepresentative(id) {
    if (!confirm('Revoke verification for this representative?')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/admin/representatives/${id}/verify`, {
            method: 'PATCH',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ verified: false })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showSuccess('Verification revoked');
            loadRepresentatives();
        }
    } catch (error) {
        console.error('Error revoking verification:', error);
    }
}
```

#### File: `app/controllers/representativeController.js` (UPDATE)

Add admin endpoints:

```javascript
// Add these admin functions to representative controller

async function getRepresentativesForAdmin(req, res) {
    try {
        const { status = 'pending' } = req.query;
        
        let whereClause = `(user_type,eq,representative)`;
        
        if (status === 'pending') {
            whereClause += `~and(representative_verified,eq,false)`;
        } else if (status === 'verified') {
            whereClause += `~and(representative_verified,eq,true)`;
        }
        
        const reps = await nocodbService.getRecords('users', {
            where: whereClause,
            sort: '-created_at'
        });
        
        res.json({ success: true, representatives: reps });
    } catch (error) {
        console.error('Error fetching representatives:', error);
        res.status(500).json({ error: 'Failed to fetch representatives' });
    }
}

async function verifyRepresentative(req, res) {
    try {
        const { id } = req.params;
        const { verified } = req.body;
        
        await nocodbService.updateRecord('users', id, {
            representative_verified: verified
        });
        
        // Could send email notification here
        
        res.json({ success: true, message: `Representative ${verified ? 'verified' : 'unverified'} successfully` });
    } catch (error) {
        console.error('Error updating representative verification:', error);
        res.status(500).json({ error: 'Failed to update verification' });
    }
}

// Export these
module.exports = {
    // ... existing exports
    getRepresentativesForAdmin,
    verifyRepresentative
};
```

#### File: `app/routes/api.js` (UPDATE)

Add admin representative routes:

```javascript
// Add these admin routes
router.get('/admin/representatives', requireAdmin, representativeController.getRepresentativesForAdmin);
router.patch('/admin/representatives/:id/verify', requireAdmin, representativeController.verifyRepresentative);
```

---

### Testing Checklist

#### Representative Features
- [ ] Representative can register account
- [ ] Representative can request verification
- [ ] Admin can verify/unverify representatives
- [ ] Representative dashboard loads correctly
- [ ] Inbox shows emails sent to representative
- [ ] Representative can respond to emails
- [ ] Responses get "Official Response" badge
- [ ] Responses are auto-verified and auto-approved
- [ ] Inbox tracking works (has_response flag updates)
- [ ] Stats display correctly

#### Integration
- [ ] Regular users see representative responses with special badge
- [ ] Representative responses appear at top when sorted
- [ ] Profile links work
- [ ] Representative bio displays
- [ ] Verification status prevents unverified reps from responding

---

## Future Enhancements (Post-MVP)

1. **Representative Scorecards**: Aggregate response data to show which reps are most responsive
2. **Email Notifications**: Notify users when their response is approved
3. **Response Templates**: Let users use parts of responses as email templates
4. **Search Functionality**: Search responses by keyword
5. **Response Analytics**: Track response sentiment, common themes
6. **API Rate Limiting**: Add specific rate limits for response submission
7. **Spam Detection**: Automated spam/abuse detection
8. **Response Categories**: Tag responses (Positive, Negative, Non-Answer, etc.)
9. **Representative Notifications**: Email reps when they receive new constituent emails
10. **Response Drafts**: Let representatives save draft responses
11. **Bulk Response**: Allow representatives to respond to multiple similar emails at once
12. **Representative Analytics**: Show reps their response rate and engagement metrics

---

## Notes for Implementation Agent

- Follow existing code style and patterns from the project
- Use existing error handling and validation patterns
- Integrate with existing authentication system
- Match existing CSS design patterns
- Test thoroughly before marking complete
- Update README.md with new feature documentation
- Add comments for complex logic

Good luck! 🚀