{% extends 'base.html' %}

{% block title %}Location Check - Bizness Navigator{% endblock %}

{% block content %}
<div x-data="locationChecker()" class="space-y-8">
    <!-- Header -->
    <div class="text-center space-y-4">
        <h1 class="text-4xl font-bold text-gray-900 tracking-tight">
            Smart Location Check
        </h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
            AI validates your chosen location for legal restrictions, requirements, and estimated costs.
        </p>
    </div>

    <!-- Check Form -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8 md:p-12">
        <form @submit.prevent="checkLocation" class="space-y-6">
            {% csrf_token %}

            <!-- Address -->
            <div class="space-y-3">
                <label for="address" class="block text-sm font-semibold text-gray-900">
                    Business Address
                </label>
                <input
                    type="text"
                    id="address"
                    x-model="formData.address"
                    placeholder="e.g., Navoi Street 15, Tashkent"
                    class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900"
                    required
                >
                <p class="text-sm text-gray-500">
                    Enter the exact address for accurate analysis
                </p>
            </div>

            <!-- Business Type -->
            <div class="space-y-3">
                <label for="business_type" class="block text-sm font-semibold text-gray-900">
                    Business Type
                </label>
                <select
                    id="business_type"
                    x-model="formData.business_type"
                    class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900"
                    required
                >
                    <option value="">Select business type</option>
                    <optgroup label="Food & Beverage">
                        <option value="cafe">Cafe</option>
                        <option value="restaurant">Restaurant</option>
                        <option value="fast food">Fast Food</option>
                        <option value="bakery">Bakery</option>
                    </optgroup>
                    <optgroup label="Retail">
                        <option value="store">Store</option>
                        <option value="supermarket">Supermarket</option>
                        <option value="pharmacy">Pharmacy</option>
                    </optgroup>
                    <optgroup label="Services">
                        <option value="office">Office</option>
                        <option value="beauty salon">Beauty Salon</option>
                        <option value="gym">Gym</option>
                        <option value="medical center">Medical Center</option>
                    </optgroup>
                </select>
            </div>

            <!-- Submit Button -->
            <button
                type="submit"
                :disabled="loading"
                class="w-full bg-gray-900 hover:bg-gray-800 text-white font-semibold py-4 px-6 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
            >
                <template x-if="!loading">
                    <span>Check Location</span>
                </template>
                <template x-if="loading">
                    <span class="flex items-center">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Analyzing location...
                    </span>
                </template>
            </button>
        </form>

        <!-- Example Addresses -->
        <div class="mt-8 bg-gray-50 rounded-xl p-6 border border-gray-200">
            <h3 class="font-semibold text-gray-900 mb-4">Example addresses to try:</h3>
            <div class="grid md:grid-cols-2 gap-3">
                <button @click="formData.address = 'Navoi Street 15, Tashkent'; formData.business_type = 'cafe'" class="text-left bg-white p-4 rounded-lg hover:bg-gray-50 transition border border-gray-200">
                    <div class="font-medium text-gray-900">City Center</div>
                    <div class="text-sm text-gray-600">Navoi St. 15 - Cafe</div>
                </button>
                <button @click="formData.address = 'Mirobod Street 20, Tashkent'; formData.business_type = 'store'" class="text-left bg-white p-4 rounded-lg hover:bg-gray-50 transition border border-gray-200">
                    <div class="font-medium text-gray-900">Residential Area</div>
                    <div class="text-sm text-gray-600">Mirobod St. 20 - Store</div>
                </button>
            </div>
        </div>
    </div>

    <!-- Results -->
    <div x-show="result" x-cloak class="space-y-6">
        <!-- Status Card -->
        <div class="bg-white rounded-2xl border border-gray-200 p-8">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
                <div class="flex-1">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2">Check Results</h2>
                    <p class="text-gray-600" x-text="result?.address"></p>
                </div>

                <!-- Status Badge -->
                <div :class="{
                    'bg-green-100 text-green-800': result?.status === 'approved',
                    'bg-yellow-100 text-yellow-800': result?.status === 'conditional',
                    'bg-red-100 text-red-800': result?.status === 'rejected'
                }" class="px-6 py-3 rounded-xl font-semibold text-center">
                    <div class="text-2xl mb-1" x-text="result?.score"></div>
                    <div class="text-sm" x-text="result?.status === 'approved' ? 'Approved' : result?.status === 'conditional' ? 'Conditional' : 'Rejected'"></div>
                </div>
            </div>

            <!-- Map -->
            <div id="result-map" class="h-96 rounded-xl border border-gray-200"></div>
        </div>

        <!-- Permissions & Restrictions -->
        <div class="grid md:grid-cols-2 gap-6">
            <!-- Permissions -->
            <div x-show="result?.permissions?.length" class="bg-white rounded-xl border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Permissions</h3>
                <ul class="space-y-2">
                    <template x-for="permission in result?.permissions" :key="permission">
                        <li class="flex items-start bg-green-50 p-3 rounded-lg">
                            <svg class="w-5 h-5 text-green-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-sm text-gray-700" x-text="permission"></span>
                        </li>
                    </template>
                </ul>
            </div>

            <!-- Restrictions -->
            <div x-show="result?.restrictions?.length" class="bg-white rounded-xl border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Restrictions</h3>
                <div class="space-y-3">
                    <template x-for="restriction in result?.restrictions" :key="restriction.name">
                        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                            <p class="font-semibold text-red-900 mb-1" x-text="restriction.name"></p>
                            <p class="text-sm text-red-700 mb-2" x-text="restriction.description"></p>
                            <div x-show="restriction.object" class="text-xs text-red-600">
                                <span x-text="restriction.object"></span> -
                                <span x-text="restriction.distance + 'm'"></span>
                                (required: <span x-text="restriction.required_distance + 'm'"></span>)
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Requirements -->
        <div x-show="result?.requirements?.length" class="bg-white rounded-xl border border-gray-200 p-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-6">Requirements</h3>
            <div class="grid md:grid-cols-2 gap-4">
                <template x-for="req in result?.requirements" :key="req.name">
                    <div class="bg-gray-50 rounded-lg p-5">
                        <p class="font-semibold text-gray-900 mb-2" x-text="req.name"></p>
                        <p class="text-sm text-gray-600 mb-4" x-text="req.description"></p>
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-600" x-text="formatMoney(req.estimated_cost)"></span>
                            <span class="text-gray-600" x-text="req.time_days + ' days'"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- Total Costs -->
        <div class="bg-gray-900 rounded-2xl p-8 text-white">
            <h3 class="text-xl font-semibold mb-6">Legalization Costs</h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white/10 rounded-xl p-6 text-center">
                    <p class="text-sm text-white/80 mb-2">Total Cost</p>
                    <p class="text-3xl font-bold" x-text="formatMoney(result?.costs?.total)"></p>
                </div>
                <div class="bg-white/10 rounded-xl p-6 text-center">
                    <p class="text-sm text-white/80 mb-2">Processing Time</p>
                    <p class="text-3xl font-bold" x-text="result?.costs?.time_days + ' days'"></p>
                </div>
            </div>
        </div>

        <!-- AI Analysis -->
        <div class="bg-white rounded-xl border border-gray-200 p-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">AI Analysis</h3>
            <p class="text-gray-700 leading-relaxed whitespace-pre-wrap" x-text="result?.analysis"></p>
        </div>

        <!-- Recommendations -->
        <div x-show="result?.recommendations?.length" class="bg-white rounded-xl border border-gray-200 p-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Recommendations</h3>
            <ul class="space-y-2">
                <template x-for="rec in result?.recommendations" :key="rec">
                    <li class="flex items-start bg-gray-50 p-4 rounded-lg">
                        <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                        <span class="text-gray-700" x-text="rec"></span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</div>

