@extends('adminlte::page')

@section('title', 'Tracked Activity')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/bootstrap/dist/css/bootstrap-datepicker.min.css') }}">
    <style>
        .delta-positive { color: #27ae60; font-weight: bold; }
        .delta-negative { color: #e74c3c; font-weight: bold; }
        .resource-badge { display: inline-block; margin: 1px 3px; padding: 2px 6px; border-radius: 3px; font-size: 11px; }
        .resource-badge.source { background: #d4edda; color: #155724; }
        .resource-badge.sink { background: #f8d7da; color: #721c24; }
    </style>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-crosshairs"></i> Tracked Activity for
                        <strong>{{ $member->member_name }}</strong> (#{{ $member->member_id }})
                    </h3>
                    <div class="pull-right">
                        <button id="btn-toggle-track" class="btn btn-sm {{ $isTracked ? 'btn-danger' : 'btn-success' }}"
                                data-member-id="{{ $member->member_id }}" data-tracked="{{ $isTracked ? '1' : '0' }}">
                            <i class="fa fa-{{ $isTracked ? 'stop' : 'play' }}"></i>
                            {{ $isTracked ? 'Stop Tracking' : 'Start Tracking' }}
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <a href="{{ url()->previous() }}" class="btn btn-warning btn-sm">
                        <i class="fa fa-arrow-left"></i> Back
                    </a>
                    <button id="btn-clear-logs" class="btn btn-danger btn-sm" data-member-id="{{ $member->member_id }}">
                        <i class="fa fa-trash"></i> Clear All Logs
                    </button>

                    <form class="form-inline" style="display:inline; margin-left:20px;" method="GET">
                        <div class="form-group">
                            <label>From: </label>
                            <input type="text" name="date_from" class="form-control date" autocomplete="off"
                                   value="{{ $dateFrom }}" placeholder="dd-mm-yyyy" style="width:130px;">
                        </div>
                        <div class="form-group" style="margin-left:10px;">
                            <label>To: </label>
                            <input type="text" name="date_to" class="form-control date" autocomplete="off"
                                   value="{{ $dateTo }}" placeholder="dd-mm-yyyy" style="width:130px;">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm" style="margin-left:10px;">
                            <i class="fa fa-search"></i> Filter
                        </button>
                    </form>

                    <div id="track-alert" style="margin-top:10px;"></div>

                    @if(!empty($dailyData))
                    <hr>
                    <h4><i class="fa fa-line-chart"></i> Daily Source / Sink</h4>
                    <div style="margin-bottom:10px;">
                        <strong>Toggle:</strong>
                        <span id="chart-toggles"></span>
                    </div>
                    <div style="height:300px;">
                        <canvas id="resourceChart"></canvas>
                    </div>
                    @endif

                    @if(!empty($summary))
                    <hr>
                    <h4><i class="fa fa-bar-chart"></i> Resource Summary</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered table-condensed" style="max-width:800px;">
                            <thead>
                                <tr>
                                    <th>Resource</th>
                                    <th class="text-center">Start</th>
                                    <th class="text-center">Source (gained)</th>
                                    <th class="text-center">Sink (spent)</th>
                                    <th class="text-center">Net Change</th>
                                    <th class="text-center">End</th>
                                    <th class="text-center">Times</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($summary as $resource => $data)
                                    @php
                                        $shortName = str_replace('member_', '', $resource);
                                        $netClass = $data['total_delta'] > 0 ? 'delta-positive' : ($data['total_delta'] < 0 ? 'delta-negative' : '');
                                        $iconMap = [
                                            'diamond' => '<i class="fa fa-diamond text-blue"></i>',
                                            'gold' => '<i class="fa fa-money text-yellow"></i>',
                                            'stamina' => '<i class="fa fa-bolt text-orange"></i>',
                                            'ability' => '<i class="fa fa-flash text-purple"></i>',
                                            'wood' => '<i class="fa fa-tree text-green"></i>',
                                            'iron' => '<i class="fa fa-cube text-muted"></i>',
                                            'jewel' => '<i class="fa fa-gem text-info"></i>',
                                            'arena_gem' => '<i class="fa fa-shield text-red"></i>',
                                            'crucible_gem' => '<i class="fa fa-fire text-orange"></i>',
                                            'hall_legend_gem' => '<i class="fa fa-trophy text-yellow"></i>',
                                            'superarena_gem' => '<i class="fa fa-star text-purple"></i>',
                                            'level' => '<i class="fa fa-arrow-up text-blue"></i>',
                                            'exp' => '<i class="fa fa-line-chart text-green"></i>',
                                        ];
                                        $icon = $iconMap[$shortName] ?? $iconMap[$resource] ?? '<i class="fa fa-circle"></i>';
                                    @endphp
                                    <tr>
                                        <td>{!! $icon !!} <strong>{{ $shortName }}</strong></td>
                                        <td class="text-center">{{ number_format($data['first']) }}</td>
                                        <td class="text-center delta-positive">+{{ number_format($data['source']) }}</td>
                                        <td class="text-center delta-negative">{{ number_format($data['sink']) }}</td>
                                        <td class="text-center {{ $netClass }}">{{ $data['total_delta'] > 0 ? '+' : '' }}{{ number_format($data['total_delta']) }}</td>
                                        <td class="text-center"><strong>{{ number_format($data['last']) }}</strong></td>
                                        <td class="text-center">{{ $data['count'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif

                    <hr>

                    @if($logs->total() == 0)
                        <div class="alert alert-info">No tracked activity found. {{ $isTracked ? 'Tracking is active — data will appear after the member performs actions.' : 'Click "Start Tracking" to begin.' }}</div>
                    @else
                        <p class="text-muted">Showing {{ $logs->firstItem() }}-{{ $logs->lastItem() }} of {{ $logs->total() }} entries</p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-condensed table-striped">
                                <thead>
                                    <tr>
                                        <th style="width:140px">Time</th>
                                        <th style="width:200px">Endpoint</th>
                                        <th>Resource Changes</th>
                                        <th>POST Params</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($logs as $log)
                                        @php
                                            $changes = $log->resource_changes ? json_decode($log->resource_changes, true) : null;
                                            $hasChanges = $changes && count($changes) > 0;
                                            $rowClass = $hasChanges ? '' : '';
                                        @endphp
                                        <tr class="{{ $rowClass }}">
                                            <td><small>{{ date('d/m/Y H:i:s', $log->request_time) }}</small></td>
                                            <td><code>{{ $log->rnd }}</code></td>
                                            <td>
                                                @if($hasChanges)
                                                    @foreach($changes as $resource => $vals)
                                                        @php
                                                            $shortName = str_replace('member_', '', $resource);
                                                            $delta = $vals['delta'];
                                                            $isSource = $delta > 0;
                                                            $iconMap2 = [
                                                                'diamond' => '<i class="fa fa-diamond"></i>',
                                                                'gold' => '<i class="fa fa-money"></i>',
                                                                'stamina' => '<i class="fa fa-bolt"></i>',
                                                                'ability' => '<i class="fa fa-flash"></i>',
                                                                'wood' => '<i class="fa fa-tree"></i>',
                                                                'iron' => '<i class="fa fa-cube"></i>',
                                                                'jewel' => '<i class="fa fa-gem"></i>',
                                                                'arena_gem' => '<i class="fa fa-shield"></i>',
                                                                'crucible_gem' => '<i class="fa fa-fire"></i>',
                                                                'hall_legend_gem' => '<i class="fa fa-trophy"></i>',
                                                                'superarena_gem' => '<i class="fa fa-star"></i>',
                                                            ];
                                                            $icon2 = $iconMap2[$shortName] ?? $iconMap2[$resource] ?? '';
                                                        @endphp
                                                        <span class="resource-badge {{ $isSource ? 'source' : 'sink' }}">
                                                            {!! $icon2 !!} {{ $shortName }}:
                                                            <span class="{{ $isSource ? 'delta-positive' : 'delta-negative' }}">
                                                                {{ $isSource ? '+' : '' }}{{ number_format($delta) }}
                                                            </span>
                                                            <small>({{ number_format($vals['before']) }} → {{ number_format($vals['after']) }})</small>
                                                        </span>
                                                    @endforeach
                                                @else
                                                    <small class="text-muted">-</small>
                                                @endif
                                            </td>
                                            <td><small class="text-muted" style="word-break:break-all;">{{ substr($log->post_params, 0, 150) }}{{ strlen($log->post_params) > 150 ? '...' : '' }}</small></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">{{ $logs->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script src="{{ asset('vendor/adminlte/vendor/bootstrap/dist/js/bootstrap-datepicker.min.js.download') }}"></script>
    <script type="text/javascript">
        $('.date').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        });

        // --- Chart ---
        var dailyData = {!! json_encode($dailyData ?? []) !!};
        var labels = Object.keys(dailyData);

        if (labels.length > 0) {
            // Collect all resource types
            var allResources = {};
            labels.forEach(function (day) {
                Object.keys(dailyData[day]).forEach(function (res) {
                    allResources[res] = true;
                });
            });

            var colorMap = {
                'member_diamond': {source: '#3498db', sink: '#85c1e9'},
                'member_gold': {source: '#f39c12', sink: '#f9e79f'},
                'member_stamina': {source: '#e67e22', sink: '#f5cba7'},
                'member_ability': {source: '#9b59b6', sink: '#d2b4de'},
                'member_wood': {source: '#27ae60', sink: '#a9dfbf'},
                'member_iron': {source: '#7f8c8d', sink: '#bdc3c7'},
                'member_jewel': {source: '#1abc9c', sink: '#a3e4d7'},
                'arena_gem': {source: '#e74c3c', sink: '#f5b7b1'},
                'crucible_gem': {source: '#d35400', sink: '#edbb99'},
                'hall_legend_gem': {source: '#f1c40f', sink: '#f9e79f'},
                'superarena_gem': {source: '#8e44ad', sink: '#d7bde2'},
                'member_level': {source: '#2c3e50', sink: '#aab7b8'},
                'member_exp': {source: '#16a085', sink: '#a2d9ce'},
            };

            var datasets = [];
            var defaultHidden = {};
            Object.keys(allResources).forEach(function (res) {
                var shortName = res.replace('member_', '');
                var colors = colorMap[res] || {source: '#333', sink: '#999'};
                var isGold = (res === 'member_gold');

                var noSink = (res === 'member_level' || res === 'member_exp');

                // Source line
                var sourceData = labels.map(function (day) {
                    return dailyData[day][res] ? dailyData[day][res].source : 0;
                });
                datasets.push({
                    label: shortName + (noSink ? '' : ' (source)'),
                    data: sourceData,
                    borderColor: colors.source,
                    backgroundColor: 'transparent',
                    borderWidth: 2,
                    pointRadius: 3,
                    hidden: !isGold,
                    _resource: res
                });

                // Sink line (skip for level/exp)
                if (!noSink) {
                    var sinkData = labels.map(function (day) {
                        return dailyData[day][res] ? dailyData[day][res].sink : 0;
                    });
                    datasets.push({
                        label: shortName + ' (sink)',
                        data: sinkData,
                        borderColor: colors.sink,
                        backgroundColor: 'transparent',
                        borderWidth: 2,
                        borderDash: [5, 5],
                        pointRadius: 3,
                        hidden: !isGold,
                        _resource: res
                    });
                }
            });

            var ctx = document.getElementById('resourceChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'line',
                data: { labels: labels, datasets: datasets },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{ ticks: { beginAtZero: true, callback: function(v) { return v.toLocaleString(); } } }]
                    },
                    tooltips: {
                        callbacks: {
                            label: function(item, data) {
                                return data.datasets[item.datasetIndex].label + ': ' + item.yLabel.toLocaleString();
                            }
                        }
                    }
                }
            });

            // Build toggle buttons
            var iconMap = {
                'member_diamond': '💎', 'member_gold': '💰', 'member_stamina': '⚡',
                'member_ability': '🔮', 'member_wood': '🌳', 'member_iron': '🧊',
                'member_jewel': '💎', 'arena_gem': '🛡️', 'crucible_gem': '🔥',
                'hall_legend_gem': '🏆', 'superarena_gem': '⭐',
                'member_level': '⬆️', 'member_exp': '📈'
            };

            var toggleHtml = '';
            Object.keys(allResources).forEach(function (res) {
                var shortName = res.replace('member_', '');
                var icon = iconMap[res] || '●';
                var isGold = (res === 'member_gold');
                var btnClass = isGold ? 'btn-primary' : 'btn-default';
                toggleHtml += '<button class="btn btn-xs ' + btnClass + ' chart-toggle" data-resource="' + res + '" style="margin:2px;">' + icon + ' ' + shortName + '</button>';
            });
            $('#chart-toggles').html(toggleHtml);

            $(document).on('click', '.chart-toggle', function () {
                var res = $(this).data('resource');
                $(this).toggleClass('btn-primary btn-default');
                var show = $(this).hasClass('btn-primary');
                chart.data.datasets.forEach(function (ds, i) {
                    if (ds._resource === res) {
                        chart.getDatasetMeta(i).hidden = !show;
                    }
                });
                chart.update();
            });
        }

        $('#btn-clear-logs').on('click', function () {
            if (!confirm('Delete ALL tracking logs for member #{{ $member->member_id }}?')) return;
            var btn = $(this);
            btn.prop('disabled', true);
            $.ajax({
                url: '{{ route("members.clear_track_logs", $member->member_id) }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                complete: function () { btn.prop('disabled', false); }
            });
        });

        $('#btn-toggle-track').on('click', function () {
            var btn = $(this);
            var memberId = btn.data('member-id');
            var tracked = btn.data('tracked') == '1';

            btn.prop('disabled', true);

            $.ajax({
                url: '{{ route("members.toggle_track", $member->member_id) }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                        $('#track-alert').html('<div class="alert alert-success alert-dismissible"><button type="button" class="close" data-dismiss="alert">&times;</button><i class="fa fa-check"></i> ' + response.message + '</div>');
                        if (response.tracked) {
                            btn.removeClass('btn-success').addClass('btn-danger')
                                .html('<i class="fa fa-stop"></i> Stop Tracking')
                                .data('tracked', '1');
                        } else {
                            btn.removeClass('btn-danger').addClass('btn-success')
                                .html('<i class="fa fa-play"></i> Start Tracking')
                                .data('tracked', '0');
                        }
                    }
                },
                complete: function () { btn.prop('disabled', false); }
            });
        });
    </script>
@endpush