@extends('layouts.app')

@section('title', 'Genealogy Network')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="sm:flex sm:items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Genealogy Network</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">View and manage the MLM hierarchy</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center gap-3">
            <a href="{{ route('agents.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Back to List
            </a>
        </div>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($stats['total_agents']) }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Total Agents</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ number_format($stats['root_agents']) }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Root Agents (No Upline)</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ number_format($stats['with_upline']) }}</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">With Upline</div>
        </div>
    </div>

    <!-- Search Agent -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
        <div class="flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-[300px]">
                <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Search Agent (Name, Matrix ID, or Email)</label>
                <div class="relative">
                    <input type="text" id="agentSearch" placeholder="Type to search..."
                           class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           autocomplete="off">
                    <div id="searchResults" class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg hidden max-h-60 overflow-y-auto"></div>
                </div>
            </div>
            @if($rootAgentId)
                <a href="{{ route('agents.genealogy') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Show All Roots
                </a>
            @endif
        </div>
    </div>

    <!-- Genealogy Tree -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        @if($rootAgents->count() > 0)
            <div id="genealogy-tree" class="space-y-2">
                @foreach($rootAgents as $agent)
                    <div class="genealogy-node" data-agent-id="{{ $agent->id }}">
                        @include('agents.partials.genealogy-node-lazy', ['agent' => $agent, 'depth' => 0])
                    </div>
                @endforeach
            </div>
            @if(!$rootAgentId && $stats['root_agents'] > 50)
                <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
                    Showing first 50 root agents. Use search to find specific agents.
                </div>
            @endif
        @else
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No agents found</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Add agents to see the network hierarchy.</p>
            </div>
        @endif
    </div>

    <!-- Edit Upline Modal -->
    <div id="editUplineModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black/50" onclick="closeEditModal()"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Change Upline</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                    Agent: <span id="modalAgentName" class="font-semibold text-gray-900 dark:text-white"></span>
                </p>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search New Upline</label>
                    <input type="text" id="uplineSearch" placeholder="Type to search..."
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
                           autocomplete="off">
                    <div id="uplineSearchResults" class="mt-2 max-h-40 overflow-y-auto"></div>
                    <input type="hidden" id="newUplineId" value="">
                    <div id="selectedUpline" class="mt-2 hidden p-2 bg-indigo-50 dark:bg-indigo-900/30 rounded text-sm"></div>
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeEditModal()"
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                        Cancel
                    </button>
                    <button type="button" onclick="saveUpline()"
                            class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.genealogy-children {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 2px solid #e5e7eb;
}
.dark .genealogy-children {
    border-left-color: #374151;
}
</style>

<script>
let currentAgentId = null;
let searchTimeout = null;

// Lazy load children
async function toggleChildren(agentId, button) {
    const container = document.getElementById(`children-${agentId}`);
    const icon = button.querySelector('svg');

    if (container.classList.contains('hidden')) {
        // Show children
        if (container.dataset.loaded !== 'true') {
            button.disabled = true;
            container.innerHTML = '<div class="py-2 text-sm text-gray-500">Loading...</div>';
            container.classList.remove('hidden');

            try {
                const response = await fetch(`/agents-genealogy/${agentId}/children`);
                const data = await response.json();

                if (data.children.length > 0) {
                    container.innerHTML = data.children.map(child => renderChildNode(child)).join('');
                    container.dataset.loaded = 'true';
                } else {
                    container.innerHTML = '<div class="py-2 text-sm text-gray-400 italic">No downlines</div>';
                }
            } catch (error) {
                container.innerHTML = '<div class="py-2 text-sm text-red-500">Failed to load</div>';
            }

            button.disabled = false;
        } else {
            container.classList.remove('hidden');
        }
        icon.style.transform = 'rotate(90deg)';
    } else {
        // Hide children
        container.classList.add('hidden');
        icon.style.transform = 'rotate(0deg)';
    }
}

