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

{% block extra_head %}
<style>
    .stat-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    .plan-card {
        border: none;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.07);
        transition: all 0.35s ease;
        height: 100%;
    }
    .plan-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(106, 13, 173, 0.15);
    }
    .plan-header {
        background: linear-gradient(135deg, #6a0dad, #9f7aea);
        color: white;
        padding: 1.5rem;
    }
    .section-title {
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    .badge-soft {
        border-radius: 50px;
        padding: 6px 14px;
        font-weight: 600;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">

    <!-- Header -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-5 gap-3">
        <div>
            <h4 class="fw-bold mb-1">Investment Plans</h4>
            <p class="text-muted mb-0">Fixed packages with guaranteed profit after the plan duration ends.</p>
        </div>
        <a href="{% url 'core:investment_dashboard' %}" class="btn btn-outline-primary btn-lg">
            <i class="fas fa-chart-line me-2"></i>My Dashboard
        </a>
    </div>

    <!-- Stats Row -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <p class="text-uppercase text-muted small mb-2">Total Investors</p>
                    <h4 class="fw-bold mb-0">{{ total_investors }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <p class="text-uppercase text-muted small mb-2">Active Investments</p>
                    <h4 class="fw-bold mb-0">{{ total_active_investments }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card h-100">
                <div class="card-body">
                    <p class="text-uppercase text-muted small mb-2">Pending Withdrawals</p>
                    <h4 class="fw-bold mb-0 text-warning">{{ pending_withdrawals }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-5">
        <!-- Investment Plans -->
        <div class="col-lg-6">
            <h5 class="section-title mb-4 fw-bold">Available Plans</h5>
            <div class="row g-4">
                {% for plan in plans %}
                <div class="col-md-6">
                    <div class="plan-card card">
                        <div class="plan-header card-header">
                            <h5 class="mb-1">{{ plan.name }}</h5>
                            <small class="opacity-75">{{ plan.duration_days }} days</small>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-3">
                                {{ plan.description|default:"Fixed income investment plan." }}
                            </p>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-2">
                                    <strong>Investment:</strong>
                                    {{ plan.currency }} {{ plan.amount|floatformat:2 }}
                                </li>
                                <li class="mb-2">
                                    <strong>Profit:</strong>
                                    <span class="text-success">{{ plan.profit_percent }}%</span>
                                </li>
                                <li class="mb-2">
                                    <strong>Payout:</strong>
                                    {{ plan.currency }} {{ plan.payout_amount|floatformat:2 }}
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer bg-transparent border-0 pt-0 pb-4 px-4">
                            <a href="{% url 'core:checkout_investment' plan.pk %}" 
                               class="btn btn-primary w-100 py-2 fw-semibold">
                                Invest Now
                            </a>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="alert alert-info">
                        No active investment plans are available right now.
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Side Panel: Investors & Withdrawals -->
        <div class="col-lg-6">
            <!-- Recent Investors -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Recent Investors</h5>
                        <span class="badge bg-primary-subtle text-primary badge-soft">
                            {{ recent_investments|length }}
                        </span>
                    </div>

                    {% if recent_investments %}
                    <div class="list-group list-group-flush">
                        {% for inv in recent_investments %}
                        <div class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-semibold">{{ inv.user.username }}</div>
                                <small class="text-muted">
                                    {{ inv.plan.name }} · {{ inv.started_at|date:"M d, Y" }}
                                </small>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold">USD {{ inv.amount|floatformat:2 }}</div>
                                {% if inv.status == "active" %}
                                    <span class="badge bg-success-subtle text-success">Active</span>
                                {% else %}
                                    <span class="badge bg-secondary-subtle text-secondary">{{ inv.get_status_display }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">No investments yet.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Withdrawals -->
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Recent Withdrawals</h5>
                        <span class="badge bg-warning-subtle text-warning badge-soft">
                            {{ pending_withdrawals }} pending
                        </span>
                    </div>

                    {% if recent_withdrawals %}
                    <div class="list-group list-group-flush">
                        {% for wd in recent_withdrawals %}
                        <div class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-semibold">{{ wd.user.username }}</div>
                                <small class="text-muted">
                                    {{ wd.provider|upper }} · {{ wd.created_at|date:"M d, Y" }}
                                </small>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold">USD {{ wd.amount|floatformat:2 }}</div>
                                {% if wd.status == "pending" %}
                                    <span class="badge bg-warning-subtle text-warning">Pending</span>
                                {% elif wd.status == "approved" %}
                                    <span class="badge bg-success-subtle text-success">Approved</span>
                                {% else %}
                                    <span class="badge bg-danger-subtle text-danger">{{ wd.get_status_display }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">No withdrawal requests yet.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}