Add Job Posting Generator and Social Ads Generator agents

New features:
- Job Posting Generator (4.00 AED): Creates professional job postings with detailed requirements, company culture integration, and SEO optimization
- Social Ads Generator (7.00 AED): Creates compelling social media advertisements with platform-optimized copy and emoji support

Technical improvements:
- Individual agent architecture with namespaced templates
- Real-time AJAX form submission without page reload
- Wallet deduction only after successful processing
- Platform-specific optimization (job posting: 6 platforms, social ads: 6 platforms)
- Copy/download functionality for generated content
- Comprehensive form validation and error handling

Database changes:
- Job posting specific fields: job_title, company_name, seniority_level, contract_type, location, language
- Social ads specific fields: description, social_platform, include_emoji, language
- Response models with structured content fields

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

job_posting_generator/__init__.py

@@ -0,0 +1 @@
+# Job Posting Generator Agent App

job_posting_generator/admin.py

@@ -0,0 +1,19 @@
+from django.contrib import admin
+from .models import JobPostingGeneratorRequest, JobPostingGeneratorResponse
+
+
+@admin.register(JobPostingGeneratorRequest)
+class JobPostingGeneratorRequestAdmin(admin.ModelAdmin):
+    list_display = ['id', 'user', 'status', 'created_at', 'cost']
+    list_filter = ['status', 'created_at']
+    search_fields = ['user__email', 'user__username']
+    readonly_fields = ['id', 'created_at', 'processed_at']
+    ordering = ['-created_at']
+
+
+@admin.register(JobPostingGeneratorResponse)
+class JobPostingGeneratorResponseAdmin(admin.ModelAdmin):
+    list_display = ['id', 'request', 'success', 'created_at']
+    list_filter = ['success', 'created_at']
+    readonly_fields = ['id', 'created_at']
+    ordering = ['-created_at']

job_posting_generator/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class JobPostingGeneratorConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'job_posting_generator'

job_posting_generator/migrations/0001_initial.py

@@ -0,0 +1,64 @@
+# Generated by Django 5.2.4 on 2025-07-10 11:15
+
+import django.db.models.deletion
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('agent_base', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='JobPostingGeneratorRequest',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('status', models.CharField(choices=[('pending', 'Pending'), ('processing', 'Processing'), ('completed', 'Completed'), ('failed', 'Failed')], default='pending', max_length=20)),
+                ('cost', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('processed_at', models.DateTimeField(blank=True, null=True)),
+                ('job_title', models.CharField(max_length=200)),
+                ('company_name', models.CharField(max_length=200)),
+                ('job_description', models.TextField()),
+                ('seniority_level', models.CharField(choices=[('entry', 'Entry Level (0-2 years)'), ('mid', 'Mid Level (2-5 years)'), ('senior', 'Senior Level (5-8 years)'), ('lead', 'Lead/Principal (8+ years)'), ('executive', 'Executive/C-Level')], max_length=20)),
+                ('contract_type', models.CharField(choices=[('full-time', 'Full-time'), ('part-time', 'Part-time'), ('contract', 'Contract'), ('freelance', 'Freelance'), ('internship', 'Internship')], max_length=20)),
+                ('location', models.CharField(max_length=200)),
+                ('language', models.CharField(choices=[('English', 'English'), ('Arabic', 'Arabic (العربية)'), ('Spanish', 'Spanish (Español)'), ('French', 'French (Français)'), ('German', 'German (Deutsch)')], default='English', max_length=20)),
+                ('company_website', models.URLField(blank=True)),
+                ('how_to_apply', models.TextField(blank=True)),
+                ('agent', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='agent_base.baseagent')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': 'Job Posting Generator Request',
+                'verbose_name_plural': 'Job Posting Generator Requests',
+                'db_table': 'job_posting_generator_requests',
+            },
+        ),
+        migrations.CreateModel(
+            name='JobPostingGeneratorResponse',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('success', models.BooleanField(default=False)),
+                ('error_message', models.TextField(blank=True)),
+                ('processing_time', models.DecimalField(blank=True, decimal_places=2, max_digits=10, null=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('job_posting_content', models.TextField(blank=True)),
+                ('formatted_posting', models.TextField(blank=True)),
+                ('raw_response', models.JSONField(blank=True, default=dict)),
+                ('request', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='response', to='job_posting_generator.jobpostinggeneratorrequest')),
+            ],
+            options={
+                'verbose_name': 'Job Posting Generator Response',
+                'verbose_name_plural': 'Job Posting Generator Responses',
+                'db_table': 'job_posting_generator_responses',
+            },
+        ),
+    ]

job_posting_generator/models.py

@@ -0,0 +1,75 @@
+from django.db import models
+from decimal import Decimal
+from agent_base.models import BaseAgentRequest, BaseAgentResponse
+
+
+class JobPostingGeneratorRequest(BaseAgentRequest):
+    """Job Posting Generator request tracking"""
+    
+    # Required job details
+    job_title = models.CharField(max_length=200)
+    company_name = models.CharField(max_length=200)
+    job_description = models.TextField()
+    seniority_level = models.CharField(
+        max_length=20,
+        choices=[
+            ('entry', 'Entry Level (0-2 years)'),
+            ('mid', 'Mid Level (2-5 years)'),
+            ('senior', 'Senior Level (5-8 years)'),
+            ('lead', 'Lead/Principal (8+ years)'),
+            ('executive', 'Executive/C-Level'),
+        ]
+    )
+    contract_type = models.CharField(
+        max_length=20,
+        choices=[
+            ('full-time', 'Full-time'),
+            ('part-time', 'Part-time'),
+            ('contract', 'Contract'),
+            ('freelance', 'Freelance'),
+            ('internship', 'Internship'),
+        ]
+    )
+    location = models.CharField(max_length=200)
+    
+    # Optional fields
+    language = models.CharField(
+        max_length=20,
+        choices=[
+            ('English', 'English'),
+            ('Arabic', 'Arabic (العربية)'),
+            ('Spanish', 'Spanish (Español)'),
+            ('French', 'French (Français)'),
+            ('German', 'German (Deutsch)'),
+        ],
+        default='English'
+    )
+    company_website = models.URLField(blank=True)
+    how_to_apply = models.TextField(blank=True)
+    
+    
+    class Meta:
+        db_table = 'job_posting_generator_requests'
+        verbose_name = 'Job Posting Generator Request'
+        verbose_name_plural = 'Job Posting Generator Requests'
+
+
+class JobPostingGeneratorResponse(BaseAgentResponse):
+    """Job Posting Generator response storage"""
+    
+    request = models.OneToOneField(
+        JobPostingGeneratorRequest, 
+        on_delete=models.CASCADE, 
+        related_name='response'
+    )
+    
+    # Agent-specific response fields
+    job_posting_content = models.TextField(blank=True)
+    formatted_posting = models.TextField(blank=True)
+    raw_response = models.JSONField(default=dict, blank=True)
+    
+    
+    class Meta:
+        db_table = 'job_posting_generator_responses'
+        verbose_name = 'Job Posting Generator Response'
+        verbose_name_plural = 'Job Posting Generator Responses'

job_posting_generator/processor.py

@@ -0,0 +1,105 @@
+from agent_base.processors import StandardWebhookProcessor
+from django.utils import timezone
+from django.conf import settings
+from .models import JobPostingGeneratorRequest, JobPostingGeneratorResponse
+import json
+
+
+class JobPostingGeneratorProcessor(StandardWebhookProcessor):
+    """Webhook processor for Job Posting Generator agent"""
+    
+    agent_slug = 'job-posting-generator'
+    webhook_url = settings.N8N_WEBHOOK_JOB_POSTING
+    agent_id = 'job-posting'
+    
+    def prepare_message_text(self, **kwargs):
+        """Prepare detailed job posting prompt for N8N webhook"""
+        request_obj = kwargs.get('request_obj')
+        if not request_obj:
+            return "Create a professional job posting"
+        
+        # Build comprehensive job posting prompt
+        prompt = f"""
+Create a professional job posting for the following position:
+
+Job Title: {request_obj.job_title}
+Company: {request_obj.company_name}
+Location: {request_obj.location}
+Contract Type: {request_obj.get_contract_type_display()}
+Seniority Level: {request_obj.get_seniority_level_display()}
+Language: {request_obj.language}
+
+Job Description:
+{request_obj.job_description}
+"""
+        
+        if request_obj.company_website:
+            prompt += f"\nCompany Website: {request_obj.company_website}"
+        
+        if request_obj.how_to_apply:
+            prompt += f"\n\nApplication Instructions:\n{request_obj.how_to_apply}"
+        
+        prompt += "\n\nPlease create a comprehensive, professional job posting that includes all necessary sections such as job overview, responsibilities, qualifications, benefits, and clear application instructions."
+        
+        return prompt
+    
+    def process_response(self, response_data, request_obj):
+        """Process webhook response"""
+        try:
+            request_obj.status = 'processing'
+            request_obj.save()
+            
+            # Handle array response from N8N (extract first item)
+            if isinstance(response_data, list) and len(response_data) > 0:
+                response_data = response_data[0]
+            
+            # Extract job posting content
+            job_posting_content = ""
+            if isinstance(response_data, dict):
+                job_posting_content = response_data.get('output', response_data.get('text', response_data.get('content', '')))
+            elif isinstance(response_data, str):
+                job_posting_content = response_data
+            
+            # Determine success based on response
+            success = bool(job_posting_content.strip()) and len(job_posting_content.strip()) > 50
+            
+            # Create response object
+            response_obj = JobPostingGeneratorResponse.objects.create(
+                request=request_obj,
+                success=success,
+                processing_time=response_data.get('processing_time', 0) if isinstance(response_data, dict) else 0,
+                job_posting_content=job_posting_content,
+                formatted_posting=job_posting_content,  # Same content for now
+                raw_response=response_data if isinstance(response_data, dict) else {'content': response_data}
+            )
+            
+            # Only deduct wallet balance after successful processing
+            if success:
+                request_obj.user.deduct_balance(
+                    request_obj.cost,
+                    f"Job Posting Generator - {request_obj.job_title} at {request_obj.company_name}",
+                    'job-posting-generator'
+                )
+                print(f"{self.agent_slug}: Wallet deducted {request_obj.cost} AED for successful processing")
+            
+            # Update request as completed
+            request_obj.status = 'completed' if success else 'failed'
+            request_obj.processed_at = timezone.now()
+            request_obj.save()
+            
+            return response_obj
+            
+        except Exception as e:
+            # Handle error
+            request_obj.status = 'failed'
+            request_obj.save()
+            
+            # Create error response
+            error_response = JobPostingGeneratorResponse.objects.create(
+                request=request_obj,
+                success=False,
+                error_message=str(e),
+                processing_time=0
+            )
+            
+            raise Exception(f"Failed to process Job Posting Generator response: {e}")

