@extends('layouts.user')

@section('title')
Pilots
@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('pilot/dashboard.css') }}?v=6">
<link rel="stylesheet" href="{{ asset('pilot/pilots-section.css') }}?v=7">
<link rel="stylesheet" href="{{ asset('pilot/listing.css') }}?v=15">

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">

    {{-- ── Slim banner (shared partial, slim modifier class) ── --}}
    <div class="relative w-full px-4 md:px-8">
        <div class="profile-banner profile-banner--slim">
            @include('partials.pilot.banner')
        </div>
    </div>

    <div class="relative w-full px-4 md:px-8 mt-3 md:mt-4">
        <div class="md:flex" style="gap: 1.5rem;">

            {{-- ── Sidebar (shared partial; -4rem for slim banner) ── --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top: -4rem;">
                    @include('partials.pilot.sidebar')
                </div>
            </div>

            {{-- ── Main content ── --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:1.5rem;">
                <main class="main-col">

                    {{-- Page header --}}
                    <div class="pilots-page-head">
                        <a class="pilots-page-head__back" href="{{ route('home') }}">
                            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                            Home
                        </a>
                        <div>
                            <h1 class="pilots-page-head__title">Find your <em>Pilot</em>.</h1>
                            <p class="pilots-page-head__sub">Real traders. Real track records. Their strategy runs on your wallet, sized to whatever you deploy.</p>
                        </div>
                        <div class="pilots-page-head__live" id="pilotSessionStatus">
                            <span class="pilots-page-head__live-text">Checking session…</span>
                        </div>
                    </div>

                    {{-- Tabs (My Follows tab only renders when user has follows) --}}
                    @php
                        // Tab persistence across sort reloads. Honour explicit
                        // ?tab=browse|follows|past query param; otherwise fall
                        // back to the historical default: follows if any,
                        // else browse.
                        $pastCount  = (int) ($pastFollows['count'] ?? 0);
                        $defaultTab = $followCount > 0 ? 'follows' : 'browse';
                        $activeTab  = in_array(request('tab'), ['browse', 'follows', 'past'], true)
                            ? request('tab')
                            : $defaultTab;
                        // Guard against ?tab=follows with zero follows and
                        // ?tab=past with zero past follows.
                        if ($activeTab === 'follows' && $followCount === 0) {
                            $activeTab = 'browse';
                        }
                        if ($activeTab === 'past' && $pastCount === 0) {
                            $activeTab = $followCount > 0 ? 'follows' : 'browse';
                        }
                    @endphp
                    <div class="pilot-tabs" data-follows="{{ $followCount }}" data-past="{{ $pastCount }}">
                        <button class="pilot-tab {{ $activeTab === 'browse' ? 'is-active' : '' }}" data-tab="browse" type="button">Browse Pilots</button>
                        @if($followCount > 0)
                        <button class="pilot-tab {{ $activeTab === 'follows' ? 'is-active' : '' }}" data-tab="follows" type="button">
                            My Follows <span class="pilot-tab__count">{{ $followCount }}</span>
                        </button>
                        @endif
                        @if($pastCount > 0)
                        <button class="pilot-tab {{ $activeTab === 'past' ? 'is-active' : '' }}" data-tab="past" type="button">
                            Past <span class="pilot-tab__count">{{ $pastCount }}</span>
                        </button>
                        @endif
                    </div>

                    {{-- ============================================================
                         BROWSE TAB
                         ============================================================ --}}
                    <div class="tab-content {{ $activeTab === 'browse' ? 'is-active' : '' }}" data-tab-content="browse">

                        {{-- Filter bar: pilot count + functional sort dropdown --}}
                        <div class="filter-bar">
                            <div class="filter-bar__count">{{ count($pilotCards) }} {{ count($pilotCards) === 1 ? 'pilot' : 'pilots' }} active</div>
                            @php
                                $currentSort = request('sort', 'recommended');
                                $sortOptions = [
                                    'recommended' => 'Sort: Recommended',
                                    'win_rate'    => 'Sort: Win rate',
                                    'profit_30d'  => 'Sort: 30D profit',
                                    'followers'   => 'Sort: Followers',
                                ];
                            @endphp
                            <select class="sort-select" id="pilots-sort">
                                @foreach ($sortOptions as $value => $label)
                                    <option value="{{ $value }}" {{ $currentSort === $value ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Pilot grid: filled in Step 5b --}}
                        <section class="pilots-section" style="margin-top:0;">
                            <div class="pilots-grid">
                                @foreach ($pilotCards as $pilot)
                                    @include('partials.pilot.pilot-card', [
                                    'pilot'              => $pilot,
                                    'isAlreadyFollowing' => in_array((int) $pilot['id'], $followedPilotIds, true),
                                ])
                                @endforeach
                            </div>
                        </section>

                        {{-- Apply to be a Pilot panel (link out for now, backend deferred to v1.1) --}}
                        <section class="apply-panel">
                            <div>
                                <div class="apply-panel__eyebrow">Trader yourself?</div>
                                <h3 class="apply-panel__title">Apply to be a Pilot</h3>
                                <p class="apply-panel__sub">Verified pilots earn 30% of every follower's profit. One click to apply, admin reviews within 48 hours.</p>
                                <ul class="apply-panel__reqs">
                                    <li>KYC verified · 30+ day account age</li>
                                    <li>Personal trading history demonstrated</li>
                                    <li>Admin approval required</li>
                                </ul>
                            </div>
                            <button class="apply-panel__btn" type="button" disabled title="Applications opening soon">
                                Coming soon
                            </button>
                        </section>
                    </div>

                    @if($followCount > 0)
                    {{-- ============================================================
                         MY FOLLOWS TAB
                         ============================================================ --}}
                    <div class="tab-content {{ $activeTab === 'follows' ? 'is-active' : '' }}" data-tab-content="follows">

                        {{-- Aggregate summary across all active follows --}}
                        @php
                            $aggToday    = (float) ($followsAgg['today_profit'] ?? 0);
                            $aggLife     = (float) ($followsAgg['lifetime_profit'] ?? 0);
                            $aggWallets  = (float) ($followsAgg['total_wallet'] ?? 0);
                            $aggCount    = (int)   ($followsAgg['follow_count']  ?? 0);
                            $aggTodayStr = match(true) {
                                $aggToday > 0 => '+$' . number_format($aggToday, 2),
                                $aggToday < 0 => '-$' . number_format(abs($aggToday), 2),
                                default       => '$0.00',
                            };
                            $aggLifeStr = match(true) {
                                $aggLife > 0 => '+$' . number_format($aggLife, 2),
                                $aggLife < 0 => '-$' . number_format(abs($aggLife), 2),
                                default      => '$0.00',
                            };
                            $aggWalletStr= '$' . number_format($aggWallets, 2);
                            $aggClass    = $aggToday > 0 ? 'up' : ($aggToday < 0 ? 'down' : '');
                        @endphp
                        <div class="follows-aggregate">
                            <div>
                                <div class="follows-aggregate__big {{ $aggClass }}">{{ $aggTodayStr }}</div>
                                <p class="follows-aggregate__label">today across {{ $aggCount }} {{ $aggCount === 1 ? 'pilot' : 'pilots' }}</p>
                                <p class="follows-aggregate__meta">
                                    Lifetime <strong>{{ $aggLifeStr }}</strong>
                                    <span class="dot-sep">·</span>
                                    Wallets <strong>{{ $aggWalletStr }}</strong>
                                </p>
                            </div>
                            <button class="follows-aggregate__cta" type="button" data-tab-jump="browse">
                                + Follow another
                            </button>
                        </div>

                        {{-- Follow cards --}}
                        @foreach($followCards as $follow)
                            @include('partials.pilot.follow-card', ['follow' => $follow])
                        @endforeach

                    </div>
                    @endif

                    @if($pastCount > 0)
                    {{-- ============================================================
                         PAST FOLLOWS TAB
                         Read-only receipt drawer of terminated follows.
                         ============================================================ --}}
                    <div class="tab-content {{ $activeTab === 'past' ? 'is-active' : '' }}" data-tab-content="past">

                        @php
                            $pastProfit    = (float) ($pastFollows['total_profit'] ?? 0);
                            $pastRowsList  = $pastFollows['follows'] ?? [];
                            $pastProfitStr = match(true) {
                                $pastProfit > 0 => '+$' . number_format($pastProfit, 2),
                                $pastProfit < 0 => '-$' . number_format(abs($pastProfit), 2),
                                default         => '$0.00',
                            };
                            $pastProfitClass = $pastProfit > 0 ? 'up' : ($pastProfit < 0 ? 'down' : '');
                        @endphp

                        {{-- Aggregate strip: total profit across all past follows --}}
                        <div class="past-follows-strip">
                            <p class="past-follows-strip__label">
                                Across {{ $pastCount }} past {{ $pastCount === 1 ? 'follow' : 'follows' }}
                            </p>
                            <div class="past-follows-strip__amount {{ $pastProfitClass }}">
                                {{ $pastProfitStr }} total profit
                            </div>
                        </div>

                        {{-- Row list, newest closed first --}}
                        @foreach($pastRowsList as $pastRow)
                            @include('partials.pilot.past-follow-row', ['row' => $pastRow])
                        @endforeach

                    </div>
                    @endif
                </main>
            </div>
        </div>
    </div>
</section>

{{-- Topup Modal (single instance, populated by JS on open) --}}
@include('partials.pilot.modal-topup', ['mainBalance' => $mainBalance])

{{-- Unfollow Modal (single instance, populated by JS on open) --}}
@include('partials.pilot.modal-unfollow')

<script>
// Tab switcher — also reflects state in URL so sort reload lands on the same tab.
function switchPilotTab(target) {
    document.querySelectorAll('.pilot-tab').forEach(t => t.classList.toggle('is-active', t.dataset.tab === target));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.toggle('is-active', c.dataset.tabContent === target));
    // Sync URL so any subsequent full reload (e.g. sort change) keeps the tab.
    try {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', target);
        window.history.replaceState({}, '', url.toString());
    } catch (e) { /* no-op if URL API unavailable */ }
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

document.querySelectorAll('.pilot-tab').forEach(tab => {
    tab.addEventListener('click', () => switchPilotTab(tab.dataset.tab));
});

// "Follow another" CTAs inside My Follows tab — jump to Browse
document.querySelectorAll('[data-tab-jump]').forEach(btn => {
    btn.addEventListener('click', () => switchPilotTab(btn.dataset.tabJump));
});

// Sort dropdown — reload with ?sort=<value> on change, preserving ?tab=
(function() {
    const sel = document.getElementById('pilots-sort');
    if (!sel) return;
    sel.addEventListener('change', () => {
        const url = new URL(window.location.href);
        if (sel.value === 'recommended') {
            url.searchParams.delete('sort');
        } else {
            url.searchParams.set('sort', sel.value);
        }
        // Preserve current tab so reload lands where the user was.
        const activeTab = document.querySelector('.pilot-tab.is-active');
        if (activeTab && activeTab.dataset.tab) {
            url.searchParams.set('tab', activeTab.dataset.tab);
        }
        window.location.href = url.toString();
    });
})();

// Live session-status polling (every 30s)
(function() {
    const el = document.getElementById('pilotSessionStatus');
    if (!el) return;

    function fmt(seconds) {
        if (seconds == null || seconds < 0) return '';
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        const s = seconds % 60;
        if (h > 0) return h + 'h ' + String(m).padStart(2, '0') + 'm';
        if (m > 0) return m + ':' + String(s).padStart(2, '0');
        return s + 's';
    }

    function render(data) {
        if (data && data.open) {
            el.innerHTML = 'Session open · ' + fmt(data.remaining_seconds) + ' remaining';
            el.classList.add('is-open');
            el.classList.remove('is-closed');
        } else if (data) {
            el.innerHTML = 'Next session in ' + fmt(data.next_in_seconds);
            el.classList.add('is-closed');
            el.classList.remove('is-open');
        }
    }

    function tick() {
        fetch("{{ route('pilots.session-status') }}", {
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(render)
        .catch(() => { /* silent fail */ });
    }

    tick();
    setInterval(tick, 30000);
})();

// ============================================================
// Topup Modal — open/close, populate from trigger data-* attrs,
// AJAX submit, inline DOM update on success.
// ============================================================
(function() {
    const modal = document.getElementById('topup-modal');
    if (!modal) return;

    const titleEl    = document.getElementById('topup-title');
    const avatarEl   = document.getElementById('topup-avatar');
    const currentEl  = document.getElementById('topup-current');
    const amountEl   = document.getElementById('topup-amount');
    const availEl    = document.getElementById('topup-avail');
    const errorEl    = document.getElementById('topup-error');
    const submitBtn  = document.getElementById('topup-submit');
    const submitText = submitBtn.querySelector('.pt-modal__btn-text');

    let activeFollowId = null;
    let activePilotId  = null;
    let userBalance    = {{ (float) $mainBalance }};

    const csrf = document.querySelector('meta[name="csrf-token"]');
    if (!csrf) console.warn('Pilot Topup: CSRF meta tag missing. Add <meta name="csrf-token" content="{{ csrf_token() }}"> to layout head.');

    // -- Trigger: open modal --
    document.addEventListener('click', (e) => {
        const trigger = e.target.closest('[data-action="topup"]');
        if (!trigger) return;
        e.preventDefault();

        activeFollowId = trigger.dataset.followId;
        activePilotId  = trigger.dataset.pilotId;

        titleEl.textContent  = trigger.dataset.pilotName || '';
        avatarEl.textContent = trigger.dataset.pilotInitials || '--';

        const colorClass = trigger.dataset.avatarColor === 'purple' ? ' is-purple'
                         : trigger.dataset.avatarColor === 'red'    ? ' is-red'
                         : '';
        avatarEl.className   = 'pt-modal__avatar' + colorClass;
        currentEl.textContent= '$' + (parseFloat(trigger.dataset.currentWallet) || 0).toFixed(2);
        amountEl.value       = '';
        errorEl.hidden       = true;
        errorEl.textContent  = '';
        document.querySelectorAll('.pt-modal__chip').forEach(c => c.classList.remove('is-active'));

        openModal();
        setTimeout(() => amountEl.focus(), 120);
    });

    // -- Close handlers --
    modal.addEventListener('click', (e) => {
        if (e.target.closest('[data-modal-close]')) closeModal();
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modal.hidden) closeModal();
    });

    function openModal() {
        modal.hidden = false;
        // Force reflow then add open class for transition
        void modal.offsetHeight;
        modal.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }
    function closeModal() {
        modal.classList.remove('is-open');
        setTimeout(() => {
            modal.hidden = true;
            document.body.style.overflow = '';
        }, 200);
    }

    // -- Quick chips --
    document.querySelectorAll('.pt-modal__chip').forEach(chip => {
        chip.addEventListener('click', () => {
            document.querySelectorAll('.pt-modal__chip').forEach(c => c.classList.remove('is-active'));
            chip.classList.add('is-active');
            const v = chip.dataset.topupAmount;
            amountEl.value = (v === 'max') ? userBalance.toFixed(2) : v;
            errorEl.hidden = true;
        });
    });

    // Clear active chip on manual edit
    amountEl.addEventListener('input', () => {
        document.querySelectorAll('.pt-modal__chip').forEach(c => c.classList.remove('is-active'));
        errorEl.hidden = true;
    });

    // -- Submit --
    submitBtn.addEventListener('click', async () => {
        const amount = parseFloat(amountEl.value);

        if (!amount || amount <= 0) {
            showError('Enter an amount to top up.');
            return;
        }
        if (amount > userBalance) {
            showError('Amount exceeds your main balance.');
            return;
        }

        submitBtn.disabled = true;
        submitText.textContent = 'Adding...';
        errorEl.hidden = true;

        try {
            const headers = {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            };
            if (csrf) headers['X-CSRF-TOKEN'] = csrf.content;

            const res = await fetch(`/pilots/${activePilotId}/topup`, {
                method: 'POST',
                headers,
                credentials: 'same-origin',
                body: JSON.stringify({ amount }),
            });
            const data = await res.json();

            if (!res.ok || !data.success) {
                showError(data.message || 'Topup failed. Try again.');
                resetSubmit();
                return;
            }

            // Update DOM inline
            updateCardWallet(activeFollowId, data.wallet);
            updateAggregateWallet(amount);
            userBalance = data.user_balance;
            availEl.textContent = '$' + userBalance.toFixed(2);
            updateHeaderBalance(userBalance);

            // Update trigger so subsequent opens show new wallet
            // (covers both Topup and Unfollow buttons on this follow)
            document.querySelectorAll(`[data-follow-id="${activeFollowId}"][data-current-wallet]`).forEach(b => {
                b.dataset.currentWallet = data.wallet;
            });

            closeModal();
            showToast('Added $' + amount.toFixed(2) + ' to ' + titleEl.textContent);
            resetSubmit();
        } catch (err) {
            showError('Network error. Try again.');
            resetSubmit();
        }
    });

    function showError(msg) {
        errorEl.textContent = msg;
        errorEl.hidden = false;
    }
    function resetSubmit() {
        submitBtn.disabled = false;
        submitText.textContent = 'Top up wallet';
    }

    // -- DOM updaters --
    function updateCardWallet(followId, newWallet) {
        const card = document.querySelector(`.follow-card[data-follow-id="${followId}"]`);
        if (!card) return;
        const walletStat = card.querySelector('.fc-stat:first-child .fc-stat__value');
        if (walletStat) walletStat.textContent = '$' + parseFloat(newWallet).toFixed(2);
    }
    function updateAggregateWallet(addedAmount) {
        const meta = document.querySelector('.follows-aggregate__meta');
        if (!meta) return;
        const strongs = meta.querySelectorAll('strong');
        if (strongs.length < 2) return;
        const walletEl = strongs[strongs.length - 1];
        const current = parseFloat(walletEl.textContent.replace(/[^0-9.-]/g, '')) || 0;
        walletEl.textContent = '$' + (current + addedAmount).toFixed(2);
    }

    // -- Toast --
    function showToast(msg) {
        let toast = document.getElementById('pt-toast');
        if (!toast) {
            toast = document.createElement('div');
            toast.id = 'pt-toast';
            toast.className = 'pt-toast is-success';
            document.body.appendChild(toast);
        }
        toast.textContent = msg;
        requestAnimationFrame(() => toast.classList.add('is-visible'));
        clearTimeout(toast._t);
        toast._t = setTimeout(() => toast.classList.remove('is-visible'), 2500);
    }
})();

// ============================================================
// Shared: update the top-nav balance pill (.appbar__wallet-value)
// ============================================================
function pilotUpdateHeaderBalance(newBalance) {
    document.querySelectorAll('.appbar__wallet-value').forEach(el => {
        el.textContent = '$' + parseFloat(newBalance).toFixed(2);
    });
}
// Expose for the topup IIFE
window.updateHeaderBalance = pilotUpdateHeaderBalance;

// ============================================================
// Unfollow Modal — confirm + AJAX submit + card removal animation
// + tab fallback when last follow goes away.
// ============================================================
(function() {
    const modal = document.getElementById('unfollow-modal');
    if (!modal) return;

    // -- Modal element refs (all optional beyond title/avatar/submit) --
    const titleEl        = document.getElementById('unfollow-title');
    const avatarEl       = document.getElementById('unfollow-avatar');
    const returnEl       = document.getElementById('unfollow-return');
    const errorEl        = document.getElementById('unfollow-error');
    const submitBtn      = document.getElementById('unfollow-submit');
    const submitText     = submitBtn.querySelector('.pt-modal__btn-text');

    // -- Phase 13: projection panel refs --
    const committedEl    = document.getElementById('unfollow-committed');
    const topupHintEl    = document.getElementById('unfollow-topup-hint');
    const idleEl         = document.getElementById('unfollow-idle');
    const openCountEl    = document.getElementById('unfollow-open-count');
    const openLabelEl    = document.getElementById('unfollow-open-label');
    const openValueEl    = document.getElementById('unfollow-open-value');
    const markToMarketEl = document.getElementById('unfollow-mark-to-market');
    const profitEl       = document.getElementById('unfollow-profit');
    const profitRowEl    = document.getElementById('unfollow-profit-row');
    const cutEl          = document.getElementById('unfollow-cut');
    const cutPctEl       = document.getElementById('unfollow-cut-pct');
    const cutRowEl       = document.getElementById('unfollow-cut-row');
    const noCutEl        = document.getElementById('unfollow-no-cut');
    const timingCopyEl   = document.getElementById('unfollow-timing-copy');
    const fastCopyEl     = document.getElementById('unfollow-fast-copy');

    let activeFollowId  = null;
    let activePilotId   = null;
    let activeWallet    = 0;
    let activeOpenCount = 0;

    const csrf = document.querySelector('meta[name="csrf-token"]');

    function fmt(n) {
        return '$' + (parseFloat(n) || 0).toFixed(2);
    }

    // -- Trigger: open modal --
    document.addEventListener('click', (e) => {
        const trigger = e.target.closest('[data-action="unfollow"]');
        if (!trigger) return;
        e.preventDefault();

        // Guard: winding_down triggers exist only if there's a stale card;
        // active-state cards are the only source of unfollow triggers now.
        // Kept defensive so a re-render race doesn't fire a bad request.
        const card = trigger.closest('.follow-card');
        if (card && card.dataset.status === 'winding_down') {
            return;
        }

        activeFollowId = trigger.dataset.followId;
        activePilotId  = trigger.dataset.pilotId;
        activeWallet   = parseFloat(trigger.dataset.currentWallet) || 0;

        // Read projection from data-* attributes (populated by follow-card blade)
        const committed    = parseFloat(trigger.dataset.committed)         || activeWallet;
        const idle         = parseFloat(trigger.dataset.idle)              || activeWallet;
        const openCount    = parseInt(trigger.dataset.openCount, 10)       || 0;
        const markToMarket = parseFloat(trigger.dataset.markToMarket)      || idle;
        const profit       = parseFloat(trigger.dataset.unrealizedProfit)  || 0;
        const cut          = parseFloat(trigger.dataset.unrealizedCut)     || 0;
        const takeHome     = parseFloat(trigger.dataset.takeHome)          || idle;
        const cutPct       = parseInt(trigger.dataset.cutPercent, 10)      || 30;
        const openCapital  = Math.max(0, markToMarket - idle);

        activeOpenCount = openCount;

        titleEl.textContent  = trigger.dataset.pilotName || '';
        avatarEl.textContent = trigger.dataset.pilotInitials || '--';

        const colorClass = trigger.dataset.avatarColor === 'purple' ? ' is-purple'
                         : trigger.dataset.avatarColor === 'red'    ? ' is-red'
                         : '';
        avatarEl.className = 'pt-modal__avatar' + colorClass;

        // -- Populate projection fields (all optional; skip if element missing) --
        if (committedEl)    committedEl.textContent    = fmt(committed);
        if (idleEl)         idleEl.textContent         = fmt(idle);
        if (openCountEl)    openCountEl.textContent    = openCount;
        if (openLabelEl)    openLabelEl.textContent    = openCount === 1 ? 'position' : 'positions';
        if (openValueEl)    openValueEl.textContent    = fmt(openCapital);
        if (markToMarketEl) markToMarketEl.textContent = '~' + fmt(markToMarket);
        if (profitEl) {
            if (profit > 0)       profitEl.textContent = '+' + fmt(profit);
            else if (profit < 0)  profitEl.textContent = '-' + fmt(Math.abs(profit));
            else                  profitEl.textContent = fmt(0);
        }
        if (cutEl)          cutEl.textContent          = fmt(cut);
        if (cutPctEl)       cutPctEl.textContent       = cutPct;
        if (returnEl)       returnEl.textContent       = '~' + fmt(takeHome);

        // Show/hide cut breakdown based on profit sign
        if (profit > 0) {
            if (cutRowEl) cutRowEl.hidden = false;
            if (noCutEl)  noCutEl.hidden  = true;
        } else {
            if (cutRowEl) cutRowEl.hidden = true;
            if (noCutEl)  noCutEl.hidden  = false;
        }

        // Show/hide profit row (hide when exactly zero to reduce noise)
        if (profitRowEl) profitRowEl.hidden = (profit === 0);

        // Fast-path vs slow-path copy
        if (timingCopyEl) timingCopyEl.hidden = (openCount === 0);
        if (fastCopyEl)   fastCopyEl.hidden   = (openCount !== 0);

        // Topup history hint
        if (topupHintEl) {
            const initial = parseFloat(trigger.dataset.initial) || 0;
            const topups  = parseInt(trigger.dataset.topupCount, 10) || 0;
            if (topups > 0 && initial > 0) {
                topupHintEl.textContent = ' (initial ' + fmt(initial) + ' + ' + topups + ' top-up' + (topups === 1 ? '' : 's') + ')';
                topupHintEl.hidden = false;
            } else {
                topupHintEl.hidden = true;
            }
        }

        errorEl.hidden       = true;
        errorEl.textContent  = '';

        openModal();
    });

    // -- Close handlers --
    modal.addEventListener('click', (e) => {
        if (e.target.closest('[data-modal-close]')) closeModal();
    });
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modal.hidden) closeModal();
    });

    function openModal() {
        modal.hidden = false;
        void modal.offsetHeight;
        modal.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    }
    function closeModal() {
        modal.classList.remove('is-open');
        setTimeout(() => {
            modal.hidden = true;
            document.body.style.overflow = '';
        }, 200);
    }

    // -- Submit --
    submitBtn.addEventListener('click', async () => {
        submitBtn.disabled = true;
        submitText.textContent = 'Unfollowing...';
        errorEl.hidden = true;

        try {
            const headers = {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            };
            if (csrf) headers['X-CSRF-TOKEN'] = csrf.content;

            const res = await fetch(`/pilots/${activePilotId}/unfollow`, {
                method: 'POST',
                headers,
                credentials: 'same-origin',
                body: JSON.stringify({}),
            });
            const data = await res.json();

            if (!res.ok || !data.success) {
                showError(data.message || 'Unfollow failed. Try again.');
                resetSubmit();
                return;
            }

            // Update header balance pill
            if (typeof data.user_balance === 'number') {
                pilotUpdateHeaderBalance(data.user_balance);
            }

            const returned = parseFloat(data.returned_amount) || 0;
            const status   = data.status || 'stopped';

            closeModal();

            if (status === 'winding_down') {
                // Slow path: positions still open. Card must re-render in
                // the winding-down state so the user sees the actual system
                // state, not an empty tab. Server-side reload is the safest
                // way to guarantee the card, aggregate, and any downstream
                // panels re-render consistently -- avoids client-side DOM
                // transforms that would duplicate blade logic.
                showToast('Wind-down started for ' + titleEl.textContent
                    + ' · positions will settle in 24-48 hours');
                setTimeout(() => {
                    const u = new URL(window.location.href);
                    u.searchParams.set('tab', 'follows');
                    window.location.href = u.toString();
                }, 900);
                return;
            }

            // Fast path: sweep already ran (0 open positions at unfollow time,
            // or terminal auto_stopped). Existing card-removal animation +
            // aggregate/count update path is correct here.
            removeCardAndUpdate(activeFollowId, returned);
            flipBrowseCardToFollow(activePilotId);
            showToast('Unfollowed ' + titleEl.textContent
                + (returned > 0 ? ' · $' + returned.toFixed(2) + ' returned' : ''));
            resetSubmit();
        } catch (err) {
            showError('Network error. Try again.');
            resetSubmit();
        }
    });

    function showError(msg) {
        errorEl.textContent = msg;
        errorEl.hidden = false;
    }
    function resetSubmit() {
        submitBtn.disabled = false;
        submitText.textContent = 'Confirm unfollow';
    }

    // -- Remove card, decrement count, update aggregate, swap tab if empty --
    function removeCardAndUpdate(followId, returnedAmount) {
        const card = document.querySelector(`.follow-card[data-follow-id="${followId}"]`);
        if (!card) return;

        card.classList.add('is-removing');
        setTimeout(() => {
            card.remove();

            // Decrement aggregate wallet by the returned amount
            const meta = document.querySelector('.follows-aggregate__meta');
            if (meta) {
                const strongs = meta.querySelectorAll('strong');
                if (strongs.length >= 2) {
                    const walletEl = strongs[strongs.length - 1];
                    const current = parseFloat(walletEl.textContent.replace(/[^0-9.-]/g, '')) || 0;
                    walletEl.textContent = '$' + Math.max(0, current - returnedAmount).toFixed(2);
                }
            }

            // Decrement count badge + aggregate copy
            const badge = document.querySelector('.pilot-tab[data-tab="follows"] .pilot-tab__count');
            const aggLabel = document.querySelector('.follows-aggregate__label');
            let remainingCount = 0;

            if (badge) {
                remainingCount = Math.max(0, (parseInt(badge.textContent, 10) || 1) - 1);
                badge.textContent = remainingCount;
            } else {
                remainingCount = document.querySelectorAll('.follow-card').length;
            }

            if (aggLabel) {
                aggLabel.textContent = 'today across ' + remainingCount
                    + (remainingCount === 1 ? ' pilot' : ' pilots');
            }

            // If no follows left, hide My Follows tab + switch to Browse
            if (remainingCount === 0) {
                const followsTab     = document.querySelector('.pilot-tab[data-tab="follows"]');
                const followsContent = document.querySelector('[data-tab-content="follows"]');
                if (followsTab) followsTab.remove();
                if (followsContent) followsContent.classList.remove('is-active');
                if (typeof switchPilotTab === 'function') switchPilotTab('browse');
            }
        }, 260);
    }

    // -- Sync Browse tab card after unfollow (flip Following -> Follow with $X) --
    function flipBrowseCardToFollow(pilotId) {
        const card = document.querySelector('.pilot-card[data-pilot-id="' + pilotId + '"]');
        if (!card) return;
        const btn = card.querySelector('.follow-btn--following');
        if (!btn) return;

        const color = card.dataset.color || 'orange';
        const minEntry = card.dataset.minEntry || '$20';

        const newBtn = document.createElement('a');
        newBtn.href = btn.href;
        newBtn.className = 'follow-btn follow-btn--' + color;
        newBtn.innerHTML =
            '<span class="follow-btn__main">Follow with ' + minEntry + '</span>' +
            '<span class="follow-btn__arrow" aria-hidden="true">' +
            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" ' +
            'stroke="currentColor" stroke-width="2.5" ' +
            'stroke-linecap="round" stroke-linejoin="round">' +
            '<path d="M5 12h14M13 5l7 7-7 7" />' +
            '</svg></span>';
        btn.replaceWith(newBtn);
    }

    // -- Toast (reuses pt-toast styles created by topup IIFE if present) --
    function showToast(msg) {
        let toast = document.getElementById('pt-toast');
        if (!toast) {
            toast = document.createElement('div');
            toast.id = 'pt-toast';
            toast.className = 'pt-toast is-success';
            document.body.appendChild(toast);
        }
        toast.className = 'pt-toast is-success';
        toast.textContent = msg;
        requestAnimationFrame(() => toast.classList.add('is-visible'));
        clearTimeout(toast._t);
        toast._t = setTimeout(() => toast.classList.remove('is-visible'), 2500);
    }
})();
</script>

@endsection