repopack-output.txt

================================================================
Repopack Output File
================================================================

This file was generated by Repopack on: 2024-08-23T15:13:47.195Z

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This header section
2. Repository structure
3. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
1. This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
2. When processing this file, use the separators and "File:" markers to
  distinguish between different files in the repository.
3. Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repopack's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.



For more information about Repopack, visit: https://github.com/yamadashy/repopack

================================================================
Repository Structure
================================================================
.do/
  app.yaml
.github/
  workflows/
    gitleaks.yml
    tests.yml
.pytest_cache/
  v/
    cache/
      lastfailed
      nodeids
      stepwise
  .gitignore
  CACHEDIR.TAG
  README.md
webapp/
  public/
    _redirects
    .htaccess
    404.html
    favicon.ico
    index.html
    og-image.jpg
  src/
    assets/
      logo.png
    components/
      ui/
        AnimatedNumber.vue
        SortableList.vue
        TextAnimate.vue
        TypeWriter.vue
      BarChart.vue
      CreateView.vue
      FancyButton.vue
      FancyInput.vue
      HomeView.vue
      NavItem.vue
      NotFound.vue
      ResultsView.vue
      ScaleChart.vue
      ShareView.vue
      SiteHeader.vue
      SurveyChips.vue
      SurveyExpiryChip.vue
      TakeSurvey.vue
      ToastView.vue
    locales/
      en.ts
    services/
      api.ts
    App.vue
    i18n.ts
    index.css
    main.ts
    router.ts
    shims-vue.d.ts
    static.json
  .env.example
  .gitignore
  babel.config.js
  Dockerfile
  frontend-nginx.conf
  jsconfig.json
  package.json
  postcss.config.js
  README.md
  tailwind.config.js
  todo.md
  tsconfig.json
  vue.config.js
.coverage
.env.example
.gitignore
api_endpoints.md
app.py
docker-compose.yml
Dockerfile
id_manager.py
LICENSE
nginx.conf
Procfile
requirements.txt
sample_surveys.py
setup_mongo.py
snowflake.py
test_survey_results.py

================================================================
Repository Files
================================================================

================
File: .env.example
================
MONGO_URI=mongodb://localhost:27017/percept

================
File: .gitignore
================
__pycache__/
*.pyc
.venv/
.DS_Store
.env

#webapp folder
# Dependencies
webapp/node_modules
webapp/.pnp
.pnp.js

# Testing
webapp/coverage

# Production
webapp/build
webapp/dist

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Vue.js specific
.DS_Store
webapp/node_modules
webapp/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*


# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

================
File: Dockerfile
================
FROM python:3.9-slim

WORKDIR /app

# Copy requirements and install dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Install wget for the wait-for script
RUN apt-get update && apt-get install -y wget

# Download wait-for script
RUN wget -O /usr/local/bin/wait-for https://raw.githubusercontent.com/eficode/wait-for/master/wait-for
RUN chmod +x /usr/local/bin/wait-for

# Pre-download NLTK data files
# -d option may have other consequences. testing for now
RUN python -m nltk.downloader -d /workspace/nltk_data words vader_lexicon wordnet

# Copy the rest of the application code
COPY . .

# Expose port 5001
EXPOSE 5001
CMD ["gunicorn", "-b", "0.0.0.0:5001","--timeout", "240", "app:app"]

================
File: LICENSE
================
MIT License

Copyright (c) 2024 Narayan Babu

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================
File: Procfile
================
web: gunicorn --bind 0.0.0.0:$PORT app:app

================
File: api_endpoints.md
================
# Percept API Endpoints

## Base URL: `/api/v1`

### 1. Create Survey

- **Endpoint**: `POST /surveys`
- **Description**: Create a new survey
- **Request Body**:
  ```json
  {
    "title": "string",
    "description": "string (optional)",
    "questions": [
      {
        "text": "string",
        "response_type": "string",
        "response_scale_max": "integer (optional, default is 5)",
        "creator_answer": "integer or boolean"
      }
    ]
  }
  ```
- **Response**:
  ```json
  {
    "survey_id": "long",
    "share_link": "string",
    "user_code": "long",
    "questions": [
      {
        "id": "integer",
        "text": "string"
      }
    ]
  }
  ```

### 2. Get Survey

- **Endpoint**: `GET /surveys/{survey_id}`
- **Description**: Retrieve survey details
- **Response**:
  ```json
  {
    "title": "string",
    "description": "string",
    "questions": [
      {
        "id": "integer",
        "text": "string",
        "response_type": "string",
        "response_scale_max": "integer (only for 'scale' type)"
      }
    ]
  }
  ```

### 3. Submit Survey Answers

- **Endpoint**: `POST /surveys/{survey_id}/answers`
- **Description**: Submit answers for a survey
- **Request Body**:
  ```json
  {
    "answers": [
      {
        "question_id": "integer",
        "answer": "integer or boolean"
      }
    ]
  }
  ```
- **Response**:
  ```json
  {
    "user_code": "long",
    "deviation_from_creator": "float",
    "deviation_from_others": "float",
    "overall_deviation": "float"
  }
  ```

### 4. Get Survey Results by Survey ID

- **Endpoint**: `GET /surveys/{survey_id}/results`
- **Description**: Retrieve survey results for a specific survey
- **Query Parameters**:
  - `user_code`: "long" (required)
- **Response**:
  ```json
  {
    "survey_id": "long",
    "title": "string",
    "description": "string",
    "created_at": "long",
    "user_type": "string",
    "questions": [
      {
        "id": "integer",
        "text": "string",
        "type": "string",
        "scale_max": "integer (for scale questions)",
        "average_score": "float (for scale questions)",
        "standard_deviation": "float (for scale questions)",
        "user_score": "integer or boolean (if applicable)",
        "user_deviation": "float (for scale questions, if applicable)",
        "true_percentage": "float (for boolean questions)",
        "false_percentage": "float (for boolean questions)"
      }
    ],
    "overall_statistics": {
      "average_deviation_from_aggregate": "float",
      "deviation_from_creator": "float (for participants)",
      "deviation_from_others": "float (for participants)",
      "overall_deviation": "float"
    }
  }
  ```

### 5. Get Survey Results by User Code

- **Endpoint**: `GET /surveys/results`
- **Description**: Retrieve survey results for a user across all surveys
- **Query Parameters**:
  - `user_code`: "long" (required)
- **Response**: Same as "Get Survey Results by Survey ID"

## Notes

- Question IDs are simple integers starting from 1 for each survey.
- The `response_type` can be "scale" or "boolean".
- For "scale" type questions, `response_scale_max` specifies the maximum value of the scale. If not provided, it defaults to 5.
- The server returns appropriate HTTP status codes (200 for success, 201 for creation, 400 for bad request, 404 for not found, etc.)
- Error responses include a message explaining the error.
- The `user_type` in the results can be either "creator" or "participant".
- For the creator, some statistics like `deviation_from_creator` are not applicable and may be omitted from the response.

================
File: app.py
================
# app.py

import datetime
from statistics import StatisticsError, mean, stdev
import time
from flask import Flask, request, jsonify
from flask_pymongo import PyMongo
from flask_cors import CORS
import os
import logging
from id_manager import IDManager
from pymongo.errors import ConnectionFailure
from snowflake import Snowflake53


app = Flask(__name__)

# Add the CORS configuration here
allowed_origins = [
    "http://localhost",
    "http://localhost:8080",
    os.environ.get("APP_URL", "https://i.nyn.me")
]
CORS(app, resources={
    r"/v1/*": {"origins": allowed_origins},
    r"/api/v1/*": {"origins": allowed_origins}
})
#CORS(app, resources={r"/api/*": {"origins": "*"}}, supports_credentials=True)

api_prefix = os.getenv('API_PREFIX', '')  # Default to empty string if not set

# Initialize the generator with a random number 
snowflake = Snowflake53(1,1)

# Constants
MINIMUM_RESPONSES = 5
ID_SUGGESTIONS = 5
INITIAL_ID_RESERVE = 300  # Number of IDs to generate initially
DEFAULT_EXPIRY = datetime.timedelta(days=5)  # New constant for default expiry
# Set up logging
logging.basicConfig(level=logging.DEBUG)

# MongoDB configuration
if app.testing:
    app.config["MONGO_URI"] = "mongodb://localhost:27017/backfeed_test"
else:
    app.config["MONGO_URI"] = os.environ.get("MONGO_URI", "mongodb://localhost:27017/percept")
mongo = PyMongo(app)

# Initialize IDManager
id_manager = IDManager(mongo.db)

def make_tz_aware(dt):
    if isinstance(dt, str):
        dt = datetime.datetime.fromisoformat(dt)
    if dt.tzinfo is None:
        return dt.replace(tzinfo=datetime.UTC)
    return dt


def initialize_db(max_retries=5, delay=5):
    for attempt in range(max_retries):
        try:
            # The ismaster command is cheap and does not require auth.
            mongo.db.command('ismaster')
            logging.info("Successfully connected to MongoDB")
            return True
        except ConnectionFailure:
            if attempt < max_retries - 1:
                logging.error(f"Failed to connect to MongoDB. Retrying in {delay} seconds...")
                time.sleep(delay)
            else:
                logging.error("Failed to connect to MongoDB after maximum retries")
                return False


def generate_unique_id():
    return snowflake.generate()

# Initialize the ID reserve
with app.app_context():
    if initialize_db():
        try:
            id_manager.initialize_reserve(INITIAL_ID_RESERVE)
            app.logger.info(f"Initialized ID reserve with {INITIAL_ID_RESERVE} IDs")
        except Exception as e:
            app.logger.error(f"Failed to initialize ID reserve: {str(e)}")
    else:
        app.logger.error("Failed to initialize database connection")

@app.before_first_request
def startup_logger():
    app.logger.info("Application started. Testing MongoDB connection...")
    try:
        # Perform a simple operation to test the connection
        mongo.db.command('ping')
        app.logger.info("MongoDB connection successful")
    except Exception as e:
        app.logger.error(f"MongoDB connection failed: {str(e)}")

@app.route(f'{api_prefix}/')
def home():
    return "Welcome to the Percept API", 200

def get_participant_bucket(count):
    if count < 10:
        return "< 10"
    elif 10 <= count < 100:
        return "10-100"
    elif 100 <= count < 1000:
        return "100-1000"
    else:
        return "1000+"

@app.route(f'{api_prefix}/v1/ids/check', methods=['GET'])
def check_id():
    id_to_check = request.args.get('id')
    if not id_to_check:
        return jsonify({'error': 'No ID provided'}), 400

    if not id_manager.is_valid_id_format(id_to_check):
        return jsonify({
            'id': id_to_check,
            'available': False,
            'error': 'Invalid ID format. ID must be at least 5 characters long and contain only letters, numbers, and hyphens.'
        }), 400

    available = id_manager.is_id_available(id_to_check)
    return jsonify({
        'id': id_to_check,
        'available': available
    })
    
@app.route(f'{api_prefix}/v1/ids', methods=['GET'])
def get_ids():
    preferred = request.args.get('id')
    count = int(request.args.get('count', ID_SUGGESTIONS))

    ids = id_manager.get_ids(count, preferred)

    return jsonify({
        'ids': ids
    })
       
@app.route(f'{api_prefix}/v1/surveys', methods=['POST'])
def create_survey():
    app.logger.debug("Received POST request to /api/v1/surveys")
    data = request.json
    app.logger.debug(f"Request data: {data}")
    if 'survey_id' not in data :
        data['survey_id'] = id_manager.get_ids()[0]
        app.logger.debug("Creating surveyID: "+data['survey_id'])
    
    if 'user_code' not in data :
        data['user_code'] = id_manager.get_ids()[0]
        app.logger.debug("Creating userCode: "+data['user_code'])

    if not data or 'title' not in data or 'questions' not in data or 'user_code' not in data:
        app.logger.warning("Invalid request data")
        return jsonify({'error': 'Invalid request data'}), 400
    
    try:
        survey_id = data['survey_id']
        user_code = data['user_code']
    
        # Check if the IDs are available, including reserved IDs
        if not id_manager.is_id_available(survey_id, include_reserved=True):
            app.logger.warning(f"Requested survey ID is not available: survey_id={survey_id}")
            return jsonify({'error': 'Requested survey ID is not available'}), 400
        
        if not id_manager.is_id_available(user_code, include_reserved=True):
            app.logger.warning(f"Requested user code is not available: user_code={user_code}")
            return jsonify({'error': 'Requested user code is not available'}), 400


        # Handle expiry date
        expiry_date = data.get('expiry')
        if expiry_date:
            expiry_date = make_tz_aware(datetime.datetime.fromisoformat(expiry_date))
        else:
            expiry_date = make_tz_aware(datetime.datetime.now(datetime.UTC) + DEFAULT_EXPIRY)

        survey = {
            'survey_id': survey_id,
            'title': data['title'],
            'description': data.get('description', ''),
            'questions': [
                {
                    'id': i + 1,
                    'text': q['text'],
                    'response_type': q['response_type'],
                    'response_scale_max': q.get('response_scale_max', MINIMUM_RESPONSES),
                    'creator_answer': q['creator_answer']
                } for i, q in enumerate(data['questions'])
            ],
            'user_code': user_code,
            'expiry_date': expiry_date
        }
        
        # Insert the survey into the database
        result = mongo.db.surveys.insert_one(survey)
        
        if result.inserted_id:
            app.logger.debug(f"Survey created with ID: {survey_id}")
            
            # Mark the IDs as used only after successful insertion
            id_manager.mark_id_as_used(survey_id)
            id_manager.mark_id_as_used(user_code)
            
            response = jsonify({
                'survey_id': survey_id,
                'share_link': f"/participate/{survey_id}",
                'user_code': user_code,
                'questions': [{'id': q['id'], 'text': q['text']} for q in survey['questions']],
                'expiry_date': expiry_date.isoformat()
            })
            app.logger.debug(f"Sending response: {response.get_data(as_text=True)}")
            return response, 201
        else:
            app.logger.error("Failed to insert survey into database")
            return jsonify({'error': 'Failed to create survey'}), 500
    
    except Exception as e:
        app.logger.error(f"Error creating survey: {str(e)}")
        return jsonify({'error': 'Internal server error'}), 500

@app.route(f'{api_prefix}/v1/surveys/<string:survey_id>', methods=['GET'])
def get_survey(survey_id):
    app.logger.debug(f"Received GET request for survey ID: {survey_id}")
    survey = mongo.db.surveys.find_one({'survey_id': survey_id})
    if not survey:
        app.logger.warning(f"Survey not found: {survey_id}")
        return jsonify({'error': 'Survey not found'}), 404
    
    # Check if the survey has expired
    expiry_date = make_tz_aware(survey.get('expiry_date', datetime.datetime.now(datetime.UTC) + DEFAULT_EXPIRY))
    is_expired = expiry_date < datetime.datetime.now(datetime.UTC)
    
    if is_expired:
        return jsonify({'error': 'Survey has expired', 'expired': True}), 410
    
    # Remove the _id field from the survey dict
    survey.pop('_id', None)
    
    # Calculate trending status
    twenty_four_hours_ago = datetime.datetime.now(datetime.UTC) - datetime.timedelta(hours=24)
    recent_answers = mongo.db.answers.find_one({
        'survey_id': survey_id,
        'submitted_at': {'$gte': twenty_four_hours_ago}
    })
    is_trending = bool(recent_answers)
    
    # Calculate participant bucket
    total_answers = mongo.db.answers.count_documents({'survey_id': survey_id})
    participant_bucket = get_participant_bucket(total_answers)
    
    app.logger.debug(f"Found survey: {survey}")
    return jsonify({
        'survey_id': survey['survey_id'],
        'title': survey['title'],
        'description': survey.get('description', ''),
        'questions': [
            {
                'id': q['id'],
                'text': q['text'],
                'response_type': q['response_type'],
                'response_scale_max': q.get('response_scale_max')
            } for q in survey['questions']
        ],
        'is_trending': is_trending,
        'participant_bucket': participant_bucket,
        'expiry_date': expiry_date.isoformat(),
        'expired': is_expired
    })

@app.route(f'{api_prefix}/v1/surveys/<string:survey_id>/answers', methods=['POST'])
def submit_answers(survey_id):
    app.logger.debug(f"Received POST request to submit answers for survey ID: {survey_id}")
    data = request.json
    app.logger.debug(f"Request data: {data}")
    
    if not data or 'answers' not in data:
        app.logger.warning("Invalid request data: 'answers' not found in request")
        return jsonify({'error': 'Invalid request data: answers not provided'}), 400
    
    try:
        # Fetch the survey
        survey = mongo.db.surveys.find_one({'survey_id': survey_id})
        if not survey:
            app.logger.warning(f"Survey not found: {survey_id}")
            return jsonify({'error': 'Survey not found'}), 404
        
        # Validate answers
        valid_questions = {str(q['id']): q for q in survey['questions']}  # Convert to string
        for answer in data['answers']:
            if 'question_id' not in answer or 'answer' not in answer:
                app.logger.warning(f"Invalid answer format: {answer}")
                return jsonify({'error': f"Invalid answer format: {answer}"}), 400
            
            question_id = str(answer['question_id'])  # Convert to string
            if question_id not in valid_questions:
                app.logger.warning(f"Invalid question ID: {question_id}")
                return jsonify({'error': f"Invalid question ID: {question_id}"}), 400
            
            question = valid_questions[question_id]
            if question['response_type'] == 'scale':
                if not isinstance(answer['answer'], (int, float)) or not (1 <= answer['answer'] <= question['response_scale_max']):
                    app.logger.warning(f"Invalid answer for scale question {question_id}: {answer['answer']}")
                    return jsonify({'error': f"Invalid answer for question {question_id}: must be between 1 and {question['response_scale_max']}"}), 400
            elif question['response_type'] == 'boolean':
                if not isinstance(answer['answer'], bool):
                    app.logger.warning(f"Invalid answer for boolean question {question_id}: {answer['answer']}")
                    return jsonify({'error': f"Invalid answer for question {question_id}: must be a boolean"}), 400
        
        # Use provided user_code, if not, generate a new one
        user_code = data.get('user_code', id_manager.get_id())
        answer_submission = {
            'survey_id': survey_id,
            'user_code': user_code,
            'answers': {str(answer['question_id']): answer['answer'] for answer in data['answers']},
            'submitted_at': datetime.datetime.now(datetime.UTC)
        }
        result = mongo.db.answers.insert_one(answer_submission)
        
        # Mark the user_code as used
        id_manager.mark_id_as_used(user_code)
        
        # Calculate deviations (placeholder logic - you'll need to implement the actual calculation)
        deviation_from_creator = 0.5  # placeholder
        deviation_from_others = 0.3  # placeholder
        overall_deviation = 0.4  # placeholder
        
        response = jsonify({
            'user_code': user_code,
            'deviation_from_creator': deviation_from_creator,
            'deviation_from_others': deviation_from_others,
            'overall_deviation': overall_deviation
        })
        app.logger.debug(f"Sending response: {response.get_data(as_text=True)}")
        return response, 201
    except Exception as e:
        app.logger.error(f"Error submitting answers: {str(e)}")
        return jsonify({'error': 'Internal server error'}), 500
    
@app.route(f'{api_prefix}/v1/surveys/<string:survey_id>/results', methods=['GET'])
def get_survey_results(survey_id):
    user_code = request.args.get('user_code')
    return process_results(survey_id, user_code)

@app.route(f'{api_prefix}/v1/surveys/results', methods=['GET'])
def get_results_by_user_code():
    user_code = request.args.get('user_code')
    if not user_code:
        return jsonify({'error': 'User code is required'}), 400
    
    # Try to find the survey based on the user_code (for creators)
    survey = mongo.db.surveys.find_one({'user_code': user_code})
    if survey:
        return process_results(survey['survey_id'], user_code)
    
    # If not found in surveys, look in answers (for participants)
    answer = mongo.db.answers.find_one({'user_code': user_code})
    if answer:
        return process_results(answer['survey_id'], user_code)
    
    return jsonify({'error': 'No survey found for this user code'}), 404
    
def process_results(survey_id, user_code):
    logging.info(f"Getting results for survey {survey_id}, user_code {user_code}")
    
    if not user_code:
        logging.warning("User code is missing")
        return jsonify({'error': 'User code is required'}), 400

    survey = mongo.db.surveys.find_one({'survey_id': survey_id})
    if not survey:
        logging.warning(f"Survey {survey_id} not found")
        return jsonify({'error': 'Survey not found'}), 404

    # Check if user is creator
    is_creator = (user_code == survey['user_code'])
    logging.info(f"User is creator: {is_creator}")

    # Get all answers for this survey
    answers = list(mongo.db.answers.find({'survey_id': survey_id}))
    logging.info(f"Found {len(answers)} answers for survey {survey_id}")

    # Check if the user_code exists in the answers
    user_answer = next((a for a in answers if a['user_code'] == user_code), None)
    if not user_answer and not is_creator:
        logging.warning(f"Invalid user code: {user_code}")
        return jsonify({'error': 'Invalid user code'}), 404

    logging.info(f"Creator ID is: {survey['user_code']}")
    
    current_responses = len(answers)
    now_time = datetime.datetime.now(datetime.UTC)
    # Calculate trending status
    twenty_four_hours_ago = now_time - datetime.timedelta(hours=24)
    recent_answers = mongo.db.answers.find_one({
        'survey_id': survey_id,
        'submitted_at': {'$gte': twenty_four_hours_ago}
    })
    
    # Calculate participant bucket
    total_answers = len(answers)
    is_trending = bool(recent_answers)
    participant_bucket = get_participant_bucket(total_answers)

    # Check expiry
    expiry_date = make_tz_aware(survey.get('expiry_date', now_time + DEFAULT_EXPIRY))
    is_expired = expiry_date < now_time

    # Check for minimum responses for creator
    if current_responses < MINIMUM_RESPONSES:
        if is_creator:
            response = {
                'status': 'incomplete',
                'current_responses': current_responses,
                'total_responses': current_responses,
                'minimum_responses': MINIMUM_RESPONSES,
                'remaining_responses': MINIMUM_RESPONSES - current_responses,
                'is_creator': True,
                'user_code': user_code,
                'survey_id': survey_id,
                'is_trending': is_trending,
                'participant_bucket': participant_bucket,
                'expiry_date': expiry_date.isoformat(),
                'expired': is_expired
            }
            return jsonify(response), 200
        else:
            response = {
                'status': 'incomplete',
                'is_creator': False,
                'is_trending': is_trending,
                'participant_bucket': participant_bucket,
                'expiry_date': expiry_date.isoformat(),
                'expired': is_expired
            }
            return jsonify(response), 202

    # Calculate statistics
    results = calculate_survey_statistics(survey, answers, user_code, is_creator)
    results['is_trending'] = is_trending
    results['participant_bucket'] = participant_bucket
    results['expiry_date'] = expiry_date.isoformat()
    results['expired'] = is_expired
    
    return jsonify(results), 200