job_posting_generator/templates/job_posting_generator/detail.html

@@ -0,0 +1,850 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Job Posting Generator Agent - NetCop AI Hub</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        
+        html, body {
+            margin: 0;
+            padding: 0;
+            font-family: system-ui, -apple-system, sans-serif;
+            overflow-x: hidden;
+        }
+        
+        /* Responsive utilities */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 clamp(16px, 4vw, 24px);
+        }
+        
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+            gap: clamp(16px, 4vw, 24px);
+            align-items: start;
+        }
+        
+        .card {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: clamp(12px, 3vw, 16px);
+            padding: clamp(16px, 4vw, 24px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            margin-bottom: clamp(16px, 4vw, 24px);
+        }
+        
+        .form-group {
+            margin-bottom: clamp(12px, 3vw, 16px);
+        }
+        
+        .form-group label {
+            display: block;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: clamp(6px, 2vw, 8px);
+            font-size: clamp(14px, 3.5vw, 16px);
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 20px);
+            border: 2px solid #e5e7eb;
+            border-radius: clamp(8px, 2vw, 12px);
+            font-size: clamp(14px, 3.5vw, 16px);
+            transition: border-color 0.2s ease;
+            min-height: 48px;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #f59e0b;
+        }
+        
+        .form-control.textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+        
+        .btn {
+            padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 32px);
+            border: none;
+            border-radius: clamp(8px, 2vw, 12px);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: clamp(14px, 3.5vw, 16px);
+            min-height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
+        }
+        
+        .btn-primary:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+            transform: none;
+        }
+        
+        .form-row {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+            gap: clamp(12px, 3vw, 16px);
+        }
+        
+        .processing-status {
+            padding: clamp(16px, 4vw, 20px);
+            background: #fffbeb;
+            border: 1px solid #f59e0b;
+            border-radius: clamp(8px, 2vw, 12px);
+            color: #d97706;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: clamp(16px, 4vw, 24px);
+            display: none;
+        }
+        
+        .job-posting-results {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            margin-top: 24px;
+            display: none;
+        }
+        
+        .help-text {
+            font-size: clamp(12px, 3vw, 14px);
+            color: #6b7280;
+            margin-top: 8px;
+        }
+        
+        .section-title {
+            font-size: clamp(16px, 4vw, 18px);
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: clamp(12px, 3vw, 16px);
+        }
+        
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fca5a5;
+            color: #dc2626;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        
+        .success-message {
+            background: #f0fdf4;
+            border: 1px solid #86efac;
+            color: #166534;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        
+        .job-posting-content {
+            background: #f8fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 12px;
+            padding: 24px;
+            line-height: 1.7;
+            color: #374151;
+            white-space: pre-wrap;
+        }
+        
+        .job-posting-content h1, .job-posting-content h2, .job-posting-content h3 {
+            color: #1f2937;
+            margin-top: 24px;
+            margin-bottom: 12px;
+        }
+        
+        .job-posting-content h1 {
+            font-size: 28px;
+            border-bottom: 2px solid #f59e0b;
+            padding-bottom: 8px;
+        }
+        
+        .job-posting-content h2 {
+            font-size: 22px;
+            color: #d97706;
+        }
+        
+        .job-posting-content h3 {
+            font-size: 18px;
+            color: #92400e;
+        }
+        
+        .job-posting-content ul, .job-posting-content ol {
+            padding-left: 20px;
+            margin: 12px 0;
+        }
+        
+        .job-posting-content li {
+            margin: 8px 0;
+        }
+        
+        .job-posting-content strong {
+            color: #1f2937;
+            font-weight: 600;
+        }
+        
+        .job-posting-content em {
+            color: #6b7280;
+            font-style: italic;
+        }
+        
+        /* Mobile optimizations */
+        @media (max-width: 768px) {
+            .grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div style="
+        min-height: 100vh;
+        background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
+        padding: clamp(20px, 5vw, 40px) 0;
+    ">
+        <!-- Header -->
+        <nav style="
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            padding: 16px 0;
+            margin-bottom: 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        ">
+            <div class="container">
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <div style="display: flex; align-items: center; gap: 16px;">
+                        <a href="{% url 'core:homepage' %}" style="
+                            font-size: 24px;
+                            font-weight: 700;
+                            color: #f59e0b;
+                            text-decoration: none;
+                        ">
+                            🚀 NetCop AI Hub
+                        </a>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 16px;">
+                        <a href="{% url 'core:marketplace' %}" style="color: #374151; text-decoration: none; font-weight: 500;">Marketplace</a>
+                        {% if user.is_authenticated %}
+                            <a href="{% url 'authentication:profile' %}" style="color: #374151; text-decoration: none; font-weight: 500;">Profile</a>
+                            <span style="color: #6b7280;" data-wallet-balance>{{ user.wallet_balance|floatformat:2 }} AED</span>
+                        {% else %}
+                            <a href="{% url 'authentication:login' %}" style="color: #f59e0b; text-decoration: none; font-weight: 600;">Login</a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </nav>
+        
+        <div class="container">
+            <!-- Page Title -->
+            <div style="text-align: center; margin-bottom: clamp(24px, 6vw, 40px);">
+                <h1 style="
+                    font-size: clamp(28px, 7vw, 36px);
+                    font-weight: 700;
+                    color: #1f2937;
+                    margin: 0 0 clamp(12px, 3vw, 16px) 0;
+                ">
+                    💼 Job Posting Generator Agent
+                </h1>
+                <p style="
+                    font-size: clamp(16px, 4vw, 18px);
+                    color: #6b7280;
+                    margin: 0;
+                    max-width: 600px;
+                    margin: 0 auto;
+                ">
+                    Create professional job postings with detailed requirements, company culture integration, and SEO optimization.
+                </p>
+                <div style="
+                    background: rgba(245, 158, 11, 0.1);
+                    color: #d97706;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    display: inline-block;
+                    margin-top: 12px;
+                    font-size: clamp(14px, 3.5vw, 16px);
+                    font-weight: 600;
+                ">
+                    💰 Cost: 4.00 AED
+                </div>
+            </div>
+            
+            <!-- Messages -->
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="{% if message.tags == 'error' %}error-message{% else %}success-message{% endif %}">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+            
+            <!-- Main Content -->
+            <div class="grid">
+                <!-- Job Posting Form -->
+                <div>
+                    <form method="POST" id="jobPostingForm">
+                        {% csrf_token %}
+                        
+                        <!-- Basic Information -->
+                        <div class="card">
+                            <h3 class="section-title">📝 Basic Information</h3>
+                            
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="job_title">Job Title *</label>
+                                    <input
+                                        type="text"
+                                        name="job_title"
+                                        id="job_title"
+                                        class="form-control"
+                                        placeholder="e.g., Senior Software Engineer"
+                                        required
+                                    />
+                                </div>
+                                
+                                <div class="form-group">
+                                    <label for="company_name">Company Name *</label>
+                                    <input
+                                        type="text"
+                                        name="company_name"
+                                        id="company_name"
+                                        class="form-control"
+                                        placeholder="e.g., TechCorp Inc."
+                                        required
+                                    />
+                                </div>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="job_description">Job Description *</label>
+                                <textarea
+                                    name="job_description"
+                                    id="job_description"
+                                    class="form-control textarea"
+                                    placeholder="Describe the role, responsibilities, and what makes this position unique..."
+                                    required
+                                ></textarea>
+                                <div class="help-text">
+                                    Include key responsibilities, day-to-day tasks, and what success looks like in this role.
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Position Details -->
+                        <div class="card">
+                            <h3 class="section-title">🎯 Position Details</h3>
+                            
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="seniority_level">Seniority Level *</label>
+                                    <select name="seniority_level" id="seniority_level" class="form-control" required>
+                                        <option value="">Select Level</option>
+                                        <option value="entry">Entry Level (0-2 years)</option>
+                                        <option value="mid">Mid Level (2-5 years)</option>
+                                        <option value="senior">Senior Level (5-8 years)</option>
+                                        <option value="lead">Lead/Principal (8+ years)</option>
+                                        <option value="executive">Executive/C-Level</option>
+                                    </select>
+                                </div>
+                                
+                                <div class="form-group">
+                                    <label for="contract_type">Contract Type *</label>
+                                    <select name="contract_type" id="contract_type" class="form-control" required>
+                                        <option value="">Select Type</option>
+                                        <option value="full-time">Full-time</option>
+                                        <option value="part-time">Part-time</option>
+                                        <option value="contract">Contract</option>
+                                        <option value="freelance">Freelance</option>
+                                        <option value="internship">Internship</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="location">Location *</label>
+                                    <input
+                                        type="text"
+                                        name="location"
+                                        id="location"
+                                        class="form-control"
+                                        placeholder="e.g., Dubai, UAE or Remote"
+                                        required
+                                    />
+                                </div>
+                                
+                                <div class="form-group">
+                                    <label for="language">Language *</label>
+                                    <select name="language" id="language" class="form-control" required>
+                                        <option value="English">English</option>
+                                        <option value="Arabic">Arabic (العربية)</option>
+                                        <option value="Spanish">Spanish (Español)</option>
+                                        <option value="French">French (Français)</option>
+                                        <option value="German">German (Deutsch)</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Company Information -->
+                        <div class="card">
+                            <h3 class="section-title">🏢 Company Information</h3>
+                            
+                            <div class="form-group">
+                                <label for="company_website">Company Website</label>
+                                <input
+                                    type="url"
+                                    name="company_website"
+                                    id="company_website"
+                                    class="form-control"
+                                    placeholder="https://company.com"
+                                />
+                                <div class="help-text">
+                                    Optional: Include company website for better context and SEO.
+                                </div>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="how_to_apply">How to Apply</label>
+                                <textarea
+                                    name="how_to_apply"
+                                    id="how_to_apply"
+                                    class="form-control textarea"
+                                    placeholder="Instructions for candidates on how to apply..."
+                                ></textarea>
+                                <div class="help-text">
+                                    Optional: Specific application instructions, required documents, or contact information.
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Processing Status -->
+                        <div class="processing-status" id="processingStatus">
+                            <div style="font-size: clamp(16px, 4vw, 18px); margin-bottom: 8px;">
+                                ⏳ Processing...
+                            </div>
+                            <div style="font-size: clamp(14px, 3.5vw, 16px);">
+                                Creating your professional job posting...
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                
+                <!-- Sidebar -->
+                <div>
+                    <!-- Wallet Balance Card -->
+                    <div class="card">
+                        <h3 class="section-title">💳 Your Wallet</h3>
+                        
+                        <div style="margin-bottom: clamp(16px, 4vw, 20px);">
+                            <div style="font-size: clamp(24px, 6vw, 28px); font-weight: 700; color: #1f2937;" data-wallet-balance>
+                                {% if user.is_authenticated %}
+                                    {{ user.wallet_balance|floatformat:2 }} AED
+                                {% else %}
+                                    0.00 AED
+                                {% endif %}
+                            </div>
+                            <div style="font-size: clamp(14px, 3.5vw, 16px); color: #6b7280;">
+                                Available Balance
+                            </div>
+                        </div>
+                        
+                        {% if user.is_authenticated %}
+                            {% if user.wallet_balance >= 4.00 %}
+                                <button
+                                    type="submit"
+                                    form="jobPostingForm"
+                                    class="btn btn-primary"
+                                    style="width: 100%; margin-bottom: 12px;"
+                                    id="generateButton"
+                                >
+                                    💼 Generate Job Posting (4.00 AED)
+                                </button>
+                            {% else %}
+                                <div style="
+                                    background: #fef2f2;
+                                    border: 1px solid #fca5a5;
+                                    color: #dc2626;
+                                    padding: 12px;
+                                    border-radius: 8px;
+                                    text-align: center;
+                                    font-size: clamp(14px, 3.5vw, 16px);
+                                    margin-bottom: 12px;
+                                ">
+                                    Insufficient balance! You need 4.00 AED.
+                                </div>
+                                <a href="{% url 'core:wallet' %}" class="btn btn-primary" style="width: 100%; text-decoration: none;">
+                                    💰 Top Up Wallet
+                                </a>
+                            {% endif %}
+                        {% else %}
+                            <a href="{% url 'authentication:login' %}" class="btn btn-primary" style="width: 100%; text-decoration: none;">
+                                🔑 Login to Continue
+                            </a>
+                        {% endif %}
+                    </div>
+                    
+                    <!-- Usage Info -->
+                    <div style="
+                        padding: 16px;
+                        background: rgba(245, 158, 11, 0.1);
+                        border-radius: 12px;
+                        border: 1px solid rgba(245, 158, 11, 0.2);
+                    ">
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #d97706;">
+                            💡 How it works
+                        </h4>
+                        <ul style="margin: 0; font-size: 12px; color: #374151; line-height: 1.4; list-style: none; padding-left: 0;">
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #f59e0b;">•</span>
+                                Enter job and company details
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #f59e0b;">•</span>
+                                AI generates professional posting
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #f59e0b;">•</span>
+                                Includes requirements & culture
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #f59e0b;">•</span>
+                                SEO optimized for job boards
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Job Posting Results -->
+            <div class="job-posting-results" id="jobPostingResults">
+                <!-- Status Header -->
+                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+                    <div style="font-size: 24px;">✅</div>
+                    <h3 style="font-size: 20px; font-weight: 600; color: #1f2937; margin: 0;">
+                        Professional Job Posting
+                    </h3>
+                    <div style="
+                        background: #f59e0b;
+                        color: white;
+                        padding: 6px 12px;
+                        border-radius: 6px;
+                        font-size: 14px;
+                        font-weight: 600;
+                        margin-left: auto;
+                    ">
+                        ✅ Complete
+                    </div>
+                </div>
+                
+                <!-- Job Posting Content -->
+                <div class="job-posting-content" id="jobPostingContent">
+                    <!-- Content will be populated here -->
+                </div>
+                
+                <!-- Download/Copy Actions -->
+                <div style="
+                    margin-top: 20px;
+                    padding-top: 20px;
+                    border-top: 1px solid #e5e7eb;
+                    display: flex;
+                    gap: 12px;
+                    flex-wrap: wrap;
+                ">
+                    <button
+                        onclick="copyJobPosting()"
+                        class="btn btn-primary"
+                        style="flex: 1; min-width: 120px;"
+                    >
+                        📋 Copy Job Posting
+                    </button>
+                    
+                    <button
+                        onclick="downloadJobPosting()"
+                        class="btn"
+                        style="
+                            flex: 1;
+                            min-width: 120px;
+                            background: white;
+                            color: #374151;
+                            border: 2px solid #e5e7eb;
+                        "
+                    >
+                        💾 Download Posting
+                    </button>
+
+                    <button
+                        onclick="resetForm()"
+                        class="btn"
+                        style="
+                            flex: 1;
+                            min-width: 120px;
+                            background: #f59e0b;
+                            color: white;
+                        "
+                    >
+                        🔄 Create Another
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        <footer style="
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            padding: 24px 0;
+            margin-top: 48px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            text-align: center;
+            color: #6b7280;
+        ">
+            <div class="container">
+                <p style="margin: 0; font-size: 14px;">
+                    © 2024 NetCop AI Hub. Powered by AI agents.
+                </p>
+            </div>
+        </footer>
+    </div>
+    
+    <script>
+        // Copy job posting to clipboard
+        function copyJobPosting() {
+            const jobText = generateJobText();
+            navigator.clipboard.writeText(jobText).then(() => {
+                showToast('📋 Job posting copied to clipboard!', 'success');
+            }).catch(() => {
+                showToast('Failed to copy job posting', 'error');
+            });
+        }
+        
+        // Download job posting as text file
+        function downloadJobPosting() {
+            const jobText = generateJobText();
+            const blob = new Blob([jobText], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'job-posting-' + Date.now() + '.txt';
+            a.click();
+            URL.revokeObjectURL(url);
+            showToast('💾 Job posting downloaded!', 'success');
+        }
+        
+        // Generate job text for copy/download
+        function generateJobText() {
+            const content = document.querySelector('#jobPostingContent');
+            if (content) {
+                return content.textContent || content.innerText || '';
+            }
+            return 'No job posting content available';
+        }
+
+        // Reset form for creating another job posting
+        function resetForm() {
+            document.getElementById('jobPostingForm').reset();
+            document.getElementById('jobPostingResults').style.display = 'none';
+            document.getElementById('processingStatus').style.display = 'none';
+            document.getElementById('generateButton').disabled = false;
+            document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+            showToast('Form reset! Ready for another job posting.', 'success');
+        }
+        
+        // Simple toast notification
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                padding: 12px 20px;
+                border-radius: 8px;
+                color: white;
+                font-weight: 600;
+                z-index: 1000;
+                ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'}
+            `;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            
+            setTimeout(() => {
+                toast.remove();
+            }, 3000);
+        }
+
+        // Update wallet balance display
+        function updateWalletBalance(newBalance) {
+            const balanceElements = document.querySelectorAll('[data-wallet-balance]');
+            balanceElements.forEach(element => {
+                element.textContent = `${newBalance.toFixed(2)} AED`;
+            });
+            window.currentWalletBalance = newBalance;
+        }
+
+        // Display job posting results
+        function displayResults(result) {
+            const resultsContainer = document.getElementById('jobPostingResults');
+            const contentContainer = document.getElementById('jobPostingContent');
+            
+            if (result.success && result.status === 'completed') {
+                contentContainer.textContent = result.content || result.job_posting_content || result.output_text || 'Job posting generated successfully!';
+                resultsContainer.style.display = 'block';
+                
+                // Update wallet balance if provided
+                if (result.wallet_balance !== undefined) {
+                    updateWalletBalance(result.wallet_balance);
+                }
+                
+                showToast('✅ Job posting created and payment processed!', 'success');
+            } else {
+                showToast('❌ Failed to generate job posting - no charge applied', 'error');
+            }
+        }
+
+        // Poll for results
+        function pollForResults(requestId) {
+            let pollCount = 0;
+            const maxPolls = 30; // 30 seconds maximum
+            
+            const pollInterval = setInterval(() => {
+                pollCount++;
+                
+                fetch(`/agents/job-posting-generator/status/${requestId}/`)
+                    .then(response => response.json())
+                    .then(result => {
+                        if (result.status === 'completed' || result.status === 'failed') {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                            
+                            displayResults(result);
+                        } else if (pollCount >= maxPolls) {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                            showToast('❌ Processing timeout - please try again', 'error');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error polling results:', error);
+                        if (pollCount >= maxPolls) {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                            showToast('❌ Network error - please try again', 'error');
+                        }
+                    });
+            }, 1000);
+        }
+        
+        // Handle form submission
+        document.getElementById('jobPostingForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const jobTitle = document.getElementById('job_title').value.trim();
+            const companyName = document.getElementById('company_name').value.trim();
+            const jobDescription = document.getElementById('job_description').value.trim();
+            const seniorityLevel = document.getElementById('seniority_level').value;
+            const contractType = document.getElementById('contract_type').value;
+            const location = document.getElementById('location').value.trim();
+            
+            if (!jobTitle || !companyName || !jobDescription || !seniorityLevel || !contractType || !location) {
+                showToast('Please fill in all required fields', 'error');
+                return;
+            }
+            
+            // Check user authentication
+            {% if not user.is_authenticated %}
+            window.location.href = "{% url 'authentication:login' %}";
+            return;
+            {% endif %}
+            
+            // Check wallet balance
+            const balance = {{ user.wallet_balance|default:0 }};
+            if (balance < 4.00) {
+                showToast('Insufficient balance! You need 4.00 AED.', 'error');
+                setTimeout(() => {
+                    window.location.href = "{% url 'core:wallet' %}";
+                }, 2000);
+                return;
+            }
+
+            // Show processing status
+            document.getElementById('processingStatus').style.display = 'block';
+            document.getElementById('generateButton').disabled = true;
+            document.getElementById('generateButton').innerHTML = '⏳ Processing...';
+            document.getElementById('jobPostingResults').style.display = 'none';
+
+            // Submit form via AJAX
+            const formData = new FormData(this);
+            
+            fetch(window.location.href, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(result => {
+                if (result.success && result.request_id) {
+                    // Start polling for results
+                    pollForResults(result.request_id);
+                } else {
+                    // Handle immediate response
+                    document.getElementById('processingStatus').style.display = 'none';
+                    document.getElementById('generateButton').disabled = false;
+                    document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                    
+                    if (result.error) {
+                        showToast(`❌ ${result.error}`, 'error');
+                    } else {
+                        displayResults(result);
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                document.getElementById('processingStatus').style.display = 'none';
+                document.getElementById('generateButton').disabled = false;
+                document.getElementById('generateButton').innerHTML = '💼 Generate Job Posting (4.00 AED)';
+                showToast('❌ Network error - please try again', 'error');
+            });
+        });
+    </script>
+</body>
+</html>

job_posting_generator/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+app_name = 'job_posting_generator'
+
+urlpatterns = [
+    path('', views.job_posting_generator_detail, name='detail'),
+    path('status/<uuid:request_id>/', views.job_posting_generator_result, name='status'),
+]

job_posting_generator/views.py

@@ -0,0 +1,172 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.utils.decorators import method_decorator
+from django.views import View
+from agent_base.models import BaseAgent
+from .models import JobPostingGeneratorRequest, JobPostingGeneratorResponse
+from .processor import JobPostingGeneratorProcessor
+import json
+
+
+def job_posting_generator_detail(request):
+    """Detail page for Job Posting Generator agent"""
+    try:
+        agent = BaseAgent.objects.get(slug='job-posting-generator')
+    except BaseAgent.DoesNotExist:
+        messages.error(request, 'Job Posting Generator agent not found.')
+        return redirect('core:homepage')
+    
+    if request.method == 'POST':
+        # Handle AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            if not request.user.is_authenticated:
+                return JsonResponse({'error': 'Authentication required'}, status=401)
+            
+            # Check wallet balance
+            if not request.user.has_sufficient_balance(agent.price):
+                return JsonResponse({'error': 'Insufficient wallet balance'}, status=400)
+            
+            try:
+                # Create request object (no wallet deduction yet)
+                agent_request = JobPostingGeneratorRequest.objects.create(
+                    user=request.user,
+                    agent=agent,
+                    cost=agent.price,
+                    job_title=request.POST.get('job_title'),
+                    company_name=request.POST.get('company_name'),
+                    job_description=request.POST.get('job_description'),
+                    seniority_level=request.POST.get('seniority_level'),
+                    contract_type=request.POST.get('contract_type'),
+                    location=request.POST.get('location'),
+                    language=request.POST.get('language', 'English'),
+                    company_website=request.POST.get('company_website', ''),
+                    how_to_apply=request.POST.get('how_to_apply', ''),
+                )
+                
+                # Process request
+                processor = JobPostingGeneratorProcessor()
+                result = processor.process_request(
+                    request_obj=agent_request,
+                    user_id=request.user.id,
+                )
+                
+                # Refresh user from database to get updated wallet balance
+                request.user.refresh_from_db()
+                
+                return JsonResponse({
+                    'success': True,
+                    'request_id': str(agent_request.id),
+                    'message': 'Job posting generation started',
+                    'wallet_balance': float(request.user.wallet_balance)
+                })
+                
+            except Exception as e:
+                return JsonResponse({'error': str(e)}, status=500)
+        
+        # Regular form submission (redirect to avoid resubmission)
+        return redirect('job_posting_generator:detail')
+    
+    # GET request - show form
+    context = {
+        'agent': agent,
+    }
+    return render(request, 'job_posting_generator/detail.html', context)
+
+
+@method_decorator(csrf_exempt, name='dispatch')
+class JobPostingGeneratorProcessView(View):
+    """Process Job Posting Generator requests"""
+    
+    def post(self, request):
+        if not request.user.is_authenticated:
+            return JsonResponse({'error': 'Authentication required'}, status=401)
+        
+        try:
+            # Parse request data
+            data = json.loads(request.body)
+            
+            # Get agent
+            agent = BaseAgent.objects.get(slug='job-posting-generator')
+            
+            # Check wallet balance
+            if not request.user.has_sufficient_balance(agent.price):
+                return JsonResponse({'error': 'Insufficient wallet balance'}, status=400)
+            
+            # Create request object (no wallet deduction yet - only after successful processing)
+            agent_request = JobPostingGeneratorRequest.objects.create(
+                user=request.user,
+                agent=agent,
+                cost=agent.price,
+                job_title=data.get('job_title'),
+                company_name=data.get('company_name'),
+                job_description=data.get('job_description'),
+                seniority_level=data.get('seniority_level'),
+                contract_type=data.get('contract_type'),
+                location=data.get('location'),
+                language=data.get('language', 'English'),
+                company_website=data.get('company_website', ''),
+                how_to_apply=data.get('how_to_apply', ''),
+            )
+            
+            # Process request
+            processor = JobPostingGeneratorProcessor()
+            result = processor.process_request(
+                request_obj=agent_request,
+                user_id=request.user.id,
+            )
+            
+            # Refresh user from database to get updated wallet balance
+            request.user.refresh_from_db()
+            
+            return JsonResponse({
+                'success': True,
+                'request_id': str(agent_request.id),
+                'message': 'Job Posting Generator request processed successfully',
+                'wallet_balance': float(request.user.wallet_balance)
+            })
+            
+        except BaseAgent.DoesNotExist:
+            return JsonResponse({'error': 'Job Posting Generator agent not found'}, status=404)
+        except Exception as e:
+            return JsonResponse({'error': str(e)}, status=500)
+
+
+@login_required
+def job_posting_generator_result(request, request_id):
+    """Get result for a specific request"""
+    try:
+        agent_request = JobPostingGeneratorRequest.objects.get(
+            id=request_id,
+            user=request.user
+        )
+        
+        if hasattr(agent_request, 'response'):
+            response = agent_request.response
+            # Refresh user to get current wallet balance
+            request.user.refresh_from_db()
+            
+            return JsonResponse({
+                'success': response.success,
+                'status': agent_request.status,
+                'content': getattr(response, 'job_posting_content', None),
+                'job_posting_content': getattr(response, 'job_posting_content', None),
+                'formatted_posting': getattr(response, 'formatted_posting', None),
+                'raw_response': getattr(response, 'raw_response', None),
+                'processing_time': float(response.processing_time) if response.processing_time else None,
+                'error_message': response.error_message,
+                'wallet_balance': float(request.user.wallet_balance)
+            })
+        else:
+            return JsonResponse({
+                'success': False,
+                'status': agent_request.status,
+                'message': 'Processing in progress...'
+            })
+            
+    except JobPostingGeneratorRequest.DoesNotExist:
+        return JsonResponse({'error': 'Request not found'}, status=404)
+    except Exception as e:
+        return JsonResponse({'error': str(e)}, status=500)

netcop_hub/settings.py

@@ -49,6 +49,8 @@ INSTALLED_APPS = [
     'agent_base',
     'weather_reporter',
     'data_analyzer',
+    'job_posting_generator',
+    'social_ads_generator',
 ]
 
 MIDDLEWARE = [

netcop_hub/urls.py

@@ -24,6 +24,8 @@ urlpatterns = [
     path('auth/', include('authentication.urls')),
     path('agents/weather-reporter/', include('weather_reporter.urls')),
     path('agents/data-analyzer/', include('data_analyzer.urls')),
+    path('agents/job-posting-generator/', include('job_posting_generator.urls')),
+    path('agents/social-ads-generator/', include('social_ads_generator.urls')),
     path('', include('core.urls')),
 ]
 

social_ads_generator/__init__.py

@@ -0,0 +1 @@
+# Social Ads Generator Agent App

social_ads_generator/admin.py

@@ -0,0 +1,19 @@
+from django.contrib import admin
+from .models import SocialAdsGeneratorRequest, SocialAdsGeneratorResponse
+
+
+@admin.register(SocialAdsGeneratorRequest)
+class SocialAdsGeneratorRequestAdmin(admin.ModelAdmin):
+    list_display = ['id', 'user', 'status', 'created_at', 'cost']
+    list_filter = ['status', 'created_at']
+    search_fields = ['user__email', 'user__username']
+    readonly_fields = ['id', 'created_at', 'processed_at']
+    ordering = ['-created_at']
+
+
+@admin.register(SocialAdsGeneratorResponse)
+class SocialAdsGeneratorResponseAdmin(admin.ModelAdmin):
+    list_display = ['id', 'request', 'success', 'created_at']
+    list_filter = ['success', 'created_at']
+    readonly_fields = ['id', 'created_at']
+    ordering = ['-created_at']

social_ads_generator/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class SocialAdsGeneratorConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'social_ads_generator'

social_ads_generator/migrations/0001_initial.py

@@ -0,0 +1,61 @@
+# Generated by Django 5.2.4 on 2025-07-10 12:33
+
+import django.db.models.deletion
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('agent_base', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='SocialAdsGeneratorRequest',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('status', models.CharField(choices=[('pending', 'Pending'), ('processing', 'Processing'), ('completed', 'Completed'), ('failed', 'Failed')], default='pending', max_length=20)),
+                ('cost', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('processed_at', models.DateTimeField(blank=True, null=True)),
+                ('description', models.TextField(help_text='Product/service description')),
+                ('social_platform', models.CharField(choices=[('facebook', 'Facebook'), ('instagram', 'Instagram'), ('twitter', 'Twitter'), ('linkedin', 'LinkedIn'), ('tiktok', 'TikTok'), ('youtube', 'YouTube')], default='facebook', max_length=20)),
+                ('include_emoji', models.BooleanField(default=False, help_text='Include emojis in ad copy')),
+                ('language', models.CharField(choices=[('English', 'English'), ('Arabic', 'Arabic (العربية)'), ('Spanish', 'Spanish (Español)'), ('French', 'French (Français)'), ('German', 'German (Deutsch)'), ('Chinese', 'Chinese (中文)')], default='English', max_length=20)),
+                ('agent', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='agent_base.baseagent')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': 'Social Ads Generator Request',
+                'verbose_name_plural': 'Social Ads Generator Requests',
+                'db_table': 'social_ads_generator_requests',
+            },
+        ),
+        migrations.CreateModel(
+            name='SocialAdsGeneratorResponse',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('success', models.BooleanField(default=False)),
+                ('error_message', models.TextField(blank=True)),
+                ('processing_time', models.DecimalField(blank=True, decimal_places=2, max_digits=10, null=True)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('ad_copy', models.TextField(blank=True, help_text='Generated ad copy')),
+                ('hashtags', models.TextField(blank=True, help_text='Suggested hashtags')),
+                ('targeting_suggestions', models.TextField(blank=True, help_text='Audience targeting suggestions')),
+                ('formatted_ad', models.TextField(blank=True, help_text='Formatted ad content')),
+                ('raw_response', models.JSONField(blank=True, default=dict)),
+                ('request', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='response', to='social_ads_generator.socialadsgeneratorrequest')),
+            ],
+            options={
+                'verbose_name': 'Social Ads Generator Response',
+                'verbose_name_plural': 'Social Ads Generator Responses',
+                'db_table': 'social_ads_generator_responses',
+            },
+        ),
+    ]

social_ads_generator/models.py

@@ -0,0 +1,66 @@
+from django.db import models
+from decimal import Decimal
+from agent_base.models import BaseAgentRequest, BaseAgentResponse
+
+
+class SocialAdsGeneratorRequest(BaseAgentRequest):
+    """Social Ads Generator request tracking"""
+    
+    # Required fields
+    description = models.TextField(help_text="Product/service description")
+    social_platform = models.CharField(
+        max_length=20,
+        choices=[
+            ('facebook', 'Facebook'),
+            ('instagram', 'Instagram'),
+            ('twitter', 'Twitter'),
+            ('linkedin', 'LinkedIn'),
+            ('tiktok', 'TikTok'),
+            ('youtube', 'YouTube'),
+        ],
+        default='facebook'
+    )
+    
+    # Optional fields
+    include_emoji = models.BooleanField(default=False, help_text="Include emojis in ad copy")
+    language = models.CharField(
+        max_length=20,
+        choices=[
+            ('English', 'English'),
+            ('Arabic', 'Arabic (العربية)'),
+            ('Spanish', 'Spanish (Español)'),
+            ('French', 'French (Français)'),
+            ('German', 'German (Deutsch)'),
+            ('Chinese', 'Chinese (中文)'),
+        ],
+        default='English'
+    )
+    
+    
+    class Meta:
+        db_table = 'social_ads_generator_requests'
+        verbose_name = 'Social Ads Generator Request'
+        verbose_name_plural = 'Social Ads Generator Requests'
+
+
+class SocialAdsGeneratorResponse(BaseAgentResponse):
+    """Social Ads Generator response storage"""
+    
+    request = models.OneToOneField(
+        SocialAdsGeneratorRequest, 
+        on_delete=models.CASCADE, 
+        related_name='response'
+    )
+    
+    # Agent-specific response fields
+    ad_copy = models.TextField(blank=True, help_text="Generated ad copy")
+    hashtags = models.TextField(blank=True, help_text="Suggested hashtags")
+    targeting_suggestions = models.TextField(blank=True, help_text="Audience targeting suggestions")
+    formatted_ad = models.TextField(blank=True, help_text="Formatted ad content")
+    raw_response = models.JSONField(default=dict, blank=True)
+    
+    
+    class Meta:
+        db_table = 'social_ads_generator_responses'
+        verbose_name = 'Social Ads Generator Response'
+        verbose_name_plural = 'Social Ads Generator Responses'

social_ads_generator/processor.py

@@ -0,0 +1,121 @@
+from agent_base.processors import StandardWebhookProcessor
+from django.utils import timezone
+from django.conf import settings
+from .models import SocialAdsGeneratorRequest, SocialAdsGeneratorResponse
+import json
+
+
+class SocialAdsGeneratorProcessor(StandardWebhookProcessor):
+    """Webhook processor for Social Ads Generator agent"""
+    
+    agent_slug = 'social-ads-generator'
+    webhook_url = settings.N8N_WEBHOOK_SOCIAL_ADS
+    agent_id = 'social-ads'
+    
+    def prepare_message_text(self, **kwargs):
+        """Prepare detailed social ads prompt for N8N webhook"""
+        request_obj = kwargs.get('request_obj')
+        if not request_obj:
+            return "Create a social media advertisement"
+        
+        # Build comprehensive social ads prompt
+        prompt = f"""
+Create a compelling social media advertisement for the following:
+
+Product/Service Description:
+{request_obj.description}
+
+Target Platform: {request_obj.get_social_platform_display()}
+Language: {request_obj.language}
+Include Emojis: {'Yes' if request_obj.include_emoji else 'No'}
+
+Please create platform-optimized ad copy that:
+- Captures attention instantly
+- Highlights key benefits and unique selling points
+- Uses persuasive messaging that motivates action
+- Includes a strong call-to-action
+- Is tailored to {request_obj.get_social_platform_display()} audience
+- Uses {request_obj.language} language
+"""
+        
+        if request_obj.include_emoji:
+            prompt += "\n- Incorporates relevant emojis for engagement"
+        
+        prompt += "\n\nFormat the response as professional ad copy ready for social media posting."
+        
+        return prompt
+    
+    def process_response(self, response_data, request_obj):
+        """Process webhook response"""
+        try:
+            request_obj.status = 'processing'
+            request_obj.save()
+            
+            # Handle array response from N8N (extract first item)
+            if isinstance(response_data, list) and len(response_data) > 0:
+                response_data = response_data[0]
+            
+            # Extract ad copy content
+            ad_copy = ""
+            if isinstance(response_data, dict):
+                ad_copy = response_data.get('output', response_data.get('text', response_data.get('content', '')))
+            elif isinstance(response_data, str):
+                ad_copy = response_data
+            
+            # Parse ad copy for different components (basic parsing)
+            hashtags = ""
+            targeting_suggestions = ""
+            formatted_ad = ad_copy
+            
+            # Simple extraction of hashtags if present
+            if '#' in ad_copy:
+                lines = ad_copy.split('\n')
+                hashtag_lines = [line for line in lines if line.strip().startswith('#')]
+                if hashtag_lines:
+                    hashtags = ' '.join(hashtag_lines)
+            
+            # Determine success based on response
+            success = bool(ad_copy.strip()) and len(ad_copy.strip()) > 20
+            
+            # Create response object
+            response_obj = SocialAdsGeneratorResponse.objects.create(
+                request=request_obj,
+                success=success,
+                processing_time=response_data.get('processing_time', 0) if isinstance(response_data, dict) else 0,
+                ad_copy=ad_copy,
+                hashtags=hashtags,
+                targeting_suggestions=targeting_suggestions,
+                formatted_ad=formatted_ad,
+                raw_response=response_data if isinstance(response_data, dict) else {'content': response_data}
+            )
+            
+            # Only deduct wallet balance after successful processing
+            if success:
+                request_obj.user.deduct_balance(
+                    request_obj.cost,
+                    f"Social Ads Generator - {request_obj.get_social_platform_display()} ad for {request_obj.description[:50]}...",
+                    'social-ads-generator'
+                )
+                print(f"{self.agent_slug}: Wallet deducted {request_obj.cost} AED for successful processing")
+            
+            # Update request as completed
+            request_obj.status = 'completed' if success else 'failed'
+            request_obj.processed_at = timezone.now()
+            request_obj.save()
+            
+            return response_obj
+            
+        except Exception as e:
+            # Handle error
+            request_obj.status = 'failed'
+            request_obj.save()
+            
+            # Create error response
+            error_response = SocialAdsGeneratorResponse.objects.create(
+                request=request_obj,
+                success=False,
+                error_message=str(e),
+                processing_time=0
+            )
+            
+            raise Exception(f"Failed to process Social Ads Generator response: {e}")

social_ads_generator/templates/social_ads_generator/detail.html

@@ -0,0 +1,941 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Social Ads Generator Agent - NetCop AI Hub</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        
+        html, body {
+            margin: 0;
+            padding: 0;
+            font-family: system-ui, -apple-system, sans-serif;
+            overflow-x: hidden;
+        }
+        
+        /* Responsive utilities */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 clamp(16px, 4vw, 24px);
+        }
+        
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+            gap: clamp(16px, 4vw, 24px);
+            align-items: start;
+        }
+        
+        .card {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: clamp(12px, 3vw, 16px);
+            padding: clamp(16px, 4vw, 24px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            margin-bottom: clamp(16px, 4vw, 24px);
+        }
+        
+        .form-group {
+            margin-bottom: clamp(12px, 3vw, 16px);
+        }
+        
+        .form-group label {
+            display: block;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: clamp(6px, 2vw, 8px);
+            font-size: clamp(14px, 3.5vw, 16px);
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 20px);
+            border: 2px solid #e5e7eb;
+            border-radius: clamp(8px, 2vw, 12px);
+            font-size: clamp(14px, 3.5vw, 16px);
+            transition: border-color 0.2s ease;
+            min-height: 48px;
+        }
+        
+        .form-control:focus {
+            outline: none;
+            border-color: #ec4899;
+        }
+        
+        .form-control.textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+        
+        .btn {
+            padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 32px);
+            border: none;
+            border-radius: clamp(8px, 2vw, 12px);
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: clamp(14px, 3.5vw, 16px);
+            min-height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
+        }
+        
+        .btn-primary:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+            transform: none;
+        }
+        
+        .platform-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
+            gap: clamp(8px, 2vw, 12px);
+        }
+        
+        .platform-option {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+            padding: clamp(12px, 3vw, 16px);
+            border: 2px solid #e5e7eb;
+            border-radius: clamp(8px, 2vw, 12px);
+            cursor: pointer;
+            background: white;
+            transition: all 0.2s ease;
+            min-height: 80px;
+            text-align: center;
+        }
+        
+        .platform-option:hover {
+            border-color: #ec4899;
+        }
+        
+        .platform-option.selected {
+            border-color: #ec4899;
+            background: #fdf2f8;
+        }
+        
+        .platform-option input[type="radio"] {
+            display: none;
+        }
+        
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+        }
+        
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: 0.4s;
+            border-radius: 34px;
+        }
+        
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: 0.4s;
+            border-radius: 50%;
+        }
+        
+        input:checked + .slider {
+            background-color: #ec4899;
+        }
+        
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        
+        .processing-status {
+            padding: clamp(16px, 4vw, 20px);
+            background: #fdf2f8;
+            border: 1px solid #ec4899;
+            border-radius: clamp(8px, 2vw, 12px);
+            color: #be185d;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: clamp(16px, 4vw, 24px);
+            display: none;
+        }
+        
+        .ad-results {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(20px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            margin-top: 24px;
+            display: none;
+        }
+        
+        .help-text {
+            font-size: clamp(12px, 3vw, 14px);
+            color: #6b7280;
+            margin-top: 8px;
+        }
+        
+        .section-title {
+            font-size: clamp(16px, 4vw, 18px);
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: clamp(12px, 3vw, 16px);
+        }
+        
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fca5a5;
+            color: #dc2626;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        
+        .success-message {
+            background: #f0fdf4;
+            border: 1px solid #86efac;
+            color: #166534;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+        }
+        
+        /* Mobile optimizations */
+        @media (max-width: 768px) {
+            .grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .platform-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        @media (max-width: 480px) {
+            .platform-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div style="
+        min-height: 100vh;
+        background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%);
+        padding: clamp(20px, 5vw, 40px) 0;
+    ">
+        <!-- Header -->
+        <nav style="
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            padding: 16px 0;
+            margin-bottom: 24px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        ">
+            <div class="container">
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <div style="display: flex; align-items: center; gap: 16px;">
+                        <a href="{% url 'core:homepage' %}" style="
+                            font-size: 24px;
+                            font-weight: 700;
+                            color: #ec4899;
+                            text-decoration: none;
+                        ">
+                            🚀 NetCop AI Hub
+                        </a>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 16px;">
+                        <a href="{% url 'core:marketplace' %}" style="color: #374151; text-decoration: none; font-weight: 500;">Marketplace</a>
+                        {% if user.is_authenticated %}
+                            <a href="{% url 'authentication:profile' %}" style="color: #374151; text-decoration: none; font-weight: 500;">Profile</a>
+                            <span style="color: #6b7280;" data-wallet-balance>{{ user.wallet_balance|floatformat:2 }} AED</span>
+                        {% else %}
+                            <a href="{% url 'authentication:login' %}" style="color: #ec4899; text-decoration: none; font-weight: 600;">Login</a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </nav>
+        
+        <div class="container">
+            <!-- Page Title -->
+            <div style="text-align: center; margin-bottom: clamp(24px, 6vw, 40px);">
+                <h1 style="
+                    font-size: clamp(28px, 7vw, 36px);
+                    font-weight: 700;
+                    color: #1f2937;
+                    margin: 0 0 clamp(12px, 3vw, 16px) 0;
+                ">
+                    📱 Social Ads Generator Agent
+                </h1>
+                <p style="
+                    font-size: clamp(16px, 4vw, 18px);
+                    color: #6b7280;
+                    margin: 0;
+                    max-width: 600px;
+                    margin: 0 auto;
+                ">
+                    Create compelling social media advertisements with platform-optimized copy, audience targeting suggestions, and A/B test variants.
+                </p>
+                <div style="
+                    background: rgba(236, 72, 153, 0.1);
+                    color: #be185d;
+                    padding: 8px 16px;
+                    border-radius: 20px;
+                    display: inline-block;
+                    margin-top: 12px;
+                    font-size: clamp(14px, 3.5vw, 16px);
+                    font-weight: 600;
+                ">
+                    💰 Cost: 7.00 AED
+                </div>
+            </div>
+            
+            <!-- Messages -->
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="{% if message.tags == 'error' %}error-message{% else %}success-message{% endif %}">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+            
+            <!-- Main Content -->
+            <div class="grid">
+                <!-- Social Ads Form -->
+                <div>
+                    <form method="POST" id="socialAdsForm">
+                        {% csrf_token %}
+                        
+                        <!-- Product/Service Description -->
+                        <div class="card">
+                            <h3 class="section-title">📝 Describe Your Product/Service</h3>
+                            
+                            <div class="form-group">
+                                <label for="description">What are you advertising? *</label>
+                                <textarea
+                                    name="description"
+                                    id="description"
+                                    class="form-control textarea"
+                                    placeholder="Describe your product, service, or campaign. Include key features, benefits, target audience, and any special offers..."
+                                    required
+                                ></textarea>
+                                <div class="help-text">
+                                    Be specific about features, benefits, and target audience for better results.
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Social Platform Selection -->
+                        <div class="card">
+                            <h3 class="section-title">📱 Target Platform</h3>
+                            
+                            <div class="platform-grid">
+                                <label class="platform-option selected" onclick="selectPlatform('facebook')">
+                                    <input type="radio" name="social_platform" value="facebook" checked />
+                                    <div style="font-size: 28px;">📘</div>
+                                    <div style="font-weight: 600; font-size: 14px;">Facebook</div>
+                                </label>
+                                
+                                <label class="platform-option" onclick="selectPlatform('instagram')">
+                                    <input type="radio" name="social_platform" value="instagram" />
+                                    <div style="font-size: 28px;">📷</div>
+                                    <div style="font-weight: 600; font-size: 14px;">Instagram</div>
+                                </label>
+                                
+                                <label class="platform-option" onclick="selectPlatform('twitter')">
+                                    <input type="radio" name="social_platform" value="twitter" />
+                                    <div style="font-size: 28px;">🐦</div>
+                                    <div style="font-weight: 600; font-size: 14px;">Twitter</div>
+                                </label>
+                                
+                                <label class="platform-option" onclick="selectPlatform('linkedin')">
+                                    <input type="radio" name="social_platform" value="linkedin" />
+                                    <div style="font-size: 28px;">💼</div>
+                                    <div style="font-weight: 600; font-size: 14px;">LinkedIn</div>
+                                </label>
+                                
+                                <label class="platform-option" onclick="selectPlatform('tiktok')">
+                                    <input type="radio" name="social_platform" value="tiktok" />
+                                    <div style="font-size: 28px;">🎵</div>
+                                    <div style="font-weight: 600; font-size: 14px;">TikTok</div>
+                                </label>
+                                
+                                <label class="platform-option" onclick="selectPlatform('youtube')">
+                                    <input type="radio" name="social_platform" value="youtube" />
+                                    <div style="font-size: 28px;">📺</div>
+                                    <div style="font-weight: 600; font-size: 14px;">YouTube</div>
+                                </label>
+                            </div>
+                        </div>
+                        
+                        <!-- Additional Options -->
+                        <div class="card">
+                            <h3 class="section-title">⚙️ Additional Options</h3>
+                            
+                            <!-- Include Emojis -->
+                            <div class="form-group">
+                                <label style="display: flex; align-items: center; justify-content: space-between;">
+                                    <span>Include Emojis in Ad Copy</span>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" name="include_emoji">
+                                        <span class="slider"></span>
+                                    </label>
+                                </label>
+                                <div class="help-text">
+                                    Emojis can increase engagement but may not be suitable for all brands.
+                                </div>
+                            </div>
+                            
+                            <!-- Language -->
+                            <div class="form-group">
+                                <label for="language">Language *</label>
+                                <select name="language" id="language" class="form-control" required>
+                                    <option value="English">English</option>
+                                    <option value="Arabic">Arabic (العربية)</option>
+                                    <option value="Spanish">Spanish (Español)</option>
+                                    <option value="French">French (Français)</option>
+                                    <option value="German">German (Deutsch)</option>
+                                    <option value="Chinese">Chinese (中文)</option>
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <!-- Processing Status -->
+                        <div class="processing-status" id="processingStatus">
+                            <div style="font-size: clamp(16px, 4vw, 18px); margin-bottom: 8px;">
+                                ⏳ Processing...
+                            </div>
+                            <div style="font-size: clamp(14px, 3.5vw, 16px);">
+                                Creating your social media ad...
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                
+                <!-- Sidebar -->
+                <div>
+                    <!-- Wallet Balance Card -->
+                    <div class="card">
+                        <h3 class="section-title">💳 Your Wallet</h3>
+                        
+                        <div style="margin-bottom: clamp(16px, 4vw, 20px);">
+                            <div style="font-size: clamp(24px, 6vw, 28px); font-weight: 700; color: #1f2937;" data-wallet-balance>
+                                {% if user.is_authenticated %}
+                                    {{ user.wallet_balance|floatformat:2 }} AED
+                                {% else %}
+                                    0.00 AED
+                                {% endif %}
+                            </div>
+                            <div style="font-size: clamp(14px, 3.5vw, 16px); color: #6b7280;">
+                                Available Balance
+                            </div>
+                        </div>
+                        
+                        {% if user.is_authenticated %}
+                            {% if user.wallet_balance >= 7.00 %}
+                                <button
+                                    type="submit"
+                                    form="socialAdsForm"
+                                    class="btn btn-primary"
+                                    style="width: 100%; margin-bottom: 12px;"
+                                    id="generateButton"
+                                >
+                                    📱 Generate Ad (7.00 AED)
+                                </button>
+                            {% else %}
+                                <div style="
+                                    background: #fef2f2;
+                                    border: 1px solid #fca5a5;
+                                    color: #dc2626;
+                                    padding: 12px;
+                                    border-radius: 8px;
+                                    text-align: center;
+                                    font-size: clamp(14px, 3.5vw, 16px);
+                                    margin-bottom: 12px;
+                                ">
+                                    Insufficient balance! You need 7.00 AED.
+                                </div>
+                                <a href="{% url 'core:wallet' %}" class="btn btn-primary" style="width: 100%; text-decoration: none;">
+                                    💰 Top Up Wallet
+                                </a>
+                            {% endif %}
+                        {% else %}
+                            <a href="{% url 'authentication:login' %}" class="btn btn-primary" style="width: 100%; text-decoration: none;">
+                                🔑 Login to Continue
+                            </a>
+                        {% endif %}
+                    </div>
+                    
+                    <!-- Usage Info -->
+                    <div style="
+                        padding: 16px;
+                        background: rgba(236, 72, 153, 0.1);
+                        border-radius: 12px;
+                        border: 1px solid rgba(236, 72, 153, 0.2);
+                    ">
+                        <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #be185d;">
+                            💡 How it works
+                        </h4>
+                        <ul style="margin: 0; font-size: 12px; color: #374151; line-height: 1.4; list-style: none; padding-left: 0;">
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #ec4899;">•</span>
+                                Describe your product/service
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #ec4899;">•</span>
+                                Choose target platform
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #ec4899;">•</span>
+                                Get optimized ad copy
+                            </li>
+                            <li style="margin: 4px 0; padding-left: 16px; position: relative;">
+                                <span style="position: absolute; left: 0; color: #ec4899;">•</span>
+                                Includes A/B test variants
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Ad Results -->
+            <div class="ad-results" id="adResults">
+                <!-- Status Header -->
+                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+                    <div style="font-size: 24px;">✅</div>
+                    <h3 style="font-size: 20px; font-weight: 600; color: #1f2937; margin: 0;">
+                        Social Media Ad Copy
+                    </h3>
+                    <div style="
+                        background: #ec4899;
+                        color: white;
+                        padding: 6px 12px;
+                        border-radius: 6px;
+                        font-size: 14px;
+                        font-weight: 600;
+                        margin-left: auto;
+                    ">
+                        ✅ Complete
+                    </div>
+                </div>
+                
+                <!-- Platform Header -->
+                <div style="
+                    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
+                    color: white;
+                    padding: 16px 20px;
+                    border-radius: 12px;
+                    text-align: center;
+                    margin-bottom: 20px;
+                " id="platformHeader">
+                    <h4 style="font-size: 18px; font-weight: 600; margin: 0;">
+                        📱 Optimized for <span id="platformName">Platform</span>
+                    </h4>
+                </div>
+                
+                <!-- Ad Copy Content -->
+                <div style="
+                    background: #f8fafc;
+                    border: 1px solid #e2e8f0;
+                    border-radius: 12px;
+                    padding: 24px;
+                    margin-bottom: 20px;
+                ">
+                    <h4 style="
+                        font-size: 18px;
+                        font-weight: 600;
+                        color: #1f2937;
+                        margin-bottom: 16px;
+                    ">
+                        📝 Generated Ad Copy
+                    </h4>
+                    
+                    <div style="
+                        white-space: pre-line;
+                        line-height: 1.7;
+                        color: #374151;
+                        font-size: 15px;
+                    " id="adCopyContent">
+                        <!-- Content will be populated here -->
+                    </div>
+                    
+                    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb;" id="hashtagsSection" style="display: none;">
+                        <h5 style="font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 12px;">
+                            #️⃣ Suggested Hashtags
+                        </h5>
+                        <div style="font-size: 14px; color: #ec4899; font-weight: 500;" id="hashtagsContent">
+                            <!-- Hashtags will be populated here -->
+                        </div>
+                    </div>
+                    
+                    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
+                        <div style="font-size: 12px; color: #9ca3af;" id="generatedAt">
+                            Generated: Just now
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Download/Copy Actions -->
+                <div style="
+                    margin-top: 20px;
+                    padding-top: 20px;
+                    border-top: 1px solid #e5e7eb;
+                    display: flex;
+                    gap: 12px;
+                    flex-wrap: wrap;
+                ">
+                    <button
+                        onclick="copyAdCopy()"
+                        class="btn btn-primary"
+                        style="flex: 1; min-width: 120px;"
+                    >
+                        📋 Copy Ad Copy
+                    </button>
+                    
+                    <button
+                        onclick="downloadAdCopy()"
+                        class="btn"
+                        style="
+                            flex: 1;
+                            min-width: 120px;
+                            background: white;
+                            color: #374151;
+                            border: 2px solid #e5e7eb;
+                        "
+                    >
+                        💾 Download Ad
+                    </button>
+
+                    <button
+                        onclick="resetForm()"
+                        class="btn"
+                        style="
+                            flex: 1;
+                            min-width: 120px;
+                            background: #ec4899;
+                            color: white;
+                        "
+                    >
+                        🔄 Create Another
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        <footer style="
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            padding: 24px 0;
+            margin-top: 48px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            text-align: center;
+            color: #6b7280;
+        ">
+            <div class="container">
+                <p style="margin: 0; font-size: 14px;">
+                    © 2024 NetCop AI Hub. Powered by AI agents.
+                </p>
+            </div>
+        </footer>
+    </div>
+    
+    <script>
+        // Platform selection
+        function selectPlatform(platform) {
+            document.querySelectorAll('.platform-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            
+            event.currentTarget.classList.add('selected');
+            document.querySelector(`input[value="${platform}"]`).checked = true;
+        }
+        
+        // Copy ad copy to clipboard
+        function copyAdCopy() {
+            const adText = generateAdText();
+            navigator.clipboard.writeText(adText).then(() => {
+                showToast('📋 Ad copy copied to clipboard!', 'success');
+            }).catch(() => {
+                showToast('Failed to copy ad copy', 'error');
+            });
+        }
+        
+        // Download ad copy as text file
+        function downloadAdCopy() {
+            const adText = generateAdText();
+            const blob = new Blob([adText], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `social-ad-copy-${Date.now()}.txt`;
+            a.click();
+            URL.revokeObjectURL(url);
+            showToast('💾 Ad copy downloaded!', 'success');
+        }
+        
+        // Generate ad text for copy/download
+        function generateAdText() {
+            const adContent = document.getElementById('adCopyContent');
+            const hashtags = document.getElementById('hashtagsContent');
+            const platform = document.getElementById('platformName');
+            
+            if (adContent) {
+                let adText = `Social Media Ad Copy\n`;
+                adText += `Platform: ${platform.textContent}\n`;
+                adText += `Generated: ${new Date().toLocaleString()}\n\n`;
+                
+                adText += `Ad Copy:\n`;
+                adText += `${adContent.textContent}\n\n`;
+                
+                if (hashtags && hashtags.textContent.trim()) {
+                    adText += `Hashtags:\n${hashtags.textContent}\n\n`;
+                }
+                
+                adText += `Generated by NetCop AI Social Ads Generator Agent`;
+                
+                return adText;
+            }
+            return 'No ad copy available';
+        }
+
+        // Reset form for creating another ad
+        function resetForm() {
+            document.getElementById('socialAdsForm').reset();
+            document.getElementById('adResults').style.display = 'none';
+            document.getElementById('processingStatus').style.display = 'none';
+            document.getElementById('generateButton').disabled = false;
+            document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+            
+            // Reset platform selection to Facebook
+            document.querySelectorAll('.platform-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            document.querySelector('label[onclick="selectPlatform(\'facebook\')"]').classList.add('selected');
+            document.querySelector('input[value="facebook"]').checked = true;
+            
+            showToast('Form reset! Ready for another ad.', 'success');
+        }
+        
+        // Simple toast notification
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                padding: 12px 20px;
+                border-radius: 8px;
+                color: white;
+                font-weight: 600;
+                z-index: 1000;
+                ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'}
+            `;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            
+            setTimeout(() => {
+                toast.remove();
+            }, 3000);
+        }
+
+        // Update wallet balance display
+        function updateWalletBalance(newBalance) {
+            const balanceElements = document.querySelectorAll('[data-wallet-balance]');
+            balanceElements.forEach(element => {
+                element.textContent = `${newBalance.toFixed(2)} AED`;
+            });
+            window.currentWalletBalance = newBalance;
+        }
+
+        // Display ad results
+        function displayResults(result) {
+            const resultsContainer = document.getElementById('adResults');
+            const contentContainer = document.getElementById('adCopyContent');
+            const platformName = document.getElementById('platformName');
+            const hashtagsSection = document.getElementById('hashtagsSection');
+            const hashtagsContent = document.getElementById('hashtagsContent');
+            
+            if (result.success && result.status === 'completed') {
+                contentContainer.textContent = result.content || result.ad_copy || result.output_text || 'Ad copy generated successfully!';
+                
+                // Update platform name
+                const selectedPlatform = document.querySelector('input[name="social_platform"]:checked').value;
+                platformName.textContent = selectedPlatform.charAt(0).toUpperCase() + selectedPlatform.slice(1);
+                
+                // Show hashtags if available
+                if (result.hashtags && result.hashtags.trim()) {
+                    hashtagsContent.textContent = result.hashtags;
+                    hashtagsSection.style.display = 'block';
+                } else {
+                    hashtagsSection.style.display = 'none';
+                }
+                
+                resultsContainer.style.display = 'block';
+                
+                // Update wallet balance if provided
+                if (result.wallet_balance !== undefined) {
+                    updateWalletBalance(result.wallet_balance);
+                }
+                
+                showToast('✅ Social ad created and payment processed!', 'success');
+            } else {
+                showToast('❌ Failed to generate ad - no charge applied', 'error');
+            }
+        }
+
+        // Poll for results
+        function pollForResults(requestId) {
+            let pollCount = 0;
+            const maxPolls = 30; // 30 seconds maximum
+            
+            const pollInterval = setInterval(() => {
+                pollCount++;
+                
+                fetch(`/agents/social-ads-generator/status/${requestId}/`)
+                    .then(response => response.json())
+                    .then(result => {
+                        if (result.status === 'completed' || result.status === 'failed') {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+                            
+                            displayResults(result);
+                        } else if (pollCount >= maxPolls) {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+                            showToast('❌ Processing timeout - please try again', 'error');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error polling results:', error);
+                        if (pollCount >= maxPolls) {
+                            clearInterval(pollInterval);
+                            document.getElementById('processingStatus').style.display = 'none';
+                            document.getElementById('generateButton').disabled = false;
+                            document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+                            showToast('❌ Network error - please try again', 'error');
+                        }
+                    });
+            }, 1000);
+        }
+        
+        // Handle form submission
+        document.getElementById('socialAdsForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const description = document.getElementById('description').value.trim();
+            const platform = document.querySelector('input[name="social_platform"]:checked');
+            
+            if (!description) {
+                showToast('Please describe your product/service', 'error');
+                return;
+            }
+            
+            if (!platform) {
+                showToast('Please select a social media platform', 'error');
+                return;
+            }
+            
+            // Check user authentication
+            {% if not user.is_authenticated %}
+            window.location.href = "{% url 'authentication:login' %}";
+            return;
+            {% endif %}
+            
+            // Check wallet balance
+            const balance = {{ user.wallet_balance|default:0 }};
+            if (balance < 7.00) {
+                showToast('Insufficient balance! You need 7.00 AED.', 'error');
+                setTimeout(() => {
+                    window.location.href = "{% url 'core:wallet' %}";
+                }, 2000);
+                return;
+            }
+
+            // Show processing status
+            document.getElementById('processingStatus').style.display = 'block';
+            document.getElementById('generateButton').disabled = true;
+            document.getElementById('generateButton').innerHTML = '⏳ Processing...';
+            document.getElementById('adResults').style.display = 'none';
+
+            // Submit form via AJAX
+            const formData = new FormData(this);
+            
+            fetch(window.location.href, {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(result => {
+                if (result.success && result.request_id) {
+                    // Start polling for results
+                    pollForResults(result.request_id);
+                } else {
+                    // Handle immediate response
+                    document.getElementById('processingStatus').style.display = 'none';
+                    document.getElementById('generateButton').disabled = false;
+                    document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+                    
+                    if (result.error) {
+                        showToast(`❌ ${result.error}`, 'error');
+                    } else {
+                        displayResults(result);
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                document.getElementById('processingStatus').style.display = 'none';
+                document.getElementById('generateButton').disabled = false;
+                document.getElementById('generateButton').innerHTML = '📱 Generate Ad (7.00 AED)';
+                showToast('❌ Network error - please try again', 'error');
+            });
+        });
+    </script>
+</body>
+</html>

social_ads_generator/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+app_name = 'social_ads_generator'
+
+urlpatterns = [
+    path('', views.social_ads_generator_detail, name='detail'),
+    path('status/<uuid:request_id>/', views.social_ads_generator_result, name='status'),
+]

social_ads_generator/views.py

@@ -0,0 +1,164 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.decorators import login_required
+from django.contrib import messages
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.utils.decorators import method_decorator
+from django.views import View
+from agent_base.models import BaseAgent
+from .models import SocialAdsGeneratorRequest, SocialAdsGeneratorResponse
+from .processor import SocialAdsGeneratorProcessor
+import json
+
+
+def social_ads_generator_detail(request):
+    """Detail page for Social Ads Generator agent"""
+    try:
+        agent = BaseAgent.objects.get(slug='social-ads-generator')
+    except BaseAgent.DoesNotExist:
+        messages.error(request, 'Social Ads Generator agent not found.')
+        return redirect('core:homepage')
+    
+    if request.method == 'POST':
+        # Handle AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            if not request.user.is_authenticated:
+                return JsonResponse({'error': 'Authentication required'}, status=401)
+            
+            # Check wallet balance
+            if not request.user.has_sufficient_balance(agent.price):
+                return JsonResponse({'error': 'Insufficient wallet balance'}, status=400)
+            
+            try:
+                # Create request object (no wallet deduction yet)
+                agent_request = SocialAdsGeneratorRequest.objects.create(
+                    user=request.user,
+                    agent=agent,
+                    cost=agent.price,
+                    description=request.POST.get('description'),
+                    social_platform=request.POST.get('social_platform', 'facebook'),
+                    include_emoji=request.POST.get('include_emoji') == 'on',
+                    language=request.POST.get('language', 'English'),
+                )
+                
+                # Process request
+                processor = SocialAdsGeneratorProcessor()
+                result = processor.process_request(
+                    request_obj=agent_request,
+                    user_id=request.user.id,
+                )
+                
+                # Refresh user from database to get updated wallet balance
+                request.user.refresh_from_db()
+                
+                return JsonResponse({
+                    'success': True,
+                    'request_id': str(agent_request.id),
+                    'message': 'Social ads generation started',
+                    'wallet_balance': float(request.user.wallet_balance)
+                })
+                
+            except Exception as e:
+                return JsonResponse({'error': str(e)}, status=500)
+        
+        # Regular form submission (redirect to avoid resubmission)
+        return redirect('social_ads_generator:detail')
+    
+    # GET request - show form
+    context = {
+        'agent': agent,
+    }
+    return render(request, 'social_ads_generator/detail.html', context)
+
+
+@method_decorator(csrf_exempt, name='dispatch')
+class SocialAdsGeneratorProcessView(View):
+    """Process Social Ads Generator requests"""
+    
+    def post(self, request):
+        if not request.user.is_authenticated:
+            return JsonResponse({'error': 'Authentication required'}, status=401)
+        
+        try:
+            # Parse request data
+            data = json.loads(request.body)
+            
+            # Get agent
+            agent = BaseAgent.objects.get(slug='social-ads-generator')
+            
+            # Check wallet balance
+            if not request.user.has_sufficient_balance(agent.price):
+                return JsonResponse({'error': 'Insufficient wallet balance'}, status=400)
+            
+            # Create request object (no wallet deduction yet - only after successful processing)
+            agent_request = SocialAdsGeneratorRequest.objects.create(
+                user=request.user,
+                agent=agent,
+                cost=agent.price,
+                description=data.get('description'),
+                social_platform=data.get('social_platform', 'facebook'),
+                include_emoji=data.get('include_emoji', False),
+                language=data.get('language', 'English'),
+            )
+            
+            # Process request
+            processor = SocialAdsGeneratorProcessor()
+            result = processor.process_request(
+                request_obj=agent_request,
+                user_id=request.user.id,
+            )
+            
+            # Refresh user from database to get updated wallet balance
+            request.user.refresh_from_db()
+            
+            return JsonResponse({
+                'success': True,
+                'request_id': str(agent_request.id),
+                'message': 'Social Ads Generator request processed successfully',
+                'wallet_balance': float(request.user.wallet_balance)
+            })
+            
+        except BaseAgent.DoesNotExist:
+            return JsonResponse({'error': 'Social Ads Generator agent not found'}, status=404)
+        except Exception as e:
+            return JsonResponse({'error': str(e)}, status=500)
+
+
+@login_required
+def social_ads_generator_result(request, request_id):
+    """Get result for a specific request"""
+    try:
+        agent_request = SocialAdsGeneratorRequest.objects.get(
+            id=request_id,
+            user=request.user
+        )
+        
+        if hasattr(agent_request, 'response'):
+            response = agent_request.response
+            # Refresh user to get current wallet balance
+            request.user.refresh_from_db()
+            
+            return JsonResponse({
+                'success': response.success,
+                'status': agent_request.status,
+                'content': getattr(response, 'ad_copy', None),
+                'ad_copy': getattr(response, 'ad_copy', None),
+                'hashtags': getattr(response, 'hashtags', None),
+                'targeting_suggestions': getattr(response, 'targeting_suggestions', None),
+                'formatted_ad': getattr(response, 'formatted_ad', None),
+                'raw_response': getattr(response, 'raw_response', None),
+                'processing_time': float(response.processing_time) if response.processing_time else None,
+                'error_message': response.error_message,
+                'wallet_balance': float(request.user.wallet_balance)
+            })
+        else:
+            return JsonResponse({
+                'success': False,
+                'status': agent_request.status,
+                'message': 'Processing in progress...'
+            })
+            
+    except SocialAdsGeneratorRequest.DoesNotExist:
+        return JsonResponse({'error': 'Request not found'}, status=404)
+    except Exception as e:
+        return JsonResponse({'error': str(e)}, status=500)