@extends('layouts.user')

@section('title')
{{ $profile['name'] }} · 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=11"> {{-- modal CSS lives here --}}
<link rel="stylesheet" href="{{ asset('pilot/profile.css') }}?v=4">

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

    {{-- Slim banner --}}
    <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 --}}
            <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 (back link + session pill) --}}
                    <div class="pilots-page-head">
                        <a class="pilots-page-head__back" href="{{ route('pilots.index') }}">
                            <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>
                            Pilots
                        </a>
                        <div></div>
                        <div class="pilots-page-head__live" id="pilotSessionStatus">
                            <span class="pilots-page-head__live-text">Checking session…</span>
                        </div>
                    </div>

                    {{-- Hero --}}
                    @include('partials.pilot.profile-hero', [
                        'profile'     => $profile,
                        'follow'      => $follow,
                        'isFollowing' => $isFollowing,
                    ])

                    {{-- 30-day P&L chart --}}
                    @include('partials.pilot.profile-chart', ['profile' => $profile])

                    {{-- Your activity (only when following) --}}
                    @if($isFollowing && $activity)
                        @include('partials.pilot.profile-activity', [
                            'activity' => $activity,
                            'profile'  => $profile,
                        ])
                    @endif

                    {{-- About panel --}}
                    @if($profile['bio'])
                    <section class="ph-about">
                        <h3 class="ph-about__title">About this pilot</h3>
                        <p class="ph-about__body">{{ $profile['bio'] }}</p>
                    </section>
                    @endif

                    {{-- Recent trades --}}
                    @include('partials.pilot.profile-trades', ['trades' => $profile['recent_trades']])

                </main>
            </div>
        </div>
    </div>
</section>

{{-- Modals (reused from listing + profile-specific follow) --}}
@include('partials.pilot.modal-topup', ['mainBalance' => $mainBalance])
@include('partials.pilot.modal-unfollow')
@include('partials.pilot.modal-follow', ['mainBalance' => $mainBalance])

<script>
// ============================================================
// Profile-page JS: session polling, topup + unfollow modals.
// Mirrors listing.blade.php's modal logic but targets profile DOM.
// ============================================================

// -- Live session polling (same as listing) --
(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(() => {});
    }
    tick();
    setInterval(tick, 30000);
})();

// -- Shared: header balance pill updater --
function pilotUpdateHeaderBalance(newBalance) {
    document.querySelectorAll('.appbar__wallet-value').forEach(el => {
        el.textContent = '$' + parseFloat(newBalance).toFixed(2);
    });
}

// -- Profile-specific DOM updaters --
function pilotUpdateProfileWallet(followId, newWallet) {
    // Update the Wallet stat in the Your Activity panel
    document.querySelectorAll('.ph-activity .ph-stat').forEach(stat => {
        const label = stat.querySelector('.ph-stat__label');
        if (label && label.textContent.trim() === 'Wallet') {
            const value = stat.querySelector('.ph-stat__value');
            if (value) value.textContent = '$' + parseFloat(newWallet).toFixed(2);
        }
    });
    // Update any data-current-wallet on triggers so subsequent opens stay fresh
    document.querySelectorAll(`[data-follow-id="${followId}"][data-current-wallet]`).forEach(b => {
        b.dataset.currentWallet = newWallet;
    });
}

// ============================================================
// Topup modal handler (profile context)
// ============================================================
(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"]');

    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);
    });

    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);
    }

    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;
        });
    });
    amountEl.addEventListener('input', () => {
        document.querySelectorAll('.pt-modal__chip').forEach(c => c.classList.remove('is-active'));
        errorEl.hidden = true;
    });

    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;
            }

            pilotUpdateProfileWallet(activeFollowId, data.wallet);
            userBalance = data.user_balance;
            availEl.textContent = '$' + userBalance.toFixed(2);
            pilotUpdateHeaderBalance(userBalance);

            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';
    }

    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);
    }
})();

// ============================================================
// Unfollow modal handler (profile context)
// On success: redirect to /pilots (no card to animate out here)
// ============================================================
(function() {
    const modal = document.getElementById('unfollow-modal');
    if (!modal) return;

    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');

    let activePilotId  = null;
    let activeWallet   = 0;

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

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

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

        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;
        returnEl.textContent = '$' + activeWallet.toFixed(2);
        errorEl.hidden       = true;
        errorEl.textContent  = '';

        openModal();
    });

    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);
    }

    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;
            }

            // On success: redirect back to listing (this profile no longer
            // represents an active follow)
            window.location.href = "{{ route('pilots.index') }}";
        } 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';
    }
})();

// ============================================================
// Follow modal handler (profile context)
// On success: redirect to same profile page (now in following state)
// ============================================================
(function() {
    const modal = document.getElementById('follow-modal');
    if (!modal) return;

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

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

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

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

        activePilotId = trigger.dataset.pilotId;
        minEntry      = parseFloat(trigger.dataset.minEntry) || 0;

        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;
        minEl.textContent    = '$' + minEntry.toFixed(0);
        amountEl.min         = minEntry;
        amountEl.placeholder = minEntry.toFixed(2);
        amountEl.value       = '';
        errorEl.hidden       = true;
        errorEl.textContent  = '';
        document.querySelectorAll('#follow-modal .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;
        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('#follow-modal .pt-modal__chip').forEach(chip => {
        chip.addEventListener('click', () => {
            document.querySelectorAll('#follow-modal .pt-modal__chip').forEach(c => c.classList.remove('is-active'));
            chip.classList.add('is-active');
            const v = chip.dataset.followAmount;
            amountEl.value = (v === 'max') ? userBalance.toFixed(2) : v;
            errorEl.hidden = true;
        });
    });
    amountEl.addEventListener('input', () => {
        document.querySelectorAll('#follow-modal .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 follow with.');
            return;
        }
        if (amount < minEntry) {
            showError('Minimum follow amount is $' + minEntry.toFixed(2) + '.');
            return;
        }
        if (amount > userBalance) {
            showError('Amount exceeds your main balance.');
            return;
        }

        submitBtn.disabled = true;
        submitText.textContent = 'Starting...';
        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}/follow`, {
                method: 'POST',
                headers,
                credentials: 'same-origin',
                body: JSON.stringify({ amount }),
            });
            const data = await res.json();

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

            // Success: redirect to profile (now in following state).
            // Server returns the redirect URL but same page works either way.
            window.location.href = data.redirect || window.location.pathname;
        } catch (err) {
            showError('Network error. Try again.');
            resetSubmit();
        }
    });

    function showError(msg) {
        errorEl.textContent = msg;
        errorEl.hidden = false;
    }
    function resetSubmit() {
        submitBtn.disabled = false;
        submitText.textContent = 'Start following';
    }
})();
</script>

@endsection