def calculate_survey_statistics(survey, answers, user_code, is_creator):
    logging.info(f"Calculating statistics for survey {survey['survey_id']}, user_code {user_code}, is_creator: {is_creator}")
    
    questions = {q['id']: q for q in survey['questions']}
    now_time = datetime.datetime.now(datetime.UTC)
    results = {
        'survey_id': survey['survey_id'],
        'title': survey['title'],
        'description': survey.get('description', ''),
        'created_at': survey['survey_id'],
        'is_creator': is_creator,
        'questions': [],
        'overall_statistics': {},
        'expiry_date': make_tz_aware(survey.get('expiry_date', now_time + DEFAULT_EXPIRY)).isoformat(),
        'expired': make_tz_aware(survey.get('expiry_date', now_time + DEFAULT_EXPIRY)) < now_time,
        'total_responses': len(answers)
    }

    creator_answers = {str(q['id']): q['creator_answer'] for q in survey['questions']}
    user_answers = creator_answers if is_creator else next((a['answers'] for a in answers if str(a.get('user_code')) == str(user_code)), None)

    logging.info(f"User answers: {user_answers}")
    logging.info(f"Creator answers: {creator_answers}")

    all_deviations = []
    user_deviations = []

    for q_id, question in questions.items():
        q_answers = [a['answers'][str(q_id)] for a in answers if str(q_id) in a['answers']]
        creator_answer = creator_answers.get(q_id)
        avg_score = mean(q_answers) if q_answers else None
        
        logging.info(f"Processing question ID: {q_id}")
        logging.info(f"Question type: {question['response_type']}")
        
        if question['response_type'] == 'scale':
            try:
                std_dev = stdev(q_answers) if len(q_answers) > 1 else 0
            except StatisticsError:
                std_dev = 0
            
            q_stat = {
                'id': q_id,
                'text': question['text'],
                'type': 'scale',
                'scale_max': question['response_scale_max'],
                'average_score': round(avg_score, 2) if avg_score is not None else None,
                'standard_deviation': round(std_dev, 2),
                'distribution': {score: q_answers.count(score) for score in range(1, question['response_scale_max'] + 1)}
            }
            
            
            if user_answers and str(q_id) in user_answers:
                user_score = user_answers[str(q_id)]
                q_stat['user_score'] = user_score
                if avg_score is not None:
                    user_deviation = abs(user_score - avg_score)
                    q_stat['user_deviation'] = round(user_deviation, 2)
                    user_deviations.append(user_deviation)

                # Calculate deviation from creator for all users, including creator
                if creator_answer is not None:
                    creator_deviation = abs(user_score - creator_answer)
                    q_stat['deviation_from_creator'] = round(creator_deviation, 2)

                # Calculate deviation from others
                other_answers = q_answers if is_creator else [a for a in q_answers if a != user_score]
                if other_answers:
                    other_avg = mean(other_answers)
                    other_deviation = abs(user_score - other_avg)
                    q_stat['deviation_from_others'] = round(other_deviation, 2)

            # Calculate overall deviation for this question
            if creator_answer is not None:
                question_deviations = [abs(ans - creator_answer) for ans in q_answers]
                all_deviations.extend(question_deviations)
            
        elif question['response_type'] == 'boolean':
            true_count = sum(q_answers)
            total_count = len(q_answers)
            
            q_stat = {
                'id': q_id,
                'text': question['text'],
                'type': 'boolean',
                'true_percentage': round(true_count / total_count * 100, 2) if total_count > 0 else 0,
                'false_percentage': round((total_count - true_count) / total_count * 100, 2) if total_count > 0 else 0
            }
            
            if user_answers and str(q_id) in user_answers:
                q_stat['user_answer'] = user_answers[str(q_id)]

        results['questions'].append(q_stat)

    # Calculate overall statistics
    results['overall_statistics'] = {
        'average_deviation_from_aggregate': round(mean(user_deviations), 2) if user_deviations else None,
        'overall_deviation': round(mean(all_deviations), 2) if all_deviations else None,
    }

    # Remove None values from overall_statistics
    results['overall_statistics'] = {k: v for k, v in results['overall_statistics'].items() if v is not None}
    results['total_participants'] = len(answers) 
    
    logging.info(f"Final results: {results}")
    return results


@app.errorhandler(404)
def not_found(error):
    app.logger.warning(f"404 error: {request.url}")
    return jsonify({'error': 'Not found'}), 404

@app.errorhandler(500)
def internal_error(error):
    app.logger.error(f"500 error: {str(error)}")
    return jsonify({'error': 'Internal server error'}), 500

if __name__ == '__main__':
    app.logger.info("Starting the Flask application")
    app.logger.info(f"Registered routes: {app.url_map}")
    app.run(debug=False, host='0.0.0.0', port=5001)

================
File: docker-compose.yml
================
version: '3'
services:
  nginx:
    image: nginx:stable-alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - backend
      - frontend

  backend:
    build: .
    env_file: .env
    ports:
      - "5001:5001"
    environment:
      - MONGO_URI=mongodb://mongo:27017/percept
      - APP_URL=http://localhost
      - API_PREFIX=/api
    depends_on:
      mongo:
        condition: service_healthy
    deploy:
      resources:
        limits:
          memory: 2g

  frontend:
    build:
      context: ./webapp
      args:
        VUE_APP_API_URL: http://localhost/api
        VUE_APP_BASE_URL: http://localhost
  mongo:
    image: mongo:4.4
    volumes:
      - mongodata:/data/db
    ports:
      - "27017:27017"
    healthcheck:
      test: ["CMD", "mongo", "--eval", "db.adminCommand('ping')"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  mongodata:

================
File: id_manager.py
================
import random
import nltk
from nltk.corpus import wordnet as wn
from nltk.sentiment.vader import SentimentIntensityAnalyzer
from pymongo.errors import DuplicateKeyError
import time
import re
import os

nltk.download('words', quiet=False)
nltk.download('wordnet', quiet=False)
nltk.download('vader_lexicon', quiet=False)

MIN_LEMMA_LEN = 3
MAX_LEMMA_LEN = 10
MIN_ID_LEN = 5
ID_VALID_PATTERN = re.compile(r'^[a-zA-Z0-9-]+$')
RESERVE_TIMEOUT = 3600  # 1 hour

nltk.data.path.append(os.environ.get('NLTK_DATA', '/workspace/nltk_data'))

class IDManager:
    def __init__(self, db, collection_name='id_reserve', min_reserve=20, reservation_timeout=RESERVE_TIMEOUT):
        self.db = db
        self.reserve = self.db[collection_name]
        self.min_reserve = min_reserve
        self.reservation_timeout = reservation_timeout
        self.sia = SentimentIntensityAnalyzer()
    
    def initialize_reserve(self, count=100):
        """Initialize the reserve with a given count of generated IDs."""
        new_ids = self.generate_new_ids(count)
        print(new_ids)
        self.reserve.insert_many([{'_id': id, 'status': 'available'} for id in new_ids], ordered=False)
    
    def get_ids(self, count=1, preferred=None):
        """Get a list of available IDs, automatically reserving them."""
        self.cleanup_expired_reservations()
        ids = []
        
        if preferred and self.is_id_available(preferred):
            self._reserve_id(preferred)
            ids.append(preferred)
            count -= 1

        cursor = self.reserve.find({'status': 'available'}).limit(count)
        for doc in cursor:
            id = doc['_id']
            if self._reserve_id(id):
                ids.append(id)

        self.replenish_if_needed()
        return ids

    def _reserve_id(self, id):
        """Internally reserve an ID."""
        result = self.reserve.update_one(
            {'_id': id, 'status': 'available'},
            {'$set': {
                'status': 'reserved',
                'reserved_at': time.time()
            }}
        )
        return result.modified_count > 0

    def mark_id_as_used(self, id):
        """Mark an ID as used, whether it was reserved or available."""
        result = self.reserve.update_one(
            {'_id': id, 'status': {'$in': ['available', 'reserved']}},
            {'$set': {'status': 'used'}, '$unset': {'reserved_at': ''}}
        )
        return result.modified_count > 0

    def get_id(self):
        """Get a single available ID and mark it as used."""
        id_doc = self.reserve.find_one_and_update(
            {'status': 'available'},
            {'$set': {'status': 'used'}},
            return_document=True
        )
        if id_doc:
            self.replenish_if_needed()
            return id_doc['_id']
        else:
            raise Exception("No available IDs in the reserve")

    def cleanup_expired_reservations(self):
        """Clean up expired reservations."""
        expired_time = time.time() - self.reservation_timeout
        self.reserve.update_many(
            {'status': 'reserved', 'reserved_at': {'$lt': expired_time}},
            {'$set': {'status': 'available'}, '$unset': {'reserved_at': ''}}
        )

    def is_id_available(self, id, include_reserved=False):
        """
        Check if an ID is available and has a valid format.
        
        Args:
            id (str): The ID to check.
            include_reserved (bool): If True, consider reserved IDs as available.
        
        Returns:
            bool: True if the ID is available (and valid), False otherwise.
        """
        if not self.is_valid_id_format(id):
            return False
        self.cleanup_expired_reservations()
        doc = self.reserve.find_one({'_id': id})
        if doc is None:
            return True
        if include_reserved:    
            return doc['status'] in ['available', 'reserved']
        return doc['status'] == 'available'
        
    def is_valid_id_format(self, id):
        """Check if the ID has a valid format."""
        return (
            isinstance(id, str) and
            len(id) >= MIN_ID_LEN and
            ID_VALID_PATTERN.match(id) is not None
        )

    def add_custom_id(self, id):
        """Add a custom ID to the reserve and mark it as used."""
        try:
            self.reserve.insert_one({'_id': id, 'status': 'used'})
        except DuplicateKeyError:
            # If the ID already exists, just mark it as used
            self.mark_id_as_used(id)

    def replenish_if_needed(self):
        """Replenish the reserve if it's running low."""
        available_count = self.reserve.count_documents({'status': 'available'})
        if available_count < self.min_reserve:
            self.replenish_reserve(self.min_reserve - available_count)

    def replenish_reserve(self, count):
        """Add new IDs to the reserve."""
        new_ids = self.generate_new_ids(count)
        print(new_ids)
        self.reserve.insert_many([{'_id': id, 'status': 'available'} for id in new_ids], ordered=False)

    def generate_new_ids(self, count):
        """Generate new unique IDs using noun-adjective combinations."""
        new_ids = set()
        attempts = 0
        max_attempts = 5  # Maximum number of attempts to generate required IDs

        while len(new_ids) < count and attempts < max_attempts:
            # Generate more combinations than needed to increase chances of finding unique IDs
            combinations = self.generate_noun_adjective_pairs(count * 2)
            
            # Check which combinations are not in the database and add them to new_ids
            existing_ids = set(doc['_id'] for doc in self.reserve.find({'_id': {'$in': combinations}}))
            new_ids.update(set(combinations) - existing_ids)

            # If we have enough IDs, break the loop
            if len(new_ids) >= count:
                break

            attempts += 1

        if len(new_ids) == 0:
            raise ValueError(f"Unable to generate any unique IDs after {max_attempts} attempts")

        if len(new_ids) < count:
            print(f"Warning: Only generated {len(new_ids)} unique IDs out of {count} requested")

        return list(new_ids)[:count]

    def generate_noun_adjective_pairs(self, count=100):
        """Generate multiple noun-adjective pairs using WordNet."""
        adj_count = min(count, 20)  # Number of adjectives to fetch
        noun_count = min(count, 20)  # Number of nouns to fetch
        
        adjectives = [self.get_random_lemma(wn.ADJ) for _ in range(adj_count)]
        nouns = [self.get_random_lemma(wn.NOUN) for _ in range(noun_count)]
        
        combinations = [
            f"{adj}-{noun}" for adj in adjectives for noun in nouns
            if self.is_safe_word(f"{adj}-{noun}")
        ]
        
        # Shuffle the combinations and return up to the requested count
        random.shuffle(combinations)
        return combinations[:count]

    def get_random_lemma(self, pos):
        """Get a random lemma from WordNet."""
        while True:
            words = list(wn.all_synsets(pos))
            word = random.choice(words).lemmas()[0].name().replace('_', '-')
            if MIN_LEMMA_LEN <= len(word) <= MAX_LEMMA_LEN:
                return word.lower()

    def is_safe_word(self, word):
        """Check if a word is safe using VADER sentiment analysis."""
        sentiment_score = self.sia.polarity_scores(word)['compound']
        return sentiment_score >= 0

================
File: nginx.conf
================
events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        
        location / {
            proxy_pass http://frontend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /api {
            proxy_pass http://backend:5001;
            # CORS headers
            add_header 'Access-Control-Allow-Origin' 'http://localhost' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
        }
    }
}

================
File: requirements.txt
================
Flask==2.2.2
Flask-PyMongo==2.3.0
pymongo[srv]
dnspython
Werkzeug==2.2.2
requests
flask-cors
gunicorn==20.1.0
nltk

================
File: sample_surveys.py
================
# populate_sample_data.py

import requests
import json
import random

BASE_URL = "http://localhost:5001/api/v1"

def create_survey():
    """
    Creates a new survey and returns the response.
    """
    survey_data = {
        "title": "Personal assessment",
        "description": "Help us improve my self awareness",
        "questions": [
            {
                "text": "How trustworthy am I?",
                "response_type": "scale",
                "response_scale_max": 5,
                "creator_answer": 4
            },
            {
                "text": "Am I honest most of the times?",
                "response_type": "boolean",
                "creator_answer": True
            },
            {
                "text": "Do I take feedback with open arms?",
                "response_type": "scale",
                "response_scale_max": 10,
                "creator_answer": 8
            },
            {
                "text": "Am I approachable?",
                "response_type": "boolean",
                "creator_answer": False
            }
        ]
    }

    response = requests.post(f"{BASE_URL}/surveys", json=survey_data)
    print("Survey Creation Response:")
    print(json.dumps(response.json(), indent=2))
    return response.json()

def add_answers(survey_id):
    """
    Adds a set of random answers for the given survey ID and returns the response.
    """
    answers = [
        {"question_id": 1, "answer": random.randint(1, 5)},
        {"question_id": 2, "answer": random.choice([True, False])},
        {"question_id": 3, "answer": random.randint(1, 10)},
        {"question_id": 4, "answer": random.choice([True, False])}
    ]

    response = requests.post(f"{BASE_URL}/surveys/{survey_id}/answers", json={"answers": answers})
    print(f"Answer Submission Response for Survey {survey_id}:")
    print(json.dumps(response.json(), indent=2))
    return response.json()

def show_stats(survey_id, user_code):
    """
    Retrieves and displays statistics for the given survey ID and user code.
    """
    response = requests.get(f"{BASE_URL}/surveys/{survey_id}/results?user_code={user_code}")
    print(f"Statistics for Survey {survey_id} (User Code: {user_code}):")
    print(json.dumps(response.json(), indent=2))
    return response.json()

if __name__ == "__main__":
    # Create a new survey
    survey = create_survey()
    survey_id = survey['survey_id']
    creator_code = survey['user_code']

    # Add some random answers
    for _ in range(10):
        answer_response = add_answers(survey_id)

    # Show stats for creator
    creator_stats = show_stats(survey_id, creator_code)

    # Show stats for a participant (using the user_code from the last answer submission)
    print("Last participants stats")
    participant_code = answer_response['user_code']
    participant_stats = show_stats(survey_id, participant_code)
    print(participant_stats)
    
    print("Creator stats")
    creator_stats = show_stats(survey_id, creator_code)
    print(creator_stats)

================
File: setup_mongo.py
================
# setup_db.py

from pymongo import MongoClient
import time

def generate_unique_id():
    return int(time.time() * 1000)

# Connect to MongoDB
client = MongoClient('mongodb://localhost:27017/')
db = client['backfeed']

# Clear existing data
db.surveys.delete_many({})

# Insert a sample survey
sample_survey = {
    'survey_id': generate_unique_id(),
    'title': 'Sample Feedback Survey',
    'description': 'A sample survey for testing purposes',
    'questions': [
        {
            'id': generate_unique_id(),
            'text': 'How would you rate your overall experience?',
            'response_type': 'scale',
            'response_scale_max': 5,
            'creator_answer': 4
        },
        {
            'id': generate_unique_id(),
            'text': 'Did you find the service helpful?',
            'response_type': 'boolean',
            'creator_answer': True
        }
    ],
    'user_code': generate_unique_id()
}

result = db.surveys.insert_one(sample_survey)

print(f"Sample survey inserted with ID: {result.inserted_id}")
print(f"Survey ID: {sample_survey['survey_id']}")
print(f"User Code: {sample_survey['user_code']}")

client.close()

================
File: snowflake.py
================
import time

class Snowflake53:
    def __init__(self, datacenter_id, worker_id):
        self.datacenter_id = datacenter_id
        self.worker_id = worker_id
        self.sequence = 0
        self.last_timestamp = -1

    def generate(self):
        timestamp = int(time.time() * 1000)  # Current time in milliseconds

        if timestamp < self.last_timestamp:
            raise ValueError("Clock moved backwards")

        if timestamp == self.last_timestamp:
            self.sequence = (self.sequence + 1) & 0xFF  # 8 bits for sequence
            if self.sequence == 0:
                timestamp = self.wait_next_millis(self.last_timestamp)
        else:
            self.sequence = 0

        self.last_timestamp = timestamp

        # Reduce from 64 bits to 53 bits
        id = ((timestamp & 0x1FFFFFFFFFF) << 12) | \
             ((self.datacenter_id & 0x1F) << 7) | \
             ((self.worker_id & 0x1F) << 2) | \
             (self.sequence & 0x3)

        return id

    def wait_next_millis(self, last_timestamp):
        timestamp = int(time.time() * 1000)
        while timestamp <= last_timestamp:
            timestamp = int(time.time() * 1000)
        return timestamp

# Usage
#generator = Snowflake53(datacenter_id=1, worker_id=1)
#id = generator.generate()
#print(id)  # This will print a number that fits within JavaScript's safe integer range

================
File: test_survey_results.py
================
import unittest
import json
import datetime
from app import app, mongo, id_manager,make_tz_aware, MINIMUM_RESPONSES

