{% extends 'base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2>📤 Upload Document</h2>
            <p class="text-muted">Upload receipts, invoices, or bills for AI-powered data extraction</p>
        </div>
    </div>

    <!-- Usage Statistics Alert -->
    {% if document_usage %}
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            {% if document_usage.remaining <= 0 %}
            <div class="alert alert-danger" role="alert">
                <h5 class="alert-heading"><i class="ti ti-alert-circle me-2"></i>Document Upload Limit Reached</h5>
                <p class="mb-2">
                    You have used <strong>{{ document_usage.used }} of {{ document_usage.limit }}</strong> AI document uploads this month.
                </p>
                <p class="mb-0">
                    <a href="{% url 'tenants:settings' %}?tab=subscription" class="btn btn-sm btn-danger">
                        <i class="ti ti-star me-2"></i>Upgrade Plan
                    </a>
                </p>
            </div>
            {% elif document_usage.percentage >= 80 %}
            <div class="alert alert-warning" role="alert">
                <div class="d-flex align-items-center mb-2">
                    <i class="ti ti-alert-triangle me-2" style="font-size: 1.5rem;"></i>
                    <div>
                        <strong>Usage This Month:</strong> 
                        {{ document_usage.used }} / 
                        {% if document_usage.limit == -1 %}
                            Unlimited
                        {% else %}
                            {{ document_usage.limit }}
                        {% endif %}
                        documents ({{ document_usage.percentage|floatformat:0 }}% used)
                    </div>
                </div>
                {% if document_usage.limit > 0 %}
                <div class="progress mb-2" style="height: 10px;">
                    <div class="progress-bar bg-warning" role="progressbar" 
                         style="width: {{ document_usage.percentage }}%"></div>
                </div>
                <p class="mb-0"><small>{{ document_usage.remaining }} uploads remaining</small></p>
                {% endif %}
            </div>
            {% else %}
            <div class="alert alert-info" role="alert">
                <strong>Usage This Month:</strong>
                {{ document_usage.used }} / 
                {% if document_usage.limit == -1 %}
                    Unlimited
                {% else %}
                    {{ document_usage.limit }}
                {% endif %}
                AI document uploads
                {% if document_usage.limit > 0 %}
                ({{ document_usage.remaining }} remaining)
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Important Notice for Bank Statements -->
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <div class="alert alert-primary" role="alert">
                <h5 class="alert-heading"><i class="ti ti-info-circle me-2"></i>For Bank Statements:</h5>
                <p class="mb-2">
                    Bank statements have a <strong>dedicated upload page</strong> with better features:
                </p>
                <ul class="mb-2">
                    <li><strong>FREE</strong> server-side text extraction (no AI API costs!)</li>
                    <li>Automatic transaction reconciliation</li>
                    <li>Bank account linking</li>
                </ul>
                <p class="mb-0">
                    <a href="{% url 'core:bank_account_list' %}" class="btn btn-sm btn-primary">
                        <i class="ti ti-building-bank me-2"></i>Go to Bank Accounts
                    </a>
                </p>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-purple-lt">
                    <h5 class="mb-0"><i class="ti ti-file-upload me-2"></i>AI Document Upload</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4" role="alert">
                        <strong>This page is for:</strong>
                        <ul class="mb-0 mt-2">
                            <li>📄 Individual receipts (images: JPG, PNG, WEBP)</li>
                            <li>📋 Invoices (images or PDF)</li>
                            <li>🧾 Bills (images or PDF)</li>
                            <li>📝 Other business documents</li>
                        </ul>
                        <p class="mt-2 mb-0">
                            <small><strong>Note:</strong> PDFs use text extraction + Claude AI. 
                            Images use Claude Vision API.</small>
                        </p>
                    </div>

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="{{ form.document_type.id_for_label }}" class="form-label">
                                <i class="ti ti-file-type me-1"></i>Document Type
                            </label>
                            {{ form.document_type }}
                            {% if form.document_type.help_text %}
                            <div class="form-text">{{ form.document_type.help_text }}</div>
                            {% endif %}
                            {% if form.document_type.errors %}
                            <div class="text-danger">{{ form.document_type.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.file.id_for_label }}" class="form-label">
                                <i class="ti ti-upload me-1"></i>Select File
                            </label>
                            {{ form.file }}
                            <div class="form-text">
                                <strong>Supported formats:</strong>
                                <ul class="mb-0">
                                    <li><strong>Images:</strong> JPG, PNG, GIF, WEBP (uses Claude Vision API)</li>
                                    <li><strong>PDFs:</strong> Text extraction + Claude AI analysis</li>
                                </ul>
                                <strong>Max file size:</strong> 10MB
                            </div>
                            {% if form.file.errors %}
                            <div class="text-danger">{{ form.file.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-purple" {% if document_usage and document_usage.remaining <= 0 %}disabled{% endif %}>
                                <i class="ti ti-cloud-upload me-2"></i>Upload & Process with AI
                            </button>
                            <a href="{% url 'ai_documents:document_list' %}" class="btn btn-outline-secondary">
                                <i class="ti ti-arrow-left me-2"></i>Back to Documents
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="alert alert-success mt-4" role="alert">
                <h5 class="alert-heading"><i class="ti ti-bulb me-2"></i>Tips for Best Results:</h5>
                <ul class="mb-0">
                    <li><strong>For images:</strong> Use high-resolution scans (300 DPI minimum)</li>
                    <li>Ensure document is well-lit and properly aligned</li>
                    <li>Avoid shadows or glare on the document</li>
                    <li><strong>For PDFs:</strong> Text-based PDFs work better than scanned images</li>
                    <li><strong>Bank statements:</strong> Use the dedicated Banking menu upload</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}