function renderChildNode(child) {
    const statusClass = child.status === 'active'
        ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
        : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';

    const programColors = {
        'legacy': 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
        'progressive': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
        'performance': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
    };
    const programClass = programColors[child.program_type] || 'bg-gray-100 text-gray-800';
    const programLabel = child.program_type === 'none' ? '' : child.program_type.charAt(0).toUpperCase() + child.program_type.slice(1);

    return `
        <div class="genealogy-node mt-2" data-agent-id="${child.id}">
            <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:border-indigo-400 transition-colors">
                ${child.downlines_count > 0 ? `
                    <button onclick="toggleChildren(${child.id}, this)" class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded">
                        <svg class="w-4 h-4 text-gray-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                ` : '<div class="w-6"></div>'}

                <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                    <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400">${child.name.substring(0, 2).toUpperCase()}</span>
                </div>

                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <a href="${child.show_url}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-indigo-600 truncate">${child.name}</a>
                        <span class="px-1.5 py-0.5 text-xs rounded ${statusClass}">${child.status.charAt(0).toUpperCase() + child.status.slice(1)}</span>
                        ${programLabel ? `<span class="px-1.5 py-0.5 text-xs rounded ${programClass}">${programLabel}</span>` : ''}
                    </div>
                    <div class="flex items-center gap-2 mt-0.5">
                        <span class="text-xs font-mono text-indigo-600 dark:text-indigo-400">${child.coupon_code}</span>
                        ${child.downlines_count > 0 ? `<span class="text-xs text-purple-600 dark:text-purple-400">${child.downlines_count} downline(s)</span>` : ''}
                    </div>
                </div>

                <div class="flex items-center gap-1">
                    <button onclick="openEditModal(${child.id}, '${child.name.replace(/'/g, "\\'")}', '${child.upline_id || ''}')"
                            class="p-1.5 text-gray-500 hover:text-indigo-600 rounded hover:bg-white dark:hover:bg-gray-600" title="Change Upline">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                        </svg>
                    </button>
                    <a href="${child.edit_url}" class="p-1.5 text-gray-500 hover:text-indigo-600 rounded hover:bg-white dark:hover:bg-gray-600" title="Edit">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div id="children-${child.id}" class="genealogy-children hidden" data-loaded="false"></div>
        </div>
    `;
}

// Agent search (main page)
document.getElementById('agentSearch').addEventListener('input', function(e) {
    clearTimeout(searchTimeout);
    const query = e.target.value.trim();
    const resultsDiv = document.getElementById('searchResults');

    if (query.length < 2) {
        resultsDiv.classList.add('hidden');
        return;
    }

    searchTimeout = setTimeout(async () => {
        try {
            const response = await fetch(`/agents-genealogy/search?q=${encodeURIComponent(query)}`);
            const data = await response.json();

            if (data.agents.length > 0) {
                resultsDiv.innerHTML = data.agents.map(agent => `
                    <a href="/agents-genealogy?root=${agent.id}"
                       class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm">
                        <span class="font-semibold text-gray-900 dark:text-white">${agent.name}</span>
                        <span class="text-indigo-600 dark:text-indigo-400 font-mono ml-2">${agent.coupon_code}</span>
                        <span class="text-gray-500 dark:text-gray-400 ml-2">${agent.email}</span>
                    </a>
                `).join('');
                resultsDiv.classList.remove('hidden');
            } else {
                resultsDiv.innerHTML = '<div class="px-4 py-2 text-sm text-gray-500">No agents found</div>';
                resultsDiv.classList.remove('hidden');
            }
        } catch (error) {
            console.error('Search error:', error);
        }
    }, 300);
});

// Close search results when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('#agentSearch') && !e.target.closest('#searchResults')) {
        document.getElementById('searchResults').classList.add('hidden');
    }
});

// Modal functions
function openEditModal(agentId, agentName, currentUplineId) {
    currentAgentId = agentId;
    document.getElementById('modalAgentName').textContent = agentName;
    document.getElementById('newUplineId').value = currentUplineId || '';
    document.getElementById('uplineSearch').value = '';
    document.getElementById('uplineSearchResults').innerHTML = '';
    document.getElementById('selectedUpline').classList.add('hidden');
    document.getElementById('editUplineModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editUplineModal').classList.add('hidden');
    currentAgentId = null;
}

// Upline search in modal
document.getElementById('uplineSearch').addEventListener('input', function(e) {
    clearTimeout(searchTimeout);
    const query = e.target.value.trim();
    const resultsDiv = document.getElementById('uplineSearchResults');

    if (query.length < 2) {
        resultsDiv.innerHTML = '';
        return;
    }

    searchTimeout = setTimeout(async () => {
        try {
            const response = await fetch(`/agents-genealogy/search?q=${encodeURIComponent(query)}`);
            const data = await response.json();

            // Filter out current agent
            const filtered = data.agents.filter(a => a.id !== currentAgentId);

            if (filtered.length > 0) {
                resultsDiv.innerHTML = `
                    <button type="button" onclick="selectUpline(null, 'No Upline (Root Agent)')"
                            class="block w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm text-gray-600 dark:text-gray-400">
                        No Upline (Root Agent)
                    </button>
                ` + filtered.map(agent => `
                    <button type="button" onclick="selectUpline(${agent.id}, '${agent.name.replace(/'/g, "\\'")} (${agent.coupon_code})')"
                            class="block w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm">
                        <span class="font-semibold">${agent.name}</span>
                        <span class="text-indigo-600 font-mono ml-2">${agent.coupon_code}</span>
                    </button>
                `).join('');
            } else {
                resultsDiv.innerHTML = '<div class="px-3 py-2 text-sm text-gray-500">No agents found</div>';
            }
        } catch (error) {
            console.error('Search error:', error);
        }
    }, 300);
});

function selectUpline(id, name) {
    document.getElementById('newUplineId').value = id || '';
    document.getElementById('selectedUpline').textContent = name;
    document.getElementById('selectedUpline').classList.remove('hidden');
    document.getElementById('uplineSearchResults').innerHTML = '';
    document.getElementById('uplineSearch').value = '';
}

function saveUpline() {
    if (!currentAgentId) return;

    const newUplineId = document.getElementById('newUplineId').value;

    fetch(`/agents/${currentAgentId}/update-upline`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify({ upline_id: newUplineId || null })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert(data.message || 'Failed to update upline');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}
</script>
@endsection