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

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

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h2>📄 Document Details</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'ai_documents:document_list' %}">Documents</a></li>
                    <li class="breadcrumb-item active">{{ document.id }}</li>
                </ol>
            </nav>
        </div>
    </div>

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
    {% endif %}

    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Document Information</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th>ID:</th>
                            <td>{{ document.id }}</td>
                        </tr>
                        <tr>
                            <th>Type:</th>
                            <td><span class="badge bg-info">{{ document.get_document_type_display }}</span></td>
                        </tr>
                        <tr>
                            <th>Filename:</th>
                            <td>{{ document.original_filename }}</td>
                        </tr>
                        <tr>
                            <th>File Type:</th>
                            <td>{{ document.file_type|upper }}</td>
                        </tr>
                        <tr>
                            <th>Size:</th>
                            <td>{{ document.file_size|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                {% if document.status == 'COMPLETED' %}
                                <span class="badge bg-success">Completed</span>
                                {% elif document.status == 'PROCESSING' %}
                                <span class="badge bg-warning">Processing...</span>
                                {% elif document.status == 'FAILED' %}
                                <span class="badge bg-danger">Failed</span>
                                {% elif document.status == 'REVIEW' %}
                                <span class="badge bg-warning">Needs Review</span>
                                {% else %}
                                <span class="badge bg-secondary">Pending</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Uploaded By:</th>
                            <td>{{ document.uploaded_by.username }}</td>
                        </tr>
                        <tr>
                            <th>Uploaded At:</th>
                            <td>{{ document.uploaded_at|date:"d/m/Y H:i" }}</td>
                        </tr>
                        {% if document.processing_completed_at %}
                        <tr>
                            <th>Processed At:</th>
                            <td>{{ document.processing_completed_at|date:"d/m/Y H:i" }}</td>
                        </tr>
                        {% endif %}
                    </table>

                    {% if document.error_message %}
                    <div class="alert alert-danger">
                        <strong>Error:</strong> {{ document.error_message }}
                    </div>
                    {% endif %}

                    {% if document.notes %}
                    <div class="mt-3">
                        <strong>Notes:</strong>
                        <p class="text-muted">{{ document.notes }}</p>
                    </div>
                    {% endif %}

                    <div class="d-grid gap-2 mt-3">
                        {% if document.status == 'PENDING' %}
                        <a href="{% url 'ai_documents:document_process' document.pk %}" class="btn btn-success">
                            <i class="bi bi-play-circle"></i> Process Now
                        </a>
                        {% endif %}
                        <a href="{{ document.file.url }}" target="_blank" class="btn btn-outline-primary">
                            <i class="bi bi-download"></i> Download File
                        </a>
                        <a href="{% url 'ai_documents:document_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            {% if extracted_data %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">📊 Extracted Data</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Confidence Score:</strong>
                            <div class="progress mt-2">
                                <div class="progress-bar {% if extracted_data.confidence_score >= 0.8 %}bg-success{% elif extracted_data.confidence_score >= 0.6 %}bg-warning{% else %}bg-danger{% endif %}" 
                                     style="width: {{ extracted_data.confidence_score|floatformat:0|add:'%' }}">
                                    {{ extracted_data.confidence_score|floatformat:2 }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            {% if extracted_data.requires_review %}
                            <div class="alert alert-warning mb-0">
                                ⚠️ This extraction requires manual review
                            </div>
                            {% else %}
                            <div class="alert alert-success mb-0">
                                ✅ Extraction looks good
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if extracted_data.bank_statement_metadata %}
                    <h6>Bank Statement Information</h6>
                    <table class="table table-sm">
                        <tr>
                            <th>Bank:</th>
                            <td>{{ extracted_data.bank_statement_metadata.bank_name }}</td>
                        </tr>
                        <tr>
                            <th>Account:</th>
                            <td>{{ extracted_data.bank_statement_metadata.account_number }}</td>
                        </tr>
                        <tr>
                            <th>Holder:</th>
                            <td>{{ extracted_data.bank_statement_metadata.account_holder }}</td>
                        </tr>
                        <tr>
                            <th>Period:</th>
                            <td>{{ extracted_data.bank_statement_metadata.statement_period_start|date:"d/m/Y" }} - 
                                {{ extracted_data.bank_statement_metadata.statement_period_end|date:"d/m/Y" }}</td>
                        </tr>
                        <tr>
                            <th>Opening Balance:</th>
                            <td>RM {{ extracted_data.bank_statement_metadata.opening_balance|floatformat:2|intcomma }}</td>
                        </tr>
                        <tr>
                            <th>Closing Balance:</th>
                            <td>RM {{ extracted_data.bank_statement_metadata.closing_balance|floatformat:2|intcomma }}</td>
                        </tr>
                        <tr>
                            <th>Balance Check:</th>
                            <td>
                                {% if extracted_data.bank_statement_metadata.balance_matches %}
                                <span class="badge bg-success">✓ Balanced</span>
                                {% else %}
                                <span class="badge bg-danger">✗ Mismatch</span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                    {% endif %}

                    {% if extracted_data.bank_statement_lines.exists %}
                    <h6 class="mt-4">Transactions ({{ extracted_data.bank_statement_lines.count }})</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Description</th>
                                    <th class="text-end">Debit</th>
                                    <th class="text-end">Credit</th>
                                    <th class="text-end">Balance</th>
                                    <th class="text-center">Confidence</th>
                                    <th class="text-center">Reconciled</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for line in extracted_data.bank_statement_lines.all %}
                                <tr>
                                    <td>{{ line.date|date:"d/m/Y" }}</td>
                                    <td>{{ line.description|truncatewords:10 }}</td>
                                    <td class="text-end">
                                        {% if line.debit %}{{ line.debit|floatformat:2|intcomma }}{% else %}-{% endif %}
                                    </td>
                                    <td class="text-end">
                                        {% if line.credit %}{{ line.credit|floatformat:2|intcomma }}{% else %}-{% endif %}
                                    </td>
                                    <td class="text-end">{{ line.balance|floatformat:2|intcomma }}</td>
                                    <td class="text-center">
                                        <span class="badge {% if line.confidence_score >= 0.8 %}bg-success{% elif line.confidence_score >= 0.6 %}bg-warning{% else %}bg-danger{% endif %}">
                                            {{ line.confidence_score|floatformat:2 }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        {% if line.is_reconciled %}
                                        <span class="badge bg-success">✓</span>
                                        {% else %}
                                        <span class="badge bg-secondary">-</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-file-earmark-text" style="font-size: 48px; color: #ccc;"></i>
                    <h5 class="mt-3">No Extracted Data Yet</h5>
                    <p class="text-muted">Process this document to extract data using AI.</p>
                    {% if document.status == 'PENDING' %}
                    <a href="{% url 'ai_documents:document_process' document.pk %}" class="btn btn-primary mt-3">
                        <i class="bi bi-play-circle"></i> Process Now
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}