@extends('layouts.app')

@push('style')
<style>
.bl-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.bl-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bl-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.bl-stat-label { font-size: .78rem; color: #64748b; }

.bl-tabs {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.bl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #6b7280;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
}
.bl-tab:hover { color: #374151; }
.bl-tab.active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}

.bl-row { transition: background .15s; }
.bl-row.disabled { opacity: .5; }
.bl-pattern { font-family: SFMono-Regular, Menlo, monospace; font-weight: 600; }

.bl-test-result {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .82rem;
    margin-top: 8px;
    display: none;
}
.bl-test-result.blocked { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: block; }
.bl-test-result.allowed { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; display: block; }

/* Two-list bypass picker */
.blp-col { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; height: 360px; }
.blp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; font-size: .82rem; font-weight: 600; color: #334155; }
.blp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #dbeafe; color: #1d4ed8; font-size: .72rem; font-weight: 700; margin-left: 4px; }
.blp-bulk { border: 0; background: transparent; color: #2563eb; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.blp-bulk:hover { text-decoration: underline; }
.blp-bulk.danger { color: #dc2626; }
.blp-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.blp-search input { border: 0; outline: 0; font-size: .85rem; width: 100%; background: transparent; }
.blp-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.blp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.blp-item:hover { background: #f1f5f9; }
.blp-item .blp-ext { font-family: SFMono-Regular, Menlo, monospace; font-weight: 700; color: #0f172a; font-size: .82rem; min-width: 46px; }
.blp-item .blp-name { color: #475569; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blp-item .blp-act { margin-left: auto; color: #94a3b8; flex-shrink: 0; display: inline-flex; }
.blp-item.selected .blp-act { color: #dc2626; }
.blp-item.available .blp-act { color: #16a34a; }
.blp-empty { padding: 24px 12px; text-align: center; color: #94a3b8; font-size: .82rem; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
    <div>
        <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
            <i data-lucide="shield-x" style="width:20px;height:20px;color:#dc2626;"></i>
            Number Blacklist
        </h4>
        <div class="text-secondary small mt-1">Block specific phone numbers or patterns from calling in or being dialed out.</div>
    </div>
</div>

@if (session('status'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('status') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- Stats row --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="bl-stat-card">
            <div class="bl-stat-icon" style="background:#fef2f2;">
                <i data-lucide="phone-incoming" style="width:18px;height:18px;color:#dc2626;"></i>
            </div>
            <div>
                <div class="bl-stat-value">{{ $stats['inbound_count'] }}</div>
                <div class="bl-stat-label">Inbound rules active</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="bl-stat-card">
            <div class="bl-stat-icon" style="background:#fef2f2;">
                <i data-lucide="phone-outgoing" style="width:18px;height:18px;color:#dc2626;"></i>
            </div>
            <div>
                <div class="bl-stat-value">{{ $stats['outbound_count'] }}</div>
                <div class="bl-stat-label">Outbound rules active</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="bl-stat-card">
            <div class="bl-stat-icon" style="background:#fff7ed;">
                <i data-lucide="ban" style="width:18px;height:18px;color:#c2410c;"></i>
            </div>
            <div>
                <div class="bl-stat-value">{{ number_format($stats['total_blocks']) }}</div>
                <div class="bl-stat-label">Total blocks</div>
            </div>
        </div>
    </div>
</div>

{{-- Tab nav --}}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div class="bl-tabs">
        <a href="{{ route('blacklist.index', ['direction' => 'inbound']) }}"
           class="bl-tab {{ $direction === 'inbound' ? 'active' : '' }}">
            <i data-lucide="phone-incoming" style="width:14px;height:14px;"></i> Inbound (Block Callers)
        </a>
        <a href="{{ route('blacklist.index', ['direction' => 'outbound']) }}"
           class="bl-tab {{ $direction === 'outbound' ? 'active' : '' }}">
            <i data-lucide="phone-outgoing" style="width:14px;height:14px;"></i> Outbound (Block Destinations)
        </a>
    </div>
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addBlacklistModal">
        <i data-lucide="plus" style="width:14px;height:14px;"></i> Add {{ ucfirst($direction) }} Rule
    </button>
</div>

{{-- Test number widget --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <i data-lucide="zap" style="width:16px;height:16px;color:#3b82f6;"></i>
            <strong class="small">Quick Test:</strong>
            <input type="text" id="testNumber" class="form-control form-control-sm"
                   placeholder="Type a number to check (e.g. 0824989396)" style="max-width:280px;">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="testBlacklist()">Test</button>
            <span class="text-secondary small">Direction: <strong>{{ ucfirst($direction) }}</strong></span>
        </div>
        <div id="testResult" class="bl-test-result"></div>
    </div>
</div>

{{-- Blacklist table --}}
<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="bg-light">
                <tr>
                    <th style="width:40px;"></th>
                    <th>Pattern</th>
                    <th>Reason</th>
                    <th class="text-center" style="width:80px;">Blocked</th>
                    <th style="width:160px;">Last Block</th>
                    <th style="width:200px;" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($entries as $entry)
                    <tr class="bl-row {{ $entry->enabled ? '' : 'disabled' }}">
                        <td>
                            <form method="POST" action="{{ route('blacklist.toggle', $entry) }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm p-0 border-0 bg-transparent" title="{{ $entry->enabled ? 'Disable' : 'Enable' }}">
                                    @if($entry->enabled)
                                        <i data-lucide="check-circle-2" style="width:18px;height:18px;color:#16a34a;"></i>
                                    @else
                                        <i data-lucide="circle" style="width:18px;height:18px;color:#94a3b8;"></i>
                                    @endif
                                </button>
                            </form>
                        </td>
                        <td><span class="bl-pattern">{{ $entry->pattern }}</span></td>
                        <td>
                            @if($entry->reason)
                                {{ $entry->reason }}
                            @else
                                <span class="text-secondary fst-italic">No reason given</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge bg-secondary">{{ $entry->block_count }}</span>
                        </td>
                        <td class="text-secondary small">
                            {{ $entry->last_blocked_at?->diffForHumans() ?? '—' }}
                        </td>
                        <td class="text-end">
                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                onclick='openEditModal(@json($entry))'>
                                <i data-lucide="edit-2" style="width:12px;height:12px;"></i> Edit
                            </button>
                            <form method="POST" action="{{ route('blacklist.destroy', $entry) }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm"
                                    onclick="return confirm('Remove this blacklist entry?')">
                                    <i data-lucide="trash-2" style="width:12px;height:12px;"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-secondary py-5">
                            <i data-lucide="shield" style="width:36px;height:36px;opacity:.3;display:block;margin:0 auto 8px;"></i>
                            No {{ $direction }} blacklist rules yet.<br>
                            <span class="small">Click "Add {{ ucfirst($direction) }} Rule" to create your first one.</span>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($entries->hasPages())
        <div class="card-footer bg-white">{{ $entries->links() }}</div>
    @endif
</div>

@if($direction === 'outbound')
    {{-- Per-extension bypass — searchable two-list picker (scales to 100+ extensions) --}}
    <div class="card mt-4">
        <div class="card-header d-flex align-items-center gap-2">
            <i data-lucide="key" style="width:16px;height:16px;color:#3b82f6;"></i>
            <strong>Outbound Blacklist Bypass</strong>
            <span class="text-secondary small ms-auto">Extensions allowed to dial blocked numbers</span>
        </div>
        <div class="card-body">
            <div class="text-secondary small mb-3">
                Some extensions (managers, receptionists) may need to dial numbers that are otherwise blocked.
                Move them into <strong>Allowed to Bypass</strong> on the right. Changes save automatically.
            </div>
            <div class="row g-3 blp">
                {{-- Available --}}
                <div class="col-md-6">
                    <div class="blp-col">
                        <div class="blp-head">
                            <span>Available Extensions</span>
                            <button type="button" class="blp-bulk" id="blpAddAll">Add all</button>
                        </div>
                        <div class="blp-search">
                            <i data-lucide="search" style="width:14px;height:14px;color:#94a3b8;"></i>
                            <input type="text" id="blpSearch" placeholder="Search by number or name&hellip;">
                        </div>
                        <ul class="blp-list" id="blpAvailable"></ul>
                    </div>
                </div>
                {{-- Selected --}}
                <div class="col-md-6">
                    <div class="blp-col">
                        <div class="blp-head">
                            <span>Allowed to Bypass <span class="blp-count" id="blpCount">0</span></span>
                            <button type="button" class="blp-bulk danger" id="blpRemoveAll">Remove all</button>
                        </div>
                        <div class="blp-selected-hint text-secondary small px-2 py-1" id="blpEmptyHint">
                            No extensions can bypass the blacklist yet.
                        </div>
                        <ul class="blp-list" id="blpSelected"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Add modal --}}
<div class="modal fade" id="addBlacklistModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ route('blacklist.store') }}">
        @csrf
        <input type="hidden" name="direction" value="{{ $direction }}">
        <div class="modal-header">
          <h5 class="modal-title">Add {{ ucfirst($direction) }} Blacklist Rule</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-medium">Pattern or Number</label>
            <input type="text" name="pattern" class="form-control font-monospace" required
                   placeholder="@if($direction==='inbound')+27824989396 or _+27800X.@else_0860XXXXXXX or 0900%@endif">
            <div class="form-text">
                <strong>Exact number:</strong> <code>0824989396</code> or <code>+27824989396</code><br>
                <strong>Pattern:</strong> Start with <code>_</code> then use Asterisk pattern letters:
                <code>X</code>=any digit, <code>Z</code>=1-9, <code>N</code>=2-9, <code>.</code>=one or more, <code>!</code>=zero or more.
                Examples:
                <ul class="mb-0 mt-1">
                    <li><code>_27800X.</code> — any number starting 27800</li>
                    <li><code>_+44X.</code> — any UK number</li>
                    <li><code>_0860XXXXXXX</code> — exactly 0860 followed by 7 digits</li>
                </ul>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-medium">Reason</label>
            <input type="text" name="reason" class="form-control"
                   placeholder="Why is this blocked? e.g. Spam, Premium rate, International">
            <div class="form-text">Helps your team understand why a rule exists. Recommended.</div>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="enabled" value="1" id="addEnabled" checked>
            <label class="form-check-label" for="addEnabled">Enable immediately</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Add to Blacklist</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Edit modal --}}
<div class="modal fade" id="editBlacklistModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" id="editForm">
        @csrf @method('PUT')
        <div class="modal-header">
          <h5 class="modal-title">Edit Blacklist Rule</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-medium">Pattern or Number</label>
            <input type="text" name="pattern" id="editPattern" class="form-control font-monospace" required>
          </div>
          <div class="mb-3">
            <label class="form-label fw-medium">Reason</label>
            <input type="text" name="reason" id="editReason" class="form-control">
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="enabled" value="1" id="editEnabled">
            <label class="form-check-label" for="editEnabled">Enabled</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
function openEditModal(entry) {
    document.getElementById('editPattern').value = entry.pattern;
    document.getElementById('editReason').value = entry.reason || '';
    document.getElementById('editEnabled').checked = !!entry.enabled;
    document.getElementById('editForm').action = '/blacklist/' + entry.id;
    new bootstrap.Modal(document.getElementById('editBlacklistModal')).show();
}

async function testBlacklist() {
    const number = document.getElementById('testNumber').value.trim();
    const result = document.getElementById('testResult');
    if (!number) {
        result.className = 'bl-test-result';
        result.style.display = 'none';
        return;
    }

    const r = await fetch('{{ route("blacklist.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ direction: '{{ $direction }}', number }),
    });
    const data = await r.json();

    if (data.blocked) {
        result.className = 'bl-test-result blocked';
        result.innerHTML = '🚫 <strong>BLOCKED</strong> by pattern <code>' + data.match.pattern + '</code>'
            + (data.match.reason ? ' — ' + data.match.reason : '');
    } else {
        result.className = 'bl-test-result allowed';
        result.innerHTML = '✓ <strong>ALLOWED</strong> — no blacklist rule matches this number.';
    }
}

document.getElementById('testNumber')?.addEventListener('keyup', e => {
    if (e.key === 'Enter') testBlacklist();
});

// ── Outbound Blacklist Bypass — searchable two-list picker ──────────────
(function () {
    const avail = document.getElementById('blpAvailable');
    if (!avail) return; // not on the outbound tab

    const selected = document.getElementById('blpSelected');
    const search   = document.getElementById('blpSearch');
    const countEl  = document.getElementById('blpCount');
    const emptyHint= document.getElementById('blpEmptyHint');
    const csrf     = document.querySelector('meta[name="csrf-token"]').content;
    const bypassUrl= '{{ route("blacklist.bypass") }}';

    // Defensive JSON (substitute bad UTF-8 in names; never emit empty).
    let data = {!! json_encode($allExtensions, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP|JSON_INVALID_UTF8_SUBSTITUTE) ?: '[]' !!};

    function esc(v) {
        return String(v ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function itemHtml(row, side) {
        const icon = side === 'available'
            ? '<i data-lucide="plus-circle" style="width:16px;height:16px;"></i>'
            : '<i data-lucide="x-circle" style="width:16px;height:16px;"></i>';
        return '<li class="blp-item ' + side + '" data-ext="' + esc(row.ext) + '">' +
               '<span class="blp-ext">' + esc(row.ext) + '</span>' +
               '<span class="blp-name">' + esc(row.name) + '</span>' +
               '<span class="blp-act">' + icon + '</span>' +
               '</li>';
    }

    function render() {
        const term = (search.value || '').trim().toLowerCase();
        const availRows = data.filter(r => !r.bypass)
            .filter(r => !term || (r.ext + ' ' + r.name).toLowerCase().includes(term));
        const selRows = data.filter(r => r.bypass);

        avail.innerHTML = availRows.length
            ? availRows.map(r => itemHtml(r, 'available')).join('')
            : '<li class="blp-empty">No matching extensions.</li>';
        selected.innerHTML = selRows.map(r => itemHtml(r, 'selected')).join('');

        countEl.textContent = selRows.length;
        emptyHint.style.display = selRows.length ? 'none' : '';

        if (window.lucide) window.lucide.createIcons();
    }

    async function setBypass(ext, bypass) {
        const row = data.find(r => r.ext === ext);
        if (!row) return;
        row.bypass = bypass;          // optimistic
        render();
        try {
            const r = await fetch(bypassUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                body: JSON.stringify({ extension: ext, bypass }),
            });
            const d = await r.json();
            if (!d.ok) throw new Error('rejected');
        } catch (e) {
            row.bypass = !bypass;     // revert on failure
            render();
        }
    }

    avail.addEventListener('click', e => {
        const li = e.target.closest('.blp-item'); if (li) setBypass(li.dataset.ext, true);
    });
    selected.addEventListener('click', e => {
        const li = e.target.closest('.blp-item'); if (li) setBypass(li.dataset.ext, false);
    });
    search.addEventListener('input', render);

    document.getElementById('blpAddAll').addEventListener('click', async () => {
        const term = (search.value || '').trim().toLowerCase();
        const toAdd = data.filter(r => !r.bypass)
            .filter(r => !term || (r.ext + ' ' + r.name).toLowerCase().includes(term));
        for (const r of toAdd) await setBypass(r.ext, true);
    });
    document.getElementById('blpRemoveAll').addEventListener('click', async () => {
        if (!confirm('Remove bypass from all extensions?')) return;
        const toRemove = data.filter(r => r.bypass);
        for (const r of toRemove) await setBypass(r.ext, false);
    });

    render();
})();
</script>
@endpush
@endsection