<?php

use Livewire\Volt\Component;
use App\Models\UserBusiness;

new class extends Component {
    public $search = '';
    public $isSearching = false;
    public $notFound = false;

    public function searchBusiness()
    {
        $this->validate([
            'search' => 'required|min:3',
        ]);

        // If search starts with IMK, remove it before searching
        if (str_starts_with(strtoupper($this->search), 'IMK')) {
            $this->search = substr($this->search, 3);
        }

        $this->isSearching = true;
        $this->notFound = false;

        try {
            $business = UserBusiness::where('slug', 'LIKE', "%{$this->search}%")
                ->orWhere('name', 'LIKE', "%{$this->search}%")
                ->orWhereHas('user', function ($query) {
                    $query->where('ag_code', $this->search);
                })
                ->first();

            if ($business) {
                // Add debugging
                logger('Business found:', ['slug' => $business->slug]);
                return $this->redirect(route('buy', ['id' => $business->slug]), navigate: true);
            }

            $this->notFound = true;
            logger('Business not found for search:', ['search' => $this->search]);
        } catch (\Exception $e) {
            logger('Search error:', ['error' => $e->getMessage()]);
            $this->addError('search', 'An error occurred while searching.');
        } finally {
            $this->isSearching = false;
        }
    }
}; ?>

<div class="min-h-screen bg-gray-50 flex flex-col">
    <x-loading />
    <!-- Hero Section -->
    <div class="relative overflow-hidden bg-white">
        <!-- Background Pattern -->
        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-primary/10 to-transparent">
            <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
        </div>

        <div class="relative container mx-auto px-4 py-16 md:py-24">
            <div class="max-w-3xl mx-auto text-center">
                <!-- Hero Content -->
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                    Find Your Trusted
                    <span class="text-primary">Data Bundle</span>
                    Provider
                </h1>
                <p class="text-lg text-gray-600 mb-12">
                    Enter a business name, code, or identifier to connect with your preferred service provider
                </p>

                <!-- Search Form -->
                <div class="relative max-w-2xl mx-auto">
                    <form wire:submit="searchBusiness" class="relative">
                        <div class="relative">
                            <input type="text" wire:model="search"
                                class="w-full px-6 py-4 text-lg rounded-xl border-2 border-gray-100 focus:border-primary/20 focus:ring focus:ring-primary/10 transition-all duration-200 bg-white/70 backdrop-blur-sm"
                                placeholder="Search by business name or agent code..." required minlength="3">
                            <button type="submit"
                                class="absolute right-2 top-1/2 -translate-y-1/2 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200 flex items-center gap-2"
                                wire:loading.class="opacity-75 cursor-wait" wire:loading.attr="disabled">
                                <span wire:loading.remove>
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </span>
                                <span wire:loading>
                                    <svg class="w-5 h-5 animate-spin" 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>
                                </span>
                                <span wire:loading.remove>Search</span>
                                <span wire:loading>Searching...</span>
                            </button>
                        </div>

                        @error('search')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </form>

                    <!-- Not Found Message -->
                    @if ($notFound)
                        <div class="mt-4 p-4 rounded-lg bg-red-50 text-red-600 animate-fade-in">
                            <p class="flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Business not found. Please try another search.
                            </p>
                        </div>
                    @endif
                </div>

                <!-- Features Section -->
                <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="p-6 rounded-xl bg-white/50 backdrop-blur-sm shadow-sm">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-4 mx-auto">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Secure Transactions</h3>
                        <p class="text-gray-600">Safe and encrypted payment processing for all your purchases</p>
                    </div>

                    <div class="p-6 rounded-xl bg-white/50 backdrop-blur-sm shadow-sm">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-4 mx-auto">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Instant Delivery</h3>
                        <p class="text-gray-600">Get your data bundles delivered instantly after purchase</p>
                    </div>

                    <div class="p-6 rounded-xl bg-white/50 backdrop-blur-sm shadow-sm">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-4 mx-auto">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Verified Providers</h3>
                        <p class="text-gray-600">All businesses are verified and trusted service providers</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
