@php /** @var callable $getState */ @endphp

<div class="space-y-4">
    <form method="GET" class="flex items-center gap-2">
        <label for="direction" class="text-sm text-gray-600">Direction</label>
        <select id="direction" name="direction" class="fi-input fi-select">
            <option value="all" {{ request('direction', 'all') === 'all' ? 'selected' : '' }}>All</option>
            <option value="inbound" {{ request('direction') === 'inbound' ? 'selected' : '' }}>Inbound</option>
            <option value="outbound" {{ request('direction') === 'outbound' ? 'selected' : '' }}>Outbound</option>
        </select>

        <label for="relationship_type" class="text-sm text-gray-600">Relationship</label>
        <select id="relationship_type" name="relationship_type" class="fi-input fi-select">
            <option value="all" {{ request('relationship_type', 'all') === 'all' ? 'selected' : '' }}>All</option>
            @foreach (\App\Support\Enums\RelationshipType::options() as $value => $label)
                <option value="{{ $value }}" {{ request('relationship_type') === $value ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        <button type="submit" class="fi-btn">Apply</button>
    </form>

    @php
        $raw = $getState();
        $edges = $raw instanceof \Illuminate\Support\Collection ? $raw : collect($raw);
    @endphp

    @if ($edges->isEmpty())
        <div class="text-sm text-gray-500">No dependencies found</div>
    @else
        <div class="divide-y">
            @foreach ($edges->groupBy('relationship_type') as $type => $group)
                <div class="py-2">
                    <div class="text-xs uppercase tracking-wide text-gray-600 mb-2">{{ str_replace('_', ' ', $type) }}</div>
                    <ul class="space-y-1">
                        @foreach ($group as $edge)
                            @php
                                $isMissing = ($edge['target_type'] ?? null) === 'missing';
                                $targetId = $edge['target_id'] ?? null;
                                $rendered = $edge['rendered_target'] ?? [];
                                $badgeText = is_array($rendered) ? ($rendered['badge_text'] ?? null) : null;
                                $linkUrl = is_array($rendered) ? ($rendered['link_url'] ?? null) : null;

                                $missingTitle = 'Missing target';
                                $lastKnownName = $edge['metadata']['last_known_name'] ?? null;
                                if (is_string($lastKnownName) && $lastKnownName !== '') {
                                    $missingTitle .= ". Last known: {$lastKnownName}";
                                }
                                $rawRef = $edge['metadata']['raw_ref'] ?? null;
                                if ($rawRef !== null) {
                                    $encodedRef = json_encode($rawRef);
                                    if (is_string($encodedRef) && $encodedRef !== '') {
                                        $missingTitle .= '. Ref: '.\Illuminate\Support\Str::limit($encodedRef, 200);
                                    }
                                }
                            @endphp
                            <li class="flex items-center gap-2 text-sm">
                                @if (is_string($linkUrl) && $linkUrl !== '')
                                    <a class="fi-badge" href="{{ $linkUrl }}" title="{{ is_string($targetId) ? $targetId : '' }}">{{ is_string($badgeText) && $badgeText !== '' ? $badgeText : 'External reference' }}</a>
                                @else
                                    <span class="fi-badge" title="{{ is_string($targetId) ? $targetId : '' }}">{{ is_string($badgeText) && $badgeText !== '' ? $badgeText : 'External reference' }}</span>
                                @endif
                                @if ($isMissing)
                                    <span class="fi-badge fi-badge-danger" title="{{ $missingTitle }}">Missing</span>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    @endif
</div>