@extends('admin.layouts.app')

@section('title', $mode === 'edit' ? __('admin/workflows.builder_edit_title') : __('admin/workflows.builder_create_title'))

@push('styles')
<style>
.workflow-builder { display: flex; height: calc(100vh - 200px); min-height: 600px; gap: 0; }
.workflow-builder__sidebar { width: 240px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--bs-border-color); }
.workflow-builder__canvas { flex: 1; position: relative; overflow: hidden; }
.workflow-builder__canvas #drawflow { width: 100%; height: 100%; background-size: 25px 25px; background-image: linear-gradient(to right, var(--bs-border-color-translucent) 1px, transparent 1px), linear-gradient(to bottom, var(--bs-border-color-translucent) 1px, transparent 1px); }
.workflow-builder__config { width: 320px; flex-shrink: 0; overflow-y: auto; border-left: 1px solid var(--bs-border-color); padding: 1rem; }
.workflow-node-template { padding: 0.5rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 0.375rem; margin-bottom: 0.5rem; cursor: grab; user-select: none; font-size: 0.875rem; }
.workflow-node-template:hover { border-color: var(--bs-primary); }
.workflow-node-template:active { cursor: grabbing; }
.workflow-node-template[data-type="trigger"] { border-left: 3px solid var(--bs-success); }
.workflow-node-template[data-type="condition"] { border-left: 3px solid var(--bs-warning); }
.workflow-node-template[data-type="action"] { border-left: 3px solid var(--bs-primary); }
.workflow-node-template[data-type="chain"] { border-left: 3px solid var(--bs-info); }
.drawflow-node { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); padding: 0.5rem 0.75rem; border-radius: 0.5rem; min-width: 160px; }
.drawflow-node.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); }
.drawflow-node.trigger { border-left: 3px solid var(--bs-success); }
.drawflow-node.condition { border-left: 3px solid var(--bs-warning); }
.drawflow-node.action { border-left: 3px solid var(--bs-primary); }
.drawflow-node.chain { border-left: 3px solid var(--bs-info); }
.drawflow-node .node-title { font-weight: 600; font-size: 0.875rem; }
.drawflow-node .node-subtitle { font-size: 0.75rem; opacity: 0.7; margin-top: 2px; }
</style>
@endpush

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="$mode === 'edit' ? __('admin/workflows.builder_edit_title') : __('admin/workflows.builder_create_title')"
        :subtitle="__('admin/workflows.builder_subtitle')"
        icon="fas fa-project-diagram"
        :buttons="[
            ['label' => __('admin/common.back'), 'route' => route('admin.workflows.index'),
             'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    <x-admin.card>
        
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <label class="form-label">{{ __('admin/workflows.field_name') }} <span class="text-danger">*</span></label>
                <input type="text" id="wf-name" class="form-control" value="{{ old('name', $workflow->name ?? '') }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">{{ __('admin/workflows.field_trigger_event') }} <span class="text-danger">*</span></label>
                <select id="wf-trigger-event" class="form-select">
                    <option value="">— {{ __('admin/workflows.choose_trigger') }} —</option>
                    @foreach ($triggerEvents as $key => $label)
                        <option value="{{ $key }}" @selected(old('trigger_event', $workflow->trigger_event ?? '') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">{{ __('admin/workflows.field_priority') }}</label>
                <input type="number" id="wf-priority" class="form-control" value="{{ old('priority', $workflow->priority ?? 0) }}" min="0" max="1000">
            </div>
            <div class="col-md-2">
                <label class="form-label">{{ __('admin/workflows.field_is_active') }}</label>
                <div class="form-check form-switch mt-2">
                    <input type="checkbox" class="form-check-input" id="wf-is-active" @checked(old('is_active', $workflow->is_active ?? true))>
                    <label class="form-check-label" for="wf-is-active">{{ __('admin/workflows.is_active_label') }}</label>
                </div>
            </div>
            <div class="col-12">
                <label class="form-label">{{ __('admin/workflows.field_description') }}</label>
                <textarea id="wf-description" class="form-control" rows="2">{{ old('description', $workflow->description ?? '') }}</textarea>
            </div>
        </div>

        
        <div class="workflow-builder border rounded">
            @include('admin.workflows.partials.builder-sidebar')

            <div class="workflow-builder__canvas">
                <div id="drawflow"></div>
            </div>

            @include('admin.workflows.partials.builder-config-panel')
        </div>

        <x-slot:footer>
            <div class="d-flex justify-content-between">
                <div>
                    <button type="button" id="btn-dry-run" class="btn btn-outline-info" @disabled($mode !== 'edit')>
                        <i class="fas fa-flask"></i> {{ __('admin/workflows.btn_dry_run') }}
                    </button>
                </div>
                <div>
                    <a href="{{ route('admin.workflows.index') }}" class="btn btn-outline-secondary">{{ __('admin/common.cancel') }}</a>
                    <button type="button" id="btn-save-workflow" class="btn btn-primary">
                        <i class="fas fa-save"></i> {{ __('admin/workflows.btn_save') }}
                    </button>
                </div>
            </div>
        </x-slot:footer>
    </x-admin.card>

    
    <div class="modal fade" id="dryRunModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('admin/workflows.dry_run_modal_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="dry-run-result"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin/common.close') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
window.workflowBuilderConfig = {
    mode: @json($mode),
    workflowId: @json($workflow->id ?? null),
    routes: {
        saveCreate:  '{{ route("admin.workflows.save-graph.create") }}',
        saveUpdate:  '{{ $workflow ? route("admin.workflows.save-graph.update", $workflow) : "" }}',
        graph:       '{{ $workflow ? route("api.admin.workflows.graph", $workflow) : "" }}',
        dryRun:      '{{ $workflow ? route("admin.workflows.dry-run", $workflow) : "" }}',
        chainTargets:'{{ route("api.admin.workflows.chain-targets") }}',
        index:       '{{ route("admin.workflows.index") }}',
    },
    triggerEvents: @json($triggerEvents),
    actionTypes:   @json($actionTypes),
    translations: {
        save_success:    '{{ __("admin/workflows.save_success") }}',
        save_error:      '{{ __("admin/workflows.save_error") }}',
        confirm_delete_node: '{{ __("admin/workflows.confirm_delete_node") }}',
        validation_no_trigger: '{{ __("admin/workflows.validation_no_trigger") }}',
        validation_name_required: '{{ __("admin/workflows.validation_name_required") }}',
        validation_trigger_required: '{{ __("admin/workflows.validation_trigger_required") }}',
        dry_run_running: '{{ __("admin/workflows.dry_run_running") }}',
        dry_run_error:   '{{ __("admin/workflows.dry_run_error") }}',
        node_simulated:  '{{ __("admin/workflows.node_simulated") }}',
        choose_chain_target: '{{ __("admin/workflows.choose_chain_target") }}',
        condition_field: '{{ __("admin/workflows.condition_field") }}',
        condition_operator: '{{ __("admin/workflows.condition_operator") }}',
        condition_value: '{{ __("admin/workflows.condition_value") }}',
        action_label:    '{{ __("admin/workflows.action_label") }}',
        chain_label:     '{{ __("admin/workflows.chain_label") }}',
        port_true:       '{{ __("admin/workflows.port_true") }}',
        port_false:      '{{ __("admin/workflows.port_false") }}',
        select_node_to_configure: '{{ __("admin/workflows.select_node_to_configure") }}',
    },
};
</script>
@vite('resources/js/admin/workflows/builder.js')
@endpush
