@extends('layouts.layout')

@section('title', auth()->user()->role === 'admin' ? 'Yönetici Paneli' : 'Müşteri Paneli')
@section('header_title', auth()->user()->role === 'admin' ? 'Yönetici Kontrol Paneli' : 'Müşteri Kontrol Paneli')
@section('header_subtitle', auth()->user()->role === 'admin' ? 'Tüm sistem tarama kuyruğu, kullanıcı hesapları ve sunucu servislerini yönetin.' : 'Google Haritalar üzerinden yeni tarama başlatın ve taranan verilerinizi takip edin.')

@section('content')
<!-- Stats Grid -->
<div class="stats-grid">
    <div class="stat-card" style="--card-accent: var(--primary); --card-accent-glow: rgba(93, 164, 107, 0.3);">
        <div class="stat-info">
            <h3>{{ auth()->user()->role === 'admin' ? 'Sistem Toplam Görev' : 'Görevlerim' }}</h3>
            <div class="stat-value">{{ $stats['total_tasks'] }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="list-circle-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: var(--warning); --card-accent-glow: rgba(245, 158, 11, 0.3);">
        <div class="stat-info">
            <h3>Bekleyen Görev</h3>
            <div class="stat-value">{{ $stats['pending_tasks'] }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="time-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: #33b3ff; --card-accent-glow: rgba(51, 179, 255, 0.3);">
        <div class="stat-info">
            <h3>Aktif Tarama</h3>
            <div class="stat-value">{{ $stats['active_tasks'] }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="sync-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: var(--success); --card-accent-glow: rgba(93, 164, 107, 0.3);">
        <div class="stat-info">
            <h3>{{ auth()->user()->role === 'admin' ? 'Toplam İşletme Verisi' : 'Kazanılan İşletmelerim' }}</h3>
            <div class="stat-value">{{ $stats['total_companies'] }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="people-circle-outline"></ion-icon>
        </div>
    </div>
</div>

<!-- Panels Grid -->
<div class="panel-grid" style="margin-top: 1rem;">
    <!-- Left: Add New Task Form -->
    <div class="card">
        <div class="card-title">Yeni Tarama Ekle</div>
        <form action="{{ route('tasks.create') }}" method="POST" id="taskForm">
            @csrf
            
            <div class="form-group">
                <label for="country">Hedef Ülke</label>
                <select name="country" id="country" class="form-select" required>
                    <option value="" disabled selected>Ülke Seçin</option>
                    @foreach(array_keys($data['countries']) as $country)
                        <option value="{{ $country }}">{{ $country }}</option>
                    @endforeach
                    <option value="custom_country">-- DİĞER (Manuel Giriş) --</option>
                </select>
                <input type="text" id="custom_country_input" class="form-control" placeholder="Ülke Adı Yazın" style="margin-top: 8px; display: none;">
            </div>

            <div class="form-group">
                <label for="city">Hedef Şehir</label>
                <select name="city" id="city" class="form-select" required>
                    <option value="" disabled selected>Önce Ülke Seçin</option>
                </select>
                <input type="text" id="custom_city_input" class="form-control" placeholder="Şehir Adı Yazın" style="margin-top: 8px; display: none;">
            </div>

            <div class="form-group">
                <label for="category">Sektör / Kategori</label>
                <select name="category" id="category" class="form-select" required>
                    <option value="" disabled selected>Kategori Seçin</option>
                    @foreach($data['categories'] as $category)
                        <option value="{{ $category }}">{{ $category }}</option>
                    @endforeach
                    <option value="custom_category">-- DİĞER (Manuel Giriş) --</option>
                </select>
                <input type="text" id="custom_category_input" class="form-control" placeholder="Özel Sektör / Kategori Adı" style="margin-top: 8px; display: none;">
            </div>

            <div class="form-group">
                <label for="total_target">Limit (Hedef Veri Sayısı)</label>
                <input type="number" name="total_target" id="total_target" class="form-control" value="50" min="0" required>
                <span style="font-size: 0.75rem; color: var(--text-secondary); display: block; margin-top: 4px;">0 = Sınırsız / Limit Yok</span>
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
                <ion-icon name="play-outline"></ion-icon>
                Görevi Kuyruğa Ekle
            </button>
        </form>
    </div>

    <!-- Right: Active/Recent Tasks Table -->
    <div class="card">
        <div class="card-title">
            {{ auth()->user()->role === 'admin' ? 'Tüm Tarama Kuyruğu' : 'Görevlerim ve Kuyruk' }}
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Kapsam (Ülke / Şehir)</th>
                        <th>Sektör / Kategori</th>
                        @if(auth()->user()->role === 'admin')
                            <th>Talep Eden</th>
                        @endif
                        <th>Durum</th>
                        <th>İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentTasks as $task)
                        <tr>
                            <td>#{{ $task->id }}</td>
                            <td>{{ $task->country }} / <strong>{{ $task->city }}</strong></td>
                            <td style="font-size: 0.85rem; max-width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
                                {{ $task->category }}
                            </td>
                            @if(auth()->user()->role === 'admin')
                                <td style="font-size: 0.85rem; font-weight: 500;">
                                    {{ $task->user ? $task->user->name : 'Sistem' }}
                                </td>
                            @endif
                            <td class="task-status-cell" data-task-id="{{ $task->id }}" data-status="{{ $task->status }}">
                                @if($task->status == 'pending')
                                    <div class="status-wrapper" style="display: flex; align-items: center; gap: 6px;">
                                        <ion-icon name="ellipsis-horizontal-circle-outline" class="spinner-icon" style="animation: spin 3s linear infinite;"></ion-icon>
                                        <span class="badge badge-pending">Sırada</span>
                                    </div>
                                @elseif($task->status == 'processing')
                                    <div class="status-wrapper">
                                        <div class="progress-container">
                                            <div class="progress-bar-wrapper">
                                                <div class="progress-bar-fill" style="width: {{ $task->progress }}%;"></div>
                                            </div>
                                            <div class="progress-meta">
                                                <span class="progress-percentage">{{ $task->progress }}%</span>
                                                <span class="progress-count">{{ $task->total_target === 0 ? $task->scraped_count . ' (Limit Yok)' : $task->scraped_count . ' / ' . $task->total_target }}</span>
                                                <span class="progress-time">{{ $task->total_target === 0 ? 'Sınırsız Tarama' : 'Tahmini: ' . max(3, (int)ceil((100 - $task->progress) * 0.8)) . ' sn' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @elseif($task->status == 'completed')
                                    <div class="status-wrapper">
                                        <span class="badge badge-completed">Tamamlandı</span>
                                    </div>
                                @else
                                    <div class="status-wrapper">
                                        <span class="badge badge-failed">Hata</span>
                                    </div>
                                @endif
                            </td>
                            <td class="task-action-cell" data-task-id="{{ $task->id }}">
                                <div style="display: flex; gap: 8px;">
                                    @if($task->status == 'pending')
                                        <form action="{{ route('tasks.simulate', $task->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-secondary btn-sm" title="Scraper Simüle Et (Veri Üret)" style="background-color: rgba(93, 164, 107, 0.15) !important; color: var(--primary) !important; border-color: rgba(93, 164, 107, 0.3) !important;">
                                                <ion-icon name="play-circle-outline" style="font-size: 1.2rem;"></ion-icon>
                                            </button>
                                        </form>
                                    @endif
                                    @if($task->status == 'processing')
                                        <form action="{{ route('tasks.stop', $task->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-danger btn-sm" title="Taramayı Durdur (Verileri Kaydet)" style="background-color: rgba(239, 68, 68, 0.15) !important; color: var(--danger) !important; border-color: rgba(239, 68, 68, 0.3) !important;">
                                                <ion-icon name="stop-circle-outline" style="font-size: 1.2rem;"></ion-icon>
                                            </button>
                                        </form>
                                    @endif
                                    @if($task->status !== 'pending' && $task->status !== 'processing')
                                        <form action="{{ route('tasks.restart', $task->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-secondary btn-sm" title="Yeniden Başlat">
                                                <ion-icon name="reload-outline"></ion-icon>
                                            </button>
                                        </form>
                                    @endif
                                    <form action="{{ route('tasks.delete', $task->id) }}" method="POST" style="display:inline;" onsubmit="return confirm('Görevi silmek istediğinize emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" title="Sil">
                                            <ion-icon name="trash-outline"></ion-icon>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ auth()->user()->role === 'admin' ? 6 : 5 }}" style="text-align: center; color: var(--text-secondary); padding: 2rem;">
                                Kuyrukta hiçbir tarama görevi bulunamadı.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Bottom: Recent Companies -->
<div class="card" style="margin-top: 2rem;">
    <div class="card-title">
        Son Eklenen İşletmeler
        <a href="{{ route('companies.index') }}" class="btn btn-secondary btn-sm">Tümünü Gör</a>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Firma Adı</th>
                    <th>Telefon</th>
                    <th>Web Sitesi</th>
                    <th>E-mail</th>
                    <th>Bölge (Ülke / Şehir)</th>
                    <th>Kategori</th>
                    <th>Kayıt Tarihi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentCompanies as $company)
                    <tr class="company-row" style="cursor: pointer;"
                        data-name="{{ $company->name }}"
                        data-phone="{{ $company->phone }}"
                        data-website="{{ $company->website }}"
                        data-email="{{ $company->email }}"
                        data-location="{{ $company->country }} / {{ $company->city }}"
                        data-category="{{ $company->category }}"
                        data-instagram="{{ $company->instagram }}"
                        data-facebook="{{ $company->facebook }}">
                        <td><strong>{{ $company->name }}</strong></td>
                        <td>{{ $company->phone }}</td>
                        <td>
                            @if($company->website && $company->website !== '-')
                                <a href="{{ $company->website }}" target="_blank" style="color: var(--primary); text-decoration: none;">Link</a>
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ $company->email }}</td>
                        <td>{{ $company->country }} / {{ $company->city }}</td>
                        <td style="font-size: 0.8rem; opacity: 0.8;">{{ $company->category }}</td>
                        <td>{{ $company->created_at->diffForHumans() }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" style="text-align: center; color: var(--text-secondary); padding: 2rem;">
                            Henüz taranmış ve kaydedilmiş hiçbir işletme verisi yok.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if(auth()->user()->role === 'admin')
    <!-- Admin System Monitor -->
    <div class="card" style="margin-top: 2rem;">
        <div class="card-title">
            <span>Sistem Durumu & Monitor</span>
            <span class="system-status-ok" style="font-size: 0.75rem; font-weight: 700; color: var(--primary); background: rgba(93, 164, 107, 0.1); padding: 0.25rem 0.75rem; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px;">
                <span class="pulse-dot"></span> TÜM SİSTEMLER AKTİF
            </span>
        </div>
        <div class="system-metrics-grid">
            <div class="metric-item">
                <span class="metric-label">Google Maps Scraper Engine</span>
                <span class="metric-value status-online" style="color: var(--primary); display: flex; align-items: center; gap: 6px;">
                    <span class="pulse-dot"></span> ÇALIŞIYOR
                </span>
            </div>
            <div class="metric-item">
                <span class="metric-label">Veri Ayrıştırma Servisi (Parser)</span>
                <span class="metric-value status-online" style="color: var(--primary); display: flex; align-items: center; gap: 6px;">
                    <span class="pulse-dot"></span> ÇALIŞIYOR
                </span>
            </div>
            <div class="metric-item">
                <span class="metric-label">Veritabanı Senkronizasyonu</span>
                <span class="metric-value status-online" style="color: var(--primary); display: flex; align-items: center; gap: 6px;">
                    <span class="pulse-dot"></span> ONLINE
                </span>
            </div>
            <div class="metric-item">
                <span class="metric-label">API Gateway Latency</span>
                <span class="metric-value">12ms</span>
            </div>
        </div>
    </div>
@endif

<!-- Lead Details Modal -->
<div id="lead-details-modal" class="modal-backdrop" style="display: none;">
    <div class="modal-content">
        <button class="modal-close-btn">&times;</button>
        <div class="modal-header-section">
            <div class="modal-pin-icon"><ion-icon name="business-outline"></ion-icon></div>
            <div>
                <h3 id="modal-company-name" style="margin: 0; font-family: var(--font-title); font-size: 1.6rem; color: var(--text-primary);">Firma Adı</h3>
                <span id="modal-company-category" class="badge badge-completed" style="margin-top: 0.35rem; display: inline-block;">Kategori</span>
            </div>
        </div>
        <div class="modal-body-section">
            <div class="info-group">
                <label>Telefon</label>
                <div id="modal-company-phone" class="info-val">Telefon</div>
            </div>
            <div class="info-group">
                <label>E-Posta</label>
                <div id="modal-company-email" class="info-val">E-Posta</div>
            </div>
            <div class="info-group">
                <label>Web Sitesi</label>
                <div id="modal-company-website" class="info-val">Web Sitesi</div>
            </div>
            <div class="info-group">
                <label>Konum</label>
                <div id="modal-company-location" class="info-val">Konum</div>
            </div>
            <div class="info-group" style="grid-column: span 2; margin-top: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                <label>Sosyal Medya Bağlantıları</label>
                <div class="social-links-flex" style="margin-top: 0.75rem; display: flex; gap: 10px;">
                    <a id="modal-company-instagram" href="#" target="_blank" class="btn btn-secondary btn-sm" style="display: inline-flex; align-items: center; gap: 6px; color: #e1306c;">
                        <ion-icon name="logo-instagram" style="font-size: 1.1rem;"></ion-icon> Instagram Profilini Aç
                    </a>
                    <a id="modal-company-facebook" href="#" target="_blank" class="btn btn-secondary btn-sm" style="display: inline-flex; align-items: center; gap: 6px; color: #1877f2;">
                        <ion-icon name="logo-facebook" style="font-size: 1.1rem;"></ion-icon> Facebook Sayfasını Aç
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const countrySelect = document.getElementById('country');
        const citySelect = document.getElementById('city');
        const categorySelect = document.getElementById('category');

        const customCountryInput = document.getElementById('custom_country_input');
        const customCityInput = document.getElementById('custom_city_input');
        const customCategoryInput = document.getElementById('custom_category_input');

        const countriesMap = @json($data['countries']);

        countrySelect.addEventListener('change', function() {
            const country = this.value;
            citySelect.innerHTML = '';
            
            if (country === 'custom_country') {
                customCountryInput.style.display = 'block';
                customCountryInput.required = true;
                customCountryInput.name = 'country';
                countrySelect.name = '';

                citySelect.style.display = 'none';
                citySelect.required = false;
                citySelect.name = '';
                customCityInput.style.display = 'block';
                customCityInput.required = true;
                customCityInput.name = 'city';
            } else {
                customCountryInput.style.display = 'none';
                customCountryInput.required = false;
                customCountryInput.name = '';
                countrySelect.name = 'country';

                citySelect.style.display = 'block';
                citySelect.required = true;
                citySelect.name = 'city';
                customCityInput.style.display = 'none';
                customCityInput.required = false;
                customCityInput.name = '';

                // Populate cities
                const cities = countriesMap[country] || [];
                citySelect.innerHTML = '<option value="" disabled selected>Şehir Seçin</option>';
                cities.forEach(function(city) {
                    const opt = document.createElement('option');
                    opt.value = city;
                    opt.textContent = city;
                    citySelect.appendChild(opt);
                });
                const optOther = document.createElement('option');
                optOther.value = 'custom_city';
                optOther.textContent = '-- DİĞER (Manuel Giriş) --';
                citySelect.appendChild(optOther);
            }
        });

        citySelect.addEventListener('change', function() {
            if (this.value === 'custom_city') {
                customCityInput.style.display = 'block';
                customCityInput.required = true;
                customCityInput.name = 'city';
                citySelect.name = '';
            } else {
                customCityInput.style.display = 'none';
                customCityInput.required = false;
                customCityInput.name = '';
                citySelect.name = 'city';
            }
        });

        categorySelect.addEventListener('change', function() {
            if (this.value === 'custom_category') {
                customCategoryInput.style.display = 'block';
                customCategoryInput.required = true;
                customCategoryInput.name = 'category';
                categorySelect.name = '';
            } else {
                customCategoryInput.style.display = 'none';
                customCategoryInput.required = false;
                customCategoryInput.name = '';
                categorySelect.name = 'category';
            }
        });

        // Company Details Modal Handler
        document.querySelectorAll('.company-row').forEach(function(row) {
            row.addEventListener('click', function(e) {
                // Prevent trigger if clicking on links or buttons
                if (e.target.closest('a') || e.target.closest('button') || e.target.closest('ion-icon')) {
                    return;
                }
                
                const data = this.dataset;
                document.getElementById('modal-company-name').textContent = data.name;
                document.getElementById('modal-company-category').textContent = data.category;
                document.getElementById('modal-company-phone').textContent = data.phone || '-';
                document.getElementById('modal-company-email').textContent = data.email || '-';
                document.getElementById('modal-company-website').textContent = data.website || '-';
                document.getElementById('modal-company-location').textContent = data.location || '-';
                
                const instaBtn = document.getElementById('modal-company-instagram');
                if (data.instagram && data.instagram !== '-') {
                    instaBtn.href = data.instagram;
                    instaBtn.style.display = 'inline-flex';
                } else {
                    instaBtn.style.display = 'none';
                }
                
                const fbBtn = document.getElementById('modal-company-facebook');
                if (data.facebook && data.facebook !== '-') {
                    fbBtn.href = data.facebook;
                    fbBtn.style.display = 'inline-flex';
                } else {
                    fbBtn.style.display = 'none';
                }
                
                const modal = document.getElementById('lead-details-modal');
                modal.style.display = 'flex';
                setTimeout(function() {
                    modal.querySelector('.modal-content').style.transform = 'scale(1)';
                }, 10);
            });
        });

        // Close modal handlers
        const closeBtn = document.querySelector('.modal-close-btn');
        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }
        
        const modalBackdrop = document.getElementById('lead-details-modal');
        if (modalBackdrop) {
            modalBackdrop.addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        }

        function closeModal() {
            const modal = document.getElementById('lead-details-modal');
            if (modal) {
                modal.querySelector('.modal-content').style.transform = 'scale(0.95)';
                setTimeout(function() {
                    modal.style.display = 'none';
                }, 150);
            }
        }

        // Live Status Poller & Progress Simulator
        let pollInterval = setInterval(updateTaskStatuses, 2000);
        
        // Initial run to activate immediately
        updateTaskStatuses();

        function updateTaskStatuses() {
            fetch('{{ route('tasks.statuses') }}')
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    if (data.status !== 'success') return;
                    
                    let hasActiveTasks = false;
                    let shouldRefresh = false;

                    data.tasks.forEach(function(task) {
                        const cell = document.querySelector(`.task-status-cell[data-task-id="${task.id}"]`);
                        if (!cell) return;

                        const currentStatus = cell.dataset.status;

                        // If the status has changed to completed on the server, refresh the page to reload the tables
                        if (task.status === 'completed' && currentStatus !== 'completed') {
                            shouldRefresh = true;
                        }

                        cell.dataset.status = task.status;

                        if (task.status === 'pending') {
                            hasActiveTasks = true;
                            cell.innerHTML = `
                                <div class="status-wrapper" style="display: flex; align-items: center; gap: 6px;">
                                    <ion-icon name="ellipsis-horizontal-circle-outline" class="spinner-icon" style="animation: spin 3s linear infinite;"></ion-icon>
                                    <span class="badge badge-pending">Sırada</span>
                                </div>
                            `;
                        } else if (task.status === 'processing') {
                            hasActiveTasks = true;
                            
                            let isLimitless = (task.total_target === 9999 || task.total_target === 0);
                            let remainingSeconds = Math.max(3, Math.ceil((100 - task.progress) * 0.8));
                            
                            let countLabel = isLimitless ? (task.total_target === 0 ? `${task.scraped_count} (Limit Yok)` : `${task.scraped_count} firma`) : `${task.scraped_count} / ${task.total_target}`;
                            let timeLabel = isLimitless ? (task.total_target === 0 ? `Sınırsız Tarama` : `Limit Yok (Canlı)`) : `Tahmini: ${remainingSeconds} sn`;

                            cell.innerHTML = `
                                <div class="status-wrapper">
                                    <div class="progress-container">
                                        <div class="progress-bar-wrapper">
                                            <div class="progress-bar-fill" style="width: ${task.progress}%;"></div>
                                        </div>
                                        <div class="progress-meta">
                                            <span class="progress-percentage">${task.progress}%</span>
                                            <span class="progress-count">${countLabel}</span>
                                            <span class="progress-time">${timeLabel}</span>
                                        </div>
                                    </div>
                                </div>
                            `;

                            // If this is a simulation running, increment its progress on the server
                            if (task.total_target === 9999) {
                                let nextProgress = task.progress;
                                let nextScraped = task.scraped_count;

                                if (task.total_target === 9999) {
                                    nextProgress = Math.min(task.progress + Math.floor(Math.random() * 6) + 3, 99);
                                    nextScraped = task.scraped_count + 1; // Increment by 1 lead
                                } else {
                                    let increment = Math.floor(Math.random() * 8) + 4;
                                    nextProgress = Math.min(task.progress + increment, 100);
                                    nextScraped = Math.min(Math.floor((nextProgress / 100) * task.total_target), task.total_target);
                                }

                                fetch(`/tasks/${task.id}/progress`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    },
                                    body: JSON.stringify({
                                        progress: nextProgress,
                                        scraped_count: nextScraped,
                                        total_target: task.total_target,
                                        status: (!isLimitless && nextProgress === 100) ? 'completed' : 'processing'
                                    })
                                });
                            }
                        } else if (task.status === 'completed') {
                            cell.innerHTML = `
                                <div class="status-wrapper">
                                    <span class="badge badge-completed">Tamamlandı</span>
                                </div>
                            `;
                        } else {
                            cell.innerHTML = `
                                <div class="status-wrapper">
                                    <span class="badge badge-failed">Hata</span>
                                </div>
                            `;
                        }
                    });

                    if (shouldRefresh) {
                        clearInterval(pollInterval);
                        setTimeout(function() {
                            window.location.reload();
                        }, 500);
                    }
                });
        }
    });
</script>
@endpush