@extends('layouts.app')

@section('title', 'Scrape Tweets')

@section('content')
<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800 text-center">Scrape Tweets</h1>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-primary">
                    <h6 class="m-0 font-weight-bold text-white">Form Scrape Tweet</h6>
                </div>
                <div class="card-body">
                    <form id="scrapeForm" class="needs-validation" novalidate>
                        @csrf

                        <div id="keywords-container">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label>Kata Kunci</label>
                                    <input type="text" name="keywords[]" class="form-control" required>
                                </div>
                                <div class="col-md-6 d-flex align-items-end">
                                    <button type="button" class="btn btn-secondary w-100" onclick="addKeyword()">Tambah Kata Kunci</button>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>Grup Idol</label>
                                <input type="text" name="idol_group" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label>Tanggal Awal</label>
                                <input type="date" name="start_date" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label>Tanggal Akhir</label>
                                <input type="date" name="end_date" class="form-control" required>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success w-100">
                            <i class="fas fa-search"></i> Scrape Tweets
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-dark text-light">
            <div class="modal-body text-center">
                <div class="spinner-border text-light mb-3" role="status"></div>
                <p>Proses scraping sedang berjalan, harap tunggu...</p>
            </div>
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Hasil Scraping</h5>
                <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul id="resultList" class="list-group"></ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function addKeyword() {
        const container = document.getElementById('keywords-container');
        const row = document.createElement('div');
        row.className = 'row mb-3';
        row.innerHTML = `
            <div class="col-md-6">
                <input type="text" name="keywords[]" class="form-control" placeholder="Masukkan kata kunci" required>
            </div>
            <div class="col-md-6 d-flex align-items-end">
                <button type="button" class="btn btn-danger w-100" onclick="removeKeyword(this)">
                    Hapus Kata Kunci
                </button>
            </div>`;
        container.appendChild(row);
    }

    function removeKeyword(button) {
        button.closest('.row').remove();
    }

    document.getElementById('scrapeForm').addEventListener('submit', async function (e) {
        e.preventDefault();

        const form = e.target;
        const formData = new FormData(form);

        const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'), {
            backdrop: 'static',
            keyboard: false
        });
        const resultModal = new bootstrap.Modal(document.getElementById('resultModal'));
        const resultList = document.getElementById('resultList');

        resultList.innerHTML = '';
        loadingModal.show();

        try {
            const response = await fetch("{{ route('tweets.scrape') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value
                },
                body: formData
            });

            const data = await response.json();
            const taskId = data.task_id;

            if (!taskId) throw new Error("Gagal memulai scraping.");

            resultModal.show();

            const intervalId = setInterval(async () => {
                try {
                    const progressResponse = await fetch(`/progress/${taskId}`);
                    const progressData = await progressResponse.json();

                    resultList.innerHTML = '';

                    progressData.results.forEach(tweet => {
                        const li = document.createElement('li');
                        li.className = 'list-group-item';
                        li.innerHTML = `
                            <strong>Kata Kunci:</strong> ${tweet.keyword}<br>
                            <strong>Isi:</strong> ${tweet.content}<br>
                            <strong>Waktu:</strong> ${tweet.created_at ?? 'N/A'}
                        `;
                        resultList.appendChild(li);

                        // Auto scroll ke paling bawah
                        resultList.scrollTop = resultList.scrollHeight;
                    });

                    if (progressData.done) {
                        clearInterval(intervalId);
                        loadingModal.hide();
                    }
                } catch (error) {
                    console.error("Polling error:", error);
                    clearInterval(intervalId);
                    loadingModal.hide();
                    alert("Gagal mengambil progress scraping.");
                }
            }, 3000);

        } catch (error) {
            loadingModal.hide();
            alert("Gagal: " + error.message);
        }
    });
</script>
@endpush