class TestSurveyResults(unittest.TestCase):
    
    @classmethod
    def setUpClass(cls):
        app.config['TESTING'] = True
        app.config['MONGO_URI'] = "mongodb://localhost:27017/backfeed_test"
        cls.client = app.test_client()

    @classmethod
    def tearDownClass(cls):
        with app.app_context():
            mongo.db.surveys.delete_many({})
            mongo.db.answers.delete_many({})

    def setUp(self):
        with app.app_context():
            mongo.db.surveys.delete_many({})
            mongo.db.answers.delete_many({})
        
        self.survey_data = {
            "title": "Customer Satisfaction Survey",
            "description": "Help us improve our service",
            "questions": [
                {
                    "text": "How satisfied are you with our product?",
                    "response_type": "scale",
                    "response_scale_max": 5,
                    "creator_answer": 4
                },
                {
                    "text": "Would you recommend our product to others?",
                    "response_type": "boolean",
                    "creator_answer": True
                },
                {
                    "text": "How likely are you to purchase again?",
                    "response_type": "scale",
                    "response_scale_max": 10,
                    "creator_answer": 8
                },
                {
                    "text": "Did you find our customer support helpful?",
                    "response_type": "boolean",
                    "creator_answer": True
                }
            ],
            "expiry_date": make_tz_aware(datetime.datetime.now(datetime.UTC) + datetime.timedelta(days=7)).isoformat(),
        }
        
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(self.survey_data),
                                    content_type='application/json')
        self.survey_response = json.loads(response.data)
        
        if 'error' in self.survey_response:
            self.skipTest(f"Survey creation failed: {self.survey_response['error']}")
        
        # Verify that the response contains the expected keys
        expected_keys = ['survey_id', 'share_link', 'user_code', 'questions', 'expiry_date']
        for key in expected_keys:
            self.assertIn(key, self.survey_response, f"Expected key '{key}' not found in response")

        self.survey_id = self.survey_response['survey_id']
        self.creator_code = self.survey_response['user_code']
        
        self.add_sample_responses()


    def add_sample_responses(self):
        responses = [
            {"answers": [{"question_id": 1, "answer": 4}, {"question_id": 2, "answer": True},
                         {"question_id": 3, "answer": 7}, {"question_id": 4, "answer": True}]},
            {"answers": [{"question_id": 1, "answer": 5}, {"question_id": 2, "answer": True},
                         {"question_id": 3, "answer": 9}, {"question_id": 4, "answer": True}]},
            {"answers": [{"question_id": 1, "answer": 3}, {"question_id": 2, "answer": False},
                         {"question_id": 3, "answer": 6}, {"question_id": 4, "answer": False}]},
            {"answers": [{"question_id": 1, "answer": 4}, {"question_id": 2, "answer": True},
                         {"question_id": 3, "answer": 8}, {"question_id": 4, "answer": True}]},
            {"answers": [{"question_id": 1, "answer": 2}, {"question_id": 2, "answer": False},
                         {"question_id": 3, "answer": 5}, {"question_id": 4, "answer": True}]}
        ]
        
        self.participant_codes = []
        for response in responses:
            resp = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(response),
                                    content_type='application/json')
            response_data = json.loads(resp.data)
            self.assertEqual(resp.status_code, 201)
            self.assertIn('user_code', response_data)
            self.participant_codes.append(response_data['user_code'])

    def test_create_survey(self):
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(self.survey_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 201)
        data = json.loads(response.data)
        self.assertIn('survey_id', data)
        self.assertIn('user_code', data)
        self.assertIsInstance(data['survey_id'], str)
        self.assertIsInstance(data['user_code'], str)

    def test_get_survey(self):
        # First, create a new survey
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(self.survey_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 201)
        create_data = json.loads(response.data)
        survey_id = create_data['survey_id']

        # Now, try to get the survey we just created
        response = self.client.get(f'/v1/surveys/{survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)

        # Verify the retrieved data
        self.assertEqual(data['title'], self.survey_data['title'])
        self.assertEqual(data['description'], self.survey_data['description'])
        self.assertEqual(len(data['questions']), len(self.survey_data['questions']))
        
        # Check each question
        for i, question in enumerate(data['questions']):
            self.assertEqual(question['text'], self.survey_data['questions'][i]['text'])
            self.assertEqual(question['response_type'], self.survey_data['questions'][i]['response_type'])
            if 'response_scale_max' in self.survey_data['questions'][i]:
                self.assertEqual(question['response_scale_max'], self.survey_data['questions'][i]['response_scale_max'])

    def test_submit_answers(self):
        response_data = {
            "answers": [
                {"question_id": "1", "answer": 3},
                {"question_id": "2", "answer": False},
                {"question_id": "3", "answer": 7},
                {"question_id": "4", "answer": True}
            ]
        }
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(response_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 201)
        data = json.loads(response.data)
        self.assertIn('user_code', data)
        self.assertIn('deviation_from_creator', data)
        self.assertIn('deviation_from_others', data)
        self.assertIn('overall_deviation', data)

    def test_submit_answers_invalid_data(self):
        # Test answer out of range for scale question
        invalid_data = {"answers": [{"question_id": "1", "answer": 6}]}  # Max is 5 for this question
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(invalid_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 400)
        
        # Test invalid boolean answer
        invalid_data = {"answers": [{"question_id": "2", "answer": "Not a boolean"}]}
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(invalid_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 400)
        
        # Test invalid question ID
        invalid_data = {"answers": [{"question_id": "999", "answer": 5}]}
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(invalid_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 400)

        # Test missing question_id
        invalid_data = {"answers": [{"answer": 5}]}
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(invalid_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 400)

        # Test missing answer
        invalid_data = {"answers": [{"question_id": "1"}]}
        response = self.client.post(f'/v1/surveys/{self.survey_id}/answers',
                                    data=json.dumps(invalid_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 400)

    def test_creator_results(self):
        response = self.client.get(f'/v1/surveys/{self.survey_id}/results?user_code={self.creator_code}')
        self.assertEqual(response.status_code, 200)
        
        data = json.loads(response.data)
        self.assertEqual(data['user_type'], 'creator')
        self.assertEqual(len(data['questions']), 4)
        self.assertEqual(data['total_responses'], 5)
        self.assertIsInstance(data['survey_id'], str)
        
        scale_questions = [q for q in data['questions'] if q['type'] == 'scale']
        for question in scale_questions:
            self.assertIn('distribution', question)
        
        self.assertIn('overall_statistics', data)
        self.assertIn('average_deviation_from_aggregate', data['overall_statistics'])
        self.assertIn('overall_deviation', data['overall_statistics'])


    def test_participant_results(self):
        participant_code = self.participant_codes[0]
        
        response = self.client.get(f'/v1/surveys/{self.survey_id}/results?user_code={participant_code}')
        self.assertEqual(response.status_code, 200)
        
        data = json.loads(response.data)
        self.assertEqual(data['user_type'], 'participant')
        self.assertEqual(len(data['questions']), 4)
        self.assertIsInstance(data['survey_id'], str)
        
        scale_questions = [q for q in data['questions'] if q['type'] == 'scale']
        for question in scale_questions:
            self.assertIn('user_score', question)
            self.assertIn('user_deviation', question)
        
        self.assertIn('overall_statistics', data)
        self.assertIn('average_deviation_from_aggregate', data['overall_statistics'])
        self.assertIn('average_deviation_from_creator', data['overall_statistics'])
        self.assertIn('average_deviation_from_others', data['overall_statistics'])
        self.assertIn('overall_deviation', data['overall_statistics'])


    def test_invalid_user_code(self):
        invalid_code = id_manager.get_id()  # Get a valid format but unused ID
        response = self.client.get(f'/v1/surveys/{self.survey_id}/results?user_code={invalid_code}')
        self.assertEqual(response.status_code, 404)

    def test_nonexistent_survey(self):
        nonexistent_survey_id = id_manager.get_id()  # Get a valid format but unused ID
        response = self.client.get(f'/v1/surveys/{nonexistent_survey_id}/results?user_code={self.creator_code}')
        self.assertEqual(response.status_code, 404)

    def test_get_results_by_user_code(self):
        participant_code = self.participant_codes[0]
        
        response = self.client.get(f'/v1/surveys/results?user_code={participant_code}')
        self.assertEqual(response.status_code, 200)
        
        data = json.loads(response.data)
        self.assertEqual(data['user_type'], 'participant')
        self.assertEqual(len(data['questions']), 4)
        self.assertIsInstance(data['survey_id'], str)
        self.assertIn('overall_statistics', data)
        self.assertIn('average_deviation_from_aggregate', data['overall_statistics'])
        self.assertIn('average_deviation_from_creator', data['overall_statistics'])
        self.assertIn('average_deviation_from_others', data['overall_statistics'])
        self.assertIn('overall_deviation', data['overall_statistics'])


    def test_get_results_by_invalid_user_code(self):
        invalid_code = id_manager.get_id()  # Get a valid format but unused ID
        response = self.client.get(f'/v1/surveys/results?user_code={invalid_code}')
        self.assertEqual(response.status_code, 404)

    def test_id_format(self):
        # Test that generated IDs are strings and match expected format
        survey_id = self.survey_id
        user_code = self.creator_code
        
        self.assertIsInstance(survey_id, str)
        self.assertIsInstance(user_code, str)
        # Add more specific checks if your ID format is known (e.g., regex pattern)

    def test_get_ids(self):
        response = self.client.get('/v1/ids?count=5')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertIn('ids', data)
        self.assertEqual(len(data['ids']), 5)
        for id in data['ids']:
            self.assertIsInstance(id, str)

    def test_check_id_availability(self):
        # Test with an available ID
        available_ids = id_manager.get_ids(count=1)  # Get an ID without marking it as used
        self.assertTrue(len(available_ids) > 0, "Failed to get an available ID")
        available_id = available_ids[0]
        
        response = self.client.get(f'/v1/ids/check?id={available_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertTrue(data['available'])

        # Test with an unavailable ID (the survey_id we created)
        response = self.client.get(f'/v1/ids/check?id={self.survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertFalse(data['available'])

        # Now mark the previously available ID as used
        id_manager.mark_id_as_used(available_id)

        # Check that it's now unavailable
        response = self.client.get(f'/v1/ids/check?id={available_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertFalse(data['available'])

    def test_survey_expiry(self):
        # Test creating a survey with expiry date
        survey_data = self.survey_data.copy()
        survey_data['expiry_date'] = make_tz_aware(datetime.datetime.now() + datetime.timedelta(days=1)).isoformat()
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(survey_data),
                                    content_type='application/json')
        self.assertEqual(response.status_code, 201)
        survey_id = json.loads(response.data)['survey_id']

        # Test getting survey before expiry
        response = self.client.get(f'/v1/surveys/{survey_id}')
        self.assertEqual(response.status_code, 200)
        self.assertFalse(json.loads(response.data)['expired'])

        # Test getting survey after expiry
        with app.app_context():
            mongo.db.surveys.update_one(
                {'survey_id': survey_id},
                {'$set': {'expiry_date': make_tz_aware(datetime.datetime.now() - datetime.timedelta(days=1)).isoformat()}}
            )
        response = self.client.get(f'/v1/surveys/{survey_id}')
        self.assertEqual(response.status_code, 410)
        self.assertTrue(json.loads(response.data)['expired'])

    def test_trending_survey(self):
        # Add multiple responses within 24 hours
        for _ in range(5):
            self.add_sample_responses()

        # Check if the survey is trending
        response = self.client.get(f'/v1/surveys/{self.survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertTrue(data['is_trending'])

    def test_participant_bucket(self):
        # Test with less than 10 participants
        response = self.client.get(f'/v1/surveys/{self.survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertEqual(data['participant_bucket'], '< 10')

        # Add more responses to change the bucket
        for _ in range(10):
            self.add_sample_responses()

        response = self.client.get(f'/v1/surveys/{self.survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertEqual(data['participant_bucket'], '10-100')

    def test_survey_results_with_new_fields(self):
        response = self.client.get(f'/v1/surveys/{self.survey_id}/results?user_code={self.creator_code}')
        self.assertEqual(response.status_code, 200)
        
        data = json.loads(response.data)
        self.assertIn('is_trending', data)
        self.assertIn('participant_bucket', data)
        self.assertIn('expiry_date', data)
        self.assertIn('expired', data)
    
    def test_survey_with_no_responses(self):
        # Create a new survey without adding any responses
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(self.survey_data),
                                    content_type='application/json')
        new_survey_id = json.loads(response.data)['survey_id']
        new_creator_code = json.loads(response.data)['user_code']

        # Get results for this survey
        response = self.client.get(f'/v1/surveys/{new_survey_id}/results?user_code={new_creator_code}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertEqual(data['status'], 'incomplete')
        self.assertEqual(data['current_responses'], 0)
        self.assertEqual(data['minimum_responses'], MINIMUM_RESPONSES)
        self.assertEqual(data['remaining_responses'], MINIMUM_RESPONSES)
        self.assertTrue(data['is_creator'])
        self.assertEqual(data['participant_bucket'], '< 10')
        self.assertFalse(data['is_trending'])

    def test_survey_about_to_expire(self):
        # Create a survey that expires in 5 minutes
        survey_data = self.survey_data.copy()
        survey_data['expiry_date'] = make_tz_aware(datetime.datetime.now(datetime.UTC) + datetime.timedelta(minutes=5)).isoformat()
        response = self.client.post('/v1/surveys',
                                    data=json.dumps(survey_data),
                                    content_type='application/json')
        survey_id = json.loads(response.data)['survey_id']

        # Check the survey
        response = self.client.get(f'/v1/surveys/{survey_id}')
        self.assertEqual(response.status_code, 200)
        data = json.loads(response.data)
        self.assertFalse(data['expired'])
        # You might want to add an 'expiring_soon' field to your API for this case
        # self.assertTrue(data['expiring_soon'])

if __name__ == '__main__':
    unittest.main()

================
File: .do/app.yaml
================
alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
domains:
- domain: nyn.sh
  type: PRIMARY
  zone: nyn.sh
features:
- buildpack-stack=ubuntu-22
name: backwave-app
region: blr
services:
- build_command: |-
    pip install -r requirements.txt
    python -m nltk.downloader words vader_lexicon wordnet
  environment_slug: python
  envs:
  - key: NLTK_DATA
    scope: RUN_AND_BUILD_TIME
    value: /workspace/nltk_data
  - key: PORT
    scope: RUN_AND_BUILD_TIME
    value: "5001"
  - key: MONGO_URI
    scope: RUN_AND_BUILD_TIME
    value: mongodb+srv://doadmin:<password>@db-mongo-backwave-eb4142b3.mongo.ondigitalocean.com/admin?tls=true&authSource=admin&replicaSet=db-mongo-backwave
  - key: APP_URL
    scope: RUN_AND_BUILD_TIME
    value: ${APP_URL}
  github:
    branch: main
    deploy_on_push: true
    repo: codevalley/percept
  http_port: 5001
  instance_count: 1
  instance_size_slug: apps-s-1vcpu-1gb-fixed
  name: backwave-api
  run_command: gunicorn --bind 0.0.0.0:$PORT --timeout 600 app:app
  source_dir: /
  routes:
  - path: /api
static_sites:
- build_command: npm install && npm run build
  environment_slug: node-js
  envs:
  - key: VUE_APP_API_URL
    scope: BUILD_TIME
    value: ${APP_URL}/api
  - key: VUE_APP_BASE_URL
    scope: BUILD_TIME
    value: ${APP_URL}
  github:
    branch: main
    deploy_on_push: true
    repo: codevalley/percept
  name: backwave-web
  output_dir: dist
  source_dir: webapp
  routes:
  - path: /
  - path: /*
    preserve_path_prefix: true

================
File: .pytest_cache/.gitignore
================
# Created by pytest automatically.
*

================
File: .pytest_cache/CACHEDIR.TAG
================
Signature: 8a477f597d28d172789f06886806bc55
# This file is a cache directory tag created by pytest.
# For information about cache directory tags, see:
#	https://bford.info/cachedir/spec.html

================
File: .pytest_cache/README.md
================
# pytest cache directory #

This directory contains data from the pytest's cache plugin,
which provides the `--lf` and `--ff` options, as well as the `cache` fixture.

**Do not** commit this to version control.

See [the docs](https://docs.pytest.org/en/stable/how-to/cache.html) for more information.

================
File: .github/workflows/gitleaks.yml
================
name: Gitleaks

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  gitleaks:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: '0'
      - name: Gitleaks
        uses: gitleaks/gitleaks-action@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          #GITLEAKS_LICENSE: ${{ secrets.GITLEAKS_LICENSE}} # Only required for Organizations, not personal accounts

================
File: .github/workflows/tests.yml
================
name: Upload Coverage

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  upload-coverage:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Upload coverage reports to Codecov
        uses: codecov/codecov-action@v4.0.1
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          file: ./coverage.xml
          fail_ci_if_error: true
          verbose: true

================
File: .pytest_cache/v/cache/lastfailed
================
{}

================
File: .pytest_cache/v/cache/nodeids
================
[
  "test_survey_results.py::TestSurveyResults::test_check_id_availability",
  "test_survey_results.py::TestSurveyResults::test_create_survey",
  "test_survey_results.py::TestSurveyResults::test_creator_results",
  "test_survey_results.py::TestSurveyResults::test_get_ids",
  "test_survey_results.py::TestSurveyResults::test_get_results_by_invalid_user_code",
  "test_survey_results.py::TestSurveyResults::test_get_results_by_user_code",
  "test_survey_results.py::TestSurveyResults::test_get_survey",
  "test_survey_results.py::TestSurveyResults::test_id_format",
  "test_survey_results.py::TestSurveyResults::test_invalid_user_code",
  "test_survey_results.py::TestSurveyResults::test_nonexistent_survey",
  "test_survey_results.py::TestSurveyResults::test_participant_bucket",
  "test_survey_results.py::TestSurveyResults::test_participant_results",
  "test_survey_results.py::TestSurveyResults::test_submit_answers",
  "test_survey_results.py::TestSurveyResults::test_submit_answers_invalid_data",
  "test_survey_results.py::TestSurveyResults::test_survey_about_to_expire",
  "test_survey_results.py::TestSurveyResults::test_survey_expiry",
  "test_survey_results.py::TestSurveyResults::test_survey_results_with_new_fields",
  "test_survey_results.py::TestSurveyResults::test_survey_with_no_responses",
  "test_survey_results.py::TestSurveyResults::test_trending_survey"
]

================
File: .pytest_cache/v/cache/stepwise
================
[]

================
File: webapp/.env.example
================
VUE_APP_API_URL=http://localhost:5001
BASE_URL=http://localhost
VUE_APP_ENV=development

================
File: webapp/.gitignore
================
# Dependencies
/node_modules
/.pnp
.pnp.js

# Testing
/coverage

# Production
/build
/dist

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Vue.js specific
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

================
File: webapp/Dockerfile
================
FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

# Accept environment variables as build arguments
ARG VUE_APP_API_URL
ARG VUE_APP_BASE_URL
# Create .env file or use an existing .env.production file
RUN echo "VUE_APP_BASE_URL=${VUE_APP_BASE_URL}" > .env.production
RUN echo "VUE_APP_API_URL=${VUE_APP_API_URL}" > .env.production

RUN npm run build

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY frontend-nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

================
File: webapp/README.md
================
# webapp

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

================
File: webapp/babel.config.js
================
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

================
File: webapp/frontend-nginx.conf
================
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

================
File: webapp/jsconfig.json
================
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

================
File: webapp/package.json
================
{
  "name": "backwave",
  "version": "0.1.0",
  "private": true,
  "description": "## Project setup ``` npm install ```",
  "author": "",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "npm run build"
  },
  "main": "babel.config.js",
  "dependencies": {
    "@vueuse/head": "^2.0.0",
    "axios": "^1.7.2",
    "backwave": "file:",
    "canvas-confetti": "^1.9.3",
    "chart.js": "^4.4.3",
    "core-js": "^3.8.3",
    "floating-vue": "^5.2.2",
    "gsap": "^3.12.5",
    "lodash": "^4.17.21",
    "qrcode.vue": "^3.4.1",
    "vue": "^3.2.13",
    "vue-chartjs": "^5.3.1",
    "vue-i18n": "^9.13.1",
    "vue-inline-svg": "^3.1.3",
    "vue-meta": "^2.4.0",
    "vue-router": "^4.4.0",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-typescript": "^9.1.0",
    "autoprefixer": "^10.4.19",
    "copy-webpack-plugin": "^12.0.2",
    "daisyui": "^4.12.10",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "~4.5.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "keywords": [],
  "license": "ISC"
}

================
File: webapp/postcss.config.js
================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

================
File: webapp/tailwind.config.js
================
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#1F2937',
        secondary: '#6B7280',
        accent: {
          DEFAULT: '#BE185D',
          green: '#D8F89D',
        },
        neutral: {
          100: '#F3F4F6',
          200: '#E5E7EB',
          300: '#D1D5DB',
          400: '#9CA3AF',
          500: '#6B7280',
          600: '#4B5563',
        },
      },
      fontFamily: {
        sans: ['IBM Plex Sans', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

================
File: webapp/todo.md
================
### To be done

- Add option to edit Header and description
- 404 page should have options to enter surveyId or user Id
    - Include option to enter surveyID in TakeSurvey error state
    - Include option to enter userID in ResultsView error state
- Tag / group
- Admin view
- Extract various params to environment variables (Flask)

================
File: webapp/tsconfig.json
================
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "outDir": "./dist",
    "noEmit": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.js",  // Add this line
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

================
File: webapp/vue.config.js
================
const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = defineConfig({
  chainWebpack: config => {
    // Existing SVG configuration
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.use('vue-svg-loader').loader('vue-svg-loader');

    // Remove the existing copy plugin if it exists
    config.plugins.delete('copy');

    // Add a new copy plugin configuration
    config.plugin('copy').use(CopyWebpackPlugin, [
      {
        patterns: [
          {
            from: 'public',
            to: '',
            globOptions: {
              ignore: ['**/index.html'], // Ignore index.html to prevent conflict
            },
          },
        ],
      },
    ]);

    // Add TypeScript support
    config.resolve.extensions
      .add('.ts')
      .add('.tsx')
  },

  // Public path configuration
  publicPath: process.env.VUE_APP_BASE_URL || '/',

  // Dev server configuration
  devServer: {
    historyApiFallback: true,
    proxy: {
      '/v1': {
        target: process.env.VUE_APP_API_URL || 'http://localhost:5001',
        changeOrigin: true
      }
    }
  },

  // Add TypeScript support
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json']
    }
  }
});

================
File: webapp/public/.htaccess
================
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

