<div>
    {{-- Flash message --}}
    @if(session()->has('message'))
        <div class="mb-4 rounded-lg bg-green-50 p-3 text-sm text-green-700">
            {{ session('message') }}
        </div>
    @endif

    {{-- Header --}}
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
                <h2 class="text-xl font-semibold text-gray-900">{{ $project->title }}</h2>
                <x-status-badge :status="$project->status->value" />
                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                    {{ $project->type === \App\Domain\Project\Enums\ProjectType::Continuous ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700' }}">
                    {{ $project->type->label() }}
                </span>
                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $project->execution_mode->color() }}">
                    {{ $project->execution_mode->icon() }} {{ $project->execution_mode->label() }}
                </span>
            </div>
            @if($project->description)
                <p class="mt-1 max-w-2xl text-sm text-gray-500">{{ $project->description }}</p>
            @endif
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('projects.kanban', $project) }}"
                class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
                Board
            </a>
            @if($project->status !== \App\Domain\Project\Enums\ProjectStatus::Archived)
                <a href="{{ route('projects.edit', $project) }}"
                    class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
                    Edit
                </a>
            @endif
            @if($project->status === \App\Domain\Project\Enums\ProjectStatus::Draft)
                <form class="inline" onsubmit="return false" toolname="activate_project" tooldescription="Activate this draft project">
                <button type="button" wire:click="activate"
                    class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-green-700">
                    Activate
                </button>
                </form>
            @elseif($project->status === \App\Domain\Project\Enums\ProjectStatus::Active)
                <form class="inline" onsubmit="return false" toolname="trigger_project_run" tooldescription="Manually trigger a new run for this project">
                <button type="button" wire:click="triggerRun"
                    class="rounded-lg border border-primary-300 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-50">
                    Trigger Run
                </button>
                </form>
                <form class="inline" onsubmit="return false" toolname="pause_project" tooldescription="Pause this active project">
                <button type="button" wire:click="pause"
                    class="rounded-lg border border-yellow-300 px-3 py-1.5 text-sm font-medium text-yellow-700 hover:bg-yellow-50">
                    Pause
                </button>
                </form>
            @elseif($project->status === \App\Domain\Project\Enums\ProjectStatus::Paused)
                <form class="inline" onsubmit="return false" toolname="resume_project" tooldescription="Resume this paused project">
                <button type="button" wire:click="resume"
                    class="rounded-lg border border-green-300 px-3 py-1.5 text-sm font-medium text-green-700 hover:bg-green-50">
                    Resume
                </button>
                </form>
            @endif
            @if(in_array($project->status, [
                \App\Domain\Project\Enums\ProjectStatus::Completed,
                \App\Domain\Project\Enums\ProjectStatus::Failed,
                \App\Domain\Project\Enums\ProjectStatus::Paused,
                \App\Domain\Project\Enums\ProjectStatus::Active,
            ]))
                <button wire:click="restart" wire:confirm="Restart this project from scratch? All counters and milestones will be reset."
                    class="rounded-lg border border-indigo-300 px-3 py-1.5 text-sm font-medium text-indigo-700 hover:bg-indigo-50">
                    Restart
                </button>
            @endif
            @if($project->status->canTransitionTo(\App\Domain\Project\Enums\ProjectStatus::Archived))
                <button wire:click="archive" wire:confirm="Archive this project? It cannot be reactivated."
                    class="rounded-lg border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50">
                    Archive
                </button>
            @endif
        </div>
    </div>

    {{-- Fix-with-assistant card (only renders for paused or archived projects) --}}
    @if(in_array($project->status, [\App\Domain\Project\Enums\ProjectStatus::Paused, \App\Domain\Project\Enums\ProjectStatus::Archived]))
        <div class="mb-4">
            <x-fix-with-assistant entity-type="project" :entity-id="$project->id" />
        </div>
    @endif

    {{-- Stats Cards --}}
    <div class="mb-6 grid grid-cols-5 gap-4">
        <div class="rounded-xl border border-gray-200 bg-white p-4">
            <div class="text-2xl font-bold text-gray-900">{{ $totalRuns }}</div>
            <div class="text-sm text-gray-500">Total Runs</div>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4">
            <div class="text-2xl font-bold text-green-600">{{ $successfulRuns }}</div>
            <div class="text-sm text-gray-500">Successful</div>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4">
            <div class="text-2xl font-bold text-red-600">{{ $failedRuns }}</div>
            <div class="text-sm text-gray-500">Failed</div>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4">
            <div class="text-2xl font-bold text-gray-900">{{ number_format($project->total_spend_credits) }}</div>
            <div class="text-sm text-gray-500">Credits Spent</div>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4">
            @if($project->schedule && $project->schedule->next_run_at)
                <div class="text-lg font-bold text-gray-900">{{ $project->schedule->next_run_at->diffForHumans() }}</div>
                <div class="text-sm text-gray-500">Next Run</div>
            @else
                <div class="text-lg font-bold text-gray-400">--</div>
                <div class="text-sm text-gray-500">Next Run</div>
            @endif
        </div>
    </div>

    {{-- Budget Progress (if caps exist) --}}
    @php
        $budgetConfig = $project->budget_config;
        $hasBudget = ! empty($budgetConfig['daily_cap']) || ! empty($budgetConfig['weekly_cap']) || ! empty($budgetConfig['monthly_cap']);
    @endphp
    @if($hasBudget)
        <div class="mb-6 rounded-xl border border-gray-200 bg-white p-4">
            <h3 class="mb-3 text-sm font-semibold text-gray-700">Budget Usage</h3>
            <div class="grid grid-cols-3 gap-4">
                @foreach(['daily', 'weekly', 'monthly'] as $period)
                    @php
                        $cap = $budgetConfig["{$period}_cap"] ?? null;
                        $spend = $cap ? $project->periodSpend($period) : 0;
                        $pct = $cap ? min(100, round(($spend / $cap) * 100)) : 0;
                    @endphp
                    @if($cap)
                        <div>
                            <div class="mb-1 flex items-center justify-between text-xs">
                                <span class="font-medium text-gray-600">{{ ucfirst($period) }}</span>
                                <span class="text-gray-500">{{ $spend }}/{{ $cap }} credits</span>
                            </div>
                            <div class="h-2 w-full rounded-full bg-gray-200">
                                <div class="h-2 rounded-full {{ $pct >= 100 ? 'bg-red-500' : ($pct >= 80 ? 'bg-yellow-500' : 'bg-green-500') }}" style="width: {{ $pct }}%"></div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @endif

    {{-- Dependencies --}}
    @if($upstreamDeps->isNotEmpty() || $downstreamDeps->isNotEmpty())
        <div class="mb-6 rounded-xl border border-gray-200 bg-white p-4">
            <h3 class="mb-3 text-sm font-semibold text-gray-700">Dependencies</h3>
            <div class="grid gap-4 {{ $upstreamDeps->isNotEmpty() && $downstreamDeps->isNotEmpty() ? 'grid-cols-2' : 'grid-cols-1' }}">
                @if($upstreamDeps->isNotEmpty())
                    <div>
                        <div class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Uses results from</div>
                        <div class="space-y-2">
                            @foreach($upstreamDeps as $dep)
                                <a href="{{ route('projects.show', $dep->dependsOn) }}"
                                    class="flex items-center justify-between rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50">
                                    <div class="flex items-center gap-2">
                                        <i class="fa-solid fa-arrow-left text-base text-blue-400"></i>
                                        <span class="text-sm font-medium text-gray-900">{{ $dep->dependsOn->title }}</span>
                                        <span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500">{{ $dep->alias }}</span>
                                    </div>
                                    <span class="text-xs text-gray-400">{{ $dep->reference_type === 'latest_run' ? 'latest run' : 'pinned' }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if($downstreamDeps->isNotEmpty())
                    <div>
                        <div class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Provides results to</div>
                        <div class="space-y-2">
                            @foreach($downstreamDeps as $dep)
                                <a href="{{ route('projects.show', $dep->project) }}"
                                    class="flex items-center justify-between rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50">
                                    <div class="flex items-center gap-2">
                                        <i class="fa-solid fa-arrow-right text-base text-green-400"></i>
                                        <span class="text-sm font-medium text-gray-900">{{ $dep->project->title }}</span>
                                        <span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500">{{ $dep->alias }}</span>
                                    </div>
                                    <x-status-badge :status="$dep->project->status->value" />
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endif

    {{-- Tools & Credentials --}}
    @if($allowedTools->isNotEmpty() || $allowedCredentials->isNotEmpty())
        <div class="mb-6 rounded-xl border border-gray-200 bg-white p-4">
            <h3 class="mb-3 text-sm font-semibold text-gray-700">Tools & Credentials</h3>
            <div class="grid gap-4 {{ $allowedTools->isNotEmpty() && $allowedCredentials->isNotEmpty() ? 'grid-cols-2' : 'grid-cols-1' }}">
                @if($allowedTools->isNotEmpty())
                    <div>
                        <div class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Tools</div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($allowedTools as $tool)
                                <a href="{{ route('tools.show', $tool) }}"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-100 px-3 py-1.5 text-sm hover:bg-gray-50">
                                    <span class="font-medium text-gray-700">{{ $tool->name }}</span>
                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ match($tool->type->value) {
                                        'mcp_stdio' => 'bg-blue-100 text-blue-800',
                                        'mcp_http' => 'bg-cyan-100 text-cyan-800',
                                        'mcp_bridge' => 'bg-purple-100 text-purple-800',
                                        'built_in' => 'bg-amber-100 text-amber-800',
                                        default => 'bg-gray-100 text-gray-800',
                                    } }}">{{ $tool->type->label() }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if($allowedCredentials->isNotEmpty())
                    <div>
                        <div class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Credentials</div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($allowedCredentials as $credential)
                                <a href="{{ route('credentials.show', $credential) }}"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-100 px-3 py-1.5 text-sm hover:bg-gray-50">
                                    <span class="font-medium text-gray-700">{{ $credential->name }}</span>
                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ $credential->credential_type->color() }}">{{ $credential->credential_type->label() }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endif

    {{-- Tabs --}}
    <div class="mb-4 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8 overflow-x-auto scrollbar-none">
            @foreach(['activity' => 'Activity', 'milestones' => 'Milestones', 'runs' => 'Runs', 'snapshots' => 'Snapshots'] as $tab => $label)
                <button wire:click="$set('activeTab', '{{ $tab }}')"
                    class="whitespace-nowrap border-b-2 py-3 text-sm font-medium {{ $activeTab === $tab ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    {{ $label }}
                    @if($tab === 'milestones')
                        <span class="ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{{ $milestones->count() }}</span>
                    @elseif($tab === 'snapshots')
                        <span class="ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{{ $snapshotCount }}</span>
                    @endif
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Tab Content --}}
    @if($activeTab === 'activity')
        <div @if($project->status === \App\Domain\Project\Enums\ProjectStatus::Active) wire:poll.30s @endif>
            <livewire:projects.project-activity-timeline :project="$project" :key="'timeline-' . $project->id" />
        </div>

    @elseif($activeTab === 'milestones')
        <div class="space-y-3">
            @forelse($milestones as $milestone)
                <div class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-4">
                    <div class="flex h-8 w-8 items-center justify-center rounded-full
                        {{ $milestone->status === \App\Domain\Project\Enums\MilestoneStatus::Completed ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400' }}">
                        @if($milestone->status === \App\Domain\Project\Enums\MilestoneStatus::Completed)
                            <i class="fa-solid fa-check text-lg"></i>
                        @else
                            <span class="text-sm font-medium">{{ $milestone->sort_order }}</span>
                        @endif
                    </div>
                    <div class="flex-1">
                        <div class="font-medium text-gray-900">{{ $milestone->title }}</div>
                        @if($milestone->target_value)
                            <div class="text-xs text-gray-500">Target: {{ $milestone->target_value }} {{ $milestone->target_metric }}</div>
                        @endif
                    </div>
                    <div>
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                            {{ $milestone->status === \App\Domain\Project\Enums\MilestoneStatus::Completed ? 'bg-green-100 text-green-700' : ($milestone->status === \App\Domain\Project\Enums\MilestoneStatus::InProgress ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600') }}">
                            {{ $milestone->status->label() }}
                        </span>
                    </div>
                    @if($milestone->completed_at)
                        <div class="text-xs text-gray-400">{{ $milestone->completed_at->diffForHumans() }}</div>
                    @endif
                </div>
            @empty
                <div class="rounded-xl border border-gray-200 bg-white px-6 py-12 text-center text-sm text-gray-400">
                    No milestones defined for this project.
                </div>
            @endforelse
        </div>

    @elseif($activeTab === 'runs')
        <livewire:projects.project-runs-table :project="$project" :key="'runs-' . $project->id" />

    @elseif($activeTab === 'snapshots')
        <div class="space-y-4">
            {{-- Create snapshot --}}
            <div class="rounded-xl border border-gray-200 bg-white p-4">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
                    <div class="flex-1">
                        <label class="mb-1 block text-xs font-medium text-gray-600">Snapshot label</label>
                        <input type="text" wire:model="snapshotLabel" maxlength="120"
                            placeholder="e.g. Before budget change"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
                    </div>
                    <button wire:click="createSnapshot" wire:loading.attr="disabled"
                        class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50">
                        <i class="fa-solid fa-camera mr-1"></i> Capture snapshot
                    </button>
                </div>
                <p class="mt-2 text-xs text-gray-400">Captures the project's configuration, schedule and milestones. Runtime state and run history are not included.</p>
            </div>

            {{-- Snapshot list --}}
            @forelse($snapshots as $snapshot)
                <div class="rounded-xl border border-gray-200 bg-white p-4">
                    <div class="flex items-start justify-between gap-4">
                        <div class="min-w-0">
                            <div class="font-medium text-gray-900">{{ $snapshot->label }}</div>
                            <div class="mt-0.5 text-xs text-gray-500">
                                {{ $snapshot->created_at->diffForHumans() }}
                                @if($snapshot->creator) · by {{ $snapshot->creator->name }} @endif
                                @if($snapshot->restored_at)
                                    · <span class="text-amber-600">restored {{ $snapshot->restored_at->diffForHumans() }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="shrink-0">
                            @if($confirmingRestoreId === $snapshot->id)
                                <div class="flex items-center gap-2">
                                    <span class="text-xs text-gray-500">Overwrite current config?</span>
                                    <button wire:click="restoreSnapshot('{{ $snapshot->id }}')" wire:loading.attr="disabled"
                                        class="rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-700">
                                        Confirm restore
                                    </button>
                                    <button wire:click="cancelRestore"
                                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50">
                                        Cancel
                                    </button>
                                </div>
                            @else
                                <button wire:click="confirmRestore('{{ $snapshot->id }}')"
                                    class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">
                                    <i class="fa-solid fa-clock-rotate-left mr-1"></i> Restore
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-xl border border-gray-200 bg-white px-6 py-12 text-center text-sm text-gray-400">
                    No snapshots yet. Capture one before making risky configuration changes.
                </div>
            @endforelse
        </div>
    @endif

    {{-- AI Expansion Panel --}}
    <div class="mt-6 rounded-xl border border-gray-200 bg-white p-6">
        <livewire:projects.project-expansion-panel :project="$project" :key="'expansion-' . $project->id" />
    </div>

    {{-- Plugin extension point: inject custom content into project detail --}}
    @stack('fleet.project.detail')
</div>
