@props(['agent'])

@php
$tabs = [
    ['label' => 'Overview',     'route' => 'agents.show',          'pattern' => 'agents.show'],
    ['label' => 'Config',       'route' => 'agents.config',        'pattern' => 'agents.config'],
    ['label' => 'ICP & personas', 'route' => 'agents.icp',         'pattern' => 'agents.icp'],
    ['label' => 'Skills',       'route' => 'agents.skills',        'pattern' => 'agents.skills'],
    ['label' => 'Sequences',    'route' => 'agents.sequences',     'pattern' => 'agents.sequences'],
    ['label' => 'Integrations', 'route' => 'agents.integrations',  'pattern' => 'agents.integrations'],
    ['label' => 'Memory',       'route' => 'agents.memory',        'pattern' => 'agents.memory'],
    ['label' => 'Runs',         'route' => 'agents.tasks',         'pattern' => 'agents.tasks'],
    ['label' => 'Engagements',  'route' => 'agents.engagements',   'pattern' => 'agents.engagements*'],
    ['label' => 'Playground',   'route' => 'agents.playground',    'pattern' => 'agents.playground'],
];
@endphp

<div class="flex items-center justify-between gap-4 mb-6">
    <div>
        <a href="{{ route('agents.index') }}" wire:navigate class="text-small text-muted hover:text-content">
            ← All agents
        </a>
        <h1 class="text-h1 text-content mt-1">{{ $agent->name }}</h1>
        <p class="text-small text-muted">
            {{ $agent->agentType?->display_name }} · <x-badge :status="$agent->status" />
        </p>
    </div>
    <div class="text-right text-small text-muted">
        ${{ number_format((float) $agent->spend_today_usd, 4) }}
        <span class="text-faint">/ ${{ number_format((float) $agent->token_budget_daily_usd, 2) }}</span>
        <div class="text-micro text-faint">spend today</div>
    </div>
</div>

<nav class="flex items-center gap-1 mb-6 border-b border-border" aria-label="Agent sections">
    @foreach ($tabs as $tab)
        @php $active = request()->routeIs($tab['pattern']); @endphp
        <a href="{{ route($tab['route'], $agent) }}" wire:navigate
           class="px-3 h-9 inline-flex items-center text-small rounded-t-md
                  {{ $active ? 'text-content font-medium border-b-2 border-info-border -mb-px'
                              : 'text-muted hover:text-content' }}">
            {{ $tab['label'] }}
        </a>
    @endforeach
</nav>