{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/plugins/payout/assets/css/payout.ui.css">
{% endblock %}

{% block content %}
<div id="payout-app" 
     class="payout-container" 
     data-user-id="{{ recipient.user_id }}"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    
    <header class="payout-header">
        <h1 class="payout-title">My Earnings</h1>
        <div class="payout-actions">
            <button class="blocks-button blocks-button-primary" data-modal-open="request-payout-modal">
                <i class="fas fa-paper-plane"></i> Request Payout
            </button>
        </div>
    </header>

    <div class="payout-stats-grid">
        <div class="payout-stat-item">
            <div class="payout-stat-label">Available Balance</div>
            <div class="payout-stat-value"><span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ recipient.balance | price }}</div>
        </div>
        <div class="payout-stat-item">
            <div class="payout-stat-label">Current Liability</div>
            <div class="payout-stat-value"><span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ recipient.liability | price }}</div>
        </div>
        <div class="payout-stat-item">
            <div class="payout-stat-label">Account Status</div>
            <div class="payout-stat-value">
                <span class="payout-status-badge status-{{ recipient.status }}">
                    {{ recipient.status | replace(from='_', to=' ') }}
                </span>
            </div>
        </div>
    </div>

    <div class="blocks-section-tabs payout-tabs" role="tablist" aria-label="Payout account">
        <button type="button" id="history-tab" role="tab" aria-controls="history-panel" aria-selected="true" class="blocks-section-tab payout-tab active" data-target="history-panel">History</button>
        <button type="button" id="payouts-tab" role="tab" aria-controls="payouts-panel" aria-selected="false" class="blocks-section-tab payout-tab" data-target="payouts-panel">Payout Requests</button>
        <button type="button" id="methods-tab" role="tab" aria-controls="methods-panel" aria-selected="false" class="blocks-section-tab payout-tab" data-target="methods-panel">Payout Methods</button>
    </div>

    <!-- Panels -->
    <div id="history-panel" role="tabpanel" aria-labelledby="history-tab" tabindex="0" class="payout-panel active">
        <div class="payout-card">
            <h3>Transaction History</h3>
            <div class="blocks-table-scroll"><table class="blocks-admin-table table-ellipsis">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Description</th>
                        <th>Type</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in history %}
                    <tr>
                        <td data-label="Date">{{ entry.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                        <td data-label="Description">{{ entry.description }}</td>
                        <td data-label="Type">
                            <span class="payout-type-{{ entry.type }}">
                                {{ entry.type }}
                            </span>
                        </td>
                        <td data-label="Amount"><span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ entry.amount | price }}</td>
                    </tr>
                    {% endfor %}
                    {% if history | length == 0 %}
                    <tr><td colspan="4" class="empty-state">No transactions found</td></tr>
                    {% endif %}
                </tbody>
            </table></div>
        </div>
    </div>

    <div id="payouts-panel" role="tabpanel" aria-labelledby="payouts-tab" tabindex="0" class="payout-panel">
        <div class="payout-card">
            <h3>Recent Payouts</h3>
            <div class="blocks-table-scroll"><table class="blocks-admin-table table-ellipsis">
                <thead>
                    <tr><th>Date</th><th>Method</th><th>Status</th><th>Amount</th></tr>
                </thead>
                <tbody>
                    {% for p in payouts %}
                    <tr>
                        <td data-label="Date">{{ p.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                        <td data-label="Method">{{ p.provider }}</td>
                        <td data-label="Status"><span class="payout-status-badge status-{{ p.status }}">{{ p.status }}</span></td>
                        <td data-label="Amount"><span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ p.amount | price }}</td>
                    </tr>
                    {% endfor %}
                    {% if payouts | length == 0 %}
                    <tr><td colspan="4" class="empty-state">No payout requests found</td></tr>
                    {% endif %}
                </tbody>
            </table></div>
        </div>
    </div>

    <div id="methods-panel" role="tabpanel" aria-labelledby="methods-tab" tabindex="0" class="payout-panel">
        <div class="payout-card">
            <div class="flex-between">
                <h3>Saved Methods</h3>
                <button class="blocks-button blocks-button-primary" data-modal-open="method-modal">Add Method</button>
            </div>
            <div class="payout-methods-list">
                {% for m in methods %}
                <div class="payout-method-item">
                    <div class="method-info">
                        <span class="method-provider">{{ m.provider }}</span>
                        <span class="method-details json-summary" data-json-type="method-details">{{ m.details }}</span>
                    </div>
                    {% if m.is_default %}<span class="badge-default">Default</span>{% endif %}
                </div>
                {% endfor %}
                {% if methods | length == 0 %}
                <div class="empty-state">No payout methods added yet</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modals -->


<div id="method-modal" class="payout-modal">
    <div class="payout-modal-content">
        <h2>Add Payout Method</h2>
        <form id="method-form">
            <div class="blocks-form-field payout-form-group">
                <label>Provider</label>
                <select name="provider" class="blocks-input payout-select">
                    <option value="bank">Bank Account</option>
                    <option value="paypal">PayPal</option>
                    <option value="stripe">Stripe Connect</option>
                </select>
            </div>
            <div class="blocks-form-field payout-form-group">
                <label>Account Identifier / Email</label>
                <input type="text" name="identifier" class="blocks-input payout-input" required placeholder="Enter account or email">
                <p class="payout-help-text">For automatic payouts, use a Stripe connected account ID (acct_…) or PayPal email. Bank transfers remain queued for manual processing.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary" data-modal-close>Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary">Add Method</button>
            </div>
        </form>
    </div>
</div>

<div id="request-payout-modal" class="payout-modal">
    <div class="payout-modal-content">
        <h2>Withdraw Funds</h2>
        <form id="request-payout-form">
            <div class="blocks-form-field payout-form-group">
                <label>Balance: <span class="currency-symbol">{{ currency_symbol | default(value='₹') }}</span> {{ recipient.balance | price }}</label>
                <input type="number" step="0.01" name="amount" max="{{ recipient.balance }}" class="blocks-input payout-input" required placeholder="0.00">
            </div>
            <div class="blocks-form-field payout-form-group">
                <label>Destination Method</label>
                <select name="method_id" class="blocks-input payout-select" required>
                    <option value="">Select a method...</option>
                    {% for m in methods %}<option value="{{ m.id }}">{{ m.provider }} ({{ m.details }})</option>{% endfor %}
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary" data-modal-close>Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary">Request Withdrawal</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/payout/assets/payout.js" defer></script>
{% endblock %}