{% extends "base.html" %}

{% block content %}
<div id="loading-overlay" class="hidden absolute inset-0 bg-slate-950/90 z-50 flex-col items-center justify-center">
    <div class="animate-spin text-brand-500 mb-4"><i data-lucide="loader-2" width="48" height="48"></i></div>
    <p class="text-slate-400 font-medium">Analyzing Receipt...</p>
</div>

<!-- Header -->
<div class="px-6 py-4 bg-slate-900 border-b border-slate-800 flex justify-between items-center">
    <a href="{{ url_for('dashboard') }}" class="text-slate-400 hover:text-white"><i data-lucide="x"></i></a>
    <h2 class="font-semibold text-white">Expense Details</h2>
    <button onclick="document.getElementById('expense-form').submit()" class="text-brand-500 font-bold hover:text-brand-400"><i data-lucide="check"></i></button>
</div>

<div class="flex-1 overflow-y-auto p-6 space-y-6">
    <form id="expense-form" method="POST" action="{{ url_for('add_expense') }}">
        
        <!-- Camera / Amount Area -->
        <div class="text-center py-4 space-y-4">
            <input type="file" id="camera-input" accept="image/*" capture="environment" class="hidden" onchange="handleImage(this)">
            <input type="hidden" name="receipt_image_hidden" id="receipt_image_hidden">

            <button type="button" onclick="document.getElementById('camera-input').click()" class="mx-auto flex items-center gap-2 text-brand-400 bg-brand-900/20 px-4 py-2 rounded-full text-sm font-medium border border-brand-900/50">
                <i data-lucide="camera" width="16"></i> Scan Receipt
            </button>
            
            <div class="flex items-center justify-center gap-1">
                <span class="text-4xl text-slate-500 font-light">{{ tour.currency }}</span>
                <input required name="amount" id="amount" type="number" step="0.01" placeholder="0.00"
                    class="text-5xl font-bold text-white bg-transparent text-center w-64 outline-none placeholder:text-slate-700">
            </div>
        </div>

        <!-- Allocation -->
        <div class="bg-slate-900 p-4 rounded-xl border border-slate-800 shadow-sm space-y-3">
            <div class="flex items-center gap-2 text-brand-500 font-medium">
                <i data-lucide="users" width="18"></i>
                <span>Allocated To</span>
            </div>
            <div class="flex flex-wrap gap-2">
                {% for p in people %}
                <label class="cursor-pointer">
                    <input type="checkbox" name="split_among" value="{{ p }}" checked class="peer hidden">
                    <span class="px-3 py-1.5 rounded-full text-xs font-medium border border-slate-700 bg-slate-800 text-slate-400 peer-checked:bg-brand-600 peer-checked:text-white peer-checked:border-brand-600 transition-colors select-none">
                        {{ p }}
                    </span>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Details -->
        <div class="bg-slate-900 p-4 rounded-xl border border-slate-800 shadow-sm space-y-4">
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Merchant</label>
                <input required name="merchant" id="merchant" type="text" placeholder="e.g. Starbucks"
                    class="w-full p-2 bg-transparent border-b border-slate-800 focus:border-brand-500 outline-none font-medium text-white placeholder:text-slate-700">
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-slate-500 mb-1">Date</label>
                    <input required name="date" id="date" type="date" value="{{ today }}"
                        class="w-full p-2 bg-transparent border-b border-slate-800 focus:border-brand-500 outline-none text-white">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-500 mb-1">Paid By</label>
                    <select name="payer" class="w-full p-2 bg-slate-900 border-b border-slate-800 focus:border-brand-500 outline-none text-white">
                        {% for p in people %}
                        <option value="{{ p }}">{{ p }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-2">Category</label>
                <select name="category" class="w-full p-2 bg-slate-900 border-b border-slate-800 focus:border-brand-500 outline-none text-white">
                    <option>Food</option>
                    <option>Transport</option>
                    <option>Accommodation</option>
                    <option>Activities</option>
                    <option>Shopping</option>
                    <option selected>General</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Description</label>
                <input name="description" id="description" type="text" placeholder="Lunch"
                    class="w-full p-2 bg-transparent border-b border-slate-800 focus:border-brand-500 outline-none text-white placeholder:text-slate-700">
            </div>
        </div>
    </form>
</div>

<script>
async function handleImage(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        const reader = new FileReader();
        
        document.getElementById('loading-overlay').classList.remove('hidden');
        document.getElementById('loading-overlay').classList.add('flex');

        reader.onload = async function(e) {
            const base64Data = e.target.result.split(',')[1]; // Remove header
            document.getElementById('receipt_image_hidden').value = e.target.result; // Keep full for saving

            try {
                const response = await fetch('/api/analyze_receipt', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image: base64Data })
                });

                if(response.ok) {
                    const data = await response.json();
                    if(data.amount) document.getElementById('amount').value = data.amount;
                    if(data.merchant) document.getElementById('merchant').value = data.merchant;
                    if(data.description) document.getElementById('description').value = data.description;
                    if(data.date) document.getElementById('date').value = data.date;
                }
            } catch (err) {
                console.error(err);
                alert("Failed to analyze receipt.");
            } finally {
                document.getElementById('loading-overlay').classList.add('hidden');
                document.getElementById('loading-overlay').classList.remove('flex');
            }
        };
        reader.readAsDataURL(file);
    }
}
</script>
{% endblock %}