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

{% block title %}Upload Bank Statement{% endblock %}

{% block content %}
<div class="container-xl">
    <!-- Header -->
    <div class="page-header d-print-none mb-4">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-pretitle">
                    <a href="{% url 'core:bank_account_list' %}">Bank Accounts</a> / 
                    <a href="{% url 'core:statement_list' %}">Statements</a> / 
                    Upload
                </div>
                <h2 class="page-title">Upload Bank Statement</h2>
                <div class="text-muted mt-1">Upload your bank statement PDF for processing</div>
            </div>
            <div class="col-auto">
                <a href="{% url 'core:statement_list' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Statements
                </a>
            </div>
        </div>
    </div>

    <!-- Usage Statistics Card -->
    {% if usage_stats %}
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            {% if usage_stats.limit == -1 %}
                <!-- Unlimited Plan -->
                <div class="alert alert-success d-flex align-items-center">
                    <i class="bi bi-infinity fs-2 me-3"></i>
                    <div>
                        <strong>Unlimited Uploads</strong>
                        <div class="text-muted small">
                            Your plan includes unlimited bank statement uploads this month. 
                            You've uploaded {{ usage_stats.used }} statement(s) so far.
                        </div>
                    </div>
                </div>
            {% elif usage_stats.limit == 0 %}
                <!-- Feature Disabled -->
                <div class="alert alert-danger d-flex align-items-center">
                    <i class="bi bi-lock-fill fs-2 me-3"></i>
                    <div>
                        <strong>Feature Not Available</strong>
                        <div class="text-muted small">
                            Bank statement uploads are not included in your current plan.
                            <a href="{% url 'tenants:subscription' %}" class="alert-link">Upgrade your plan</a> to access this feature.
                        </div>
                    </div>
                </div>
            {% else %}
                <!-- Limited Plan with Usage Bar -->
                <div class="card {% if usage_stats.percentage >= 90 %}border-danger{% elif usage_stats.percentage >= 75 %}border-warning{% endif %}">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h4 class="card-title mb-1">
                                    <i class="bi bi-file-earmark-bar-graph"></i> 
                                    Bank Statement Uploads
                                </h4>
                                <div class="text-muted small">
                                    {{ usage_stats.used }} of {{ usage_stats.limit }} uploads used this month
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="text-end">
                                    <div class="fs-2 fw-bold {% if usage_stats.percentage >= 90 %}text-danger{% elif usage_stats.percentage >= 75 %}text-warning{% else %}text-primary{% endif %}">
                                        {{ usage_stats.remaining }}
                                    </div>
                                    <div class="text-muted small">remaining</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Usage Progress Bar -->
                        <div class="progress mt-3" style="height: 20px;">
                            <div class="progress-bar {% if usage_stats.percentage >= 90 %}bg-danger{% elif usage_stats.percentage >= 75 %}bg-warning{% else %}bg-primary{% endif %}" 
                                 role="progressbar" 
                                 style="width: {{ usage_stats.percentage }}%"
                                 aria-valuenow="{{ usage_stats.percentage }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                                <span class="fw-bold">{{ usage_stats.percentage|floatformat:0 }}%</span>
                            </div>
                        </div>
                        
                        <!-- Warning Messages -->
                        {% if usage_stats.remaining == 0 %}
                            <div class="alert alert-danger mt-3 mb-0">
                                <strong>Upload Limit Reached!</strong> 
                                You've used all {{ usage_stats.limit }} upload(s) for this month. 
                                <a href="{% url 'tenants:subscription' %}" class="alert-link">Upgrade your plan</a> for more uploads.
                            </div>
                        {% elif usage_stats.percentage >= 90 %}
                            <div class="alert alert-warning mt-3 mb-0">
                                <strong>Almost at Limit!</strong> 
                                You have only {{ usage_stats.remaining }} upload(s) remaining. 
                                Consider <a href="{% url 'tenants:subscription' %}" class="alert-link">upgrading</a> for more uploads.
                            </div>
                        {% elif usage_stats.percentage >= 75 %}
                            <div class="alert alert-info mt-3 mb-0">
                                You have {{ usage_stats.remaining }} upload(s) remaining this month.
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Upload Form -->
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Statement Upload Form</h3>
                </div>
                <div class="card-body">
                    <!-- Upload Progress Bar (Hidden by default) -->
                    <div id="uploadProgress" class="mb-4" style="display: none;">
                        <div class="alert alert-info mb-3">
                            <div class="d-flex align-items-center">
                                <div class="spinner-border spinner-border-sm me-2" role="status">
                                    <span class="visually-hidden">Uploading...</span>
                                </div>
                                <div>
                                    <strong>Processing your statement...</strong>
                                    <div class="small text-muted">This may take a few moments. Please do not close this page.</div>
                                </div>
                            </div>
                        </div>
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" 
                                 role="progressbar" 
                                 style="width: 100%"
                                 aria-valuenow="100" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                                <span class="fw-bold">Uploading & Extracting Transactions...</span>
                            </div>
                        </div>
                    </div>

                    <form method="post" enctype="multipart/form-data" id="uploadForm">
                        {% csrf_token %}
                        
                        <!-- Bank Account Selection -->
                        <div class="mb-3">
                            <label for="{{ form.bank_account.id_for_label }}" class="form-label">
                                {{ form.bank_account.label }}
                                <span class="text-danger">*</span>
                            </label>
                            {{ form.bank_account }}
                            <div class="form-text">{{ form.bank_account.help_text }}</div>
                            {% if form.bank_account.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.bank_account.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Statement Month Selection -->
                        <div class="mb-3">
                            <label for="{{ form.statement_month.id_for_label }}" class="form-label">
                                {{ form.statement_month.label }}
                                <span class="text-danger">*</span>
                            </label>
                            {{ form.statement_month }}
                            <div class="form-text">{{ form.statement_month.help_text }}</div>
                            {% if form.statement_month.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.statement_month.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- File Upload -->
                        <div class="mb-3">
                            <label for="{{ form.file.id_for_label }}" class="form-label">
                                {{ form.file.label }}
                                <span class="text-danger">*</span>
                            </label>
                            {{ form.file }}
                            <div class="form-text">{{ form.file.help_text }}</div>
                            {% if form.file.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.file.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Form Errors -->
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <!-- Submit Buttons -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end" id="formButtons">
                            <a href="{% url 'core:statement_list' %}" class="btn btn-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="uploadButton">
                                <i class="bi bi-upload"></i> Upload Statement
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Info Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle"></i> Upload Instructions
                    </h5>
                </div>
                <div class="card-body">
                    <h6>Before uploading:</h6>
                    <ol class="mb-3">
                        <li><strong>Select Bank Account:</strong> Choose which bank account this statement belongs to</li>
                        <li><strong>Select Month:</strong> Choose the month of the statement (e.g., December 2024)</li>
                        <li><strong>Prepare PDF:</strong> Ensure your statement is in PDF format</li>
                        <li><strong>Check File:</strong> Make sure the PDF is readable and not password-protected</li>
                    </ol>

                    <h6>After uploading:</h6>
                    <ul class="mb-3">
                        <li><strong>AI Processing:</strong> Transactions will be extracted automatically using AI</li>
                        <li><strong>Review Results:</strong> Check the extracted transactions for accuracy</li>
                        <li><strong>Reconciliation:</strong> Match extracted transactions with your system records</li>
                        <li><strong>Export:</strong> Use the Auto Export button to create system transactions</li>
                    </ul>

                    {% if usage_stats and usage_stats.limit > 0 and usage_stats.limit != -1 %}
                    <div class="alert alert-info mb-0">
                        <strong>Note:</strong> Bank statement uploads consume AI processing resources. 
                        Your current plan allows {{ usage_stats.limit }} upload(s) per month. 
                        {% if usage_stats.remaining > 0 %}
                            You have {{ usage_stats.remaining }} upload(s) remaining this month.
                        {% else %}
                            You've reached your monthly limit. <a href="{% url 'tenants:subscription' %}" class="alert-link">Upgrade</a> for more uploads.
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('uploadForm');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadButton = document.getElementById('uploadButton');
    const formButtons = document.getElementById('formButtons');
    
    if (uploadForm) {
        uploadForm.addEventListener('submit', function(e) {
            // Validate form first
            const bankAccount = document.querySelector('[name="bank_account"]');
            const statementMonth = document.querySelector('[name="statement_month"]');
            const file = document.querySelector('[name="file"]');
            
            if (!bankAccount || !bankAccount.value) {
                alert('Please select a bank account');
                e.preventDefault();
                return false;
            }
            
            if (!statementMonth || !statementMonth.value) {
                alert('Please select a statement month');
                e.preventDefault();
                return false;
            }
            
            if (!file || !file.files || file.files.length === 0) {
                alert('Please select a PDF file to upload');
                e.preventDefault();
                return false;
            }
            
            // Check file type
            const fileName = file.files[0].name.toLowerCase();
            if (!fileName.endsWith('.pdf')) {
                alert('Please upload a PDF file');
                e.preventDefault();
                return false;
            }
            
            // Show progress bar
            uploadProgress.style.display = 'block';
            formButtons.style.display = 'none';
            
            // Disable submit button to prevent double submission
            uploadButton.disabled = true;
            uploadButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
            
            // Let form submit normally
            return true;
        });
    }
});
</script>
{% endblock %}