{% extends 'base.html' %}
{% load static %}

{% block title %}Strategy Marketplace - AIBOTXCHANGE{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Strategy Marketplace</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            Choose from our collection of profitable trading strategies. Each strategy is thoroughly tested and optimized for consistent returns.
        </p>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-sm border p-6 mb-8">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label for="asset_type" class="block text-sm font-medium text-gray-700 mb-2">Asset Type</label>
                <select name="asset_type" id="asset_type" class="form-input">
                    <option value="">All Assets</option>
                    <option value="forex" {% if request.GET.asset_type == 'forex' %}selected{% endif %}>Forex</option>
                    <option value="crypto" {% if request.GET.asset_type == 'crypto' %}selected{% endif %}>Crypto</option>
                    <option value="indices" {% if request.GET.asset_type == 'indices' %}selected{% endif %}>Indices</option>
                    <option value="commodities" {% if request.GET.asset_type == 'commodities' %}selected{% endif %}>Commodities</option>
                </select>
            </div>
            <div>
                <label for="risk_level" class="block text-sm font-medium text-gray-700 mb-2">Risk Level</label>
                <select name="risk_level" id="risk_level" class="form-input">
                    <option value="">All Risk Levels</option>
                    <option value="low" {% if request.GET.risk_level == 'low' %}selected{% endif %}>Low Risk</option>
                    <option value="medium" {% if request.GET.risk_level == 'medium' %}selected{% endif %}>Medium Risk</option>
                    <option value="high" {% if request.GET.risk_level == 'high' %}selected{% endif %}>High Risk</option>
                </select>
            </div>
            <div>
                <label for="sort_by" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                <select name="sort_by" id="sort_by" class="form-input">
                    <option value="-total_return" {% if request.GET.sort_by == '-total_return' %}selected{% endif %}>Highest Return</option>
                    <option value="monthly_fee" {% if request.GET.sort_by == 'monthly_fee' %}selected{% endif %}>Lowest Fee</option>
                    <option value="-created_at" {% if request.GET.sort_by == '-created_at' %}selected{% endif %}>Newest</option>
                    <option value="name" {% if request.GET.sort_by == 'name' %}selected{% endif %}>Name A-Z</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="btn-primary w-full">Apply Filters</button>
            </div>
        </form>
    </div>

    <!-- Strategy Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for strategy in strategies %}
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300">
            <!-- Strategy Header -->
            <div class="p-6 border-b border-gray-200">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-gray-900">{{ strategy.name }}</h3>
                    <span class="risk-badge risk-{{ strategy.risk_level }}">
                        {{ strategy.get_risk_level_display }}
                    </span>
                </div>
                <p class="text-gray-600 text-sm mb-4">{{ strategy.description|truncatechars:120 }}</p>
                
                <!-- Key Metrics -->
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500">Total Return:</span>
                        <div class="font-bold text-green-600 text-lg">{{ strategy.total_return|floatformat:1 }}%</div>
                    </div>
                    <div>
                        <span class="text-gray-500">Monthly Fee:</span>
                        <div class="font-bold text-gray-900 text-lg">${{ strategy.monthly_fee|floatformat:0 }}</div>
                    </div>
                </div>
            </div>

            <!-- Performance Stats -->
            <div class="p-6 bg-gray-50">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500">Win Rate:</span>
                        <div class="font-semibold">{{ strategy.win_rate|floatformat:1 }}%</div>
                    </div>
                    <div>
                        <span class="text-gray-500">Max Drawdown:</span>
                        <div class="font-semibold text-red-600">{{ strategy.max_drawdown|floatformat:1 }}%</div>
                    </div>
                    <div>
                        <span class="text-gray-500">Primary Asset:</span>
                        <div class="font-semibold">{{ strategy.primary_asset }}</div>
                    </div>
                    <div>
                        <span class="text-gray-500">Subscribers:</span>
                        <div class="font-semibold">{{ strategy.subscriber_count }}</div>
                    </div>
                </div>
            </div>

            <!-- MyFxBook Chart Embed -->
            {% if strategy.myfxbook_widget_url %}
            <div class="p-6 border-t border-gray-200">
                <h4 class="text-sm font-medium text-gray-700 mb-3">Performance Chart</h4>
                <div class="bg-gray-100 rounded p-4 text-center text-sm text-gray-500">
                    <i class="fas fa-chart-line text-2xl mb-2"></i>
                    <div>MyFxBook Chart</div>
                    <div class="text-xs">(Live in production)</div>
                </div>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="p-6 bg-white border-t border-gray-200">
                <div class="space-y-3">
                    {% if user.is_authenticated %}
                        {% if strategy.id in user_subscriptions %}
                            <div class="flex items-center justify-center py-2 px-4 bg-green-100 text-green-800 rounded-lg">
                                <i class="fas fa-check mr-2"></i>
                                Subscribed
                            </div>
                        {% else %}
                            <a href="{% url 'strategies:subscribe' strategy.id %}" class="btn-primary w-full text-center block">
                                Subscribe - ${{ strategy.monthly_fee|floatformat:0 }}/month
                            </a>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'accounts:login' %}" class="btn-primary w-full text-center block">
                            Login to Subscribe
                        </a>
                    {% endif %}
                    
                    <a href="{% url 'strategies:detail' strategy.id %}" class="btn-secondary w-full text-center block">
                        View Details
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-12">
            <i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No strategies found</h3>
            <p class="text-gray-600">Try adjusting your filters or check back later for new strategies.</p>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="mt-12 flex justify-center">
        <nav class="flex items-center space-x-2">
            {% if page_obj.has_previous %}
                <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page=1" class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">
                    First
                </a>
                <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.previous_page_number }}" class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">
                    Previous
                </a>
            {% endif %}
            
            <span class="px-3 py-2 text-sm font-medium text-gray-900">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            
            {% if page_obj.has_next %}
                <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.next_page_number }}" class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">
                    Next
                </a>
                <a href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.paginator.num_pages }}" class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700">
                    Last
                </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}

    <!-- Info Section -->
    <div class="mt-16 bg-blue-50 rounded-lg p-8">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">How Copy Trading Works</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
                <div class="text-center">
                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">1</span>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Choose Strategy</h3>
                    <p class="text-sm text-gray-600">Select a profitable trading strategy from our marketplace</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">2</span>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Connect MT5</h3>
                    <p class="text-sm text-gray-600">Link your MetaTrader 5 account via MetaAPI integration</p>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">3</span>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Start Trading</h3>
                    <p class="text-sm text-gray-600">Trades are automatically copied to your account in real-time</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Auto-submit form when filters change
    document.querySelectorAll('select[name="asset_type"], select[name="risk_level"], select[name="sort_by"]').forEach(function(select) {
        select.addEventListener('change', function() {
            this.form.submit();
        });
    });
</script>
{% endblock %}