<div class="mx-auto max-w-3xl">
    <div class="rounded-xl border border-gray-200 bg-white p-6">
        <div class="space-y-6">
            {{-- Basics --}}
            <div>
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Basics</h3>
                <div class="space-y-4">
                    <x-form-input wire:model="title" label="Title" type="text" placeholder="e.g. Social Media Campaign"
                        :error="$errors->first('title')"
                        toolparamdescription="Project title — descriptive name" />

                    <x-form-textarea wire:model="description" label="Description" rows="3"
                        placeholder="What should this project accomplish?"
                        :error="$errors->first('description')"
                        toolparamdescription="Project description and objectives" />

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700" toolparamdescription="Project type: one_shot (runs once) or continuous (runs on schedule)">Project Type</label>
                            <div class="flex gap-3">
                                @foreach(\App\Domain\Project\Enums\ProjectType::cases() as $t)
                                    <button type="button" wire:click="$set('type', '{{ $t->value }}')"
                                        class="flex-1 rounded-lg border p-3 text-center text-sm transition
                                            {{ $type === $t->value ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-200 text-gray-600 hover:border-gray-300' }}">
                                        <div class="text-lg">{{ $t->icon() }}</div>
                                        <div class="mt-1 font-medium">{{ $t->label() }}</div>
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <x-form-select wire:model="agentId" label="Lead Agent" :error="$errors->first('agentId')">
                            <option value="">Select an agent...</option>
                            @foreach($agents as $agent)
                                <option value="{{ $agent->id }}">{{ $agent->name }} ({{ $agent->role ?? $agent->provider }})</option>
                            @endforeach
                        </x-form-select>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700">Execution Mode</label>
                        <div class="flex gap-3">
                            @foreach($executionModes as $mode)
                                <button type="button" wire:click="$set('executionMode', '{{ $mode->value }}')"
                                    class="flex-1 rounded-lg border p-3 text-center text-sm transition
                                        {{ $executionMode === $mode->value ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-200 text-gray-600 hover:border-gray-300' }}">
                                    <div class="text-lg">{{ $mode->icon() }}</div>
                                    <div class="mt-1 font-medium">{{ $mode->label() }}</div>
                                </button>
                            @endforeach
                        </div>
                        @if($executionMode === 'watcher')
                            <p class="mt-2 text-xs text-amber-600">Watcher mode restricts agents to safe/read-only tools. Write and destructive tools are filtered out at runtime.</p>
                        @elseif($executionMode === 'yolo')
                            <p class="mt-2 text-xs text-amber-600">YOLO mode skips automated testing and validation stages. Not available for critical-risk skills. Use for rapid prototyping.</p>
                        @else
                            <p class="mt-2 text-xs text-gray-500">Autonomous mode gives agents full access to all assigned tools.</p>
                        @endif
                    </div>

                    @if($workflows->isNotEmpty())
                        <x-form-select wire:model.live="workflowId" label="Workflow (optional)" :error="$errors->first('workflowId')">
                            <option value="">No workflow — agent-only execution</option>
                            @foreach($workflows as $wf)
                                <option value="{{ $wf->id }}">{{ $wf->name }}</option>
                            @endforeach
                        </x-form-select>

                        @if($workflowId)
                            <p class="text-xs text-blue-600">With a workflow selected, the project will execute the workflow directly (skipping scoring/planning stages).</p>
                        @endif
                    @endif

                    <div class="hidden">
                    </div>
                </div>
            </div>

            {{-- Schedule (continuous only) --}}
            @if($type === 'continuous')
                <div>
                    <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Schedule</h3>
                    <div class="space-y-4 rounded-lg border border-blue-100 bg-blue-50/50 p-4">
                        {{-- Natural language schedule input --}}
                        <div x-data="nlScheduleParser()" class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Schedule (natural language)
                                <span class="font-normal text-gray-400 ml-1">optional</span>
                            </label>
                            <input
                                type="text"
                                x-model="nlInput"
                                @input.debounce.300ms="parse()"
                                placeholder='e.g. "every Monday at 9am" or "daily at 6pm"'
                                class="block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                            <p x-show="preview" x-text="'→ ' + preview" class="mt-1 text-xs text-indigo-600"></p>
                            <p x-show="!preview && nlInput.length > 3" class="mt-1 text-xs text-gray-400">
                                Try: "daily at 9am", "every Monday at 6pm", "every 30 minutes", "weekdays at 8am"
                            </p>
                        </div>

                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            <x-form-select wire:model.live="frequency" label="Frequency">
                                @foreach($frequencies as $freq)
                                    <option value="{{ $freq->value }}">{{ $freq->label() }}</option>
                                @endforeach
                            </x-form-select>

                            <x-form-select wire:model="timezone" label="Timezone">
                                @foreach(['UTC', 'Europe/Sofia', 'Europe/London', 'Europe/Berlin', 'America/New_York', 'America/Chicago', 'America/Los_Angeles', 'Asia/Tokyo'] as $tz)
                                    <option value="{{ $tz }}">{{ $tz }}</option>
                                @endforeach
                            </x-form-select>

                            <x-form-select wire:model="overlapPolicy" label="Overlap Policy">
                                @foreach($overlapPolicies as $policy)
                                    <option value="{{ $policy->value }}">{{ $policy->label() }}</option>
                                @endforeach
                            </x-form-select>
                        </div>

                        @if($frequency === 'cron')
                            <x-form-input wire:model="cronExpression" label="Cron Expression" type="text"
                                placeholder="*/30 * * * *" hint="Standard cron syntax (min hour day month weekday)"
                                :error="$errors->first('cronExpression')" />
                        @endif

                        <x-form-input wire:model.number="maxConsecutiveFailures" label="Max Consecutive Failures" type="number"
                            min="1" max="100" hint="Auto-pause after this many consecutive failures" />
                    </div>
                </div>
            @endif

            {{-- Dependencies (Based on) --}}
            @if($availableProjects->isNotEmpty())
                <div>
                    <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Based on (optional)</h3>
                    <p class="mb-3 text-xs text-gray-500">Use results from previous projects as input context. The predecessor's artifacts and outputs will be injected into this project's pipeline.</p>

                    @foreach($dependencies as $index => $dep)
                        <div class="mb-3 flex items-start gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3" wire:key="dep-{{ $index }}">
                            <div class="grid flex-1 grid-cols-3 gap-3">
                                <x-form-select wire:model.live="dependencies.{{ $index }}.depends_on_id" label="Project" compact>
                                    <option value="">Select project...</option>
                                    @foreach($availableProjects as $proj)
                                        <option value="{{ $proj->id }}">{{ $proj->title }}</option>
                                    @endforeach
                                </x-form-select>

                                <x-form-input wire:model="dependencies.{{ $index }}.alias" label="Alias" type="text"
                                    placeholder="e.g. research" compact />

                                <x-form-select wire:model="dependencies.{{ $index }}.reference_type" label="Use results from" compact>
                                    <option value="latest_run">Latest completed run</option>
                                    <option value="specific_run">Specific run</option>
                                </x-form-select>
                            </div>

                            <button wire:click="removeDependency({{ $index }})" type="button"
                                class="mt-6 rounded p-1 text-red-500 hover:bg-red-50">
                                <i class="fa-solid fa-xmark text-base"></i>
                            </button>
                        </div>
                    @endforeach

                    <button wire:click="addDependency" type="button"
                        class="mt-1 rounded-lg border border-dashed border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-500 hover:border-gray-400 hover:text-gray-700">
                        + Add Predecessor Project
                    </button>
                </div>
            @endif

            {{-- Tools & Credentials --}}
            <div>
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Tools & Credentials (optional)</h3>
                <p class="mb-3 text-xs text-gray-500">Select which tools and credentials agents in this project can access.</p>

                @if($tools->isNotEmpty())
                    <div class="mb-4">
                        <label class="mb-2 block text-sm font-medium text-gray-700">Tools</label>
                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                            @foreach($tools as $tool)
                                <label class="flex cursor-pointer items-center gap-2 rounded-lg border p-2.5 text-sm transition
                                    {{ in_array($tool->id, $selectedToolIds) ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300' }}">
                                    <input type="checkbox" wire:model.live="selectedToolIds" value="{{ $tool->id }}" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
                                    <span class="font-medium text-gray-700">{{ $tool->name }}</span>
                                    <span class="text-xs text-gray-400">{{ $tool->type->label() }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($credentials->isNotEmpty())
                    <div>
                        <label class="mb-2 block text-sm font-medium text-gray-700">Credentials</label>
                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                            @foreach($credentials as $credential)
                                <label class="flex cursor-pointer items-center gap-2 rounded-lg border p-2.5 text-sm transition
                                    {{ in_array($credential->id, $selectedCredentialIds) ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300' }}">
                                    <input type="checkbox" wire:model.live="selectedCredentialIds" value="{{ $credential->id }}" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
                                    <span class="font-medium text-gray-700">{{ $credential->name }}</span>
                                    <span class="text-xs text-gray-400">{{ $credential->credential_type->label() }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            {{-- Budget --}}
            <div>
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Budget Caps (optional)</h3>
                <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                    <x-form-input wire:model.number="perRunCap" label="Per Run" type="number" min="0" placeholder="No limit" />
                    <x-form-input wire:model.number="dailyCap" label="Daily" type="number" min="0" placeholder="No limit" />
                    <x-form-input wire:model.number="weeklyCap" label="Weekly" type="number" min="0" placeholder="No limit" />
                    <x-form-input wire:model.number="monthlyCap" label="Monthly" type="number" min="0" placeholder="No limit" />
                </div>
                <p class="mt-1.5 text-xs text-gray-500">Credits. Leave empty for unlimited. Project auto-pauses when a cap is hit and resumes when the period resets.</p>
            </div>

            {{-- Delivery --}}
            <div>
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Delivery (optional)</h3>
                <p class="mb-3 text-xs text-gray-500">Automatically deliver workflow results when a run completes.</p>
                <div class="space-y-4">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <x-form-select wire:model.live="deliveryChannel" label="Delivery Channel">
                            <option value="none">No delivery</option>
                            <option value="email">Email</option>
                            <option value="slack">Slack</option>
                            <option value="telegram">Telegram</option>
                            <option value="webhook">Webhook</option>
                        </x-form-select>

                        @if($deliveryChannel !== 'none')
                            <x-form-input wire:model="deliveryTarget" label="Target"
                                type="text"
                                placeholder="{{ match($deliveryChannel) {
                                    'email' => 'you@example.com',
                                    'slack' => 'https://hooks.slack.com/services/...',
                                    'telegram' => 'chat_id',
                                    'webhook' => 'https://your-app.com/webhook',
                                    default => '',
                                } }}"
                                :error="$errors->first('deliveryTarget')" />
                        @endif
                    </div>

                    @if($deliveryChannel !== 'none')
                        <x-form-select wire:model="deliveryFormat" label="Format">
                            <option value="summary">Summary</option>
                            <option value="full">Full Output</option>
                            <option value="json">JSON</option>
                        </x-form-select>
                    @endif
                </div>
            </div>

            {{-- Milestones --}}
            <div>
                <h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">Milestones (optional)</h3>
                @foreach($milestones as $index => $milestone)
                    <div class="mb-2 flex items-center gap-2" wire:key="milestone-{{ $index }}">
                        <span class="w-6 text-xs font-medium text-gray-400">{{ $index + 1 }}.</span>
                        <input type="text" wire:model="milestones.{{ $index }}.title" placeholder="Milestone title"
                            class="flex-1 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-primary-500 focus:ring-primary-500" />
                        <input type="number" wire:model.number="milestones.{{ $index }}.target_value" placeholder="Target"
                            class="w-24 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-primary-500 focus:ring-primary-500" />
                        <select wire:model="milestones.{{ $index }}.target_metric"
                            class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-primary-500 focus:ring-primary-500">
                            <option value="runs">Runs</option>
                            <option value="credits">Credits</option>
                            <option value="custom">Custom</option>
                        </select>
                        <button wire:click="removeMilestone({{ $index }})" type="button"
                            class="rounded p-1 text-red-500 hover:bg-red-50">
                            <i class="fa-solid fa-xmark text-base"></i>
                        </button>
                    </div>
                @endforeach

                <button wire:click="addMilestone" type="button"
                    class="mt-1 rounded-lg border border-dashed border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-500 hover:border-gray-400 hover:text-gray-700">
                    + Add Milestone
                </button>
            </div>

            {{-- Submit --}}
            <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                <a href="{{ route('projects.index') }}" class="text-sm text-gray-500 hover:text-gray-700">Cancel</a>
                <button wire:click="save" class="rounded-lg bg-primary-600 px-6 py-2 text-sm font-medium text-white hover:bg-primary-700">
                    Create Project
                </button>
            </div>
        </div>
    </div>
</div>

@script
<script>
/**
 * Alpine.js component for parsing natural language schedule expressions into cron syntax.
 * Supports expressions like "every Monday at 9am", "daily at 6pm", "every 30 minutes", etc.
 * On successful parse, updates the Livewire cronExpression and frequency properties.
 */
function nlScheduleParser() {
    return {
        nlInput: '',
        preview: '',
        parse() {
            const input = this.nlInput.trim().toLowerCase();
            if (!input) { this.preview = ''; return; }

            let cron = null;
            let label = null;

            // "every N minutes"
            let m = input.match(/every (\d+) minutes?/);
            if (m) { cron = `*/${m[1]} * * * *`; label = `Every ${m[1]} minutes`; }

            // "every N hours"
            m = !cron && input.match(/every (\d+) hours?/);
            if (m) { cron = `0 */${m[1]} * * *`; label = `Every ${m[1]} hours`; }

            // "every half hour"
            m = !cron && input.match(/every half.?hour/);
            if (m) { cron = `*/30 * * * *`; label = 'Every 30 minutes'; }

            // "hourly"
            if (!cron && /\bhourly\b/.test(input)) { cron = '0 * * * *'; label = 'Every hour'; }

            // "daily at HH:MM" or "daily at HH am/pm"
            m = !cron && input.match(/daily\s+at\s+(\d{1,2})(?::(\d{2}))?\s*(am|pm)?/);
            if (m) {
                let h = parseInt(m[1]);
                const mins = m[2] ? parseInt(m[2]) : 0;
                if (m[3] === 'pm' && h < 12) h += 12;
                if (m[3] === 'am' && h === 12) h = 0;
                cron = `${mins} ${h} * * *`;
                label = `Daily at ${String(h).padStart(2,'0')}:${String(mins).padStart(2,'0')}`;
            }

            // "weekdays at HH am/pm"
            m = !cron && input.match(/weekdays?\s+at\s+(\d{1,2})(?::(\d{2}))?\s*(am|pm)?/);
            if (m) {
                let h = parseInt(m[1]);
                const mins = m[2] ? parseInt(m[2]) : 0;
                if (m[3] === 'pm' && h < 12) h += 12;
                if (m[3] === 'am' && h === 12) h = 0;
                cron = `${mins} ${h} * * 1-5`;
                label = `Weekdays at ${String(h).padStart(2,'0')}:${String(mins).padStart(2,'0')}`;
            }

            // "every [weekday] at HH am/pm"
            const days = { monday:1, tuesday:2, wednesday:3, thursday:4, friday:5, saturday:6, sunday:0 };
            m = !cron && input.match(/every\s+(monday|tuesday|wednesday|thursday|friday|saturday|sunday)\s+at\s+(\d{1,2})(?::(\d{2}))?\s*(am|pm)?/);
            if (m) {
                let h = parseInt(m[2]);
                const mins = m[3] ? parseInt(m[3]) : 0;
                if (m[4] === 'pm' && h < 12) h += 12;
                if (m[4] === 'am' && h === 12) h = 0;
                const dayNum = days[m[1]];
                cron = `${mins} ${h} * * ${dayNum}`;
                label = `Every ${m[1].charAt(0).toUpperCase()+m[1].slice(1)} at ${String(h).padStart(2,'0')}:${String(mins).padStart(2,'0')}`;
            }

            // "weekly" — defaults to Monday at 09:00
            if (!cron && /\bweekly\b/.test(input)) { cron = '0 9 * * 1'; label = 'Every Monday at 09:00'; }

            // "monthly" — defaults to 1st at 09:00
            if (!cron && /\bmonthly\b/.test(input)) { cron = '0 9 1 * *'; label = 'Monthly on the 1st at 09:00'; }

            if (cron) {
                this.preview = label;
                $wire.set('cronExpression', cron);
                $wire.set('frequency', 'cron');
            } else {
                this.preview = '';
            }
        }
    }
}

if (window.FleetQWebMcp?.isAvailable()) {
    window.FleetQWebMcp.registerTool({
        name: 'create_project',
        description: 'Create a new project (one-shot or continuous) with workflow, agent, and schedule',
        inputSchema: {
            type: 'object',
            properties: {
                title: { type: 'string', description: 'Project title — descriptive name' },
                description: { type: 'string', description: 'Project description and objectives' },
                type: { type: 'string', description: 'Project type: one_shot or continuous' },
                agent_id: { type: 'string', description: 'Lead agent UUID' },
                workflow_id: { type: 'string', description: 'Workflow UUID (optional)' },
                execution_mode: { type: 'string', description: 'Execution mode: autonomous, watcher, or yolo' },
                frequency: { type: 'string', description: 'Schedule frequency for continuous projects' },
                per_run_cap: { type: 'number', description: 'Per-run budget cap in credits (optional)' },
                daily_cap: { type: 'number', description: 'Daily budget cap in credits (optional)' },
            },
            required: ['title', 'type', 'agent_id'],
        },
        async execute(params) {
            $wire.set('title', params.title);
            if (params.description) $wire.set('description', params.description);
            $wire.set('type', params.type);
            $wire.set('agentId', params.agent_id);
            if (params.workflow_id) $wire.set('workflowId', params.workflow_id);
            if (params.execution_mode) $wire.set('executionMode', params.execution_mode);
            if (params.frequency) $wire.set('frequency', params.frequency);
            if (params.per_run_cap) $wire.set('perRunCap', params.per_run_cap);
            if (params.daily_cap) $wire.set('dailyCap', params.daily_cap);
            await $wire.save();
            return { success: true, message: 'Project created' };
        },
    });
}
</script>
@endscript
