@extends('layouts.app')

@section('title', 'iiSHEEG — Somali Diaspora Business Directory & AI Assistant')

@section('content')
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h1 class="display-5">Find trusted Somali diaspora businesses, anywhere you live.</h1>
                <p class="lead">Search halal restaurants, hawala services, mosques and more — or ask iiSHEEG anything and get instant, practical guidance.</p>
            </div>
            <div class="col-lg-6">
                <div class="hero-card p-4 p-md-5">
                    <ul class="nav nav-tabs" id="homeTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="search-tab" data-bs-toggle="tab" data-bs-target="#search-pane" type="button" role="tab" aria-controls="search-pane" aria-selected="true">
                                <i class="bi bi-search me-1"></i> Search
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ask-tab" data-bs-toggle="tab" data-bs-target="#ask-pane" type="button" role="tab" aria-controls="ask-pane" aria-selected="false">
                                <i class="bi bi-chat-dots me-1"></i> Ask Anything
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content pt-4" id="homeTabsContent">
                        <div class="tab-pane fade show active" id="search-pane" role="tabpanel" aria-labelledby="search-tab">
                            <form action="{{ route('listing') }}" method="GET">
                                <div class="mb-3">
                                    <label for="keyword" class="form-label text-navy fw-semibold">What are you looking for?</label>
                                    <input type="text" name="keyword" id="keyword" class="form-control" placeholder="e.g. halal grocery, lawyer, restaurant">
                                </div>
                                <div class="mb-3">
                                    <label for="city_id" class="form-label text-navy fw-semibold">City</label>
                                    <select name="city_id" id="city_id" class="form-select">
                                        <option value="">All cities</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->name }}, {{ $city->country }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-teal w-100">
                                    <i class="bi bi-search me-1"></i> Search businesses
                                </button>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="ask-pane" role="tabpanel" aria-labelledby="ask-tab">
                            <form id="askAnythingForm">
                                @csrf
                                <div class="mb-3">
                                    <label for="question" class="form-label text-navy fw-semibold">Ask iiSHEEG anything</label>
                                    <textarea name="question" id="question" class="form-control" rows="3" placeholder="e.g. Where can I find a Somali-speaking GP in Minneapolis?" required></textarea>
                                </div>
                                <div class="mb-3">
                                    <label for="ask_city_id" class="form-label text-navy fw-semibold">City (optional)</label>
                                    <select name="city_id" id="ask_city_id" class="form-select">
                                        <option value="">Not city-specific</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->name }}, {{ $city->country }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-teal w-100" id="askSubmitBtn">
                                    <i class="bi bi-send me-1"></i> Ask
                                </button>
                            </form>

                            <div id="askLoading" class="text-center mt-3 d-none">
                                <div class="spinner-border spinner-border-teal" role="status"></div>
                                <p class="small text-muted mb-0 mt-2">iiSHEEG is thinking...</p>
                            </div>

                            <div id="askAnswer" class="p-3 mt-3 d-none">
                                <h6 class="text-navy fw-bold mb-2"><i class="bi bi-stars text-teal"></i> iiSHEEG says</h6>
                                <p id="askAnswerText" class="mb-0 small" style="white-space: pre-wrap;"></p>
                            </div>

                            <div id="askError" class="alert alert-danger mt-3 d-none small"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container py-5">
    <h2 class="text-center text-navy fw-bold mb-4">Browse by category</h2>
    <div class="row g-3">
        @foreach ($categories as $category)
            <div class="col-6 col-md-3">
                <a href="{{ route('listing', ['keyword' => $category->name]) }}" class="text-decoration-none">
                    <div class="border rounded-3 text-center py-3 px-2 h-100 bg-white">
                        <span class="fw-semibold text-navy small">{{ $category->name }}</span>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
</section>
@endsection

@section('scripts')
<script>
document.getElementById('askAnythingForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const form = e.target;
    const submitBtn = document.getElementById('askSubmitBtn');
    const loading = document.getElementById('askLoading');
    const answerBox = document.getElementById('askAnswer');
    const answerText = document.getElementById('askAnswerText');
    const errorBox = document.getElementById('askError');

    answerBox.classList.add('d-none');
    errorBox.classList.add('d-none');
    loading.classList.remove('d-none');
    submitBtn.disabled = true;

    fetch('{{ route('ask') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            question: form.question.value,
            city_id: form.city_id.value || null,
        }),
    })
        .then(async (response) => {
            if (!response.ok) {
                throw new Error('Something went wrong. Please try again.');
            }
            return response.json();
        })
        .then((data) => {
            answerText.textContent = data.answer;
            answerBox.classList.remove('d-none');
        })
        .catch((err) => {
            errorBox.textContent = err.message;
            errorBox.classList.remove('d-none');
        })
        .finally(() => {
            loading.classList.add('d-none');
            submitBtn.disabled = false;
        });
});
</script>
@endsection