================
File: webapp/public/_redirects
================
/* /index.html 200

================
File: webapp/public/index.html
================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="<%= BASE_URL %>">
    <meta property="og:title" content="Backwave - Calibrate your self awareness">
    <meta property="og:description" content="Create surveys and get valuable feedback to improve your self-awareness.">
    <meta property="og:image" content="<%= BASE_URL %>og-image.jpg">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="<%= BASE_URL %>">
    <meta property="twitter:title" content="Backwave - Calibrate your self awareness">
    <meta property="twitter:description" content="Create surveys and get valuable feedback to improve your self-awareness.">
    <meta property="twitter:image" content="<%= BASE_URL %>og-image.jpg">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

================
File: webapp/src/App.vue
================
<template>
  <div id="app" class="font-['IBM_Plex_Sans'] min-h-screen bg-white">
    <SiteHeader @page-changed="handlePageChange" />
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import SiteHeader from '@/components/SiteHeader.vue';

export default defineComponent({
  name: 'App',
  components: {
    SiteHeader,
  },
  setup() {
    const router = useRouter();

    const handlePageChange = (page: string) => {
      console.log(`Page changed to: ${page}`);
      // Handle navigation based on the page
      switch(page) {
        case 'home':
          router.push('/');
          break;
        case 'create':
          router.push('/create');
          break;
        case 'participate':
          // This might open the participate input in the header instead of navigating
          break;
        case 'analyze':
          // This might open the analyze input in the header instead of navigating
          break;
        default:
          console.warn(`Unhandled page change: ${page}`);
      }
    };

    return {
      handlePageChange
    };
  }
});
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

================
File: webapp/src/i18n.ts
================
import { createI18n } from 'vue-i18n';
import en from './locales/en';

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en }
});

export default i18n;

================
File: webapp/src/index.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;

================
File: webapp/src/main.ts
================
import { createApp, App as VueApp } from 'vue';
import { createHead } from '@vueuse/head';
import App from './App.vue';
import router from './router';
import i18n from './i18n';
import FloatingVue from 'floating-vue';
import 'floating-vue/dist/style.css';
import './index.css';

const app: VueApp = createApp(App);
const head = createHead();

router.onError((error: Error) => {
    console.error('Global navigation error:', error);
});

app.use(router);
app.provide('router', router);
app.use(i18n);
app.use(FloatingVue);
app.use(head);
app.mount('#app');

================
File: webapp/src/router.ts
================
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '@/components/HomeView.vue'
import CreateView from '@/components/CreateView.vue'
import TakeSurvey from '@/components/TakeSurvey.vue'
import ResultsView from '@/components/ResultsView.vue'
import NotFound from './components/NotFound.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/new',
    name: 'Create',
    component: CreateView
  },
  {
    path: '/:surveyId',
    name: 'TakeSurvey',
    component: TakeSurvey,
    props: (route) => ({ 
      surveyId: route.params.surveyId ? route.params.surveyId as string : null,
      surveyData: null
    }),
  },
  {
    path: '/u/:userCode',
    name: 'Results',
    component: ResultsView,
    props: true
  },
  {
    path: '/u/:surveyId/:userCode',
    name: 'SurveyResults',
    component: ResultsView,
    props: true
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

================
File: webapp/src/shims-vue.d.ts
================
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

================
File: webapp/src/static.json
================
{
    "root": "dist",
    "clean_urls": true,
    "routes": {
      "/**": "index.html"
    }
  }

================
File: webapp/src/components/BarChart.vue
================
<template>
  <div class="w-full">
    <div class="relative h-6 bg-neutral-200 rounded-full overflow-hidden">
      <div 
        class="absolute top-0 left-0 h-full rounded-full flex items-center justify-end pr-2"
        :class="activeColor"
        :style="{ width: `${percentage}%` }"
      >
        <span class="text-xs font-medium" :class="complementaryColor">{{ percentage.toFixed(1) }}%</span>
      </div>
    </div>
    <div class="flex justify-between mt-1 text-xs" :class="complementaryColor">
      <span>No</span>
      <span>Yes</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      required: true
    },
    activeColor: {
      type: String,
      default: 'bg-accent-green'
    },
    complementaryColor: {
      type: String,
      default: 'text-primary'
    }
  }
}
</script>

================
File: webapp/src/components/CreateView.vue
================
<template>
  <div class="font-['IBM_Plex_Sans'] min-h-screen bg-white relative">
    <div class="max-w-[859px] mx-auto px-4 sm:px-6 pb-24 sm:pb-0">
      
      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start mb-4 sm:mb-6">
        <div class="w-20 h-20 sm:w-14 sm:h-14 bg-secondary rounded-full mb-4 sm:mb-0 sm:mr-5 flex-shrink-0 sm:self-center"></div>
        <div class="flex-grow text-center sm:text-left">
          <h1 class="text-neutral-600 text-xl sm:text-2xl font-semibold leading-8 sm:leading-10 mb-2 sm:mb-1">{{ surveyTitle }}</h1>
          <p class="text-neutral-600 text-base sm:text-lg font-normal leading-6 sm:leading-7">{{ surveyDescription }}</p>
        </div>
      </div>

      <template v-if="!isPublished">
        
        <!-- Question Creation Section -->
        <div class="bg-neutral-100 rounded-[25px] p-4 sm:p-7 mb-8 sm:mb-12 relative">
          <div class="relative flex items-start mb-6">
            <inline-svg src="assets/question-icon.svg" class="text-primary mr-2 mt-1 hidden sm:block" />
            <div class="relative w-full">
              <textarea
                v-model="newQuestion.text"
                @keyup.enter="handleAddOrSuggest"
                @input="handleQuestionChange"
                @focus="inputFocused = true"
                @blur="inputFocused = false"
                class="w-full bg-transparent text-xl sm:text-[28px] font-regular text-primary focus:outline-none pr-10 transition-all duration-300 ease-in-out transform hover:scale-102 focus:scale-102 resize-none"
                :placeholder="placeholderText"
                :disabled="isSubmitted"
                rows="2"
              ></textarea>
              <inline-svg
                v-if="newQuestion.isAutogenerated"
                src="assets/magic-icon.svg"
                class="absolute right-2 top-2 w-6 h-6 text-neutral-300"
              />
            </div>
          </div>

          <div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center space-y-4 sm:space-y-0">
            <div class="flex space-x-4 sm:space-x-5">
              <button
                @click="setQuestionType('scale')"
                :class="[
                  'flex-1 sm:w-28 h-10 rounded-full flex items-center justify-center space-x-2 border border-neutral-300',
                  newQuestion.response_type === 'scale' ? 'bg-primary text-white' : 'bg-white text-primary'
                ]"
                :disabled="isSubmitted"
              >
                <inline-svg
                  src="assets/scale-icon.svg"
                  :class="newQuestion.response_type === 'scale' ? 'text-white' : 'text-primary'"
                  class="w-6 h-6"
                  :key="newQuestion.response_type === 'scale' ? 'scale' : 'default'"
                />
                <span class="text-base font-medium">Rating</span>
              </button>
              <button
                @click="setQuestionType('boolean')"
                :class="[
                  'flex-1 sm:w-28 h-10 rounded-full flex items-center justify-center space-x-2 border border-neutral-300',
                  newQuestion.response_type === 'boolean' ? 'bg-primary text-white' : 'bg-white text-primary'
                ]"
                :disabled="isSubmitted"
              >
                <inline-svg
                  src="assets/yes-no-icon.svg"
                  :class="newQuestion.response_type === 'boolean' ? 'text-white' : 'text-primary'"
                  class="w-6 h-6"
                  :key="newQuestion.response_type === 'boolean' ? 'boolean' : 'default'"
                />
                <span class="text-base font-medium">Yes/No</span>
              </button>
            </div>

            <div class="flex items-center space-x-2 justify-end sm:justify-start">
              <transition name="fade-scale" mode="out-in">
                <button
                  v-if="newQuestion.text.trim() && !newQuestion.isAutogenerated"
                  key="magic-button"
                  @click="suggestReplacementQuestion"
                  class="w-14 sm:w-10 h-10 rounded-full flex items-center justify-center bg-accent"
                  :disabled="isSubmitted"
                  v-tooltip="'Want some question suggestions?'"
                >
                  <inline-svg src="assets/magic-icon.svg" class="w-5 h-5 text-white" />
                </button>
              </transition>
              <transition name="fade-scale" mode="out-in">
                <button
                  @click="handleAddOrSuggest"
                  :disabled="isSubmitted"
                  :key="newQuestion.text.trim() ? (editingQuestionIndex !== null ? 'update' : 'add') : 'suggest'"
                  :class="[
                    'flex-1 sm:w-32 h-10 rounded-full flex items-center justify-center space-x-2 border',
                    newQuestion.text.trim() && !isSubmitted
                      ? 'bg-accent-green text-primary border-accent-green'
                      : isSubmitted
                        ? 'bg-gray-200 text-neutral-300 border-neutral-100'
                        : 'bg-accent text-white border-accent'
                  ]"
                >
                  <inline-svg
                    :src="newQuestion.text.trim() ? 'assets/yes-icon.svg' : 'assets/magic-icon.svg'"
                    class="w-5 h-5 mr-1"
                    :class="newQuestion.text.trim() ? 'text-primary' : 'text-white'"
                  />
                  <span class="text-base font-medium">
                    {{ newQuestion.text.trim() ? (editingQuestionIndex !== null ? 'Update' : 'Add') : 'Suggest' }}
                  </span>
                </button>
              </transition>
            </div>
          </div>
        </div>

        <!-- Question List Section -->
        <div v-if="questions.length > 0" class="bg-neutral-100 rounded-[25px] p-4 sm:p-7 mb-8 sm:mb-12">
          <SortableList
            v-model="questions"
            :disabled="isSubmitted"
            @update:modelValue="handleQuestionReorder"
          >
            <template #default="{ item: question }">
              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 sm:p-0 bg-white sm:bg-transparent rounded-2xl sm:rounded-none shadow-sm sm:shadow-none mb-4">
                <div class="flex items-center mb-4 sm:mb-0">
                  <button
                    @click="editQuestion(question.index)"
                    class="text-accent hover:text-accent-dark focus:outline-none mr-2 sm:ml-0"
                  >
                    <inline-svg src="assets/edit-icon.svg" class="w-5 h-5" />
                  </button>
                  <TextAnimate
                    :key="question.id"
                    :text="question.text"
                    type="fadeIn"
                    :delay="0.1"
                    :duration="0.5"
                    :disable-animation="isReordering"
                    class="text-lg sm:text-2xl sm:mr-2 break-words"
                    :class="creatorAnswers[question.id] !== null ? 'text-primary' : 'text-neutral-400 sm:text-primary'"
                  />
                  <inline-svg
                    v-if="question.isAutogenerated"
                    src="assets/magic-icon.svg"
                    class="w-5 h-5 text-accent ml-2"
                  />
                </div>

                <div class="flex justify-center sm:justify-end items-center space-x-2 sm:space-x-3">
                  <div
                    v-if="question.response_type === 'scale'"
                    class="flex space-x-2 sm:space-x-3"
                    v-tooltip="question.index === 0 ? 'Add a self-assessment first to baseline the answers' : ''"
                  >
                    <button
                      v-for="n in 5"
                      :key="n"
                      @click="selectAnswer(question.id, n)"
                      :class="[
                        'w-8 h-8 sm:w-[30px] sm:h-[30px] rounded-full border flex items-center justify-center transition-colors duration-200 ease-in-out',
                        n <= creatorAnswers[question.id] ? 'bg-primary border-primary' : 'bg-white border-neutral-300'
                      ]"
                      :disabled="isSubmitted"
                    >
                      <div
                        :class="[
                          'w-4 h-4 sm:w-[18px] sm:h-[18px] rounded-full',
                          n <= creatorAnswers[question.id] ? 'bg-white' : 'bg-transparent'
                        ]"
                      ></div>
                    </button>
                  </div>

                  <div
                    v-else
                    class="flex space-x-2 sm:space-x-3"
                    v-tooltip="question.index === 0 ? 'Add a self-assessment first to baseline the answers' : ''"
                  >
                    <button
                      @click="selectAnswer(question.id, true)"
                      :class="[
                        'w-8 h-8 sm:w-[30px] sm:h-[30px] rounded-full border flex items-center justify-center transition-colors duration-200 ease-in-out',
                        creatorAnswers[question.id] === true ? 'bg-primary border-primary' : 'bg-white border-neutral-300'
                      ]"
                      :disabled="isSubmitted"
                    >
                      <inline-svg
                        src="assets/yes-icon.svg"
                        :class="['w-4 h-4', creatorAnswers[question.id] === true ? 'text-white' : 'text-neutral-300']"
                      />
                    </button>
                    <button
                      @click="selectAnswer(question.id, false)"
                      :class="[
                        'w-8 h-8 sm:w-[30px] sm:h-[30px] rounded-full border flex items-center justify-center transition-colors duration-200 ease-in-out',
                        creatorAnswers[question.id] === false ? 'bg-primary border-primary' : 'bg-white border-neutral-300'
                      ]"
                      :disabled="isSubmitted"
                    >
                      <inline-svg
                        src="assets/no-icon.svg"
                        :class="['w-4 h-4', creatorAnswers[question.id] === false ? 'text-white' : 'text-neutral-300']"
                      />
                    </button>
                  </div>
                </div>
              </div>
            </template>
          </SortableList>
        </div>

        <!-- Publish Section -->
        <div class="relative">
          <!-- Desktop layout -->
          <div class="hidden sm:block bg-accent-green rounded-[999px] p-4 mb-4">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-6">
                <FancyInput
                  v-model="surveyCode"
                  :icon="'/assets/bookmark-icon.svg'"
                  :placeholder="'survey ID'"
                  :is-checking="isCheckingCode('survey')"
                  :is-valid="isCodeValid('survey')"
                  :is-error="isCodeInvalid('survey')"
                  :max-width="'300px'"
                  :border-width="2"
                  input-height="40px"
                  icon-size="24px"
                  font-size="text-sm"
                  @rotate="rotateCode('survey')"
                  @input="handleCodeInput('survey')"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'#22C55E'"
                  :bg-color="'white'"
                  :text-color="'text-neutral-500'"
                  :error-bg-color="'#EF4444'"
                  :icon-color="'text-neutral-500'"
                  :min-width="'100px'"
                  v-tooltip="'A Shareable shortcode for the review'"
                />
                <FancyInput
                  v-model="userCode"
                  :icon="'/assets/user-icon.svg'"
                  :placeholder="'user name'"
                  :is-checking="isCheckingCode('user')"
                  :is-valid="isCodeValid('user')"
                  :is-error="isCodeInvalid('user')"
                  :border-width="2"
                  input-height="40px"
                  icon-size="24px"
                  font-size="text-sm"
                  @rotate="rotateCode('user')"
                  @input="handleCodeInput('user')"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'#22C55E'"
                  :bg-color="'white'"
                  :text-color="'text-neutral-500'"
                  :error-bg-color="'#EF4444'"
                  :icon-color="'text-neutral-500'"
                  :min-width="'100px'"
                  v-tooltip="'A secret usercode for you to see results later'"
                />
              </div>
              <FancyButton
                label="Publish"
                :disabled="!canPublish"
                :is-actioning="isPublishing"
                @click="finishSurvey"
                :border-width="3"
                button-height="48px"
                icon-size="24px"
                font-size="text-xl"
                :min-width="'128px'"
                bg-color="black"
                border-color="black"
                disabled-bg-color="gray"
                disabled-border-color="gray"
                text-color="text-white"
                disabled-text-color="text-gray-400"
              />
            </div>
          </div>

          <!-- Mobile layout -->
          <div class="sm:hidden bg-accent-green rounded-[25px] p-4 mb-4">
            <div class="space-y-4">
              <div>
                <FancyInput
                  v-model="surveyCode"
                  :icon="'/assets/bookmark-icon.svg'"
                  :placeholder="'survey ID'"
                  :is-checking="isCheckingCode('survey')"
                  :is-valid="isCodeValid('survey')"
                  :is-error="isCodeInvalid('survey')"
                  :border-width="2"
                  input-height="40px"
                  icon-size="24px"
                  font-size="text-sm"
                  @rotate="rotateCode('survey')"
                  @input="handleCodeInput('survey')"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'#22C55E'"
                  :bg-color="'white'"
                  :text-color="'text-neutral-500'"
                  :error-bg-color="'#EF4444'"
                  :icon-color="'text-neutral-500'"
                  class="w-full"
                  :min-width="'100%'"
                />
                <p class="text-xs text-primary mt-1 ml-2">A Shareable shortcode for the review</p>
              </div>
              <div>
                <FancyInput
                  v-model="userCode"
                  :icon="'/assets/user-icon.svg'"
                  :placeholder="'user name'"
                  :is-checking="isCheckingCode('user')"
                  :is-valid="isCodeValid('user')"
                  :is-error="isCodeInvalid('user')"
                  :border-width="2"
                  input-height="40px"
                  icon-size="24px"
                  font-size="text-sm"
                  @rotate="rotateCode('user')"
                  @input="handleCodeInput('user')"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'#22C55E'"
                  :bg-color="'white'"
                  :text-color="'text-neutral-500'"
                  :error-bg-color="'#EF4444'"
                  :icon-color="'text-neutral-500'"
                  class="w-full"
                  :min-width="'100%'"
                />
                <p class="text-xs text-primary mt-1 ml-2">A secret usercode for you to see results later</p>
              </div>
            </div>
          </div>

          <!-- Error Notes Section -->
          <div class="mb-6">
            <div
              v-if="!allQuestionsAnswered || isCodeInvalid('survey') || isCodeInvalid('user')"
              class="flex flex-col space-y-2 text-accent"
            >
              <div v-if="!allQuestionsAnswered" class="flex items-center space-x-2">
                <inline-svg src="assets/info-icon.svg" class="text-accent w-5 h-5" />
                <span class="text-sm font-medium">Complete self review before publishing</span>
              </div>
              <div v-if="isCodeInvalid('survey')" class="flex items-center space-x-2">
                <inline-svg src="assets/info-icon.svg" class="text-accent w-5 h-5" />
                <span class="text-sm font-medium">{{ getCodeErrorMessage('survey') }}</span>
              </div>
              <div v-if="isCodeInvalid('user')" class="flex items-center space-x-2">
                <inline-svg src="assets/info-icon.svg" class="text-accent w-5 h-5" />
                <span class="text-sm font-medium">{{ getCodeErrorMessage('user') }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- Published Section -->
      <LinkShareSection
        v-if="isPublished"
        :surveyCode="surveyCode"
        :resultsCode="userCode"
        :showSurveyLink="true"
        :showResultsLink="true"
        :surveyLinkLabel="'Review link'"
        :resultsLinkLabel="'Result link'"
        :surveyLinkDescription="'Share it with your friends for feedback'"
        :resultsLinkDescription="'Bookmark and come here later to see results'"
        :baseUrl="baseUrl"
        @copy-success="handleCopySuccess"
        @copy-error="handleCopyError"
      />
    </div>

    <!-- Mobile Publish Button - Moved outside the main content div -->
    <div class="sm:hidden fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-200 z-50">
      <FancyButton
        label="Publish"
        :disabled="!canPublish"
        :is-actioning="isPublishing"
        @click="finishSurvey"
        :border-width="3"
        button-height="48px"
        icon-size="24px"
        font-size="text-xl"
        bg-color="black"
        border-color="black"
        disabled-bg-color="gray"
        disabled-border-color="gray"
        text-color="text-white"
        disabled-text-color="text-gray-400"
        :full-width="true"
      />
    </div>

    <ToastView :message="toastMessage" :type="toastType" @hidden="clearToast" />
  </div>
</template>


<script>
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '@/services/api';
import confetti from 'canvas-confetti';
import debounce from 'lodash/debounce';
import InlineSvg from 'vue-inline-svg';
import ToastView from '@/components/ToastView.vue';
import FancyInput from '@/components/FancyInput.vue';
import FancyButton from '@/components/FancyButton.vue';
import LinkShareSection from '@/components/ShareView.vue';
import TextAnimate from '@/components/ui/TextAnimate.vue';
import SortableList from '@/components/ui/SortableList.vue';

export default {
  name: 'CreateView',
  components: {
    InlineSvg,
    ToastView,
    FancyInput,
    FancyButton,
    LinkShareSection,
    TextAnimate,
    SortableList,
  },
  setup() {
    // Localization
    const { t } = useI18n();

    // State Management
    const surveyTitle = ref(t('createView.title'));
    const surveyDescription = ref(t('createView.description'));
    const newQuestion = ref({ text: '', response_type: 'scale', isAutogenerated: false });
    const questions = ref([]);
    const creatorAnswers = ref({});
    const isLoading = ref(false);
    const isSubmitted = ref(false);
    const isPublished = ref(false);
    const errorMessage = ref('');
    const showSuccess = ref(false);
    const surveyCode = ref('');
    const userCode = ref('');
    const surveyLink = ref('');
    const resultsLink = ref('');
    const availableCodes = ref({ survey: [], user: [] });
    const codeStatus = ref({ survey: null, user: null });
    const isChecking = reactive({ survey: false, user: false });
    const isPublishing = ref(false);
    const baseUrl = computed(() => process.env.VUE_APP_BASE_URL || '');
    const inputFocused = ref(false);
    const toastMessage = ref('');
    const toastType = ref('');
    const editingQuestionIndex = ref(null);
    const isReordering = ref(false);
    const showUserCodeTooltip = ref(false);
    const showSurveyCodeTooltip = ref(false);
    const placeholderText = ref('Enter your question here');

    // Placeholder Management
    const placeholders = [
      'Enter your question here',
      'How would you rate...?',
      'Do you think...?',
      'What\'s your opinion on...?',
    ];
    let placeholderIndex = 0;

    // Suggested Questions
    const suggestedQuestions = [
      { text: "How well do I communicate my ideas?", response_type: "scale" },
      { text: "Am I open to feedback from others?", response_type: "boolean" },
      { text: "How effectively do I manage my time?", response_type: "scale" },
      { text: "Do I actively listen to you and other colleagues?", response_type: "boolean" },
      { text: "How well do I handle stress and pressure?", response_type: "scale" },
      { text: "Am I proactive in solving problems?", response_type: "boolean" },
      { text: "How would I rate my leadership skills?", response_type: "scale" },
      { text: "Do I consistently meet deadlines?", response_type: "boolean" },
      { text: "How adaptable am I to change?", response_type: "scale" },
      { text: "Do I take responsibility for my mistakes?", response_type: "boolean" }
    ];

    // Easter Egg Logic
    let questionAddedTimes = [];
    let lastEasterEggTrigger = 0;
    const EASTER_EGG_COOLDOWN = 30000; // 30 seconds cooldown

    // Computed Properties
    const canPublish = computed(() => 
      allQuestionsAnswered.value &&
      isCodeValid('survey') &&
      isCodeValid('user') &&
      !isLoading.value &&
      !isSubmitted.value
    );

    const allQuestionsAnswered = computed(() =>
      questions.value.length > 0 &&
      questions.value.every(question => creatorAnswers.value[question.id] !== null && creatorAnswers.value[question.id] !== undefined)
    );

    // Methods
    const animatePlaceholder = () => {
      setInterval(() => {
        placeholderIndex = (placeholderIndex + 1) % placeholders.length;
        placeholderText.value = placeholders[placeholderIndex];
      }, 3000);
    };

    const isCheckingCode = (type) => isChecking[type];

    const isValidFormat = (code) => /^[a-zA-Z0-9-]{5,}$/.test(code);

    const getCodeErrorMessage = (type) => {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      const otherCode = type === 'survey' ? userCode.value : surveyCode.value;

      if (!code || code.length < 5) {
        return `${type === 'survey' ? 'Survey' : 'User'} code must be at least 5 characters long.`;
      }

      if (!isValidFormat(code)) {
        return `${type === 'survey' ? 'Survey' : 'User'} code can only contain letters, numbers, and hyphens.`;
      }

      if (code === otherCode) {
        return `${type === 'survey' ? 'Survey' : 'User'} code cannot be the same as the ${type === 'survey' ? 'user' : 'survey'} code.`;
      }

      return `Invalid ${type === 'survey' ? 'survey' : 'user'} code. Please choose a different one.`;
    };

    const isCodeValid = (type) => {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      const otherCode = type === 'survey' ? userCode.value : surveyCode.value;
      return !isChecking[type] && isValidFormat(code) && codeStatus.value[type] === 'valid' && code !== otherCode;
    };

    const isCodeInvalid = (type) => {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      const otherCode = type === 'survey' ? userCode.value : surveyCode.value;
      return !isChecking[type] && (!isValidFormat(code) || codeStatus.value[type] === 'invalid' || code === otherCode);
    };

    const handleCodeInput = debounce((type) => {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      const otherCode = type === 'survey' ? userCode.value : surveyCode.value;
      const fetchedIdsForType = availableCodes.value[type];

      if (isValidFormat(code)) {
        if (code === otherCode) {
          codeStatus.value[type] = 'invalid';
          isChecking[type] = false;
        } else if (fetchedIdsForType.includes(code)) {
          codeStatus.value[type] = 'valid';
          isChecking[type] = false;
        } else {
          codeStatus.value[type] = null;
          isChecking[type] = true;
          checkCodeAvailability(type);
        }
      } else {
        codeStatus.value[type] = 'invalid';
        isChecking[type] = false;
      }
    }, 300);

    const debounceCheckCode = debounce((type) => {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      if (isValidFormat(code)) {
        checkCodeAvailability(type);
      } else {
        isChecking[type] = false;
      }
    }, 750);

    const setQuestionType = (type) => {
      newQuestion.value.response_type = type;
      newQuestion.value.isAutogenerated = false;
    };

    const handleAddOrSuggest = () => {
      if (newQuestion.value.text.trim()) {
        addQuestion();
      } else {
        suggestQuestion();
      }
    };

    const addQuestion = () => {
      if (newQuestion.value.text.trim() && !isSubmitted.value) {
        const newQuestionObject = {
          id: newQuestion.value.id || Date.now(),
          text: newQuestion.value.text,
          response_type: newQuestion.value.response_type,
          isAutogenerated: newQuestion.value.isAutogenerated,
        };

        if (editingQuestionIndex.value !== null) {
          questions.value.splice(editingQuestionIndex.value, 0, newQuestionObject);
          updateQuestionIndexes();
          if (newQuestion.value.preservedAnswer !== undefined) {
            creatorAnswers.value[newQuestionObject.id] = newQuestion.value.preservedAnswer;
          } else {
            creatorAnswers.value[newQuestionObject.id] = null;
          }
          editingQuestionIndex.value = null;
        } else {
          questions.value.push(newQuestionObject);
          updateQuestionIndexes();
          creatorAnswers.value[newQuestionObject.id] = null;
        }

        newQuestion.value = { text: '', response_type: 'scale', isAutogenerated: false };
        checkEasterEgg();
      }
    };

    const suggestQuestion = () => {
      const randomIndex = Math.floor(Math.random() * suggestedQuestions.length);
      const suggestedQuestion = suggestedQuestions[randomIndex];
      newQuestion.value = {
        text: suggestedQuestion.text,
        response_type: suggestedQuestion.response_type,
        isAutogenerated: true,
      };
    };

    const handleQuestionReorder = (newOrder) => {
      isReordering.value = true;
      questions.value = newOrder.map((question, index) => ({ ...question, index }));
      setTimeout(() => {
        isReordering.value = false;
      }, 100);
    };

    const handleQuestionChange = () => {
      if (newQuestion.value.isAutogenerated && newQuestion.value.text !== suggestedQuestions.find(q => q.text === newQuestion.value.text)?.text) {
        newQuestion.value.isAutogenerated = false;
      }
    };

    const suggestReplacementQuestion = () => suggestQuestion();

    const selectAnswer = (qId, value) => {
      if (!isSubmitted.value) {
        creatorAnswers.value[qId] = value;
      }
    };

    const celebrateSuccess = () => {
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 },
      });
    };

    const clearToast = () => {
      toastMessage.value = '';
      toastType.value = '';
    };

    const openAndCopy = (type) => {
      const url = type === 'survey' ? surveyLink.value : resultsLink.value;
      window.open(url, '_blank');
      copyToClipboard(type);
    };

    const copyToClipboard = (type) => {
      const textToCopy = type === 'survey' ? surveyLink.value : resultsLink.value;
      navigator.clipboard.writeText(textToCopy).then(() => {
        toastMessage.value = t('createView.copySuccess');
        toastType.value = 'success';
      }, (err) => {
        console.error('Could not copy text: ', err);
        toastMessage.value = t('createView.copyError');
        toastType.value = 'error';
      });
    };

    const checkEasterEgg = () => {
      const now = Date.now();
      questionAddedTimes.push(now);

      if (questionAddedTimes.length > 5) {
        questionAddedTimes = questionAddedTimes.slice(-5);
      }

      if (questionAddedTimes.length === 5 && (now - questionAddedTimes[0]) < 10000) {
        if (now - lastEasterEggTrigger > EASTER_EGG_COOLDOWN) {
          triggerEasterEgg();
          lastEasterEggTrigger = now;
          questionAddedTimes = [];
        }
      }
    };

    const triggerEasterEgg = () => {
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 },
        colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C1'],
      });
    };

    const updateQuestionIndexes = () => {
      questions.value = questions.value.map((q, i) => ({
        ...q,
        index: i,
      }));
    };

    const editQuestion = (index) => {
      const questionToEdit = questions.value[index];
      if (!questionToEdit) {
        console.error('Question not found at index:', index);
        return;
      }

      newQuestion.value = {
        text: questionToEdit.text,
        response_type: questionToEdit.response_type,
        isAutogenerated: questionToEdit.isAutogenerated,
        id: questionToEdit.id,
      };
      editingQuestionIndex.value = index;

      questions.value.splice(index, 1);
      const { [questionToEdit.id]: removedAnswer, ...remainingAnswers } = creatorAnswers.value;
      creatorAnswers.value = remainingAnswers;

      if (removedAnswer !== undefined) {
        newQuestion.value.preservedAnswer = removedAnswer;
      }
    };

    async function fetchInitialCodes() {
      isChecking.survey = true;
      isChecking.user = true;
      try {
        const response = await api.getIds(10);
        availableCodes.value.survey = response.data.ids.slice(0, 5);
        availableCodes.value.user = response.data.ids.slice(5);
        surveyCode.value = availableCodes.value.survey[0];
        userCode.value = availableCodes.value.user[0];
        codeStatus.value.survey = 'valid';
        codeStatus.value.user = 'valid';
      } catch (error) {
        toastMessage.value = t('createView.errorFetchingCodes');
        toastType.value = 'error';
        codeStatus.value.survey = 'invalid';
        codeStatus.value.user = 'invalid';
      } finally {
        setTimeout(() => {
          isChecking.survey = false;
          isChecking.user = false;
        }, 1000);
      }
    }

    const rotateCode = (type) => {
      const codes = availableCodes.value[type];
      const currentCode = type === 'survey' ? surveyCode.value : userCode.value;
      const currentIndex = codes.indexOf(currentCode);
      const nextIndex = (currentIndex + 1) % codes.length;
      if (type === 'survey') {
        surveyCode.value = codes[nextIndex];
      } else {
        userCode.value = codes[nextIndex];
      }
      codeStatus.value[type] = 'valid';
    };

    async function checkCodeAvailability(type) {
      const code = type === 'survey' ? surveyCode.value : userCode.value;
      isChecking[type] = true;
      codeStatus.value[type] = null;

      try {
        const response = await api.checkIdAvailability(code);
        await new Promise(resolve => setTimeout(resolve, 1000));

        if (!response.data || typeof response.data.available !== 'boolean') {
          throw new Error('Unexpected API response format');
        }

        codeStatus.value[type] = response.data.available ? 'valid' : 'invalid';
        if (!response.data.available) {
          toastMessage.value = t('createView.codeNotAvailable');
          toastType.value = 'error';
        }
      } catch (error) {
        codeStatus.value[type] = 'invalid';
        toastMessage.value = t('createView.errorCheckingCode');
        toastType.value = 'error';
      } finally {
        isChecking[type] = false;
      }
    }

    async function finishSurvey() {
      if (isSubmitted.value || !allQuestionsAnswered.value) return;

      isPublishing.value = true;
      isLoading.value = true;
      errorMessage.value = '';
      try {
        const surveyData = {
          survey_id: surveyCode.value,
          user_code: userCode.value,
          title: surveyTitle.value,
          description: surveyDescription.value,
          questions: questions.value.map((q) => ({
            ...q,
            creator_answer: creatorAnswers.value[q.id],
          })),
        };

        const response = await api.createSurvey(surveyData);  // If response is not used, you can comment or remove this line.
        console.log("Survey created: "+response);
        surveyLink.value = `${baseUrl.value}/${surveyCode.value}`;
        resultsLink.value = `${baseUrl.value}/u/${userCode.value}`;
        isSubmitted.value = true;
        isPublished.value = true;
        showSuccess.value = true;
        celebrateSuccess();
        toastMessage.value = t('createView.toastSuccess');
        toastType.value = 'success';
      } catch (error) {
        errorMessage.value = t('createView.toastError');
        toastMessage.value = t('createView.toastError');
        toastType.value = 'error';
      } finally {
        isLoading.value = false;
        isPublishing.value = false;
      }
    }

    const showSequentialTooltips = () => {
      if (questions.value.length === 1) {
        showUserCodeTooltip.value = true;
        setTimeout(() => {
          showUserCodeTooltip.value = false;
          setTimeout(() => {
            showSurveyCodeTooltip.value = true;
            setTimeout(() => {
              showSurveyCodeTooltip.value = false;
            }, 5000);
          }, 500);
        }, 5000);
      }
    };

    // Lifecycle Hooks
    onMounted(async () => {
      await fetchInitialCodes();
      animatePlaceholder();
    });

    watch(() => newQuestion.value.text, handleQuestionChange);

    watch(() => questions.value.length, (newLength, oldLength) => {
      if (newLength === 1 && oldLength === 0) {
        showSequentialTooltips();
      }
    });

    return {
      t,
      surveyTitle,
      surveyDescription,
      newQuestion,
      questions,
      creatorAnswers,
      isLoading,
      isSubmitted,
      isPublished,
      errorMessage,
      showSuccess,
      surveyCode,
      surveyLink,
      allQuestionsAnswered,
      inputFocused,
      toastMessage,
      toastType,
      setQuestionType,
      suggestReplacementQuestion,
      suggestQuestion,
      addQuestion,
      handleAddOrSuggest,
      selectAnswer,
      finishSurvey,
      clearToast,
      userCode,
      resultsLink,
      rotateCode,
      checkCodeAvailability,
      openAndCopy,
      copyToClipboard,
      isCheckingCode,
      isCodeValid,
      isCodeInvalid,
      debounceCheckCode,
      canPublish,
      isValidFormat,
      handleCodeInput,
      getCodeErrorMessage,
      isPublishing,
      placeholderText,
      showUserCodeTooltip,
      showSurveyCodeTooltip,
      editQuestion,
      baseUrl,
      handleQuestionReorder,
      editingQuestionIndex,
      isReordering,
    };
  },
};
</script>



<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');

/* General Styles */
body {
  font-family: 'IBM Plex Sans', sans-serif;
}

