@extends('layouts.app')

@section('title', 'Chat AI')

@section('content')
<div class="w-full max-w-4xl mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">🤖 Teman Chat AI</h1>

    {{-- Form Input Chat --}}
    <form id="chatForm" class="flex flex-col gap-3">
        <textarea name="message" id="chatInput"
                  class="w-full min-h-[60px] px-4 py-2 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-[color:var(--primary-color)] bg-white dark:bg-gray-700 text-gray-800 dark:text-white resize-y"
                  placeholder="Ketik pertanyaan Anda..."></textarea>

        <div class="flex justify-end">
            <button type="submit"
                    class="px-5 py-2 rounded bg-[color:var(--primary-color)] text-white hover:brightness-110 transition">
                Kirim ✉️
            </button>
        </div>
    </form>

    {{-- Balasan AI Terakhir --}}
    <div id="chatReply"
         class="mt-6 bg-gray-100 dark:bg-gray-700 p-4 rounded text-gray-800 dark:text-white whitespace-pre-line border dark:border-gray-600">
    </div>

    {{-- Riwayat Chat Sebelumnya --}}
    <div class="mt-10">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-white mb-3">🕘 10 Percakapan Terakhir</h2>
        <div class="space-y-4 max-h-[400px] overflow-y-auto flex flex-col-reverse border dark:border-gray-700 rounded p-3 bg-gray-50 dark:bg-gray-900">
            @foreach ($chats as $chat)
                <div class="p-3 rounded
                    @if($chat->sender === 'user')
                        bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100
                    @else
                        bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100
                    @endif">
                    <strong>{{ $chat->sender === 'user' ? 'Anda' : 'AI' }}:</strong>
                    <div>{!! nl2br(e($chat->message)) !!}</div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<script>
document.getElementById('chatForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    if (!message) return;
    input.value = '';
    const replyBox = document.getElementById('chatReply');
    replyBox.innerHTML = '<em>⏳ Menunggu balasan dari AI...</em>';

    fetch('{{ route('chat.ai.send') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ message })
    })
    .then(res => res.json())
    .then(data => {
        replyBox.innerHTML = data.reply;
    })
    .catch(() => {
        replyBox.innerHTML = '❌ Terjadi kesalahan saat mengirim pesan.';
    });
});
</script>
@endsection