@extends('admin.instagram.layout')

@section('title', 'Dashboard — Instagram Lead Intelligence')

@section('content')
<div class="container">

    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px;">
        <div class="wordmark">
            <span class="signal-mark"><span></span><span></span><span></span><span></span></span>
            <div>
                Lead Intelligence
                <small>Instagram business accounts</small>
            </div>
        </div>

        <div style="display:flex; align-items:center; gap:28px;">
            <div class="mono" style="font-size:13px; color:var(--text-secondary); display:flex; gap:20px;">
                <span>Total <b style="color:var(--text-primary);">{{ $stats['total'] }}</b></span>
                <span>Selesai <b style="color:var(--accent-signal);">{{ $stats['completed'] }}</b></span>
                <span>Gagal <b style="color:var(--accent-danger);">{{ $stats['failed'] }}</b></span>
                <span>Dieksekusi <b style="color:var(--text-primary);">{{ $stats['executed'] }}</b></span>
                <span>Rata Skor <b style="color:var(--accent-warn);">{{ $stats['avg_skor'] }}</b></span>
            </div>
            <form method="POST" action="{{ route('admin.instagram.logout') }}">
                @csrf
                <button type="submit" class="btn-ghost">Keluar</button>
            </form>
        </div>
    </div>

    @if (session('instagram_panel_notice'))
        <p style="color:var(--accent-signal); font-size:13px; margin:0 0 16px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:4px;">
            {{ session('instagram_panel_notice') }}
        </p>
    @endif

    <form method="GET" action="{{ route('admin.instagram.panel') }}"
          style="display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:24px;">
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Cari</label>
            <input type="text" name="q" value="{{ request('q') }}" placeholder="username / nama bisnis"
                   class="field-underline" style="width:200px;">
        </div>
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Skala</label>
            <select name="skala" class="field-underline">
                <option value="">Semua</option>
                @foreach (['Micro','Small','Medium','Enterprise'] as $opt)
                    <option value="{{ $opt }}" @selected(request('skala') === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Tech maturity</label>
            <select name="tech" class="field-underline">
                <option value="">Semua</option>
                @foreach (['Low','Medium','High'] as $opt)
                    <option value="{{ $opt }}" @selected(request('tech') === $opt)>{{ $opt }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Status</label>
            <select name="status" class="field-underline">
                <option value="">Semua</option>
                <option value="completed" @selected(request('status') === 'completed')>Selesai</option>
                <option value="failed" @selected(request('status') === 'failed')>Gagal</option>
            </select>
        </div>
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Eksekusi</label>
            <select name="exec" class="field-underline">
                <option value="">Semua</option>
                <option value="no" @selected(request('exec') === 'no')>Belum</option>
                <option value="yes" @selected(request('exec') === 'yes')>Sudah</option>
            </select>
        </div>
        <div>
            <label style="display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:4px;">Skor min.</label>
            <input type="number" name="min_skor" value="{{ request('min_skor') }}" min="0" max="100"
                   class="field-underline" style="width:70px;">
        </div>
        <button type="submit" class="btn">Terapkan</button>
        @if (request()->anyFilled(['q','skala','tech','status','exec','min_skor']))
            <a href="{{ route('admin.instagram.panel') }}" class="btn-ghost" style="text-decoration:none;">Reset</a>
        @endif
        <a href="{{ route('admin.instagram.export', request()->query()) }}"
           class="btn-ghost" style="text-decoration:none; margin-left:auto;">Ekspor CSV</a>
    </form>

    <div style="overflow-x:auto;">
        <table style="width:100%; border-collapse:collapse; font-size:13.5px;">
            <thead>
                <tr style="text-align:left; color:var(--text-secondary); font-size:11.5px;">
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Username</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Nama Bisnis</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Kategori</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Skala</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Tech</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Skor</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Kontak</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Link</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);">Status</th>
                    <th style="padding:8px 10px; border-bottom:1px solid var(--border);"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($leads as $lead)
                    @php
                        $skorColor = 'var(--accent-muted)';
                        if ($lead->skor_kelayakan >= 70) { $skorColor = 'var(--accent-signal)'; }
                        elseif ($lead->skor_kelayakan >= 40) { $skorColor = 'var(--accent-warn)'; }
                    @endphp
                    <tr style="border-bottom:1px solid var(--border);">
                        <td style="padding:9px 10px;" class="mono">{{ $lead->username }}</td>
                        <td style="padding:9px 10px;">{{ $lead->nama_bisnis ?? '—' }}</td>
                        <td style="padding:9px 10px; color:var(--text-secondary);">{{ $lead->kategori_bisnis ?? '—' }}</td>
                        <td style="padding:9px 10px;">{{ $lead->skala_bisnis ?? '—' }}</td>
                        <td style="padding:9px 10px;">{{ $lead->tech_maturity ?? '—' }}</td>
                        <td style="padding:9px 10px;">
                            @if (!is_null($lead->skor_kelayakan))
                                <span class="mono" style="color:{{ $skorColor }}; font-weight:600;">{{ $lead->skor_kelayakan }}</span>
                            @else
                                —
                            @endif
                        </td>
                        <td style="padding:9px 10px;" class="mono">{{ $lead->contact_phone ?? '—' }}</td>
                        <td style="padding:9px 10px; color:var(--text-secondary);">{{ $lead->link_type ?? '—' }}</td>
                        <td style="padding:9px 10px;">
                            @if ($lead->is_completed)
                                <span style="color:var(--accent-signal);">Selesai</span>
                            @else
                                <span style="color:var(--accent-danger);">Gagal</span>
                            @endif
                            @if ($lead->executed_at)
                                <br><span class="mono" style="font-size:11px; color:var(--text-secondary);">dieksekusi {{ $lead->executed_at->diffForHumans() }}</span>
                            @endif
                        </td>
                        <td style="padding:9px 10px; white-space:nowrap;">
                            <button type="button" class="btn-ghost" style="padding:5px 10px; font-size:12px;" onclick="toggleDetail(this)">Detail</button>

                            <form method="POST" action="{{ route('admin.instagram.execute', $lead) }}" target="_blank" style="display:inline;">
                                @csrf
                                <button type="submit" class="btn" style="padding:5px 10px; font-size:12px;"
                                        title="Buka profil Instagram akun ini di tab baru untuk DM langsung">
                                    Eksekusi
                                </button>
                            </form>

                            <form method="POST" action="{{ route('admin.instagram.destroy', $lead) }}" style="display:inline;"
                                  onsubmit="return confirm('Hapus data {{ $lead->username }} dari database? Tindakan ini tidak bisa dibatalkan.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-ghost" style="padding:5px 10px; font-size:12px; border-color:var(--accent-danger); color:var(--accent-danger);">
                                    Hapus
                                </button>
                            </form>
                        </td>
                    </tr>
                    <tr class="detail-row" hidden>
                        <td colspan="10" style="padding:16px; background:var(--surface); border-bottom:1px solid var(--border);">
                            @if ($lead->is_completed)
                                <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
                                    <div>
                                        <h3 style="font-size:13px; color:var(--text-secondary); margin-bottom:6px;">Masalah operasional</h3>
                                        <p style="margin:0 0 14px;">{{ $lead->masalah_operasional }}</p>
                                        <h3 style="font-size:13px; color:var(--text-secondary); margin-bottom:6px;">Sistem direkomendasikan</h3>
                                        <p style="margin:0 0 14px;">{{ $lead->sistem_direkomendasikan }}</p>
                                        <h3 style="font-size:13px; color:var(--text-secondary); margin-bottom:6px;">Estimasi nilai proyek</h3>
                                        <p style="margin:0;">{{ $lead->estimasi_nilai_proyek }}</p>
                                    </div>
                                    <div>
                                        <h3 style="font-size:13px; color:var(--text-secondary); margin-bottom:6px;">Draft DM — Direct hook</h3>
                                        <p style="margin:0 0 14px; white-space:pre-line;">{{ $lead->draft_dm_variant_a }}</p>
                                        <h3 style="font-size:13px; color:var(--text-secondary); margin-bottom:6px;">Draft DM — Soft hook</h3>
                                        <p style="margin:0; white-space:pre-line;">{{ $lead->draft_dm_variant_b }}</p>
                                    </div>
                                </div>
                            @else
                                <h3 style="font-size:13px; color:var(--accent-danger); margin-bottom:6px;">Error log</h3>
                                <p style="margin:0;" class="mono">{{ $lead->error_log }}</p>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" style="padding:24px 10px; color:var(--text-secondary); text-align:center;">
                            Belum ada data yang cocok dengan filter ini.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top:24px;">
        {{ $leads->links('admin.instagram.pagination') }}
    </div>
</div>

<script>
    function toggleDetail(button) {
        const row = button.closest('tr');
        const detailRow = row.nextElementSibling;
        if (!detailRow) return;
        detailRow.hidden = !detailRow.hidden;
        button.textContent = detailRow.hidden ? 'Detail' : 'Tutup';
    }
</script>
@endsection