textarea {
  resize: none !important;
}

.pb-24 {
  padding-bottom: 6rem;
}

.fixed {
  z-index: 50;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Animation Keyframes */
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Animations */
.animate-blink {
  animation: blink 1s infinite;
}

/* Transition Styles */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale Transitions */
.transform {
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-102:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: var(--tw-transform);
}

.focus\:scale-102:focus {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: var(--tw-transform);
}

/* Fade and Scale Transitions */
.fade-scale-enter-active,
.fade-scale-leave-active,
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

/* List Transition Styles */
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.list-move {
  transition: transform 0.5s ease;
}

/* Tooltip Styles */
.v-tooltip {
  display: block;
  z-index: 10000;
}

.v-tooltip .tooltip-inner {
  background: #1F2937;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.v-tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: #1F2937;
}

/* Tooltip Arrow Positions */
.v-tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

/* Add styles for other placements if needed */

/* Code Input Container */
.code-input-container {
  position: relative;
}

.code-input-container .measure-span {
  visibility: hidden;
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

</style>

================
File: webapp/src/components/FancyButton.vue
================
<template>
  <div class="fancy-button-wrapper" :style="wrapperStyle">
    <div class="fancy-background" 
         :class="{ 'actioning': isActioning, 'disabled': disabled }" 
         :style="backgroundStyle">
      <button class="fancy-inner flex items-center justify-center rounded-full" 
              :style="innerStyle"
              :disabled="disabled" 
              @click="handleClick">
        <div v-if="icon" class="icon-container" :style="iconContainerStyle">
          <inline-svg :src="icon" 
                      :class="['cursor-pointer', iconColorClass]" 
                      :style="iconStyle" />
        </div>
        <span :class="[textColorClass, fontSize]" :style="labelStyle">{{ label }}</span>
      </button>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, nextTick } from 'vue';
import InlineSvg from 'vue-inline-svg';

export default {
  name: 'FancyButton',
  components: {
    InlineSvg,
  },
  props: {
    label: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isActioning: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: '#E5E7EB',
    },
    disabledBgColor: {
      type: String,
      default: '#F3F4F6',
    },
    textColor: {
      type: String,
      default: 'text-primary',
    },
    disabledTextColor: {
      type: String,
      default: 'text-gray-400',
    },
    iconColor: {
      type: String,
      default: 'text-primary',
    },
    loaderColor: {
      type: String,
      default: '#BE185D',
    },
    borderColor: {
      type: String,
      default: '#E5E7EB',
    },
    disabledBorderColor: {
      type: String,
      default: '#F3F4F6',
    },
    maxWidth: {
      type: String,
      default: null,
    },
    minWidth: {
      type: String,
      default: null,
    },
    borderWidth: {
      type: Number,
      default: 2,
    },
    buttonHeight: {
      type: String,
      default: '38px',
    },
    iconSize: {
      type: String,
      default: '24px',
    },
    fontSize: {
      type: String,
      default: 'text-base',
    },
    fullWidth: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const buttonRef = ref(null);
    const dynamicWidth = ref('auto');

    const wrapperStyle = computed(() => ({
      '--border-width': `${props.borderWidth}px`,
      width: props.fullWidth ? '100%' : dynamicWidth.value,
      maxWidth: props.maxWidth,
      minWidth: props.minWidth,
      display: 'inline-block', // Change to inline-block
    }));

    const backgroundStyle = computed(() => ({
      '--border-color': props.disabled ? props.disabledBorderColor : props.borderColor,
      '--loader-color': props.loaderColor,
      '--button-height': props.buttonHeight,
    }));

    const innerStyle = computed(() => ({
      minHeight: `calc(${props.buttonHeight} - ${props.borderWidth * 2}px)`,
      width: `calc(100% - ${props.borderWidth * 2}px)`,
      height: `calc(100% - ${props.borderWidth * 2}px)`,
      backgroundColor: props.disabled && !props.isActioning ? props.disabledBgColor : props.bgColor,
    }));

    const iconContainerStyle = computed(() => ({
      width: props.iconSize,
      height: props.iconSize,
      minWidth: props.iconSize,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: '8px',
    }));

    const iconStyle = computed(() => ({
      width: '100%',
      height: '100%',
    }));

    const labelStyle = computed(() => ({
      lineHeight: props.buttonHeight,
      paddingLeft: props.icon ? '0' : '8px',
    }));

    const iconColorClass = computed(() => {
      return props.disabled ? 'text-gray-400' : props.iconColor;
    });

    const textColorClass = computed(() => {
      return props.disabled ? props.disabledTextColor : props.textColor;
    });

    const adjustWidth = () => {
      if (buttonRef.value) {
        const iconWidth = props.icon ? parseInt(props.iconSize) : 0;
        const textWidth = buttonRef.value.offsetWidth;
        const newWidth = `${textWidth + iconWidth + (props.icon ? 36 : 32) + props.borderWidth * 2}px`;
        dynamicWidth.value = newWidth;
      }
    };

    const handleClick = (event) => {
      if (!props.disabled && !props.isActioning) {
        emit('click', event);
      }
    };

    onMounted(() => {
      nextTick(adjustWidth);
    });

    return {
      buttonRef,
      wrapperStyle,
      backgroundStyle,
      innerStyle,
      iconContainerStyle,
      iconStyle,
      labelStyle,
      iconColorClass,
      textColorClass,
      handleClick,
    };
  },
};
</script>

<style scoped>
.fancy-button-wrapper {
  position: relative;
  z-index: 50;
}


.fancy-background {
  position: relative;
  z-index: 0;
  border-radius: 9999px;
  overflow: hidden;
  background-color: var(--border-color);
  transition: all 0.4s ease;
  width: 100%;
  height: calc(var(--button-height) + (var(--border-width) * 2));
}

.fancy-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--border-color);
  border-radius: 9999px;
}

.fancy-background.actioning::after {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  right: -150%;
  bottom: -150%;
  background-image: conic-gradient(
    from 0deg,
    var(--loader-color),
    var(--border-color),
    var(--loader-color),
    var(--border-color),
    var(--loader-color)
  );
  animation: rotate 2s linear infinite;
}

.fancy-inner {
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  z-index: 1;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fancy-inner:disabled {
  cursor: not-allowed;
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

================
File: webapp/src/components/FancyInput.vue
================
<template>
  <div class="fancy-input-wrapper" :style="wrapperStyle">
    <div class="fancy-background" :class="[
      { 'checking': isChecking, 'valid': isValid && isFocused, 'error': isError, 'disabled': disabled },
      isChecking ? 'conic' : 'neutral-bg'
    ]" :style="backgroundStyle">
      <div class="fancy-inner flex items-center justify-between rounded-full" :style="innerStyle">
        <div v-if="icon" class="icon-container" :style="iconContainerStyle">
          <inline-svg :src="iconToShow" :class="['cursor-pointer', iconColorClass]" :style="iconStyle"
            @click="$emit('rotate')" />
        </div>
        <div class="input-container flex-grow" :class="{ 'text-center': !icon }">
          <input ref="fancyInput" :value="modelValue" @input="handleInput" @focus="handleFocus" @blur="handleBlur"
            class="bg-transparent focus:outline-none w-full" :class="[textColorClass, fontSize]" :style="inputStyle"
            :placeholder="placeholder" :disabled="disabled" />
          <span ref="measureSpan" :class="fontSize" class="measure-span font-medium"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import InlineSvg from 'vue-inline-svg';

export default {
  name: 'FancyInput',
  components: {
    InlineSvg,
  },
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      default: '',
    },
    isChecking: {
      type: Boolean,
      default: false,
    },
    isValid: {
      type: Boolean,
      default: false,
    },
    isError: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: 'white',
    },
    disabledBgColor: {
      type: String,
      default: '#F3F4F6',
    },
    textColor: {
      type: String,
      default: 'text-primary',
    },
    disabledTextColor: {
      type: String,
      default: 'text-gray-400',
    },
    iconColor: {
      type: String,
      default: 'text-primary',
    },
    loaderColor: {
      type: String,
      default: '#BE185D',
    },
    borderColor: {
      type: String,
      default: '#E5E7EB',
    },
    disabledBorderColor: {
      type: String,
      default: '#F3F4F6',
    },
    validBorderColor: {
      type: String,
      default: '#22C55E',
    },
    errorBorderColor: {
      type: String,
      default: '#EF4444',
    },
    maxWidth: {
      type: String,
      default: null,
    },
    minWidth: {
      type: String,
      default: null,
    },
    borderWidth: {
      type: Number,
      default: 2,
    },
    inputHeight: {
      type: String,
      default: '38px',
    },
    iconSize: {
      type: String,
      default: '24px',
    },
    fontSize: {
      type: String,
      default: 'text-base',
    },
  },
  emits: ['update:modelValue', 'rotate', 'input'],
  setup(props, { emit }) {
    const fancyInput = ref(null);
    const measureSpan = ref(null);
    const isFocused = ref(false);
    const dynamicWidth = ref('auto');

    const wrapperStyle = computed(() => ({
      '--border-width': `${props.borderWidth}px`,
      width: dynamicWidth.value,
      maxWidth: props.maxWidth,
      minWidth: props.minWidth,
    }));

    const backgroundStyle = computed(() => ({
      '--border-color': props.disabled ? props.disabledBorderColor :
        props.isError ? props.errorBorderColor :
          props.isValid && isFocused.value ? props.validBorderColor :
            props.borderColor,
      '--loader-color': props.loaderColor,
      '--input-height': props.inputHeight,
    }));

    const innerStyle = computed(() => ({
      height: props.inputHeight,
      padding: props.icon ? `0 8px 0 8px` : `0 8px`,
      backgroundColor: props.disabled ? props.disabledBgColor : props.bgColor,
    }));

    const iconContainerStyle = computed(() => ({
      width: props.iconSize,
      height: props.iconSize,
      minWidth: props.iconSize,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: '8px',
    }));

    const iconStyle = computed(() => ({
      width: '100%',
      height: '100%',
    }));

    const inputStyle = computed(() => ({
      height: `calc(${props.inputHeight} - ${props.borderWidth * 2}px)`,
      paddingRight: '8px',
      paddingLeft: props.icon ? `0` : `8px`,
      textAlign: props.icon ? 'left' : 'center',
    }));

    const iconToShow = computed(() => {
      if (props.isError) return '/assets/error-icon.svg';
      if (props.isValid && isFocused.value) return '/assets/check-icon.svg';
      return props.icon;
    });

    const iconColorClass = computed(() => {
      if (props.disabled) return 'text-gray-400';
      if (props.isError) return 'text-red-500';
      if (props.isValid && isFocused.value) return 'text-green-500';
      return props.iconColor;
    });

    const textColorClass = computed(() => {
      if (props.disabled) return props.disabledTextColor;
      if (props.isError) return 'text-red-500';
      return props.textColor;
    });

    const adjustWidth = () => {
      if (fancyInput.value && measureSpan.value) {
        measureSpan.value.textContent = fancyInput.value.value || fancyInput.value.placeholder || '';
        const iconWidth = props.icon ? parseInt(props.iconSize) : 0;
        const newWidth = `${measureSpan.value.offsetWidth + iconWidth + (props.icon ? 36 : 34)}px`;
        dynamicWidth.value = newWidth;
      }
    };

    const handleInput = (event) => {
      if (!props.disabled) {
        emit('update:modelValue', event.target.value);
        emit('input', event);
        nextTick(adjustWidth);
      }
    };

    const handleFocus = () => {
      if (!props.disabled) {
        isFocused.value = true;
      }
    };

    const handleBlur = () => {
      isFocused.value = false;
    };
    watch(() => props.modelValue, (newValue) => {
      nextTick(() => {
        if (fancyInput.value) {
          fancyInput.value.value = newValue;
          adjustWidth();
        }
      });
    });
    watch(() => props.modelValue, adjustWidth);
    watch(() => props.placeholder, adjustWidth);

    onMounted(() => {
      nextTick(adjustWidth);
    });

    return {
      fancyInput,
      measureSpan,
      isFocused,
      wrapperStyle,
      backgroundStyle,
      innerStyle,
      inputStyle,
      iconToShow,
      iconColorClass,
      textColorClass,
      handleInput,
      handleFocus,
      handleBlur,
      iconContainerStyle,
      iconStyle,
    };
  },
};
</script>
<style scoped>
.fancy-input-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.fancy-background {
  position: relative;
  z-index: 0;
  border-radius: 9999px;
  overflow: hidden;
  background-color: var(--border-color);
  transition: all 0.3s ease;
  width: 100%;
  height: calc(var(--input-height) + (var(--border-width) * 2));
}

