@extends('parts.container')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" />
    <style>
        .type-toggle .btn { border-radius: 0; }
        .type-toggle .btn:first-child { border-radius: 4px 0 0 4px; }
        .type-toggle .btn:last-child  { border-radius: 0 4px 4px 0; }
        .badge-silkpesa    { background: #4361ee; color: #fff; padding: 3px 8px; border-radius: 10px; font-size: 11px; }
        .badge-automation  { background: #0dcaf0; color: #000; padding: 3px 8px; border-radius: 10px; font-size: 11px; }
        .seq-preview { font-family: monospace; font-size: 12px; color: #6b7280; }
    </style>
@endsection

@section('content')
<div class="row layout-spacing">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="text-center pt-3">
                <button type="button" class="btn btn-primary mb-2" id="btnAdd">Add Provider</button>
            </div>
            <div class="widget-content widget-content-area">
                <div class="table-responsive">
                    <table class="table style-3 dt-table-hover" id="providersTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Account / USSD Code</th>
                                <th>Channel / Operator</th>
                                <th>Country</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Provider Modal -->
<div class="modal fade" id="providerModal" tabindex="-1" role="dialog" aria-labelledby="providerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="providerModalLabel">Add Provider</h5>
      </div>
      <div class="modal-body">
        <form id="providerForm" autocomplete="off">
            <input type="hidden" id="uuid" />

            {{-- Type toggle --}}
            <div class="form-group">
                <label class="d-block mb-1">Provider Type</label>
                <div class="btn-group type-toggle w-100" role="group">
                    <button type="button" class="btn btn-primary w-50" id="type_btn_silkpesa"
                            onclick="setProviderType('silkpesa')">SilkPesa Channel</button>
                    <button type="button" class="btn btn-outline-secondary w-50" id="type_btn_automation"
                            onclick="setProviderType('automation')">Automation App</button>
                </div>
                <input type="hidden" id="provider_type" value="silkpesa" />
            </div>

            {{-- Common fields --}}
            <div class="form-group">
                <label>Display Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="name" placeholder="e.g., Vodacom M-Pesa Tanzania" />
            </div>
            <div class="form-group">
                <label>Country</label>
                <select class="form-control" id="country_id">
                    <option value="">Select country</option>
                    @foreach(($countries ?? []) as $c)
                        <option value="{{ $c->id }}">{{ $c->name }} ({{ $c->code }})</option>
                    @endforeach
                </select>
            </div>

            {{-- SilkPesa fields --}}
            <div id="silkpesaFields">
                <hr class="my-3" />
                <div class="form-group">
                    <label>Paybill / Till / Account Number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="account_number" placeholder="e.g., 400200" />
                </div>
                <div class="form-group">
                    <label>SilkPesa Channel <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="silkpesa_channel" placeholder="e.g., MPESA" />
                    <small class="form-text text-muted">The channel identifier used by SilkPesa to route payments.</small>
                </div>
            </div>

            {{-- Automation App fields --}}
            <div id="automationFields" style="display:none">
                <hr class="my-3" />
                <div class="form-group">
                    <label>USSD Code <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="ussd_code" placeholder="e.g., *150*00#" />
                    <small class="form-text text-muted">The dial string that opens the operator's mobile money menu.</small>
                </div>
                <div class="form-group">
                    <label>Input Sequence <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="ussd_input_sequence" rows="6"
                        placeholder="One entry per line.&#10;&#10;Example for Vodacom M-Pesa pay bill:&#10;4&#10;1&#10;{recipient_msisdn}&#10;{amount}&#10;{pin_token}"></textarea>
                    <small class="form-text text-muted">
                        One menu input per line, in order. Available placeholders:
                        <code>{amount}</code>, <code>{recipient_msisdn}</code>, <code>{reference}</code>, <code>{pin_token}</code>
                    </small>
                </div>
                <div class="form-group">
                    <label>USSD Timeout (seconds)</label>
                    <input type="number" class="form-control" id="ussd_timeout_seconds" value="60" min="10" max="300" style="width:120px" />
                </div>
            </div>

            {{-- Common fields: capabilities & currencies (shown for both types) --}}
            <hr class="my-3" />
            <div class="form-group">
                <label>Capabilities <span class="text-danger">*</span></label>
                <div class="d-flex flex-wrap gap-3" id="capabilitiesContainer">
                    <div class="form-check">
                        <input class="form-check-input capability-option" type="checkbox" id="cap_send_money" value="send_money">
                        <label class="form-check-label" for="cap_send_money">Send Money</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input capability-option" type="checkbox" id="cap_pay_bills" value="pay_bills">
                        <label class="form-check-label" for="cap_pay_bills">Pay Bills</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input capability-option" type="checkbox" id="cap_buy_goods" value="buy_goods">
                        <label class="form-check-label" for="cap_buy_goods">Buy Goods</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input capability-option" type="checkbox" id="cap_top_up" value="top_up">
                        <label class="form-check-label" for="cap_top_up">Top Up</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Supported Currencies</label>
                <select class="form-control" id="supported_currencies" multiple size="5">
                    @foreach(($currencies ?? []) as $currency)
                        <option value="{{ strtoupper($currency->code) }}">{{ strtoupper($currency->code) }} — {{ $currency->name }}</option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple. Leave empty to allow any wallet currency.</small>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" onclick="$('#providerModal').modal('hide')">Close</button>
        <button type="button" class="btn btn-primary" id="btnSave">Save Provider</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let providersTable = null;

const CAPABILITY_LABELS = {
    send_money: 'Send Money', pay_bills: 'Pay Bills', buy_goods: 'Buy Goods', top_up: 'Top Up'
};
const OPERATOR_LABELS = {
    vodacom: 'Vodacom', tigo: 'Tigo', airtel: 'Airtel', halotel: 'Halotel'
};

// ── Type toggle ──────────────────────────────────────────────────────────────

function setProviderType(type) {
    document.getElementById('provider_type').value = type;

    const silkBtn  = document.getElementById('type_btn_silkpesa');
    const autoBtn  = document.getElementById('type_btn_automation');
    const silkSec  = document.getElementById('silkpesaFields');
    const autoSec  = document.getElementById('automationFields');

    if (type === 'silkpesa') {
        silkBtn.className = 'btn btn-primary w-50';
        autoBtn.className = 'btn btn-outline-secondary w-50';
        silkSec.style.display = '';
        autoSec.style.display = 'none';
    } else {
        silkBtn.className = 'btn btn-outline-secondary w-50';
        autoBtn.className = 'btn btn-primary w-50';
        silkSec.style.display = 'none';
        autoSec.style.display = '';
    }
}

// ── Capabilities helpers ─────────────────────────────────────────────────────

function getSelectedCapabilities() {
    return Array.from(document.querySelectorAll('.capability-option:checked')).map(el => el.value);
}
function setCapabilities(values) {
    const sel = new Set((values || []).map(String));
    document.querySelectorAll('.capability-option').forEach(el => { el.checked = sel.has(el.value); });
}
function formatCapabilities(values) {
    return (values || []).map(v => CAPABILITY_LABELS[v] || v).join(', ');
}

// ── Currency helpers ─────────────────────────────────────────────────────────

function getSelectedCurrencies() {
    return Array.from(document.getElementById('supported_currencies').selectedOptions).map(o => o.value);
}
function setSupportedCurrencies(values) {
    const sel = new Set((values || []).map(v => v.toString().toUpperCase()));
    Array.from(document.getElementById('supported_currencies').options).forEach(o => {
        o.selected = sel.has(o.value.toUpperCase());
    });
}

// ── Form reset / populate ────────────────────────────────────────────────────

function resetForm() {
    document.getElementById('uuid').value = '';
    document.getElementById('name').value = '';
    document.getElementById('country_id').value = '';
    document.getElementById('account_number').value = '';
    document.getElementById('silkpesa_channel').value = '';
    document.getElementById('ussd_code').value = '';
    document.getElementById('ussd_input_sequence').value = '';
    document.getElementById('ussd_timeout_seconds').value = '60';
    setCapabilities([]);
    setSupportedCurrencies([]);
    setProviderType('silkpesa');
}

function onEdit(item) {
    document.getElementById('providerModalLabel').innerText = 'Edit Provider';
    document.getElementById('uuid').value = item.uuid;
    document.getElementById('name').value = item.name || '';
    document.getElementById('country_id').value = item.country_id || '';

    const type = item.automation_enabled ? 'automation' : 'silkpesa';
    setProviderType(type);

    setCapabilities(item.capabilities || []);
    setSupportedCurrencies(item.supported_currencies || []);

    if (type === 'silkpesa') {
        document.getElementById('account_number').value  = item.account_number || '';
        document.getElementById('silkpesa_channel').value = item.silkpesa_channel || '';
    } else {
        document.getElementById('ussd_code').value = item.ussd_code || '';
        const seq = Array.isArray(item.ussd_input_sequence) ? item.ussd_input_sequence.join('\n') : '';
        document.getElementById('ussd_input_sequence').value = seq;
        document.getElementById('ussd_timeout_seconds').value = item.ussd_timeout_seconds || 60;
    }

    $('#providerModal').modal('show');
}

function onDelete(uuid) {
    if (!confirm('Delete this provider?')) return;
    fetch(`/admin/providers/${uuid}/delete`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).then(r => r.json()).then(resp => {
        if (!resp.success) throw new Error(resp.message || 'Delete failed');
        reloadProviders();
    }).catch(err => alert(err.message));
}

// ── Add button ───────────────────────────────────────────────────────────────

document.getElementById('btnAdd').addEventListener('click', () => {
    resetForm();
    document.getElementById('providerModalLabel').innerText = 'Add Provider';
    $('#providerModal').modal('show');
});

// ── Save ─────────────────────────────────────────────────────────────────────

document.getElementById('btnSave').addEventListener('click', async () => {
    const type = document.getElementById('provider_type').value;
    const name = document.getElementById('name').value.trim();
    if (!name) { alert('Display Name is required.'); return; }

    const payload = {
        provider_type: type,
        name,
        country_id: document.getElementById('country_id').value || null,
    };

    const caps = getSelectedCapabilities();
    if (!caps.length) { alert('Select at least one capability.'); return; }
    payload.capabilities     = caps;
    payload.supported_currencies = getSelectedCurrencies();

    if (type === 'silkpesa') {
        payload.account_number   = document.getElementById('account_number').value.trim();
        payload.silkpesa_channel = document.getElementById('silkpesa_channel').value.trim();
        if (!payload.account_number)   { alert('Account Number is required.'); return; }
        if (!payload.silkpesa_channel) { alert('SilkPesa Channel is required.'); return; }
    } else {
        const seq = document.getElementById('ussd_input_sequence').value
            .split('\n').map(s => s.trim()).filter(s => s.length > 0);
        if (!seq.length) { alert('Input Sequence is required.'); return; }
        payload.ussd_code            = document.getElementById('ussd_code').value.trim();
        payload.ussd_input_sequence  = seq;
        payload.ussd_timeout_seconds = parseInt(document.getElementById('ussd_timeout_seconds').value) || 60;
        if (!payload.ussd_code) { alert('USSD Code is required.'); return; }
    }

    const uuid   = document.getElementById('uuid').value;
    const isEdit = !!uuid;
    const url    = isEdit ? `/admin/providers/${uuid}` : `/admin/providers`;
    const method = isEdit ? 'PUT' : 'POST';

    try {
        const r    = await fetch(url, {
            method,
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify(payload)
        });
        const resp = await r.json();
        if (!resp.success) throw new Error(resp.message || 'Save failed');
        $('#providerModal').modal('hide');
        reloadProviders();
    } catch (err) {
        alert(err.message);
    }
});

// ── Table ────────────────────────────────────────────────────────────────────

function reloadProviders() {
    fetch('/admin/providers/list')
        .then(r => r.json())
        .then(resp => {
            if (!resp.success) throw new Error('Failed to load providers');

            const data = (resp.data || []).map(x => ({
                ...x,
                country_name: x.country?.name || '—',
                capabilities: Array.isArray(x.capabilities) ? x.capabilities : [],
                supported_currencies: Array.isArray(x.supported_currencies) ? x.supported_currencies : [],
            }));

            if (!providersTable) {
                providersTable = $('#providersTable').DataTable({
                    data,
                    columns: [
                        { data: 'name' },
                        { data: null, render: r => r.automation_enabled
                            ? '<span class="badge-automation">Automation App</span>'
                            : '<span class="badge-silkpesa">SilkPesa Channel</span>'
                        },
                        { data: null, render: r => r.automation_enabled
                            ? (r.ussd_code || '—')
                            : (r.account_number || '—')
                        },
                        { data: null, render: r => r.automation_enabled
                            ? (r.automation_operator ? OPERATOR_LABELS[r.automation_operator] || r.automation_operator : '—')
                            : (r.silkpesa_channel || '—')
                        },
                        { data: 'country_name' },
                        { data: null, orderable: false, searchable: false, render: r => {
                            const safeJson = encodeURIComponent(JSON.stringify(r));
                            return `
                                <button class="btn btn-primary btn-sm me-1"
                                    onclick='onEdit(JSON.parse(decodeURIComponent("${safeJson}")))'>Edit</button>
                                <button class="btn btn-danger btn-sm"
                                    onclick='onDelete("${r.uuid}")'>Delete</button>
                            `;
                        }},
                    ],
                    dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                         "<'table-responsive'tr>" +
                         "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                    stripeClasses: [],
                    lengthMenu: [5, 10, 20, 50],
                    pageLength: 10,
                });
            } else {
                providersTable.clear().rows.add(data).draw();
            }
        })
        .catch(err => alert(err.message));
}

reloadProviders();
</script>
@endsection