@extends('layouts.app')

@section('title', 'Arıza Workflow Ayarlari')

@section('content')
    <div class="container-fluid">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
            <div>
                <h2 class="h4 mb-1">Arıza Workflow Ayarlari</h2>
                <p class="text-muted mb-0 small">Arıza taleplerinin hangi role/kişiye düşeceğini adım bazli yönetin.</p>
            </div>
            <a href="{{ route('admin.assets.faults.manage') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-list-check me-1"></i> Arıza Talepleri
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <form method="post" action="{{ route('admin.assets.workflow.update') }}" id="asset-workflow-form">
            @csrf
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">Camunda Konfigurasyonu</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="camunda_enabled" name="camunda_enabled"
                                    value="1" {{ (int) ($settings->camunda_enabled ?? 0) === 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="camunda_enabled">Workflow Aktif</label>
                            </div>
                            @if(!$camundaEnabled)
                                <div class="small text-warning mt-2">
                                    CAMUNDA_ENABLED kapali oldugu icin süreç baslatma pasif kalir.
                                </div>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Process Key</label>
                            <select name="camunda_process_key" id="camunda_process_key"
                                class="form-select js-inline-search-select"
                                data-search-placeholder="Process ara...">
                                @php $selectedKey = old('camunda_process_key', $settings->camunda_process_key ?? 'asset_fault_workflow'); @endphp
                                <option value="">Seçiniz...</option>
                                @foreach($definitions as $def)
                                    <option value="{{ $def['key'] }}" {{ $selectedKey === ($def['key'] ?? '') ? 'selected' : '' }}>
                                        {{ $def['name'] ?? $def['key'] }} ({{ $def['key'] }})
                                    </option>
                                @endforeach
                                @if($selectedKey && collect($definitions)->pluck('key')->doesntContain($selectedKey))
                                    <option value="{{ $selectedKey }}" selected>{{ $selectedKey }}</option>
                                @endif
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Fallback Rol</label>
                            @php $fallbackRole = old('fallback_role', $settings->fallback_role ?? 'admin'); @endphp
                            <select name="fallback_role" class="form-select js-inline-search-select"
                                data-search-placeholder="Rol ara...">
                                @forelse($roles as $role)
                                    <option value="{{ $role->name }}" {{ $fallbackRole === $role->name ? 'selected' : '' }}>
                                        {{ $role->display_name ?? $role->name }}
                                    </option>
                                @empty
                                    <option value="admin" selected>admin</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="mb-3">Kritiklik Bazli Timeout</h6>
                    <div class="row g-3">
                        @php
                            $priorityLabels = [
                                'low' => 'Düşük',
                                'normal' => 'Normal',
                                'high' => 'Yüksek',
                                'critical' => 'Kritik',
                            ];
                        @endphp
                        @foreach($priorityLabels as $key => $label)
                            @php
                                $uiAmount = (int) old('timeout_' . $key . '_amount', data_get($priorityTimeoutUi ?? [], $key . '.amount', 1));
                                $uiUnit = (string) old('timeout_' . $key . '_unit', data_get($priorityTimeoutUi ?? [], $key . '.unit', 'hours'));
                            @endphp
                            <div class="col-md-6 col-xl-3">
                                <label class="form-label">{{ $label }}</label>
                                <div class="input-group">
                                    <input type="number" min="1" name="timeout_{{ $key }}_amount" class="form-control"
                                        value="{{ $uiAmount }}">
                                    <select name="timeout_{{ $key }}_unit" class="form-select">
                                        <option value="minutes" {{ $uiUnit === 'minutes' ? 'selected' : '' }}>Dakika</option>
                                        <option value="hours" {{ $uiUnit === 'hours' ? 'selected' : '' }}>Saat</option>
                                        <option value="days" {{ $uiUnit === 'days' ? 'selected' : '' }}>Gun</option>
                                        <option value="weeks" {{ $uiUnit === 'weeks' ? 'selected' : '' }}>Hafta</option>
                                        <option value="months" {{ $uiUnit === 'months' ? 'selected' : '' }}>Ay</option>
                                    </select>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0">Adim Bazli Rol/Kisi Atamalari</h5>
                </div>
                <div class="card-body">
                    <div id="workflow_steps_container" class="row g-3">
                        <div class="col-12 text-muted small">Süreç seçildiğinde adımlar listelenecek.</div>
                    </div>
                    <input type="hidden" name="workflow_config" id="workflow_config_input"
                        value="{{ is_array(data_get($settings ?? null, 'workflow_config')) ? json_encode(data_get($settings ?? null, 'workflow_config')) : (data_get($settings ?? null, 'workflow_config') ?? '{}') }}">
                </div>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save me-1"></i> Ayarlari Kaydet
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
        <script>
            (() => {
                const availableRoles = @json($roles->map(fn($r) => ['name' => $r->name, 'display_name' => $r->display_name ?? $r->name])->values());
                const configInput = document.getElementById('workflow_config_input');
                const processKeySelect = document.getElementById('camunda_process_key');
                const stepsContainer = document.getElementById('workflow_steps_container');
                const camundaEnabledToggle = document.getElementById('camunda_enabled');
                const formEl = document.getElementById('asset-workflow-form');

                const currentConfigRaw = configInput.value || '{}';
                let workflowConfig = {};
                try {
                    const parsed = JSON.parse(currentConfigRaw);
                    if (parsed && typeof parsed === 'object') {
                        workflowConfig = parsed;
                    }
                } catch (e) {
                    workflowConfig = {};
                }

                const renderEmpty = (message) => {
                    stepsContainer.innerHTML = `<div class="col-12 text-muted small">${message}</div>`;
                };

                const updateUsersForRow = async (roleName, userSelect, selectedUserId = '') => {
                    if (!roleName) {
                        userSelect.innerHTML = '<option value="">Once rol secin</option>';
                        return;
                    }

                    userSelect.innerHTML = '<option value="">Yukleniyor...</option>';
                    try {
                        const response = await fetch(`{{ route('admin.form-templates.users-by-role') }}?role=${encodeURIComponent(roleName)}`);
                        const users = await response.json();
                        userSelect.innerHTML = '<option value="">Tüm rol uyeleri</option>';
                        users.forEach((user) => {
                            const selected = String(selectedUserId) === String(user.id) ? 'selected' : '';
                            userSelect.insertAdjacentHTML('beforeend',
                                `<option value="${user.id}" ${selected}>${user.name}</option>`);
                        });
                    } catch (err) {
                        userSelect.innerHTML = '<option value="">Yukleme hatasi</option>';
                    }
                };

                const addRoleRow = (stepId, container, selectedRole, selectedUserId) => {
                    const row = document.createElement('div');
                    row.className = 'role-row row g-2 mb-2 align-items-center';
                    row.innerHTML = `
                        <div class="col-md-5">
                            <select class="form-select form-select-sm step-role js-inline-search-select"
                                data-search-placeholder="Rol ara...">
                                <option value="">Rol secin</option>
                                ${availableRoles.map((r) => `<option value="${r.name}" ${selectedRole === r.name ? 'selected' : ''}>${r.display_name}</option>`).join('')}
                            </select>
                        </div>
                        <div class="col-md-5">
                            <select class="form-select form-select-sm step-user js-inline-search-select"
                                data-search-placeholder="Kisi ara...">
                                <option value="">Tüm rol uyeleri</option>
                            </select>
                        </div>
                        <div class="col-md-2 text-end">
                            <button type="button" class="btn btn-outline-danger btn-sm remove-role-btn">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    `;

                    container.appendChild(row);
                    if (typeof window.initInlineSearchableSelects === 'function') {
                        window.initInlineSearchableSelects(row);
                    }
                    const roleSelect = row.querySelector('.step-role');
                    const userSelect = row.querySelector('.step-user');

                    roleSelect.addEventListener('change', async () => {
                        await updateUsersForRow(roleSelect.value, userSelect, '');
                        updateConfig();
                    });
                    userSelect.addEventListener('change', updateConfig);
                    row.querySelector('.remove-role-btn').addEventListener('click', () => {
                        row.remove();
                        updateConfig();
                    });

                    if (selectedRole) {
                        updateUsersForRow(selectedRole, userSelect, selectedUserId || '').then(() => updateConfig());
                    }
                };

                const renderUserTaskStep = (step, stepConfig) => {
                    const roles = String(stepConfig.role || '').split(',').map((v) => v.trim()).filter(Boolean);
                    const users = String(stepConfig.user_id || '').split(',');

                    const col = document.createElement('div');
                    col.className = 'col-12 border rounded p-3';
                    col.innerHTML = `
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="fw-semibold">${step.name || 'User Task'}</div>
                            <span class="badge bg-light text-dark border">${step.id}</span>
                        </div>
                        <div id="repeater-${step.id}" class="roles-repeater"></div>
                        <button type="button" class="btn btn-link btn-sm p-0 mt-2 add-role-btn">+ Rol/Kisi Ekle</button>
                    `;

                    stepsContainer.appendChild(col);
                    const repeater = col.querySelector(`#repeater-${step.id}`);
                    if (roles.length === 0) {
                        addRoleRow(step.id, repeater, '', '');
                    } else {
                        roles.forEach((role, idx) => addRoleRow(step.id, repeater, role, users[idx] || ''));
                    }
                    col.querySelector('.add-role-btn').addEventListener('click', () => addRoleRow(step.id, repeater, '', ''));
                };

                const renderSteps = (steps) => {
                    stepsContainer.innerHTML = '';
                    if (!Array.isArray(steps) || steps.length === 0) {
                        renderEmpty('Bu process icin yapilandirilabilir user task bulunamadı.');
                        configInput.value = '{}';
                        return;
                    }

                    const userTaskSteps = steps.filter((step) => {
                        const stepType = String(step.element_type || 'userTask');
                        return stepType !== 'timer';
                    });

                    if (userTaskSteps.length === 0) {
                        renderEmpty('Bu process icin rol/kişi atanabilir user task bulunamadı. Timeout ayari ustteki kritiklik alanindan yönetilir.');
                        configInput.value = '{}';
                        return;
                    }

                    userTaskSteps.forEach((step) => {
                        const stepConfig = workflowConfig[step.id] || {};
                        renderUserTaskStep(step, stepConfig);
                    });

                    updateConfig();
                };

                const loadWorkflowSteps = async (processKey) => {
                    if (!processKey) {
                        renderEmpty('Süreç seçiniz.');
                        configInput.value = '{}';
                        return;
                    }

                    renderEmpty('Adimlar yukleniyor...');
                    try {
                        const response = await fetch(`{{ route('admin.form-templates.process-steps') }}?process_key=${encodeURIComponent(processKey)}`);
                        const steps = await response.json();
                        renderSteps(steps);
                    } catch (err) {
                        renderEmpty('Adimlar yüklenemedi.');
                    }
                };

                const updateConfig = () => {
                    const config = {};
                    document.querySelectorAll('.roles-repeater').forEach((repeater) => {
                        const stepId = repeater.id.replace('repeater-', '');
                        const roles = [];
                        const users = [];
                        repeater.querySelectorAll('.role-row').forEach((row) => {
                            const role = row.querySelector('.step-role')?.value || '';
                            const user = row.querySelector('.step-user')?.value || '';
                            if (role) {
                                roles.push(role);
                                users.push(user);
                            }
                        });
                        if (roles.length > 0) {
                            config[stepId] = {role: roles.join(','), user_id: users.join(',')};
                        }
                    });

                    configInput.value = JSON.stringify(config);
                };

                processKeySelect.addEventListener('change', () => loadWorkflowSteps(processKeySelect.value));
                camundaEnabledToggle.addEventListener('change', () => {
                    formEl.querySelectorAll('#camunda_process_key, [name="fallback_role"]').forEach((el) => {
                        el.disabled = !camundaEnabledToggle.checked;
                    });
                });

                if (processKeySelect.value) {
                    loadWorkflowSteps(processKeySelect.value);
                } else {
                    renderEmpty('Süreç seçiniz.');
                }

                if (!camundaEnabledToggle.checked) {
                    formEl.querySelectorAll('#camunda_process_key, [name="fallback_role"]').forEach((el) => {
                        el.disabled = true;
                    });
                }
            })();
        </script>
    @endpush
@endsection