{# app/templates/platform/find-shop.html #}
{# Letzshop Vendor Finder Page #}
{% extends "platform/base.html" %}

{% block title %}{{ _("platform.find_shop.title") }} - Wizamart{% endblock %}

{% block content %}
<div x-data="vendorFinderData()" class="py-16 lg:py-24">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {# Header #}
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
                {{ _("platform.find_shop.title") }}
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-400">
                {{ _("platform.find_shop.subtitle") }}
            </p>
        </div>

        {# Search Form #}
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-lg">
            <div class="flex flex-col sm:flex-row gap-4">
                <input
                    type="text"
                    x-model="searchQuery"
                    @keyup.enter="lookupVendor()"
                    placeholder="{{ _('platform.find_shop.search_placeholder') }}"
                    class="flex-1 px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                />
                <button
                    @click="lookupVendor()"
                    :disabled="loading || !searchQuery.trim()"
                    class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center min-w-[140px]">
                    <template x-if="loading">
                        <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                        </svg>
                    </template>
                    <template x-if="!loading">
                        <span>{{ _("platform.find_shop.search_button") }}</span>
                    </template>
                </button>
            </div>

            {# Examples #}
            <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                <strong>{{ _("platform.find_shop.examples") }}</strong>
                <ul class="list-disc list-inside mt-1">
                    <li>https://letzshop.lu/vendors/my-shop</li>
                    <li>letzshop.lu/vendors/my-shop</li>
                    <li>my-shop</li>
                </ul>
            </div>
        </div>

        {# Results #}
        <template x-if="result">
            <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                <template x-if="result.found">
                    <div class="p-8">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-sm text-green-600 font-medium mb-1">{{ _("platform.find_shop.found") }}</p>
                                <h2 class="text-2xl font-bold text-gray-900 dark:text-white" x-text="result.vendor.name"></h2>
                                <a :href="result.vendor.letzshop_url" target="_blank"
                                   class="text-indigo-600 dark:text-indigo-400 hover:underline mt-1 inline-block"
                                   x-text="result.vendor.letzshop_url"></a>

                                <template x-if="result.vendor.description">
                                    <p class="text-gray-600 dark:text-gray-400 mt-4" x-text="result.vendor.description"></p>
                                </template>
                            </div>

                            <template x-if="result.vendor.logo_url">
                                <img :src="result.vendor.logo_url" :alt="result.vendor.name"
                                     class="w-20 h-20 rounded-xl object-cover border border-gray-200 dark:border-gray-700"/>
                            </template>
                        </div>

                        <div class="mt-8 flex items-center gap-4">
                            <template x-if="!result.vendor.is_claimed">
                                <a :href="'/signup?letzshop=' + result.vendor.slug"
                                   class="px-8 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-xl transition-colors">
                                    {{ _("platform.find_shop.claim_button") }}
                                </a>
                            </template>
                            <template x-if="result.vendor.is_claimed">
                                <div class="px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-xl">
                                    <span class="inline-flex items-center">
                                        <span class="text-yellow-500 mr-2">{{ _("platform.find_shop.claimed_badge") }}</span>
                                    </span>
                                    {{ _("platform.find_shop.already_claimed") }}
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                <template x-if="!result.found">
                    <div class="p-8 text-center">
                        <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">{{ _("platform.find_shop.not_found") }}</h3>
                        <p class="text-gray-600 dark:text-gray-400" x-text="result.error || '{{ _("platform.find_shop.not_found") }}'"></p>

                        <div class="mt-6">
                            <a href="/signup" class="text-indigo-600 dark:text-indigo-400 hover:underline">
                                {{ _("platform.find_shop.or_signup") }} &rarr;
                            </a>
                        </div>
                    </div>
                </template>
            </div>
        </template>

        {# Help Section #}
        <div class="mt-12 text-center">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ _("platform.find_shop.need_help") }}</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
                {{ _("platform.find_shop.no_account_yet") }}
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="https://letzshop.lu" target="_blank"
                   class="px-6 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    {{ _("platform.find_shop.create_letzshop") }}
                </a>
                <a href="/signup"
                   class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl transition-colors">
                    {{ _("platform.find_shop.signup_without") }}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function vendorFinderData() {
    return {
        searchQuery: '',
        result: null,
        loading: false,

        async lookupVendor() {
            if (!this.searchQuery.trim()) return;

            this.loading = true;
            this.result = null;

            try {
                const response = await fetch('/api/v1/platform/letzshop-vendors/lookup', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url: this.searchQuery })
                });

                this.result = await response.json();
            } catch (error) {
                console.error('Lookup error:', error);
                this.result = { found: false, error: 'Failed to lookup. Please try again.' };
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
{% endblock %}