<script>
let resultMap = null;

function locationChecker() {
    return {
        loading: false,
        result: null,
        formData: {
            address: '',
            business_type: ''
        },

        async checkLocation() {
            this.loading = true;
            this.result = null;

            try {
                const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
                                document.cookie.match(/csrftoken=([^;]+)/)?.[1];

                const response = await fetch('{% url "locations:check_api" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify(this.formData)
                });

                const data = await response.json();

                if (data.success) {
                    this.result = data.result;
                    setTimeout(() => this.initMap(), 100);
                } else {
                    alert('Error: ' + (data.error || 'Unknown error'));
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Error checking location: ' + error.message);
            } finally {
                this.loading = false;
            }
        },

        initMap() {
            if (!this.result?.coordinates) return;

            const coords = this.result.coordinates;

            if (resultMap) {
                resultMap.remove();
            }

            resultMap = L.map('result-map').setView([coords.lat, coords.lon], 16);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors',
                maxZoom: 19
            }).addTo(resultMap);

            const color = this.result.status === 'approved' ? 'green' :
                         this.result.status === 'conditional' ? 'orange' : 'red';

            L.marker([coords.lat, coords.lon], {
                icon: L.divIcon({
                    className: 'custom-marker',
                    html: `<div style="background-color: ${color}; width: 30px; height: 30px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3);"></div>`,
                    iconSize: [30, 30]
                })
            }).addTo(resultMap).bindPopup(`
                <div class="text-center">
                    <strong>${this.result.address}</strong><br>
                    <span style="color: ${color}">${this.result.status}</span>
                </div>
            `).openPopup();
        },

        formatMoney(amount) {
            if (!amount) return '0 UZS';
            return new Intl.NumberFormat('en-US').format(amount) + ' UZS';
        }
    }
}
</script>

<style>
[x-cloak] { display: none !important; }
</style>
{% endblock %}