Ai Context Bar code

@props([
    'projects' => [
        'dzc' => 'dzc',
        'components' => 'components',
    ],
    'selectedProject' => 'dzc',
    'projectName' => 'project',
    'workModes' => [
        'local' => 'Work locally',
        'cloud' => 'Cloud task',
        'review' => 'Review only',
    ],
    'selectedWorkMode' => 'local',
    'workModeName' => 'work_mode',
    'branches' => [
        'main' => 'main',
        'develop' => 'develop',
    ],
    'selectedBranch' => 'main',
    'branchName' => 'branch',
    'disabled' => false,
    'layout' => 'inline',
    'title' => 'Workspace',
    'embedded' => false,
])

@php
    /*
    | Shared project, work mode and branch selectors for AI workflows.
    |
    | layout:
    |   inline  — compact ghost selects for toolbars and footers
    |   stacked — labeled fields for narrow sidebars
    |
    | Usage:
    |   <x-ui.ai-context-bar
    |       :projects="['dzc' => 'dzc']"
    |       :branches="['main' => 'main', 'feature/agents' => 'feature/agents']"
    |   />
    */
    $isStacked = $layout === 'stacked';

    $containerClass = match (true) {
        $isStacked && $embedded => 'min-w-0',
        $isStacked => 'min-w-0 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900',
        default => 'flex min-w-0 flex-col gap-2 rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-950 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3',
    };

    $inlineSelectClass = 'h-9 w-full appearance-none rounded-lg border border-gray-200 bg-white pe-8 ps-3 text-sm font-medium text-gray-700 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 disabled:cursor-default disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-800';

    $stackedSelectClass = 'h-10 w-full appearance-none rounded-lg border border-gray-300 bg-white pe-8 ps-9 text-sm font-medium text-gray-700 shadow-sm transition focus:border-brand-500 focus:ring-1 focus:ring-brand-500 disabled:cursor-default disabled:opacity-50 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-200';
@endphp

<div {{ $attributes->merge(['class' => $containerClass]) }}>
    @if ($isStacked)
        @unless ($embedded)
            <div class="border-b border-gray-200 px-4 py-4 dark:border-gray-800 sm:px-5">
                <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $title }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Project, mode and branch</p>
            </div>
        @endunless

        <div @class(['space-y-4 p-4 sm:p-5', 'border-t border-gray-200 pt-4 dark:border-gray-800' => $embedded])>
            <label class="block">
                <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Project</span>
                <span class="relative block">
                    <x-ui.icon name="folder" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <select name="{{ $projectName }}" @disabled($disabled) class="{{ $stackedSelectClass }}">
                        @foreach ($projects as $value => $label)
                            <option value="{{ $value }}" @selected($selectedProject === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
                </span>
            </label>

            <label class="block">
                <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Work mode</span>
                <span class="relative block">
                    <x-ui.icon name="laptop" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <select name="{{ $workModeName }}" @disabled($disabled) class="{{ $stackedSelectClass }}">
                        @foreach ($workModes as $value => $label)
                            <option value="{{ $value }}" @selected($selectedWorkMode === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
                </span>
            </label>

            <label class="block">
                <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Branch</span>
                <span class="relative block">
                    <x-ui.icon name="git-branch" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <select name="{{ $branchName }}" @disabled($disabled) class="{{ $stackedSelectClass }}">
                        @foreach ($branches as $value => $label)
                            <option value="{{ $value }}" @selected($selectedBranch === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
                </span>
            </label>
        </div>
    @else
        <label class="relative w-full min-w-0 sm:w-44">
            <span class="sr-only">Project</span>
            <x-ui.icon name="folder" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <select name="{{ $projectName }}" @disabled($disabled) class="{{ $inlineSelectClass }} ps-9">
                @foreach ($projects as $value => $label)
                    <option value="{{ $value }}" @selected($selectedProject === $value)>{{ $label }}</option>
                @endforeach
            </select>
            <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
        </label>

        <label class="relative w-full min-w-0 sm:w-48">
            <span class="sr-only">Work mode</span>
            <x-ui.icon name="laptop" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <select name="{{ $workModeName }}" @disabled($disabled) class="{{ $inlineSelectClass }} ps-9">
                @foreach ($workModes as $value => $label)
                    <option value="{{ $value }}" @selected($selectedWorkMode === $value)>{{ $label }}</option>
                @endforeach
            </select>
            <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
        </label>

        <label class="relative w-full min-w-0 sm:w-56">
            <span class="sr-only">Branch</span>
            <x-ui.icon name="git-branch" size="base" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <select name="{{ $branchName }}" @disabled($disabled) class="{{ $inlineSelectClass }} ps-9">
                @foreach ($branches as $value => $label)
                    <option value="{{ $value }}" @selected($selectedBranch === $value)>{{ $label }}</option>
                @endforeach
            </select>
            <x-ui.icon name="caret-down" weight="bold" size="sm" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
        </label>
    @endif
</div>