@extends('wallet.layouts.master')
@section('title','Wallet')
@section('content')
    <div class="page-title-head d-flex align-items-center justify-content-between mb-3">
        <h4 class="page-title mb-0">Company wallet</h4>
        <a class="btn btn-light" href="{{ route('account-settings') }}">CryptoAPIs settings</a>
    </div>

    @if(empty($cryptoWallet))
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Connect your CryptoAPIs account</h5>
                <p class="text-muted mb-3">Each company uses its own cryptoapis.io API key and HD wallet. Add the key in Account Settings, then you can manage gas and withdrawals here.</p>
                <a class="btn btn-primary" href="{{ route('account-settings') }}">Add API key</a>
            </div>
        </div>
    @else
        <div class="row g-3 mb-3">
            <div class="col-lg-3">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="text-muted small">Gas wallet (ETH)</div>
                        <h3 class="mt-1 mb-1">{{ number_format((float) ($gasCard['balance'] ?? 0), 8) }} ETH</h3>
                        <div class="text-muted small mb-3">${{ number_format((float) ($gasCard['usd_value'] ?? 0), 2) }}</div>
                        <code class="small text-break">{{ $gasCard['address'] ?? '—' }}</code>
                        <p class="form-text mt-2 mb-0">Pay Ethereum / USDT ERC-20 gas from this address.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="text-muted small">Gas wallet (TRX)</div>
                        <h3 class="mt-1 mb-1">{{ number_format((float) ($trxGasCard['balance'] ?? 0), 6) }} TRX</h3>
                        <div class="text-muted small mb-3">${{ number_format((float) ($trxGasCard['usd_value'] ?? 0), 2) }}</div>
                        <code class="small text-break">{{ $trxGasCard['address'] ?? '—' }}</code>
                        <p class="form-text mt-2 mb-0">Pay Tron / USDT TRC-20 energy from this address.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Send gas to a client</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label" for="gasNetwork">Network</label>
                                <select class="form-select" id="gasNetwork">
                                    <option value="eth">ETH</option>
                                    <option value="trx">TRX</option>
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label" for="gasDestination">Client deposit address</label>
                                <select class="form-select" id="gasDestination">
                                    <option value="">Choose a client</option>
                                    @foreach($gasTargets as $target)
                                        <option value="{{ $target['address'] }}" data-wallet="{{ $target['wallet'] }}">{{ $target['name'] }} — {{ $target['address'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="gasAmount">Amount</label>
                                <input type="number" step="any" min="0" class="form-control" id="gasAmount" value="0.001">
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="button" class="btn btn-primary w-100" id="gasSend">Send gas</button>
                            </div>
                        </div>
                        <p class="text-danger small mt-2 mb-0" id="gasError" hidden></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Main HD wallet</h5>
                <div class="text-muted small">Company treasury addresses from your CryptoAPIs HD wallet</div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                        <tr>
                            <th>Coin</th>
                            <th>Address</th>
                            <th class="text-end">On-chain</th>
                            <th class="text-end">Value</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($treasuryCards as $wallet)
                            <tr>
                                <td>
                                    <div class="fw-semibold">{{ $wallet['title'] }}</div>
                                    <div class="text-muted small">{{ $wallet['network_note'] }}@if(!empty($wallet['is_gas'])) · Gas @endif</div>
                                </td>
                                <td><code class="small">{{ $wallet['address'] ?: '—' }}</code></td>
                                <td class="text-end">{{ number_format((float) $wallet['balance'], 8) }}</td>
                                <td class="text-end">${{ number_format((float) $wallet['usd_value'], 2) }}</td>
                                <td class="text-end">
                                    @if(!empty($wallet['sweepable']))
                                        <button type="button" class="btn btn-sm btn-outline-primary treasury-withdraw"
                                                data-wallet-key="{{ $wallet['key'] }}"
                                                data-wallet-title="{{ $wallet['title'] }}"
                                                data-wallet-balance="{{ $wallet['balance'] }}"
                                                data-wallet-network="{{ $wallet['key'] === 'trx' || $wallet['key'] === 'usdt_trc20' ? 'tron' : 'ethereum' }}">
                                            Withdraw
                                        </button>
                                    @else
                                        <span class="text-muted small">Not ready</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal fade" id="treasuryWithdrawModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="treasuryWithdrawTitle">Withdraw</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label" for="treasuryDestination">Destination address</label>
                            <input type="text" class="form-control" id="treasuryDestination" placeholder="0x… or T…">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="treasuryAmount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control" id="treasuryAmount">
                        </div>
                        <div class="alert alert-secondary small mb-0" id="treasuryGas">Checking gas…</div>
                        <p class="text-danger small mt-2 mb-0" id="treasuryError" hidden></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="treasuryConfirm">Confirm withdraw</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var csrf = document.querySelector('meta[name="csrf-token"]');
            var sendUrl = @json(route('company_wallet_send'));
            var quoteUrl = @json(route('company_wallet_quote'));

            var gasBtn = document.getElementById('gasSend');
            var gasNetwork = document.getElementById('gasNetwork');
            var gasDestination = document.getElementById('gasDestination');
            var gasAmount = document.getElementById('gasAmount');
            function filterGasTargets() {
                if (!gasNetwork || !gasDestination) return;
                var network = gasNetwork.value;
                Array.prototype.forEach.call(gasDestination.options, function (option) {
                    if (!option.value) return;
                    option.hidden = option.getAttribute('data-wallet') !== network;
                    if (option.hidden && option.selected) {
                        gasDestination.value = '';
                    }
                });
                if (gasAmount) {
                    gasAmount.value = network === 'trx' ? '15' : '0.001';
                }
            }
            if (gasNetwork) {
                gasNetwork.addEventListener('change', filterGasTargets);
                filterGasTargets();
            }
            if (gasBtn) {
                gasBtn.addEventListener('click', function () {
                    var err = document.getElementById('gasError');
                    err.hidden = true;
                    gasBtn.disabled = true;
                    fetch(sendUrl, {
                        method: 'POST',
                        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf ? csrf.content : '' },
                        body: JSON.stringify({
                            action: 'gas',
                            wallet: gasNetwork ? gasNetwork.value : 'eth',
                            destination: gasDestination ? gasDestination.value : '',
                            amount: gasAmount ? gasAmount.value : 0
                        })
                    }).then(function (r) { return r.json().then(function (data) { return { ok: r.ok, data: data }; }); })
                        .then(function (result) {
                            gasBtn.disabled = false;
                            if (!result.ok || result.data.status !== 'true') {
                                err.textContent = result.data.message || 'Send failed.';
                                err.hidden = false;
                                return;
                            }
                            window.location.reload();
                        }).catch(function () {
                            gasBtn.disabled = false;
                            err.textContent = 'Send failed.';
                            err.hidden = false;
                        });
                });
            }

            var walletKey = '';
            var dest = document.getElementById('treasuryDestination');
            var amount = document.getElementById('treasuryAmount');
            var gasBox = document.getElementById('treasuryGas');
            var errBox = document.getElementById('treasuryError');
            var confirmBtn = document.getElementById('treasuryConfirm');
            if (!confirmBtn) return;

            document.querySelectorAll('.treasury-withdraw').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    walletKey = btn.getAttribute('data-wallet-key') || '';
                    document.getElementById('treasuryWithdrawTitle').textContent = 'Withdraw ' + (btn.getAttribute('data-wallet-title') || '');
                    dest.value = '';
                    dest.placeholder = btn.getAttribute('data-wallet-network') === 'tron' ? 'T…' : '0x…';
                    amount.value = btn.getAttribute('data-wallet-balance') || '';
                    errBox.hidden = true;
                    if (window.bootstrap && bootstrap.Modal) {
                        bootstrap.Modal.getOrCreateInstance(document.getElementById('treasuryWithdrawModal')).show();
                    }
                    refreshQuote();
                });
            });

            function refreshQuote() {
                gasBox.textContent = 'Checking gas…';
                fetch(quoteUrl + '?wallet=' + encodeURIComponent(walletKey) + '&amount=' + encodeURIComponent(amount.value || 0), {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf ? csrf.content : '' }
                }).then(function (r) { return r.json(); })
                    .then(function (data) {
                        gasBox.textContent = data.message || 'Could not estimate gas.';
                        confirmBtn.disabled = data.ready !== true;
                    }).catch(function () {
                        gasBox.textContent = 'Could not estimate gas.';
                        confirmBtn.disabled = true;
                    });
            }

            amount.addEventListener('change', refreshQuote);
            confirmBtn.addEventListener('click', function () {
                errBox.hidden = true;
                confirmBtn.disabled = true;
                confirmBtn.textContent = 'Sending…';
                fetch(sendUrl, {
                    method: 'POST',
                    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf ? csrf.content : '' },
                    body: JSON.stringify({
                        action: 'withdraw',
                        wallet: walletKey,
                        destination: dest.value,
                        amount: amount.value
                    })
                }).then(function (r) { return r.json().then(function (data) { return { ok: r.ok, data: data }; }); })
                    .then(function (result) {
                        confirmBtn.textContent = 'Confirm withdraw';
                        if (!result.ok || result.data.status !== 'true') {
                            errBox.textContent = result.data.message || 'Send failed.';
                            errBox.hidden = false;
                            confirmBtn.disabled = false;
                            return;
                        }
                        window.location.reload();
                    }).catch(function () {
                        confirmBtn.textContent = 'Confirm withdraw';
                        confirmBtn.disabled = false;
                        errBox.textContent = 'Send failed.';
                        errBox.hidden = false;
                    });
            });
        });
    </script>
@endsection