@extends('layouts.public')

@section('title', 'Chat with our Repair Team')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <section class="container mx-auto max-w-3xl px-4 py-10 md:px-8">
        <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm">
            <header class="border-b border-zinc-100 p-6">
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">Help with your repair</p>
                <h1 class="mt-1 text-2xl font-extrabold tracking-tight text-zinc-950">Chat with the virtual receptionist</h1>
                <p class="mt-2 text-sm leading-6 text-zinc-600">Get general repair and booking information. The receptionist cannot confirm bookings, authorize payments or refunds, or connect you to a live operator.</p>
            </header>

            @if ($stores->isEmpty())
                <div class="m-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">AI chat is not currently available. Please contact a store directly for help.</div>
            @else
                <div id="messages" class="min-h-64 space-y-3 bg-zinc-50 p-6" aria-live="polite">
                    <div class="max-w-xl rounded-2xl rounded-tl-sm bg-white p-4 text-sm leading-6 text-zinc-700 shadow-sm">Hi! I can help with general repair and booking questions. If you need staff follow-up, use the form below and the store will contact you.</div>
                </div>
                <form id="chat-form" class="border-t border-zinc-100 p-6">
                    <div>
                        <label for="chat-store" class="text-sm font-bold text-zinc-800">Preferred store</label>
                        <select id="chat-store" class="mt-1 block w-full rounded-xl border-zinc-300">
                            @foreach ($stores as $store)<option value="{{ $store->id }}">{{ $store->name }}</option>@endforeach
                        </select>
                    </div>
                    <label class="mt-4 flex items-start gap-3 text-sm text-zinc-700"><input id="chat-consent" type="checkbox" required class="mt-1 rounded border-zinc-300 text-primary"><span>I consent to my messages being processed to answer this request and understand this is an AI receptionist.</span></label>
                    <div class="mt-4 flex gap-3">
                        <input id="chat-message" maxlength="1000" required autocomplete="off" placeholder="Tell us how we can help…" class="min-w-0 flex-1 rounded-xl border-zinc-300">
                        <button id="send-button" type="submit" class="rounded-xl bg-primary px-5 py-2.5 text-sm font-bold text-white">Send</button>
                    </div>
                    <p id="chat-error" class="mt-3 hidden text-sm text-red-700" role="alert"></p>
                </form>

                <details class="border-t border-zinc-100 p-6">
                    <summary class="cursor-pointer text-sm font-bold text-zinc-900">Request staff follow-up</summary>
                    <p class="mt-2 text-sm text-zinc-600">This sends a lead to the store. It does not start a live chat or guarantee an immediate response.</p>
                    <form id="handoff-form" class="mt-4 grid gap-3 sm:grid-cols-2">
                        <input id="lead-name" required maxlength="255" placeholder="Your name" class="rounded-xl border-zinc-300">
                        <input id="lead-phone" maxlength="40" placeholder="Phone number" class="rounded-xl border-zinc-300">
                        <input id="lead-email" type="email" maxlength="255" placeholder="Email address" class="rounded-xl border-zinc-300">
                        <input id="lead-device" maxlength="255" placeholder="Device (optional)" class="rounded-xl border-zinc-300">
                        <textarea id="lead-issue" maxlength="3000" rows="3" placeholder="What can staff help with?" class="sm:col-span-2 rounded-xl border-zinc-300"></textarea>
                        <button type="submit" class="w-fit rounded-xl bg-zinc-950 px-5 py-2.5 text-sm font-bold text-white">Send follow-up request</button>
                        <p id="handoff-status" class="self-center text-sm" aria-live="polite"></p>
                    </form>
                </details>
            @endif
        </div>
    </section>

    @if ($stores->isNotEmpty())
    <script>
        (() => {
            const form = document.getElementById('chat-form');
            const handoff = document.getElementById('handoff-form');
            const messages = document.getElementById('messages');
            const error = document.getElementById('chat-error');
            const csrf = document.querySelector('meta[name="csrf-token"]').content;
            let token = null;

            const addMessage = (text, visitor) => {
                const item = document.createElement('div');
                item.className = `max-w-xl rounded-2xl p-4 text-sm leading-6 shadow-sm ${visitor ? 'ml-auto rounded-tr-sm bg-primary text-white' : 'rounded-tl-sm bg-white text-zinc-700'}`;
                item.textContent = text;
                messages.appendChild(item);
                messages.scrollTop = messages.scrollHeight;
            };
            const request = async (url, body) => {
                const response = await fetch(url, {method: 'POST', headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf}, body: JSON.stringify(body)});
                const data = await response.json().catch(() => ({}));
                if (!response.ok) throw new Error(data.message || 'The request could not be completed.');
                return data;
            };

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                error.classList.add('hidden');
                const input = document.getElementById('chat-message');
                const send = document.getElementById('send-button');
                const message = input.value.trim();
                if (!message) return;
                addMessage(message, true);
                input.value = '';
                send.disabled = true;
                try {
                    const data = await request(@json(route('receptionist.message')), {
                        message, consent: document.getElementById('chat-consent').checked,
                        conversation_token: token, store_id: document.getElementById('chat-store').value,
                    });
                    token = data.conversation_token;
                    addMessage(data.message, false);
                } catch (exception) {
                    error.textContent = exception.message;
                    error.classList.remove('hidden');
                } finally { send.disabled = false; }
            });

            handoff.addEventListener('submit', async (event) => {
                event.preventDefault();
                const status = document.getElementById('handoff-status');
                if (!token) { status.textContent = 'Please send a chat message first so we can attach your request to this browser session.'; status.className = 'self-center text-sm text-red-700'; return; }
                try {
                    const data = await request(@json(route('receptionist.handoff')), {
                        consent: document.getElementById('chat-consent').checked, conversation_token: token,
                        name: document.getElementById('lead-name').value, phone: document.getElementById('lead-phone').value,
                        email: document.getElementById('lead-email').value, device_type: document.getElementById('lead-device').value,
                        issue: document.getElementById('lead-issue').value,
                    });
                    status.textContent = data.message;
                    status.className = 'self-center text-sm text-emerald-700';
                    handoff.reset();
                } catch (exception) { status.textContent = exception.message; status.className = 'self-center text-sm text-red-700'; }
            });
        })();
    </script>
    @endif
@endsection