@extends('layouts.admin')

@section('title', 'Import News')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Import News</h1>
            <p class="text-sm text-gray-500 mt-1">Pull the latest Australian and world stories from NewsAPI into Local Pulse.</p>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Back to dashboard</a>
    </div>

    @if(session('success'))
        <div class="mb-4 rounded-md bg-emerald-50 border border-emerald-200 p-4 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-4 rounded-md bg-rose-50 border border-rose-200 p-4 text-sm text-rose-800">{{ session('error') }}</div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
                    <h2 class="text-base font-semibold text-slate-900">Quick import: top headlines</h2>
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $status['configured'] ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">{{ $status['configured'] ? 'API ready' : 'API key missing' }}</span>
                </div>
                <div class="p-5 space-y-4">
                    <p class="text-sm text-slate-600">Fetches the current top Australian headlines and imports them as draft / published articles. Source: <code class="text-xs bg-slate-100 px-1.5 py-0.5 rounded">{{ $status['default_country'] }}</code></p>
                    <form id="form-latest" data-endpoint="{{ route('admin.import.latest') }}" class="grid grid-cols-1 md:grid-cols-4 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-slate-500">Limit (1-100)</label>
                            <input type="number" name="limit" value="30" min="1" max="100" class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div class="flex items-end">
                            <label class="flex items-center text-sm text-slate-700">
                                <input type="checkbox" name="download_images" value="1" checked class="h-4 w-4 text-red-600 border-slate-300 rounded">
                                <span class="ml-2">Download images</span>
                            </label>
                        </div>
                        <div class="flex items-end">
                            <label class="flex items-center text-sm text-slate-700">
                                <input type="checkbox" name="dry_run" value="1" class="h-4 w-4 text-red-600 border-slate-300 rounded">
                                <span class="ml-2">Dry run</span>
                            </label>
                        </div>
                        <div class="flex items-end">
                            <button type="submit" class="w-full inline-flex justify-center items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                                Import latest
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200">
                    <h2 class="text-base font-semibold text-slate-900">Advanced: import by date range</h2>
                    <p class="text-xs text-slate-500 mt-1">Use this when you need to backfill a specific window or search a keyword.</p>
                </div>
                <div class="p-5">
                    <form id="form-range" data-endpoint="{{ route('admin.import.range') }}" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-slate-500">From</label>
                            <input type="date" name="from" value="{{ now()->subDays(7)->toDateString() }}" required class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-500">To</label>
                            <input type="date" name="to" value="{{ now()->toDateString() }}" required class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-500">Query (optional)</label>
                            <input type="text" name="query" placeholder="e.g. housing OR interest rates" class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-500">Sources (comma-separated IDs)</label>
                            <input type="text" name="sources" placeholder="abc-news-au, news-com-au" value="{{ $status['default_sources'] }}" class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-500">Limit (1-100)</label>
                            <input type="number" name="limit" value="50" min="1" max="100" class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div class="flex items-end gap-4">
                            <label class="flex items-center text-sm text-slate-700">
                                <input type="checkbox" name="download_images" value="1" checked class="h-4 w-4 text-red-600 border-slate-300 rounded">
                                <span class="ml-2">Download images</span>
                            </label>
                            <label class="flex items-center text-sm text-slate-700">
                                <input type="checkbox" name="dry_run" value="1" class="h-4 w-4 text-red-600 border-slate-300 rounded">
                                <span class="ml-2">Dry run</span>
                            </label>
                        </div>
                        <div class="md:col-span-2 flex justify-end">
                            <button type="submit" class="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-900 text-white px-5 py-2 rounded-md text-sm font-medium disabled:opacity-50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                Run date-range import
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200">
                    <h2 class="text-base font-semibold text-slate-900">Rephrase syndicated articles</h2>
                    <p class="text-xs text-slate-500 mt-1">Re-skin Australian and international articles in the Local Pulse voice. Each article is checked for similarity and the original source is credited.</p>
                </div>
                <div class="p-5">
                    <form id="form-rephrase" data-endpoint="{{ route('admin.import.rephrase') }}" class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
                        <div>
                            <label class="block text-xs font-medium text-slate-500">Limit (0 = all)</label>
                            <input type="number" name="limit" value="0" min="0" max="2000" class="mt-1 block w-full border border-slate-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div class="md:col-span-2 flex justify-end">
                            <button type="submit" class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-md text-sm font-medium disabled:opacity-50">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                Run rephrase
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div id="result-panel" class="hidden bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
                    <h2 class="text-base font-semibold text-slate-900">Result</h2>
                    <span id="result-mode" class="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-700"></span>
                </div>
                <div class="p-5">
                    <pre id="result-output" class="bg-slate-900 text-slate-100 text-xs rounded-md p-4 overflow-x-auto max-h-96"></pre>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200">
                    <h3 class="text-sm font-semibold text-slate-900">API configuration</h3>
                </div>
                <div class="p-5 space-y-2 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-slate-500">Key set</span>
                        <span class="font-medium {{ $status['configured'] ? 'text-emerald-600' : 'text-rose-600' }}">{{ $status['configured'] ? 'Yes' : 'No' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-slate-500">Source rewrite</span>
                        <span class="font-medium {{ $status['rewrite_configured'] ? 'text-emerald-600' : 'text-amber-600' }}">{{ $status['rewrite_configured'] ? 'Ready' : 'OPENAI_API_KEY needed' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-slate-500">Default country</span>
                        <span class="font-mono text-xs">{{ $status['default_country'] }}</span>
                    </div>
                    <div class="flex items-start justify-between gap-2">
                        <span class="text-slate-500 shrink-0">Default sources</span>
                        <span class="font-mono text-xs text-right break-all">{{ $status['default_sources'] }}</span>
                    </div>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-5 py-4 border-b border-slate-200">
                    <h3 class="text-sm font-semibold text-slate-900">Recently imported</h3>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($recent as $r)
                        <a href="{{ route('admin.articles.edit', $r) }}" class="block px-5 py-3 hover:bg-slate-50">
                            <div class="text-sm font-medium text-slate-900 line-clamp-2">{{ $r->title }}</div>
                            <div class="text-xs text-slate-500 mt-1">{{ $r->source_name ?: 'Source' }} · {{ ucfirst($r->scope) }} · {{ $r->created_at?->diffForHumans() ?? '—' }}</div>
                        </a>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No imported articles yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@once
    @push('scripts')
        <script>
            (function () {
                const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const panel = document.getElementById('result-panel');
                const output = document.getElementById('result-output');
                const mode = document.getElementById('result-mode');

                function showBusy(button) { button.disabled = true; button.dataset.original = button.innerHTML; button.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"/><path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="4" fill="currentColor"/></svg> Working...'; }
                function showDone(button) { button.disabled = false; if (button.dataset.original) button.innerHTML = button.dataset.original; }

                async function submitForm(form) {
                    const button = form.querySelector('button[type="submit"]');
                    showBusy(button);
                    const endpoint = form.dataset.endpoint;
                    const fd = new FormData(form);
                    const params = new URLSearchParams();
                    fd.forEach((v, k) => { if (v !== '' && v != null) params.append(k, v); });
                    try {
                        const resp = await fetch(endpoint, {
                            method: 'POST',
                            headers: { 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: params.toString(),
                        });
                        const data = await resp.json();
                        panel.classList.remove('hidden');
                        mode.textContent = data.mode || (endpoint.includes('rephrase') ? 'rephrase' : 'import');
                        output.textContent = JSON.stringify(data, null, 2);
                        output.className = resp.ok ? 'bg-slate-900 text-emerald-200 text-xs rounded-md p-4 overflow-x-auto max-h-96' : 'bg-rose-900 text-rose-100 text-xs rounded-md p-4 overflow-x-auto max-h-96';
                    } catch (err) {
                        panel.classList.remove('hidden');
                        output.textContent = 'Request failed: ' + (err.message || err);
                        output.className = 'bg-rose-900 text-rose-100 text-xs rounded-md p-4 overflow-x-auto max-h-96';
                    } finally {
                        showDone(button);
                    }
                }

                document.getElementById('form-latest').addEventListener('submit', function (e) { e.preventDefault(); submitForm(this); });
                document.getElementById('form-range').addEventListener('submit', function (e) { e.preventDefault(); submitForm(this); });
                document.getElementById('form-rephrase').addEventListener('submit', function (e) { e.preventDefault(); submitForm(this); });
            })();
        </script>
    @endpush
@endonce