{% extends 'layouts/admin.twig' %}

{% block content %}

<ul class="breadcrumbs el">
    <li><a href="/admin/">Admin</a> /</li>
    <li class="end">{{ page_title }}</li>
</ul>

<h1>Referral Program Dashboard</h1>

{% if success_message %}
    <div class="msg">{{ success_message }}</div>
{% endif %}
{% if error_message %}
    <div class="msg error">{{ error_message }}</div>
{% endif %}

<div class="el" style="display:flex;gap:15px;flex-wrap:wrap;">
    <div class="style" style="flex:1;min-width:150px;text-align:center;">
        <h3>{{ total_referrals }}</h3>
        <p>Total Referrals</p>
    </div>
    <div class="style" style="flex:1;min-width:150px;text-align:center;">
        <h3>{{ conversion_rate }}%</h3>
        <p>Conversion Rate</p>
    </div>
    <div class="style" style="flex:1;min-width:150px;text-align:center;">
        <h3>{{ total_rewards_value|currency_format }}</h3>
        <p>Total Rewards Value</p>
    </div>
    <div class="style" style="flex:1;min-width:150px;text-align:center;">
        <h3>{{ pending_count }}</h3>
        <p>Pending</p>
    </div>
    <div class="style" style="flex:1;min-width:150px;text-align:center;">
        <h3>{{ flagged_count }}</h3>
        <p>Fraud Flagged</p>
    </div>
</div>

<div class="style el">
    <h4>Filters</h4>
    <form method="get" action="/admin/referrals">
        <div class="row">
            <label>Status</label>
            <select name="status" class="short">
                <option value="">All</option>
                <option value="pending" {{ filters.status == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="signed_up" {{ filters.status == 'signed_up' ? 'selected' : '' }}>Signed Up</option>
                <option value="shipped" {{ filters.status == 'shipped' ? 'selected' : '' }}>Shipped</option>
                <option value="rewarded" {{ filters.status == 'rewarded' ? 'selected' : '' }}>Rewarded</option>
                <option value="expired" {{ filters.status == 'expired' ? 'selected' : '' }}>Expired</option>
                <option value="cancelled" {{ filters.status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
            </select>
        </div>
        <div class="row">
            <label>From</label>
            <input type="date" name="date_from" class="short" value="{{ filters.date_from ?? '' }}">
        </div>
        <div class="row">
            <label>To</label>
            <input type="date" name="date_to" class="short" value="{{ filters.date_to ?? '' }}">
        </div>
        <div class="row checkboxRow">
            <label>Fraud Flagged Only</label>
            <input type="checkbox" name="flagged" value="1" {{ filters.flagged ? 'checked' : '' }}>
        </div>
        <div class="row">
            <label>&nbsp;</label>
            <button type="submit" class="btn smaller">Filter</button>
            <a href="/admin/referrals" class="btn btn-grey smaller">Reset</a>
            <a href="/admin/referrals/export?{{ filters|url_encode }}" class="btn btn-green smaller">Export CSV</a>
        </div>
    </form>
</div>

<div class="el">
    <table class="tabular">
        <thead>
            <tr>
                <th>ID</th>
                <th>Referrer</th>
                <th>Referee Email</th>
                <th>Status</th>
                <th>Channel</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for referral in referrals %}
                <tr>
                    <td>{{ referral.id }}</td>
                    <td>{{ referral.referrer.email ?? 'N/A' }}</td>
                    <td>{{ referral.referee_email }}</td>
                    <td>
                        {% set tag_color = {
                            pending: 'tag-yellow',
                            signed_up: 'tag-blue',
                            shipped: 'tag-blue',
                            rewarded: 'tag-green',
                            expired: 'tag-grey',
                            cancelled: 'tag-red'
                        } %}
                        <span class="tag {{ tag_color[referral.status] ?? 'tag-grey' }}">
                            {{ referral.status|replace({'_': ' '})|capitalize }}
                        </span>
                    </td>
                    <td>{{ referral.channel }}</td>
                    <td>{{ referral.created_at|date('d M Y') }}</td>
                    <td>
                        <a href="/admin/referrals/detail/{{ referral.id }}" class="btn smaller">View</a>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="7">No referrals found.</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if referrals.hasPages is defined %}
    <div class="pagination">
        {{ referrals.links()|raw }}
    </div>
{% endif %}

<div class="style el">
    <h4>Manual Credit</h4>
    <form method="post" action="/admin/referrals/manual-credit">
        <div class="row">
            <label>Member ID</label>
            <input type="number" name="member_id" class="short" required>
        </div>
        <div class="row">
            <label>Amount ({{ session_currency.symbol }})</label>
            <input type="number" name="amount" class="short" step="0.01" value="{{ config('referrals.reward_amount') }}" required>
        </div>
        <div class="row">
            <label>Reason</label>
            <input type="text" name="reason" required>
        </div>
        <div class="row">
            <label>&nbsp;</label>
            <button type="submit" class="btn smaller">Issue Credit</button>
        </div>
    </form>
</div>

{% endblock %}