.fancy-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--border-color);
  border-radius: 9999px;
}

.fancy-background.conic::after {
  content: '';
  position: absolute;
  top: -150%;
  left: -150%;
  right: -150%;
  bottom: -150%;
  background-image: conic-gradient(from 0deg,
      var(--loader-color),
      var(--border-color),
      var(--loader-color),
      var(--border-color),
      var(--loader-color));
  animation: rotate 2s linear infinite;
  opacity: 0.7;
}

.fancy-inner {
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  z-index: 1;
  border-radius: 9999px;
}

.input-container {
  position: relative;
  overflow: hidden;
}

.input-container.text-center input {
  text-align: center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.measure-span {
  visibility: hidden;
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

================
File: webapp/src/components/HomeView.vue
================
<template>
  <div class="font-sans min-h-screen bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Hero section -->
      <div class="mt-8 p-6 sm:p-8 bg-neutral-100 rounded-3xl min-h-[320px] sm:min-h-[420px] flex flex-col justify-end">
        <inline-svg src="/assets/high-five.svg" class="text-neutral-700 w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 sm:mb-6" />
        
        <div class="text-center"> <!-- Centering container -->
          <TextAnimate 
            :text="$t('homeView.title')" 
            type="calmInUp"
            :delay="0.3"
            :duration="0.5"
            :stagger="0.03"
            class="text-3xl sm:text-4xl font-bold text-primary mb-1"
          />

        </div>
        <TypeWriter 
          :texts="subtitleTexts" 
          class="text-lg sm:text-xl text-center text-primary mb-6 sm:mb-8"
        />
        <div class="flex justify-center">
          <router-link to="/new" class="bg-accent-green text-primary text-lg sm:text-xl font-bold px-6 sm:px-8 py-2 rounded-full">
            {{ $t('homeView.createButton') }}
          </router-link>
        </div>
      </div>

      <!-- Statistics section -->
      <div class="mt-12 flex justify-around">
        <div class="text-center">
          <AnimatedNumber :value="totalSurveys" class="text-2xl font-bold text-primary" />
          <p class="text-sm text-neutral-500">Total Surveys</p>
        </div>
        <div class="text-center">
          <AnimatedNumber :value="totalParticipants" class="text-2xl font-bold text-primary" />
          <p class="text-sm text-neutral-500">Total Participants</p>
        </div>
      </div>

      <!-- Participate section - Only visible on desktop -->
      <div class="hidden sm:block mt-12">
        <TextAnimate 
          :text="$t('homeView.participateTitle')"
          type="none"
          :delay="0.5"
          class="text-xl font-semibold text-primary text-left mb-2"
        />
        <p class="text-lg text-primary mb-3 text-left">
          {{ $t('homeView.participateSubtitle') }}
        </p>
        <div class="flex items-center bg-neutral-100 rounded-full w-[420px]">
          <img src="/assets/question-icon.svg" alt="Question" class="w-10 h-10 ml-4 mr-2" />
          <input
            v-model="participateCode"
            type="text"
            :placeholder="$t('homeView.participatePlaceholder')"
            class="bg-transparent text-xl font-regular text-neutral-400 flex-grow px-2 py-2 focus:outline-none"
          />
          <button
            @click="submitParticipateCode"
            :disabled="isLoading"
            class="bg-primary text-accent-green text-xl font-bold px-8 py-2 rounded-full"
          >
            <span v-if="!isLoading">{{ $t('homeView.participateButton') }}</span>
            <span v-else class="inline-block animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-accent-green"></span>
          </button>
        </div>
        <p v-if="errorMessage" class="mt-4 text-sm text-red-600 bg-red-100 border border-red-400 rounded-md p-2">
          {{ errorMessage }}
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import api from '@/services/api';
import InlineSvg from 'vue-inline-svg';
import TextAnimate from '@/components/ui/TextAnimate.vue';
import TypeWriter from '@/components/ui/TypeWriter.vue';
import AnimatedNumber from '@/components/ui/AnimatedNumber.vue';

export default {
  name: 'HomeView',
  components: {
    InlineSvg,
    TextAnimate,
    TypeWriter,
    AnimatedNumber,
  },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const participateCode = ref('');
    const isLoading = ref(false);
    const errorMessage = ref('');
    const totalSurveys = ref(23);  // Fallback number
    const totalParticipants = ref(313);  // Fallback number

    const subtitleTexts = [
      "Compare what you think about yourself...",
      "...with how others perceive you.",
      "Gain insights into your self-awareness.",
      "Improve your understanding of yourself.",
    ];

    const submitParticipateCode = async () => {
      isLoading.value = true;
      errorMessage.value = '';
      try {
        const response = await api.getSurvey(participateCode.value);
        if (response.data && response.data.questions) {
          console.log('Navigating to TakeSurvey');
          await router.push({
            name: 'TakeSurvey',
            params: { surveyId: participateCode.value },
            props: { surveyData: response.data }
          });
          console.log('Navigation completed');
        } else {
          throw new Error('Invalid survey data received');
        }
      } catch (error) {
        console.error('Error fetching survey:', error);
        errorMessage.value = t('homeView.errorMessage');
      } finally {
        isLoading.value = false;
      }
    };

    return {
      participateCode,
      isLoading,
      errorMessage,
      submitParticipateCode,
      subtitleTexts,
      totalSurveys,
      totalParticipants,
    };
  },
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
</style>

================
File: webapp/src/components/NavItem.vue
================
<template>
  <div
    @click="$emit('click')"
    class="flex items-center relative cursor-pointer"
    :class="{ 'text-primary': isActive, 'text-accent': !isActive }"
  >
    <inline-svg :src="item.icon" class="w-7 h-7 sm:w-6 sm:h-6 md:w-7 md:h-7 mr-2" />
    <span class="text-xl sm:text-lg md:text-xl font-bold leading-9">{{ item.label }}</span>
    <div v-if="isActive" class="w-full h-0.5 bg-primary absolute bottom-[-4px] left-0"></div>
  </div>
</template>
  
  <script>
  import InlineSvg from 'vue-inline-svg';
  
  export default {
    name: 'NavItem',
    components: {
      InlineSvg,
    },
    props: {
      item: {
        type: Object,
        required: true,
      },
      isActive: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['click'],
  };
  </script>

================
File: webapp/src/components/NotFound.vue
================
<template>
    <div class="max-w-[768px] mx-auto px-4 pt-16 text-center">
      <h1 class="text-3xl font-bold text-accent mb-4">404 - Page Not Found</h1>
      <p class="text-xl text-primary">The page you're looking for doesn't exist or has been moved.</p>
      <router-link to="/" class="mt-8 inline-block px-6 py-2 bg-primary text-white rounded-full">
        Go Home
      </router-link>
    </div>
  </template>
  
  <script>
  export default {
    name: 'NotFound'
  }
  </script>

================
File: webapp/src/components/ResultsView.vue
================
<template>
  <div class="font-['IBM_Plex_Sans'] max-w-full sm:max-w-3xl mx-auto px-4 py-6 sm:py-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between  sm:mb-2">
      <h1 class="text-2xl sm:text-3xl font-bold text-primary sm:mb-1">Survey Results</h1>
      
      <div class="flex flex-wrap items-center gap-2">
        <SurveyExpiryChip 
          v-if="results"
          :expiry-date="results.expiry_date"
          :is-expired="results.expired"
        />
        <SurveyChips 
          v-if="results"
          :is-trending="results.is_trending"
          :participant-bucket="results.participant_bucket"
          class="mt-2 mb-2 sm:mb-0 sm:mt-0"
        />
      </div>
    </div>

    <div v-if="loading" class="text-lg text-primary">Loading results...</div>
    <div v-else-if="error" class="text-lg text-accent">{{ error }}</div>
    <div v-else-if="results">
      <!-- Always show LinkShareSection for both creators and participants -->
      <LinkShareSection 
        v-if="results.is_creator || !isExpired"
        :showSurveyLink="results.is_creator && !isExpired"
        :showResultsLink="false"
        :surveyCode="surveyCode"
        :resultsCode="userCode"
        :surveyLinkLabel="results.is_creator ? 'Review link' : 'Your review link'"
        :resultsLinkLabel="results.is_creator ? 'Result link' : 'Your results link'"
        :surveyLinkDescription="'Share it with your friends for feedback'"
        :resultsLinkDescription="results.is_creator ? 'Bookmark and come here later to see results' : 'Bookmark this link to view your results later'"
        :baseUrl="baseUrl"
        @copy-success="handleCopySuccess"
        @copy-error="handleCopyError"
      />
      <div class="mb-6"></div>
      <div v-if="results.status === 'incomplete'" class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 text-sm sm:text-base">
        <p class="font-bold">Results Not Available Yet</p>
        <template v-if="results.is_creator">
          <p>More responses are needed before results are available.</p>
          <p>Current responses: {{ results.current_responses }}</p>
          <p>Minimum responses needed: {{ results.minimum_responses }}</p>
          <p>Remaining responses: {{ results.remaining_responses }}</p>
        </template>
        <template v-else>
          <p>The survey hasn't received enough responses yet. Please check back later.</p>
        </template>
      </div>
      <template v-else>
        <div class="bg-neutral-100 p-4 sm:p-6 rounded-lg mb-6 sm:mb-8">
          <h2 class="text-xl sm:text-2xl font-semibold text-primary mb-3 sm:mb-4">Overall Statistics</h2>
          <p class="text-primary text-sm sm:text-base mb-2">
            Total Participants: <span class="font-semibold">{{ results.total_participants || 'N/A' }}</span>
          </p>
          <template v-if="results.user_type === 'creator'">
            <p v-if="typeof results.overall_statistics.overall_deviation === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Overall Deviation: <span class="font-semibold">{{ results.overall_statistics.overall_deviation.toFixed(2) }}</span>
            </p>
            <p v-if="typeof results.overall_statistics.average_deviation_from_aggregate === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Average Deviation from Aggregate: <span class="font-semibold">{{ results.overall_statistics.average_deviation_from_aggregate.toFixed(2) }}</span>
            </p>
          </template>
          <template v-else>
            <p v-if="typeof results.overall_statistics.average_deviation_from_aggregate === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Average Deviation from Aggregate: <span class="font-semibold">{{ results.overall_statistics.average_deviation_from_aggregate.toFixed(2) }}</span>
            </p>
            <p v-if="typeof results.overall_statistics.average_deviation_from_creator === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Average Deviation from Creator: <span class="font-semibold">{{ results.overall_statistics.average_deviation_from_creator.toFixed(2) }}</span>
            </p>
            <p v-if="typeof results.overall_statistics.average_deviation_from_others === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Average Deviation from Others: <span class="font-semibold">{{ results.overall_statistics.average_deviation_from_others.toFixed(2) }}</span>
            </p>
            <p v-if="typeof results.overall_statistics.overall_deviation === 'number'" class="mb-2 text-primary text-sm sm:text-base">
              Overall Deviation: <span class="font-semibold">{{ results.overall_statistics.overall_deviation.toFixed(2) }}</span>
            </p>
          </template>
        </div>
        <div v-if="results.questions">
          <h2 class="text-xl sm:text-2xl font-semibold text-primary mb-3 sm:mb-4">Question Results</h2>
          <div v-for="question in results.questions" :key="question.id" class="bg-white border border-neutral-200 p-4 sm:p-6 rounded-lg mb-4 shadow-sm">
            <h3 class="text-lg sm:text-xl font-medium text-primary mb-2 sm:mb-3">{{ question.text }}</h3>
            <div v-if="question.type === 'scale'">
              <ScaleChart 
                :average="question.average_score" 
                :median="calculateMedian(question.distribution)"
                :max="question.scale_max"
                :user-score="question.user_score"
                active-color="bg-accent-green"
                complementary-color="text-primary"
                :use-progressive-color="true"
              />
              <p class="text-primary mt-2">Deviation from Average: <span class="font-semibold">{{ typeof question.user_deviation === 'number' ? question.user_deviation.toFixed(2) : 'N/A' }}</span></p>
            </div>
            <div v-else-if="question.type === 'boolean'">
              <BarChart 
                :percentage="question.true_percentage" 
                active-color="bg-accent-green"
                complementary-color="text-primary"
              />
              <p class="text-primary mt-2">Your Answer: <span class="font-semibold">{{ question.user_answer ? 'Yes' : 'No' }}</span></p>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-else class="text-lg text-primary">No results available.</div>
    <ToastView :message="toastMessage" :type="toastType" @hidden="clearToast" />
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '@/services/api';
//import InlineSvg from 'vue-inline-svg';
import ToastView from '@/components/ToastView.vue';
import SurveyChips from '@/components/SurveyChips.vue';
import SurveyExpiryChip from '@/components/SurveyExpiryChip.vue';
import LinkShareSection from '@/components/ShareView.vue'
import BarChart from '@/components/BarChart.vue';
import ScaleChart from '@/components/ScaleChart.vue';

export default {
  name: 'ResultsView',
  components: {
    
    ToastView,
    SurveyChips,
    SurveyExpiryChip,
    LinkShareSection,
    BarChart,
    ScaleChart,
  },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const results = ref(null);
    const loading = ref(true);
    const error = ref(null);
    const toastMessage = ref('');
    const toastType = ref('');

    const userCode = computed(() => route.params.userCode || (results.value?.user_code ?? ''));
    const surveyCode = computed(() => results.value?.survey_id ?? '');
    const isExpired = computed(() => results.value?.expired ?? false);
    const baseUrl = computed(() => process.env.VUE_APP_BASE_URL || '');
    
    const calculateMedian = (distribution) => {
      const scores = Object.entries(distribution)
        .flatMap(([score, count]) => Array(count).fill(Number(score)))
        .sort((a, b) => a - b);
      const middleIndex = Math.floor(scores.length / 2);
      return scores.length % 2 !== 0
        ? scores[middleIndex]
        : (scores[middleIndex - 1] + scores[middleIndex]) / 2;
    };

    const handleError = (err) => {
      console.error('Error fetching results:', err);
      if (err.response) {
        switch (err.response.status) {
          case 404:
            error.value = 'Survey or user not found. Please check your IDs and try again.';
            break;
          case 403:
            error.value = 'You do not have permission to view these results.';
            break;
          case 202:
            error.value = 'Not enough responses available to show stats.';
            break;
          default:
            error.value = 'An error occurred while fetching results. Please try again later.';
        }
      } else if (err.request) {
        error.value = 'Unable to reach the server. Please check your internet connection and try again.';
      } else {
        error.value = 'An unexpected error occurred. Please try again.';
      }
    };

    const fetchResults = async () => {
      if (!userCode.value) {
        error.value = 'User code is missing. Unable to fetch results.';
        loading.value = false;
        return;
      }

      try {
        const response = await api.getSurveyResultsByUserCode(userCode.value);
        if (response && response.data) {
          results.value = response.data;
          
          // Handle 'incomplete' status
          if (results.value.status === 'incomplete') {
            console.log('Survey status is incomplete');
            return;  // Exit the function early, the template will handle the display
          }

          // Process questions
          results.value.questions = results.value.questions.map(question => {
            if (question.type === 'scale') {
              // Ensure average_score is a number
              question.average_score = Number(question.average_score);
              
              // Calculate median if distribution is available
              if (question.distribution) {
                const sortedScores = Object.entries(question.distribution)
                  .flatMap(([score, count]) => Array(count).fill(Number(score)))
                  .sort((a, b) => a - b);
                const middleIndex = Math.floor(sortedScores.length / 2);
                question.median_score = sortedScores.length % 2 !== 0
                  ? sortedScores[middleIndex]
                  : (sortedScores[middleIndex - 1] + sortedScores[middleIndex]) / 2;
              }
            }
            return question;
          });
          
          console.log('Successfully fetched and processed data:', results.value);
        } else {
          throw new Error('Invalid API response');
        }
      } catch (err) {
        console.error('Fetch error:', err);
        handleError(err);
      } finally {
        loading.value = false;
      }
    };

    const clearToast = () => {
      toastMessage.value = '';
      toastType.value = '';
    };

    const handleCopySuccess = () => {
      toastMessage.value = t('copySuccess');
      toastType.value = 'success';
    };

    const handleCopyError = () => {
      toastMessage.value = t('copyError');
      toastType.value = 'error';
    };
    onMounted(() => {
      console.log('Component mounted. Fetching results...');
      fetchResults();
    });

    return {
      results,
      loading,
      error,
      userCode,
      surveyCode,
      //copyToClipboard,
      toastMessage,
      toastType,
      //openAndCopy,
      clearToast,
      handleCopyError,
      handleCopySuccess,
      isExpired,
      baseUrl,
      calculateMedian,
      
    };
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
:root {
  --color-primary: #1F2937;
  --color-accent-green: #D8F89D;
}
</style>

================
File: webapp/src/components/ScaleChart.vue
================
<template>
  <div class="w-full">
    <div class="relative w-full h-6 bg-neutral-200 rounded-full overflow-visible mt-6"> <!-- Changed to overflow-visible -->
      <!-- Progress Bar -->
      <div 
        class="absolute top-0 h-full rounded-full"
        :class="{ [activeColor]: !useProgressiveColor }"
        :style="barStyle"
      ></div>
      
      <!-- Average Value -->
      <div 
        class="absolute top-0 h-full flex items-center"
        :style="{ left: `calc(${calculatePosition(average)}% - 8px)` }"
      >
        <span class="text-xs font-medium text-primary">{{ average.toFixed(1) }}</span>
      </div>
      
      <!-- Min/Max Labels -->
      <div class="absolute w-full h-full flex items-center justify-between px-2">
        <span class="text-xs font-medium" :class="complementaryColor">1</span>
        <span class="text-xs font-medium" :class="complementaryColor">{{ max }}</span>
      </div>
      
      <!-- Median Triangle -->
      <div 
        class="absolute bottom-0 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent"
        :class="[complementaryColor]"
        :style="{ 
          left: `calc(${calculatePosition(median)}% - 4px)`, 
          borderBottomColor: 'currentColor',
          bottom: '-4px'
        }"
      ></div>
      
      <!-- User Score Triangle -->
      <div 
        v-if="userScore"
        class="absolute top-0 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent"
        :class="[complementaryColor]"
        :style="{ 
          left: `calc(${calculatePosition(userScore)}% - 4px)`, 
          borderTopColor: 'currentColor',
          top: '-4px'
        }"
      ></div>
      
      <!-- Labels for userscore -->
      <div 
        v-if="userScore"
        class="absolute flex items-center text-xs" 
        :style="{ 
          left: `calc(${calculatePosition(userScore)}% - 16px)`, 
          transform: 'translateX(-50%)',
          whiteSpace: 'nowrap',
          textAlign: 'center',
          top: '-24px'
        }"
      >
        <span :class="complementaryColor">{{ userScore.toFixed(1) }} (U)</span>
      </div>
    </div>
    
    <!-- Labels for Median -->
    <div class="relative mt-1">
      <div class="absolute left-0 right-0 flex justify-between text-xs">
        <!-- Median Label -->
        <div 
          class="absolute flex items-center"
          :style="{ 
            left: `calc(${calculatePosition(median)}% - 16px)`, 
            transform: 'translateX(-50%)',
            whiteSpace: 'nowrap',
            textAlign: 'center',
          }"
        >
          <span :class="complementaryColor">{{ median.toFixed(1) }} (M)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    average: {
      type: Number,
      required: true
    },
    median: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    },
    userScore: {
      type: Number,
      default: null
    },
    activeColor: {
      type: String,
      default: 'bg-accent-green'
    },
    complementaryColor: {
      type: String,
      default: 'text-primary'
    },
    useProgressiveColor: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    barStyle() {
      if (this.useProgressiveColor) {
        const startColor = [0xBE, 0x18, 0x5D]; // #BE185D
        const endColor = [0xD8, 0xF8, 0x9D]; // #D8F89D
        const ratio = (this.average - 1) / (this.max - 1);
        const color = startColor.map((start, i) => {
          const end = endColor[i];
          return Math.round(start + (end - start) * ratio);
        });
        return {
          width: `${this.calculateWidth(this.average)}%`,
          backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`
        };
      } else {
        return { width: `${this.calculateWidth(this.average)}%` };
      }
    }
  },
  methods: {
    calculateWidth(value) {
      // Adjust the calculation to account for rounded corners
      const adjustedMax = this.max - 1;
      const adjustedValue = value - 1;
      return (adjustedValue / adjustedMax) * 94 + 3; // 94% is the width of the rectangular part, 3% for left rounded corner
    },
    calculatePosition(value) {
      // Adjust the position calculation to account for rounded corners
      const adjustedMax = this.max - 1;
      const adjustedValue = value - 1;
      return (adjustedValue / adjustedMax) * 94 + 3; // 94% is the width of the rectangular part, 3% for left rounded corner
    }
  }
}
</script>

================
File: webapp/src/components/ShareView.vue
================
<template>
  <div v-if="showSurveyLink || showResultsLink" class="border border-neutral-300 rounded-[25px] p-3 sm:p-5">
    <div class="border border-neutral-300 rounded-[25px] p-3 sm:p-5">
      <div :class="{'grid grid-cols-1 sm:grid-cols-2 gap-4': showSurveyLink && showResultsLink, 'flex justify-center': !(showSurveyLink && showResultsLink)}">
        <!-- Survey Link Column -->
        <div v-if="showSurveyLink" class="flex flex-col items-center p-2 sm:p-3">
          <h2 class="text-lg font-bold mb-2">{{ surveyLinkLabel }}</h2>
          <div @click="handleQRClick('survey')" class="cursor-pointer mb-4">
            <QRCode :value="surveyLink" :size="200" level="M" />
          </div>
          <FancyButton
            :label="surveyCode"
            icon="/assets/copy-icon.svg"
            :disabled="false"
            :is-actioning="false"
            @click="copyToClipboard('survey')"
            :border-width="1"
            button-height="40px"
            icon-size="20px"
            font-size="text-sm"
            :min-width="'60%'"
            bg-color="white"
            border-color="black"
            text-color="text-primary"
            disabled-bg-color="gray"
            disabled-border-color="gray"
            disabled-text-color="text-gray-400"
          />
          <p class="text-sm text-gray-600 mt-2">{{ surveyLinkDescription }}</p>
        </div>

        <!-- Results Link Column -->
        <div v-if="showResultsLink" class="flex flex-col items-center p-2 sm:p-3">
          <h2 class="text-lg font-bold mb-2">{{ resultsLinkLabel }}</h2>
          <div @click="handleQRClick('results')" class="cursor-pointer mb-4">
            <QRCode :value="resultsLink" :size="200" level="M" />
          </div>
          <FancyButton
            :label="resultsCode"
            icon="/assets/copy-icon.svg"
            :disabled="false"
            :is-actioning="false"
            @click="copyToClipboard('results')"
            :border-width="1"
            button-height="40px"
            icon-size="20px"
            font-size="text-sm"
            :min-width="'60%'"
            bg-color="white"
            border-color="black"
            text-color="text-primary"
            disabled-bg-color="gray"
            disabled-border-color="gray"
            disabled-text-color="text-gray-400"
          />
          <p class="text-sm text-gray-600 mt-2">{{ resultsLinkDescription }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import QRCode from 'qrcode.vue';
import FancyButton from '@/components/FancyButton.vue';

export default {
  name: 'ShareView',
  components: {
    QRCode,
    FancyButton,
  },
  props: {
    showSurveyLink: Boolean,
    showResultsLink: Boolean,
    surveyCode: String,
    resultsCode: String,
    surveyLinkLabel: String,
    resultsLinkLabel: String,
    surveyLinkDescription: String,
    resultsLinkDescription: String,
    baseUrl: {
      type: String,
      default: ''
    }
  },
  emits: ['copy-success', 'copy-error'],
  setup(props, { emit }) {
    const surveyLink = computed(() => `${props.baseUrl}/${props.surveyCode}`);
    const resultsLink = computed(() => `${props.baseUrl}/u/${props.resultsCode}`);

    const copyToClipboard = (type) => {
      const textToCopy = type === 'survey' ? surveyLink.value : resultsLink.value;
      navigator.clipboard.writeText(textToCopy).then(() => {
        emit('copy-success', `Link copied to clipboard`);
      }, () => {
        emit('copy-error', 'Failed to copy link');
      });
    };

    const handleQRClick = (type) => {
      const link = type === 'survey' ? surveyLink.value : resultsLink.value;
      navigator.clipboard.writeText(link).then(() => {
        emit('copy-success', `QR code link copied to clipboard`);
      }, () => {
        emit('copy-error', 'Failed to copy QR code link');
      });
    };

    return {
      surveyLink,
      resultsLink,
      copyToClipboard,
      handleQRClick,
    };
  }
}
</script>

================
File: webapp/src/components/SiteHeader.vue
================
<template>
  <header class="font-sans mb-8 sm:mb-16">
    <div class="max-w-[859px] mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 sm:h-20">
        <div class="flex items-center cursor-pointer" @click="navigateTo('/')">
          <img src="/assets/backwave.svg" alt="Backwave logo" class="w-10 h-10 sm:w-10 sm:h-10 md:w-16 md:h-16" />
          <h1 class="text-3xl sm:text-3xl md:text-5xl font-bold ml-2 text-primary self-start mt-1">{{ $t('header.title') }}</h1>
        </div>
        <nav class="hidden sm:flex items-center space-x-4 sm:space-x-8">
          <NavItem 
            v-for="item in navItems" 
            :key="item.name" 
            :item="item" 
            :isActive="item.name === activeTab"
            @click="handleNavItemClick(item.name)"
          />
        </nav>
        <button @click="toggleMobileMenu" class="sm:hidden">
          <inline-svg src="/assets/menu-icon.svg" class="w-6 h-6 text-primary" />
        </button>
      </div>
      
      <!-- Mobile menu -->
      <div v-if="isMobileMenuOpen" class="sm:hidden mt-4">
        <nav class="flex flex-col space-y-4">
          <NavItem 
            v-for="item in navItems" 
            :key="item.name" 
            :item="item" 
            :isActive="item.name === activeTab"
            @click="handleNavItemClick(item.name)"
          />
        </nav>
      </div>

      <div v-if="(activeTab === 'participate' && route.name !== 'TakeSurvey') || (activeTab === 'analyze' && route.name !== 'Results')" class="mt-4">
        <div class="flex items-center bg-neutral-100 rounded-full w-full sm:w-[420px]">
          <img :src="activeTab === 'participate' ? '/assets/hash-icon.svg' : '/assets/analyze-icon.svg'" :alt="activeTab" class="hidden sm:block w-10 h-10 ml-4 mr-2" />
          <input
            v-if="activeTab === 'participate'"
            v-model="participateCode"
            type="text"
            :placeholder="$t('header.participatePlaceholder')"
            class="bg-transparent text-lg sm:text-xl font-regular text-neutral-400 flex-grow px-4 sm:px-2 py-2 focus:outline-none"
          />
          <input
            v-else
            v-model="creatorCode"
            type="text"
            :placeholder="$t('header.analyzePlaceholder')"
            class="bg-transparent text-lg sm:text-xl font-regular text-neutral-400 flex-grow px-4 sm:px-2 py-2 focus:outline-none"
          />
          <button
            @click="activeTab === 'participate' ? submitParticipateCode() : handleAnalyze()"
            :disabled="isLoading"
            class="bg-primary text-white rounded-full flex-shrink-0 w-10 h-10 sm:w-auto sm:h-auto sm:px-8 sm:py-2 flex items-center justify-center"
          >
            <span v-if="!isLoading" class="hidden sm:inline text-lg sm:text-xl font-bold">
              {{ $t(activeTab === 'participate' ? 'header.participateButton' : 'header.analyzeButton') }}
            </span>
            <inline-svg 
              v-if="!isLoading" 
              :src="activeTab === 'participate' ? '/assets/hash-icon.svg' : '/assets/analyze-icon.svg'" 
              class="w-6 h-6 sm:hidden text-white"
            />
            <span v-else class="inline-block animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></span>
          </button>
        </div>
      </div>
      
      <ToastView :message="toastMessage" :type="toastType" @hidden="clearToast" />
    </div>
  </header>
</template>

<script>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import InlineSvg from 'vue-inline-svg';
import api from '@/services/api';
import ToastView from '@/components/ToastView.vue';
import NavItem from '@/components/NavItem.vue';

export default {
  name: 'SiteHeader',
  components: {
    InlineSvg,
    ToastView,
    NavItem,
  },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    const activeTab = ref(null);
    const participateCode = ref('');
    const creatorCode = ref('');
    const isLoading = ref(false);
    const errorMessage = ref('');
    const toastMessage = ref('');
    const toastType = ref('');
    const isMobileMenuOpen = ref(false);

    const navItems = [
      { name: 'participate', icon: '/assets/hash-icon.svg', label: t('header.participate') },
      { name: 'create', icon: '/assets/yes-icon.svg', label: t('header.create') },
      { name: 'analyze', icon: '/assets/analyze-icon.svg', label: t('header.analyze') },
    ];

    const navigateTo = (path) => {
      router.push(path);
      activeTab.value = null;
      isMobileMenuOpen.value = false;
    };

    const handleNavItemClick = (tabName) => {
      if (tabName === 'create') {
        navigateTo('/new');
      } else {
        activeTab.value = activeTab.value === tabName ? null : tabName;
      }
      isMobileMenuOpen.value = false;
    };

    const toggleMobileMenu = () => {
      isMobileMenuOpen.value = !isMobileMenuOpen.value;
    };

    function clearToast() {
      toastMessage.value = '';
      toastType.value = '';
    }

    const submitParticipateCode = async () => {
      if (!participateCode.value.trim()) {
        toastMessage.value = t('header.emptyCodeError');
        toastType.value = 'error';
        return;
      }

      isLoading.value = true;
      errorMessage.value = '';
      try {
        const response = await api.getSurvey(participateCode.value);
        if (response.data && response.data.questions) {
          if(response.data.expired){
            toastMessage.value = t('header.surveyExpired');
            toastType.value = 'error';
          }else{
            router.push({ 
              name: 'TakeSurvey', 
              params: { surveyId: participateCode.value },
              props: { surveyData: response.data }
            });
            activeTab.value = null;
          }
        } else {
          throw new Error('Invalid survey data received');
        }
      } catch (error) {
        console.error('Error fetching survey:', error);
        if (error.response && error.response.status === 410) {
          toastMessage.value = t('header.surveyExpired');
          errorMessage.value = t('header.surveyExpired');
        } else {
          toastMessage.value = t('header.errorLoadingSurvey');
        }
        toastType.value = 'error';
        errorMessage.value = t('header.errorLoadingSurvey');
      } finally {
        isLoading.value = false;
      }
    };

    const handleAnalyze = async () => {
      if (!creatorCode.value.trim()) {
        toastMessage.value = t('header.emptyCodeError');
        toastType.value = 'error';
        return;
      }

      isLoading.value = true;
      errorMessage.value = '';
      try {
        const response = await api.getSurveyResultsByUserCode(creatorCode.value);
        if (response.data) {
          router.push({ 
            name: 'Results', 
            params: { userCode: creatorCode.value },
            query: { fromAnalyze: 'true' }
          });
          activeTab.value = null;
        } else {
          throw new Error('Invalid results data received');
        }
      } catch (error) {
        console.error('Error fetching results:', error);
        errorMessage.value = t('header.errorLoadingResults');
      } finally {
        isLoading.value = false;
      }
    };

    // Watch for route changes to update activeTab
    watch(() => route.name, (newRouteName) => {
      if (newRouteName === 'Create') {
        activeTab.value = 'create';
      } else if (newRouteName === 'TakeSurvey') {
        activeTab.value = 'participate';
      } else if (newRouteName === 'Results') {
        activeTab.value = 'analyze';
      } else {
        activeTab.value = null;
      }
    }, { immediate: true });

    return {
      activeTab,
      participateCode,
      creatorCode,
      isLoading,
      errorMessage,
      navigateTo,
      handleNavItemClick,
      submitParticipateCode,
      handleAnalyze,
      clearToast,
      toastMessage,
      toastType,
      isMobileMenuOpen,
      toggleMobileMenu,
      navItems,
      route, // Add route to the returned object
    };
  },
};
</script>

================
File: webapp/src/components/SurveyChips.vue
================
<template>
  <div class="flex flex-wrap justify-center gap-2">
    <div v-if="isTrending" class="inline-flex items-center px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs font-semibold h-6">
      <inline-svg src="/assets/analyze-icon.svg" class="w-4 h-4 mr-1 flex-shrink-0" />
      <span class="whitespace-nowrap leading-none">Trending</span>
    </div>
    <div v-if="participantBucket" class="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-semibold h-6">
      <inline-svg src="/assets/scale-icon.svg" class="w-4 h-4 mr-1 flex-shrink-0" />
      <span class="whitespace-nowrap leading-none">{{ participantBucket }} participants</span>
    </div>
    <div v-if="timeLeft > 0" class="inline-flex items-center px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold h-6">
      <inline-svg src="/assets/timer-icon.svg" class="w-4 h-4 mr-1 flex-shrink-0" />
      <span class="whitespace-nowrap leading-none">{{ timeLeft }} min left</span>
    </div>
  </div>
</template>

<script>
import InlineSvg from 'vue-inline-svg';

export default {
  name: 'SurveyChips',
  components: {
    InlineSvg,
  },
  props: {
    isTrending: {
      type: Boolean,
      required: true
    },
    participantBucket: {
      type: String,
      default: ''
    },
    timeLeft: {
      type: Number,
      default: 0
    }
  }
}
</script>

================
File: webapp/src/components/SurveyExpiryChip.vue
================
<template>
    <div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold h-6"
         :class="chipClass">
      <inline-svg :src="iconSrc" class="w-4 h-4 mr-1 flex-shrink-0" />
      <span class="whitespace-nowrap leading-none">{{ chipText }}</span>
    </div>
</template>
  
  <script>
  import { computed } from 'vue';
  import InlineSvg from 'vue-inline-svg';
  
  export default {
    name: 'SurveyExpiryChip',
    components: {
      InlineSvg,
    },
    props: {
      expiryDate: {
        type: String,
        required: true
      },
      isExpired: {
        type: Boolean,
        required: true
      }
    },
    setup(props) {
      const chipClass = computed(() => {
        return props.isExpired
          ? 'bg-green-100 text-green-800'
          : 'bg-yellow-100 text-yellow-800';
      });
  
      const iconSrc = computed(() => {
        return props.isExpired
          ? '/assets/yes-icon.svg'
          : '/assets/timer-icon.svg';
      });
  
      const chipText = computed(() => {
        if (props.isExpired) {
          return 'Survey completed';
        } else {
          const timeLeft = getTimeLeft(props.expiryDate);
          return `${timeLeft} left`;
        }
      });
  
      const getTimeLeft = (expiryDate) => {
        const now = new Date();
        const expiry = new Date(expiryDate);
        const diffMs = expiry - now;
        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
        const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
  
        if (diffDays > 0) {
          return `${diffDays} day${diffDays > 1 ? 's' : ''}`;
        } else if (diffHours > 0) {
          return `${diffHours} hour${diffHours > 1 ? 's' : ''}`;
        } else {
          return `${diffMinutes} min`;
        }
      };
  
      return {
        chipClass,
        iconSrc,
        chipText
      };
    }
  }
  </script>

================
File: webapp/src/components/TakeSurvey.vue
================
<template>
  <div class="font-sans min-h-screen bg-white">
    <div v-if="error || isSurveyExpired" class="max-w-[768px] mx-auto px-4 pt-8 sm:pt-16 text-center">
      <p class="text-xl sm:text-2xl text-accent">
        {{ error || t('takeSurvey.surveyExpired') }}
      </p>
    </div>
    <div v-else class="max-w-[768px] mx-auto px-4 pt-8 sm:pt-16">
      <div v-if="loadedSurveyData">
        <!-- Privacy Note -->
        <div class="mb-2">
            <div class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-semibold h-6">
              <inline-svg src="/assets/safe-icon.svg" class="w-4 h-4 mr-1 flex-shrink-0"/>
              <span class="whitespace-nowrap leading-none">
                  {{ $t('takeSurvey.privacyNote') }}</span>
            </div>
        </div>
        <!-- Combined Header and Question Section -->
        <div class="rounded-3xl overflow-hidden">
          <!-- Header Section -->
          <div class="bg-neutral-100 p-4 sm:p-7">
            <!-- SurveyChips just above the title -->
            <div class="mb-2">
              <SurveyChips 
                :is-trending="loadedSurveyData.is_trending"
                :participant-bucket="loadedSurveyData.participant_bucket"
                :time-left="timeLeftInMinutes"
              />
            </div>

            <div class="flex items-start">
              <div class="w-10 h-10 sm:w-12 sm:h-12 bg-secondary rounded-full mr-3 sm:mr-5 mt-1 sm:mt-3 flex-shrink-0"></div>
              <div>
                <h1 class="text-primary text-xl sm:text-2xl font-semibold leading-8 sm:leading-10">{{ loadedSurveyData.title }}</h1>
                <p class="text-primary text-base sm:text-lg font-normal leading-6 sm:leading-7">{{ loadedSurveyData.description }}</p>
              </div>
            </div>
          </div>

          <!-- Question Section -->
          <div v-if="currentQuestion" class="bg-accent-green p-4 sm:p-7 relative">
            <!-- Progress Bar -->
            <div class="w-full h-2 sm:h-2.5 bg-neutral-200 absolute top-0 left-0 right-0">
              <div class="h-full bg-accent transition-all duration-300 ease-in-out" :style="{ width: `${progress}%` }"></div>
            </div>

            <!-- Question -->
            <div class="flex items-center mb-4 sm:mb-6 mt-3 sm:mt-0">
              <inline-svg src="assets/question-icon.svg" class="w-6 h-6 sm:w-7 sm:h-7 mr-3 sm:mr-4 text-primary"/>
              <p class="text-primary text-lg sm:text-2xl font-bold leading-7 sm:leading-9">{{ currentQuestion.text }}</p>
            </div>

            <!-- Answer Options -->
            <div class="flex justify-center space-x-2 sm:space-x-5 mb-12 sm:mb-16">
              <template v-if="currentQuestion.response_type === 'scale'">
                <button 
                  v-for="n in (currentQuestion.response_scale_max || 5)" 
                  :key="n" 
                  @click="selectAnswer(n)"
                  :class="[
                    'w-10 h-10 sm:w-14 sm:h-14 rounded-full border-2 sm:border-4 transition-colors flex items-center justify-center text-sm sm:text-base',
                    n <= currentAnswer ? 'bg-primary border-primary text-white' : 'bg-white border-neutral-200 text-primary'
                  ]"
                >
                  {{ n }}
                </button>
              </template>
              <template v-else-if="currentQuestion.response_type === 'boolean'">
                <button 
                  @click="selectAnswer(true)"
                  :class="[
                    'w-10 h-10 sm:w-14 sm:h-14 rounded-full border-2 sm:border-4 transition-colors flex items-center justify-center',
                    currentAnswer === true ? 'bg-primary border-primary' : 'bg-white border-neutral-200'
                  ]"
                >
                  <inline-svg src="/assets/yes-icon.svg" class="w-6 h-6 sm:w-8 sm:h-8" :class="currentAnswer === true ? 'text-white' : 'text-primary'"/>
                </button>
                <button 
                  @click="selectAnswer(false)"
                  :class="[
                    'w-10 h-10 sm:w-14 sm:h-14 rounded-full border-2 sm:border-4 transition-colors flex items-center justify-center',
                    currentAnswer === false ? 'bg-primary border-primary' : 'bg-white border-neutral-200'
                  ]"
                >
                  <inline-svg src="/assets/no-icon.svg" class="w-6 h-6 sm:w-8 sm:h-8" :class="currentAnswer === false ? 'text-white' : 'text-primary'"/>
                </button>
              </template>
            </div>

            <!-- Navigation Buttons and User Code Input -->
            <!-- Mobile Navigation -->
            <div class="sm:hidden flex flex-col items-center space-y-4">
              <div class="w-full flex justify-center">
                <FancyInput
                  v-model="userCode"
                  :icon="'/assets/user-icon.svg'"
                  placeholder="user-name"
                  :is-checking="isCheckingCode"
                  :is-valid="isCodeValid"
                  :is-error="isCodeInvalid"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'border-neutral-300'"
                  :neutral-border-color="'border-neutral-300'"
                  :text-color="'text-neutral-500'"
                  :icon-color="'text-neutral-500'"
                  @rotate="rotateCode"
                  @input="handleCodeInput"
                  v-tooltip="'Your unique participant code'"
                  class="w-full max-w-xs"
                />
              </div>
              <p class="text-xs text-neutral-500 ">Your unique participant code</p>
              <div class="flex justify-between w-full space-x-2">
                <button 
                  @click="previousQuestion" 
                  class="px-4 sm:px-6 py-2 bg-primary text-white rounded-full text-sm sm:text-base"
                  :class="{ 'invisible': currentQuestionIndex === 0 }"
                >
                  {{ $t('takeSurvey.previousButton') }}
                </button>
                <FancyButton
                  :label="isLastQuestion ? $t('takeSurvey.finishButton') : $t('takeSurvey.nextButton')"
                  :disabled="currentAnswer === null || isSubmitting || !isCodeValid || isSurveyExpired"
                  :is-actioning="isSubmitting"
                  @click="nextQuestion"
                  :border-width="2"
                  button-height="40px"
                  icon-size="20px"
                  font-size="text-sm sm:text-base"
                  :min-width="'100px'"
                  bg-color="black"
                  border-color="primary"
                  loader-color="#6B7280"
                  disabled-bg-color="gray"
                  disabled-border-color="neutral-300"
                  text-color="text-white"
                  disabled-text-color="text-neutral-300"
                />
              </div>
            </div>

            <!-- Desktop Navigation -->
            <div class="hidden sm:flex items-center justify-between w-full space-x-2">
              <button 
                @click="previousQuestion" 
                class="px-4 sm:px-6 py-2 bg-primary text-white rounded-full text-sm sm:text-base"
                :class="{ 'invisible': currentQuestionIndex === 0 }"
              >
                {{ $t('takeSurvey.previousButton') }}
              </button>
              <div class="flex justify-center flex-grow">
                <FancyInput
                  v-model="userCode"
                  :icon="'/assets/user-icon.svg'"
                  placeholder="user-name"
                  :is-checking="isCheckingCode"
                  :is-valid="isCodeValid"
                  :is-error="isCodeInvalid"
                  :loader-color="'#BE185D'"
                  :valid-border-color="'border-neutral-300'"
                  :neutral-border-color="'border-neutral-300'"
                  :text-color="'text-neutral-500'"
                  :icon-color="'text-neutral-500'"
                  @rotate="rotateCode"
                  @input="handleCodeInput"
                  v-tooltip="'Your unique participant code'"
                  class="w-full max-w-xs"
                />
              </div>
              <FancyButton
                :label="isLastQuestion ? $t('takeSurvey.finishButton') : $t('takeSurvey.nextButton')"
                :disabled="currentAnswer === null || isSubmitting || !isCodeValid"
                :is-actioning="isSubmitting"
                @click="nextQuestion"
                :border-width="2"
                button-height="40px"
                icon-size="20px"
                font-size="text-sm sm:text-base"
                :min-width="'100px'"
                bg-color="black"
                border-color="primary"
                loader-color="#6B7280"
                disabled-bg-color="gray"
                disabled-border-color="neutral-300"
                text-color="text-white"
                disabled-text-color="text-neutral-300"
              />
            </div>

          </div>
        </div>
      </div>
      <div v-else-if="isLoading" class="flex justify-center items-center h-64">
        <p class="text-xl sm:text-2xl text-primary">{{ $t('takeSurvey.loadingMessage') }}</p>
      </div>
    </div>
  </div>
</template>




<script>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '@/services/api';
import InlineSvg from 'vue-inline-svg';
import FancyInput from '@/components/FancyInput.vue';
import debounce from 'lodash/debounce';
import { useHead } from '@vueuse/head'
import FancyButton from '@/components/FancyButton.vue';
import SurveyChips from '@/components/SurveyChips.vue';

export default {
  name: 'TakeSurvey',
  components: {
    InlineSvg,
    FancyInput,
    FancyButton,
    SurveyChips,
  },
  props: {
    surveyId: {
      type: String,
      default: null
    },
    surveyData: {
      type: Object,
      default: null
    }
  },
  setup(props, { emit }) {
    const { t } = useI18n();
    const router = useRouter();
    const loadedSurveyData = ref(null);
    const error = ref(null);
    const currentQuestionIndex = ref(0);
    const answers = ref({});
    const currentAnswer = ref(null);
    const isSubmitting = ref(false);
    const isLoading = ref(true);
    const userCode = ref('');
    const availableCodes = ref([]);
    const codeStatus = ref(null);
    const isChecking = ref(false);

    const currentQuestion = computed(() => loadedSurveyData.value?.questions[currentQuestionIndex.value]);
    const progress = computed(() => ((currentQuestionIndex.value + 1) / loadedSurveyData.value?.questions.length) * 100);
    const isLastQuestion = computed(() => currentQuestionIndex.value === loadedSurveyData.value?.questions.length - 1);

    const isCheckingCode = computed(() => isChecking.value);
    const isCodeValid = computed(() => codeStatus.value === 'valid');
    const isCodeInvalid = computed(() => codeStatus.value === 'invalid');

    const baseUrl = computed(() => process.env.VUE_APP_BASE_URL || '');
    
    const isSurveyExpired = computed(() => {
      if (!loadedSurveyData.value || !loadedSurveyData.value.expiration_date) {
        return false;
      }
      const expirationDate = new Date(loadedSurveyData.value.expiration_date);
      return expirationDate < new Date();
    });
    useHead(() => {
      if (!loadedSurveyData.value) return {}

      const title = `${loadedSurveyData.value.title} - Backwave Survey`;
      const description = loadedSurveyData.value.description || "Take this survey and provide valuable feedback.";
      const url = `${baseUrl.value}/participate/${props.surveyId}`;
      const image = `${baseUrl.value}/og-image.png`; // Make sure this image exists in your public folder

      return {
        title: title,
        meta: [
          { property: 'og:title', content: title },
          { property: 'og:description', content: description },
          { property: 'og:url', content: url },
          { property: 'og:image', content: image },
          { property: 'og:type', content: 'website' },
          { name: 'twitter:title', content: title },
          { name: 'twitter:description', content: description },
          { name: 'twitter:url', content: url },
          { name: 'twitter:image', content: image },
          { name: 'twitter:card', content: 'summary_large_image' },
        ],
      }
    })
    const timeLeftInSeconds = ref(0);
    const timeLeftInMinutes = computed(() => {
      return Math.ceil(timeLeftInSeconds.value / 60);
    });

    const calculateTotalTime = (questions) => {
      return questions.reduce((total, question) => {
        return total + (question.response_type === 'boolean' ? 15 : 30);
      }, 0);
    };

    const updateTimeLeft = () => {
      if (loadedSurveyData.value && loadedSurveyData.value.questions) {
        const unansweredQuestions = loadedSurveyData.value.questions.slice(currentQuestionIndex.value);
        timeLeftInSeconds.value = calculateTotalTime(unansweredQuestions);
      }
    };

    watch(currentQuestionIndex, updateTimeLeft);
    onMounted(async () => {
      if (!props.surveyId) {
        error.value = t('takeSurvey.missingSurveyId');
        isLoading.value = false;
        return;
      }

      try {
        await fetchInitialCode();
        if (props.surveyData) {
          loadedSurveyData.value = props.surveyData;
        } else {
          const response = await api.getSurvey(props.surveyId);
          loadedSurveyData.value = response.data;
        }
        if (loadedSurveyData.value) {
          if (isSurveyExpired.value) {
            error.value = t('takeSurvey.surveyExpired');
          } else {
            updateTimeLeft();
          }
        }
      } catch (err) {
        console.error('Error fetching survey:', err);
        handleError(err);
      } finally {
        isLoading.value = false;
      }
    });

    async function fetchInitialCode() {
      try {
        const response = await api.getIds(5);
        availableCodes.value = response.data.ids;
        userCode.value = availableCodes.value[0];
        codeStatus.value = 'valid';
      } catch (error) {
        console.error('Error fetching initial codes:', error);
        error.value = t('takeSurvey.errorFetchingCodes');
      }
    }

    function rotateCode() {
      const currentIndex = availableCodes.value.indexOf(userCode.value);
      const nextIndex = (currentIndex + 1) % availableCodes.value.length;
      userCode.value = availableCodes.value[nextIndex];
      codeStatus.value = 'valid';
    }

    const handleCodeInput = debounce(() => {
      if (isValidFormat(userCode.value)) {
        checkCodeAvailability();
      } else {
        codeStatus.value = 'invalid';
      }
    }, 300);

    function isValidFormat(code) {
      const validFormat = /^[a-zA-Z0-9-]+$/;
      return typeof code === 'string' && code.length >= 5 && validFormat.test(code);
    }

    async function checkCodeAvailability() {
      isChecking.value = true;
      codeStatus.value = null;
      try {
        const response = await api.checkIdAvailability(userCode.value);
        if (response.data.available) {
          codeStatus.value = 'valid';
        } else {
          codeStatus.value = 'invalid';
        }
      } catch (error) {
        console.error('Error checking code availability:', error);
        codeStatus.value = 'invalid';
      } finally {
        isChecking.value = false;
      }
    }

    function selectAnswer(value) {
      currentAnswer.value = value;
    }

    function previousQuestion() {
      if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--;
        currentAnswer.value = answers.value[currentQuestion.value.id] || null;
      }
    }

    async function nextQuestion() {
      if (currentAnswer.value === null || !isCodeValid.value || isSurveyExpired.value) return;

      answers.value[currentQuestion.value.id] = currentAnswer.value;
      
      if (isLastQuestion.value) {
        await submitSurvey();
      } else {
        currentQuestionIndex.value++;
        currentAnswer.value = answers.value[currentQuestion.value.id] || null;
        updateTimeLeft();
      }
    }

    async function submitSurvey() {
      isSubmitting.value = true;
      try {
        const answersToSubmit = {
          answers: Object.entries(answers.value).map(([questionId, answer]) => ({
            question_id: questionId,
            answer
          })),
          user_code: userCode.value
        };
        const response = await api.submitAnswers(props.surveyId, answersToSubmit);
        
        if (!response.data.user_code) {
          throw new Error('User code not found in API response');
        }
        
        // Navigate to results page after a short delay
        router.push({
            name: 'Results',
            params: { 
              surveyId: props.surveyId,
              userCode: response.data.user_code 
            }
          });
      } catch (error) {
        console.error('Error submitting survey:', error);
        handleError(error);
      } finally {
        isSubmitting.value = false;
      }
    }

    function handleError(err) {
      if (err.response) {
        switch (err.response.status) {
          case 404:
            error.value = t('takeSurvey.surveyNotFound');
            break;
          case 403:
            error.value = t('takeSurvey.surveyAccessDenied');
            break;
          case 410:
            error.value = t('takeSurvey.surveyExpired');
            break;
          default:
            error.value = t('takeSurvey.errorLoading');
        }
      } else if (err.request) {
        error.value = t('takeSurvey.networkError');
      } else {
        error.value = t('takeSurvey.errorLoading');
      }
      emit('survey-error', error.value);
    }

    return {
      loadedSurveyData,
      currentQuestionIndex,
      currentQuestion,
      currentAnswer,
      isSubmitting,
      isLoading,
      progress,
      isLastQuestion,
      selectAnswer,
      previousQuestion,
      nextQuestion,
      error,
      userCode,
      isCheckingCode,
      isCodeValid,
      isCodeInvalid,
      rotateCode,
      handleCodeInput,
      timeLeftInMinutes,
    };
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap');
</style>

================
File: webapp/src/components/ToastView.vue
================
<template>
  <Transition
    enter-active-class="transition duration-300 ease-out"
    enter-from-class="transform translate-y-2 opacity-0"
    enter-to-class="transform translate-y-0 opacity-100"
    leave-active-class="transition duration-300 ease-in"
    leave-from-class="transform translate-y-0 opacity-100"
    leave-to-class="transform translate-y-2 opacity-0"
  >
    <div 
      v-if="isVisible" 
      class="fixed top-5 right-5 px-6 py-3 rounded-md font-bold text-white shadow-lg z-50"
      :class="[
        type === 'success' ? 'bg-accent-green' : 'bg-accent',
      ]"
    >
      {{ $t(message) }}
    </div>
  </Transition>
</template>

<script>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

export default {
  name: 'ToastView',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'success',
      validator: (value) => ['success', 'error'].includes(value)
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  emits: ['hidden'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const isVisible = ref(false);

    const showToast = () => {
      console.log('Showing toast:', t(props.message), props.type);
      isVisible.value = true;
      setTimeout(() => {
        hideToast();
      }, props.duration);
    };

    const hideToast = () => {
      isVisible.value = false;
      emit('hidden');
    };

    watch(() => props.message, (newVal) => {
      if (newVal) {
        showToast();
      }
    });

    return {
      isVisible,
      showToast,
      hideToast
    };
  }
};
</script>

================
File: webapp/src/locales/en.ts
================
export default {
    global: {
      surveyRoute: "",
      resultsRoute: "u",
      createRoute: "new"
    },
    createView: {
      title: 'Share your honest view',
      description: 'Helps me reflect on what I think of myself',
      inputPlaceholder: 'Enter your question here',
      ratingButton: 'Rating',
      yesNoButton: 'Yes/No',
      addButton: 'Add',
      suggestButton: 'Suggest',
      publishButton: 'Publish',
      alertMessage: 'Complete self review before publishing',
      publishedMessage: 'The review is published and live!',
      reviewCodeLabel: 'Review code',
      reviewLinkLabel: 'Review Link',
      copyUrlButton: 'Copy URL',
      toastSuccess: 'Survey created successfully!',
      toastError: 'Failed to create survey. Please try again.',
      copySuccess: 'Copied to clipboard!',
      copyError: 'Failed to copy to clipboard',
      errorCheckingCode:'Cannot validate the id',
      errorFetchingCodes: 'Error fetching suggestions. Please try again.',
      codeNotAvailable:'The id is already used or invalid (contains space, special characters)'
    },
    homeView: {
      title: 'Calibrate your self awareness',
      subtitle: 'Compare what you think about yourself, what others really look at you as',
      createButton: 'Create a review',
      participateTitle: 'Came here for a friend?',
      participateSubtitle: 'Share some valuable feedback to the creator and see what others are saying',
      participatePlaceholder: 'Enter review code',
      participateButton: 'Participate',
      errorMessage: 'Invalid survey code or survey not found. Please try again.',
    },
    takeSurvey: {
      previousButton: 'Previous',
      nextButton: 'Next',
      finishButton: 'Finish',
      loadingMessage: 'Loading survey...',
      submittingButton: 'Publishing...',
      errorSubmitting: 'Error submitting survey. Please try again.',
      errorFetchingCodes: 'Error fetching suggestions. Please try again.',
      missingSurveyId: 'Survey ID is missing. Please check the URL and try again.',
      surveyNotFound: 'Survey not found. Please check the survey ID and try again.',
      errorLoading: 'An error occurred while loading the survey. Please try again later.',
      unexpectedError: 'An unexpected error occurred. Please try again.',
      surveyExpired: "This survey has expired and is no longer available.",
      privacyNote: "This page ONLY collects the answers choices and the handle you choose.",
    },
    resultsView:{
      copySuccess: 'Copied to the clipboard',
      copyError: 'Could not copy to the clipboard',
      finishButton: 'Finish',
    },
    header: {
      title: 'Backwave',
      participate: 'Participate',
      create: 'Create',
      analyze: 'Analyze',
      participatePlaceholder: 'Enter review code',
      participateButton: 'Participate',
      analyzePlaceholder: 'Enter creator code',
      analyzeButton: 'Analyze',
      errorLoadingSurvey: 'Failed to load survey. Please check the code and try again.',
      surveyExpired: "This survey has expired and is no longer available.",
      emptyCodeError: 'The code cannot be empty.',
      errorLoadingResults: 'Failed to load results. Please check the creator code and try again.',
    },
    toast: {
      surveyCreated: 'Survey created successfully!',
      surveyCreationFailed: 'Failed to create survey. Please try again.',
      copiedToClipboard: 'Copied to clipboard!',
      copyFailed: 'Failed to copy to clipboard',
      // Add more toast messages as needed
    },
  };

================
File: webapp/src/services/api.ts
================
import axios, { AxiosInstance, AxiosResponse } from 'axios';

const isDevelopment = process.env.VUE_APP_ENV === 'development';
const API_URL = isDevelopment ? '/v1' : `${process.env.VUE_APP_API_URL}/v1`;

const api: AxiosInstance = axios.create({
    baseURL: API_URL,
    headers: {
      'Content-Type': 'application/json',
    }
});

interface SurveyData {
  // Define the structure of your survey data here
  // For example:
  title: string;
  description?: string;
  questions: Array<{
    text: string;
    type: string;
    // Add other question properties
  }>;
  // Add other survey properties
}

interface AnswerData {
  // Define the structure of your answer data here
  // For example:
  answers: Array<{
    question_id: number;
    answer: string | number | boolean;
  }>;
}

export default {
  // Create a new survey
  createSurvey(surveyData: SurveyData): Promise<AxiosResponse> {
    return api.post(`/surveys`, surveyData);
  },

  // Get a survey by ID
  getSurvey(surveyId: string): Promise<AxiosResponse> {
    return api.get(`/surveys/${surveyId}`);
  },

  // Submit answers for a survey
  submitAnswers(surveyId: string, answers: AnswerData): Promise<AxiosResponse> {
    return api.post(`/surveys/${surveyId}/answers`, answers);
  },

  // Get survey results
  getSurveyResults(surveyId: string, userCode: string): Promise<AxiosResponse> {
    return api.get(`/surveys/${surveyId}/results`, { params: { user_code: userCode } });
  },

  // Get survey results by user code
  getSurveyResultsByUserCode(userCode: string): Promise<AxiosResponse> {
    return api.get(`/surveys/results`, { params: { user_code: userCode } });
  },

  // Get IDs
  getIds(count: number, preferred?: string): Promise<AxiosResponse> {
    return api.get(`/ids`, { params: { count, id: preferred } });
  },

  // Check ID availability
  checkIdAvailability(id: string): Promise<AxiosResponse> {
    return api.get(`/ids/check`, { params: { id } });
  }
};

================
File: webapp/src/components/ui/AnimatedNumber.vue
================
<template>
  <span>{{ displayValue }}</span>
</template>

<script>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import gsap from 'gsap';

export default {
  name: 'AnimatedNumber',
  props: {
    value: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 1
    },
    precision: {
      type: Number,
      default: 0
    },
    format: {
      type: Function,
      default: num => num.toLocaleString()
    }
  },
  setup(props, { emit }) {
    const displayValue = ref(props.format(0));
    let tween = null;

    const animateValue = () => {
      if (tween) tween.kill();
      
      const obj = { value: parseFloat(displayValue.value.replace(/,/g, '')) };
      tween = gsap.to(obj, {
        value: props.value,
        duration: props.duration,
        ease: 'power2.out',
        onStart: () => emit('animationStart'),
        onUpdate: () => {
          displayValue.value = props.format(parseFloat(obj.value.toFixed(props.precision)));
        },
        onComplete: () => emit('animationComplete')
      });
    };

    watch(() => props.value, animateValue);

    onMounted(animateValue);
    onUnmounted(() => {
      if (tween) tween.kill();
    });

    return { displayValue };
  }
}
</script>

================
File: webapp/src/components/ui/SortableList.vue
================
<template>
  <draggable 
    :model-value="modelValue" 
    @update:model-value="$emit('update:modelValue', $event)"
    item-key="id"
    :disabled="disabled"
    @start="drag = true"
    @end="drag = false"
  >
    <template #item="{ element }">
      <div class="sortable-item" :class="{ 'is-dragging': drag }">
        <slot :item="element"></slot>
      </div>
    </template>
  </draggable>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  name: 'SortableList',
  components: {
    draggable
  },
  props: {
    modelValue: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  setup() {
    const drag = ref(false);

    return {
      drag
    };
  }
}
</script>

<style scoped>
.sortable-item {
  transition: all 0.3s;
}
.sortable-item.is-dragging {
  opacity: 0.5;
}
</style>

================
File: webapp/src/components/ui/TextAnimate.vue
================
<template>
  <span class="inline-block">
    <template v-if="shouldAnimate">
      <span
        v-for="(char, index) in characters"
        :key="`char-${index}`"
        :style="getCharStyle(index)"
        :class="`animate-${type}`"
        class="inline-block opacity-0"
      >
        {{ char === ' ' ? '\u00A0' : char }}
      </span>
    </template>
    <template v-else>
      {{ text }}
    </template>
  </span>
</template>

<script>
import { computed, ref, watch } from 'vue';

const validAnimationTypes = [
  'fadeIn',
  'fadeInUp',
  'popIn',
  'shiftInUp',
  'rollIn',
  'whipIn',
  'whipInUp',
  'calmInUp'
];

export default {
  name: 'TextAnimate',
  props: {
    text: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'fadeIn'
    },
    delay: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 0.75
    },
    stagger: {
      type: Number,
      default: 0.03
    },
    disableAnimation: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const characters = computed(() => props.text.split(''));
    const hasAnimated = ref(false);

    const shouldAnimate = computed(() => 
      !props.disableAnimation &&
      !hasAnimated.value &&
      props.type !== 'none' &&
      validAnimationTypes.includes(props.type)
    );

    const getCharStyle = (index) => ({
      'animation-delay': `${props.delay + props.stagger * index}s`,
      'animation-duration': `${props.duration}s`,
      'animation-fill-mode': 'forwards'
    });

    watch(() => props.text, () => {
      hasAnimated.value = false;
    });

    watch(shouldAnimate, (newValue) => {
      if (newValue) {
        setTimeout(() => {
          hasAnimated.value = true;
        }, (props.delay + props.duration + props.stagger * props.text.length) * 1000);
      }
    });

    return {
      characters,
      shouldAnimate,
      getCharStyle
    };
  }
};
</script>

<style scoped>
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shiftInUp {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes rollIn {
  0% { opacity: 0; transform: translateY(0.35em) rotate(-15deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes whipIn {
  0% { opacity: 0; transform: translateY(0.35em) skewY(5deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}

@keyframes whipInUp {
  0% { opacity: 0; transform: translateY(200%) skewY(-10deg); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}

@keyframes calmInUp {
  0% { opacity: 0; transform: translateY(20px); }
  50% { opacity: 0.5; }
  100% { opacity: 1; transform: translateY(0); }
}

/* Add classes for each animation type */
.animate-fadeIn { animation-name: fadeIn; }
.animate-fadeInUp { animation-name: fadeInUp; }
.animate-popIn { animation-name: popIn; }
.animate-shiftInUp { animation-name: shiftInUp; }
.animate-rollIn { animation-name: rollIn; }
.animate-whipIn { animation-name: whipIn; }
.animate-whipInUp { animation-name: whipInUp; }
.animate-calmInUp { animation-name: calmInUp; }
</style>

================
File: webapp/src/components/ui/TypeWriter.vue
================
<template>
  <span class="type-writer">
    {{ displayText }}<span class="cursor" :class="{ 'blink': isCursorVisible }"></span>
  </span>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'TypeWriter',
  props: {
    texts: {
      type: Array,
      required: true
    },
    delay: {
      type: Number,
      default: 1000
    },
    typingSpeed: {
      type: Number,
      default: 50
    }
  },
  setup(props) {
    const displayText = ref('');
    const currentTextIndex = ref(0);
    const isCursorVisible = ref(true);
    let typingInterval = null;
    let cursorInterval = null;

    const typeText = () => {
      const currentText = props.texts[currentTextIndex.value];
      let charIndex = 0;

      clearInterval(typingInterval);
      typingInterval = setInterval(() => {
        if (charIndex < currentText.length) {
          displayText.value += currentText[charIndex];
          charIndex++;
        } else {
          clearInterval(typingInterval);
          setTimeout(eraseText, props.delay);
        }
      }, props.typingSpeed);
    };

    const eraseText = () => {
      clearInterval(typingInterval);
      typingInterval = setInterval(() => {
        if (displayText.value.length > 0) {
          displayText.value = displayText.value.slice(0, -1);
        } else {
          clearInterval(typingInterval);
          currentTextIndex.value = (currentTextIndex.value + 1) % props.texts.length;
          setTimeout(typeText, props.typingSpeed);
        }
      }, props.typingSpeed / 2);
    };

    const blinkCursor = () => {
      cursorInterval = setInterval(() => {
        isCursorVisible.value = !isCursorVisible.value;
      }, 500);
    };

    onMounted(() => {
      typeText();
      blinkCursor();
    });

    onUnmounted(() => {
      clearInterval(typingInterval);
      clearInterval(cursorInterval);
    });

    return {
      displayText,
      isCursorVisible
    };
  }
}
</script>

<style scoped>
.type-writer {
  position: relative;
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: currentColor;
  margin-left: 2px;
  vertical-align: middle;
}

.cursor.blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style>