@extends('layouts.admin')

@section('title', 'Kịch bản hội thoại')
@section('admin_shell_attributes')
x-data="flowBuilderApp()" x-init="init()" @keydown.escape.window="deleteTarget = null"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Kịch bản hội thoại',
        'subtitle' => 'Cấu hình flow dạng state machine để agent hỏi đủ thông tin, xác nhận và chuyển nhân viên.',
        'actions' => '<a href="'.route('zalo-chat.page').'" class="btn btn-primary admin-btn"><i class="bi bi-chat-dots"></i> Mở Chat</a>',
    ])

    @include('settings.partials.nav-tabs')

    <div class="alert alert-danger admin-alert py-2" x-show="errorMessage" x-cloak x-text="errorMessage"></div>
    <div class="alert alert-success admin-alert py-2" role="status" x-show="successMessage" x-cloak x-text="successMessage"></div>

    <div class="flow-metric-strip">
        <div class="flow-metric-tile">
            <span class="flow-metric-icon flow-metric-icon-live"><i class="bi bi-broadcast"></i></span>
            <div>
                <div class="admin-metric-label">Đang bật</div>
                <div class="flow-metric-value" x-text="flows.filter(f => f.is_active).length"></div>
            </div>
        </div>
        <div class="flow-metric-tile">
            <span class="flow-metric-icon flow-metric-icon-steps"><i class="bi bi-list-ol"></i></span>
            <div>
                <div class="admin-metric-label">Số bước</div>
                <div class="flow-metric-value" x-text="steps.length"></div>
            </div>
        </div>
        <div class="flow-metric-tile">
            <span class="flow-metric-icon flow-metric-icon-check"><i class="bi bi-shield-check"></i></span>
            <div>
                <div class="admin-metric-label">Kiểm tra</div>
                <div class="flow-metric-value" x-text="validationErrors.length ? validationErrors.length + ' lỗi' : 'OK'"></div>
            </div>
        </div>
    </div>

    <div class="flow-workspace">
        <aside class="flow-sidebar">
            <div class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title">Danh sách kịch bản</h2>
                        <div class="admin-panel-note" x-text="flows.length + ' flow'"></div>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary admin-btn" @click="newFlow()">
                        <i class="bi bi-plus-lg"></i>
                        Tạo mới
                    </button>
                </div>
                <div class="flow-list">
                    <template x-for="flow in flows" :key="flow.id">
                        <button type="button" class="flow-list-item" :class="{ active: selectedFlowId === flow.id }" @click="selectFlow(flow)">
                            <span class="flow-list-mark"><i class="bi bi-diagram-3"></i></span>
                            <span class="min-w-0">
                                <span class="flow-list-name text-truncate" x-text="flow.name"></span>
                                <span class="flow-list-meta">
                                    <span x-text="Object.keys(flow.states || {}).length"></span> bước ·
                                    <span x-text="channelLabel(flow.channels || [])"></span>
                                </span>
                            </span>
                            <span class="badge" :class="flow.is_active ? 'text-bg-success' : 'text-bg-secondary'" x-text="flow.is_active ? 'Bật' : 'Tắt'"></span>
                        </button>
                    </template>
                    <div class="empty-admin flow-empty" x-show="!loading && flows.length === 0">Chưa có kịch bản.</div>
                    <div class="connection-item text-muted m-3" x-show="loading">
                        <span class="spinner-border spinner-border-sm me-1"></span>Đang tải
                    </div>
                </div>
            </div>
        </aside>

        <main class="flow-editor">
            <section class="admin-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title" x-text="form.id ? 'Cập nhật flow' : 'Tạo flow mới'"></h2>
                        <div class="admin-panel-note">Mỗi bước là một state; câu trả lời hợp lệ sẽ chuyển sang state kế tiếp.</div>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="flowActive" x-model="form.is_active">
                        <label class="form-check-label fw-semibold" for="flowActive">Bật flow</label>
                    </div>
                </div>

                <form @submit.prevent="saveFlow()">
                    <div class="flow-form-grid">
                        <div>
                            <label class="form-label admin-form-label">Tên flow</label>
                            <input type="text" class="form-control admin-input" x-model="form.name" required maxlength="160">
                        </div>
                        <div>
                            <label class="form-label admin-form-label">Kênh áp dụng</label>
                            <div class="flow-channel-row">
                                <template x-for="channel in channelOptions" :key="channel.value">
                                    <label class="flow-channel-pill" :class="{ active: form.channels.includes(channel.value) }">
                                        <input type="checkbox" class="form-check-input" :value="channel.value" x-model="form.channels">
                                        <span x-text="channel.label"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                        <div class="flow-form-span">
                            <label class="form-label admin-form-label">Mô tả nội bộ</label>
                            <textarea class="form-control admin-textarea" rows="2" x-model="form.description" maxlength="2000"></textarea>
                        </div>
                    </div>

                    <div class="flow-board">
                        <div class="flow-steps-panel">
                            <div class="flow-section-head">
                                <div>
                                    <h3 class="flow-section-title">Các bước</h3>
                                    <div class="admin-panel-note">Chọn một bước để sửa nội dung và điều hướng.</div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary admin-btn" @click="addStep()">
                                    <i class="bi bi-plus-lg"></i>
                                    Thêm bước
                                </button>
                            </div>

                            <div class="flow-step-list">
                                <template x-for="(step, index) in steps" :key="step.key">
                                    <button type="button" class="flow-step-card" :class="{ active: selectedStepKey === step.key }" @click="selectStep(step.key)">
                                        <span class="flow-step-number" x-text="index + 1"></span>
                                        <span class="min-w-0">
                                            <span class="flow-step-title text-truncate" x-text="step.label || step.key"></span>
                                            <span class="flow-step-meta">
                                                <span x-text="typeLabel(step.type)"></span>
                                                <span x-show="form.start_state === step.key"> · bắt đầu</span>
                                            </span>
                                        </span>
                                        <span class="flow-step-arrow"><i class="bi bi-chevron-right"></i></span>
                                    </button>
                                </template>
                            </div>
                        </div>

                        <div class="flow-config-panel" x-show="selectedStep">
                            <div class="flow-section-head">
                                <div>
                                    <h3 class="flow-section-title">Cấu hình bước</h3>
                                    <div class="admin-panel-note" x-text="selectedStepKey"></div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger admin-btn" @click="removeSelectedStep()" :disabled="steps.length <= 1">
                                    <i class="bi bi-trash3"></i>
                                    Xoá
                                </button>
                            </div>

                            <div class="row g-3">
                                <div class="col-12 col-lg-6">
                                    <label class="form-label admin-form-label">Tên hiển thị</label>
                                    <input type="text" class="form-control admin-input" x-model="selectedStep.label" maxlength="120">
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label admin-form-label">Loại bước</label>
                                    <select class="form-select admin-select" x-model="selectedStep.type" @change="normalizeSelectedStep()">
                                        <template x-for="type in stepTypes" :key="type.value">
                                            <option :value="type.value" x-text="type.label"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label admin-form-label">Tin nhắn bot gửi</label>
                                    <textarea class="form-control admin-textarea" rows="4" x-model="selectedStep.message" required></textarea>
                                </div>
                                <div class="col-12 col-lg-6" x-show="needsSaveAs(selectedStep)">
                                    <label class="form-label admin-form-label">Lưu câu trả lời vào biến</label>
                                    <input type="text" class="form-control admin-input font-monospace" x-model="selectedStep.save_as" placeholder="need, branch, datetime">
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label admin-form-label">Đánh dấu là bước bắt đầu</label>
                                    <button type="button" class="btn w-100 admin-btn" :class="form.start_state === selectedStepKey ? 'btn-primary' : 'btn-outline-primary'" @click="form.start_state = selectedStepKey">
                                        <i class="bi bi-flag"></i>
                                        <span x-text="form.start_state === selectedStepKey ? 'Đang là bước bắt đầu' : 'Chọn làm bước bắt đầu'"></span>
                                    </button>
                                </div>

                                <div class="col-12" x-show="selectedStep?.type === 'ask_choice'">
                                    <label class="form-label admin-form-label">Lựa chọn</label>
                                    <div class="flow-option-list">
                                        <template x-for="(option, index) in selectedStep.options" :key="index">
                                            <div class="flow-option-row">
                                                <input type="text" class="form-control admin-input" x-model="selectedStep.options[index]" placeholder="Ví dụ: Quận 1">
                                                <button type="button" class="btn btn-outline-danger icon-btn" @click="selectedStep.options.splice(index, 1)" title="Xoá lựa chọn">
                                                    <i class="bi bi-x-lg"></i>
                                                </button>
                                            </div>
                                        </template>
                                        <button type="button" class="btn btn-sm btn-outline-primary admin-btn" @click="selectedStep.options.push('')">
                                            <i class="bi bi-plus-lg"></i>
                                            Thêm lựa chọn
                                        </button>
                                    </div>
                                </div>

                                <div class="col-12 col-lg-6" x-show="usesLinearNext(selectedStep)">
                                    <label class="form-label admin-form-label">Bước tiếp theo</label>
                                    <select class="form-select admin-select" x-model="selectedStep.next">
                                        <option value="">Kết thúc tại đây</option>
                                        <template x-for="step in steps.filter(s => s.key !== selectedStepKey)" :key="step.key">
                                            <option :value="step.key" x-text="step.label || step.key"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="col-12 col-lg-6" x-show="usesLinearNext(selectedStep)">
                                    <label class="form-label admin-form-label">Khi khách trả lời thiếu</label>
                                    <select class="form-select admin-select" x-model="selectedStep.fallback">
                                        <option value="">Hỏi lại chính bước này</option>
                                        <template x-for="step in steps.filter(s => s.key !== selectedStepKey)" :key="step.key">
                                            <option :value="step.key" x-text="step.label || step.key"></option>
                                        </template>
                                    </select>
                                </div>

                                <div class="col-12 col-lg-6" x-show="selectedStep?.type === 'confirm'">
                                    <label class="form-label admin-form-label">Nếu khách xác nhận đúng</label>
                                    <select class="form-select admin-select" x-model="selectedStep.on_yes">
                                        <option value="">Kết thúc</option>
                                        <template x-for="step in steps.filter(s => s.key !== selectedStepKey)" :key="step.key">
                                            <option :value="step.key" x-text="step.label || step.key"></option>
                                        </template>
                                    </select>
                                </div>
                                <div class="col-12 col-lg-6" x-show="selectedStep?.type === 'confirm'">
                                    <label class="form-label admin-form-label">Nếu khách muốn sửa</label>
                                    <select class="form-select admin-select" x-model="selectedStep.on_no">
                                        <option value="">Kết thúc</option>
                                        <template x-for="step in steps.filter(s => s.key !== selectedStepKey)" :key="step.key">
                                            <option :value="step.key" x-text="step.label || step.key"></option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flow-validation" x-show="validationErrors.length">
                        <template x-for="err in validationErrors" :key="err">
                            <div><i class="bi bi-exclamation-triangle"></i> <span x-text="err"></span></div>
                        </template>
                    </div>

                    <div class="flow-actions">
                        <button type="submit" class="btn btn-primary admin-btn" :disabled="saving || validationErrors.length">
                            <span x-show="saving" class="spinner-border spinner-border-sm"></span>
                            <i class="bi bi-check2" x-show="!saving"></i>
                            Lưu flow
                        </button>
                        <button type="button" class="btn btn-outline-secondary admin-btn" @click="seedBookingFlow()">
                            <i class="bi bi-magic"></i>
                            Mẫu đặt lịch
                        </button>
                        <button type="button" class="btn btn-outline-danger admin-btn ms-auto" x-show="form.id" @click="deleteTarget = selectedFlow()" :disabled="saving">
                            <i class="bi bi-trash3"></i>
                            Xoá flow
                        </button>
                    </div>
                </form>
            </section>
        </main>

        <aside class="flow-preview">
            <div class="admin-panel flow-preview-panel">
                <div class="admin-panel-header">
                    <div>
                        <h2 class="admin-panel-title">Test hội thoại</h2>
                        <div class="admin-panel-note" x-text="'State: ' + preview.current"></div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary admin-btn" @click="resetPreview()">
                        <i class="bi bi-arrow-clockwise"></i>
                        Reset
                    </button>
                </div>
                <div class="flow-phone">
                    <div class="flow-chat-log" x-ref="chatLog">
                        <template x-for="(msg, index) in preview.messages" :key="index">
                            <div class="flow-chat-row" :class="msg.from">
                                <div class="flow-chat-bubble" x-text="msg.text"></div>
                            </div>
                        </template>
                    </div>
                    <div class="flow-choice-send" x-show="currentPreviewStep()?.type === 'ask_choice'">
                        <template x-for="option in cleanOptions(currentPreviewStep())" :key="option">
                            <button type="button" class="btn btn-sm btn-outline-primary admin-btn" @click="sendPreview(option)" x-text="option"></button>
                        </template>
                    </div>
                    <form class="flow-chat-composer" @submit.prevent="sendPreview(preview.input)">
                        <input type="text" class="form-control admin-input" x-model="preview.input" placeholder="Nhập câu trả lời thử">
                        <button type="submit" class="btn btn-primary icon-btn" title="Gửi">
                            <i class="bi bi-send"></i>
                        </button>
                    </form>
                </div>
                <div class="flow-debug">
                    <div class="flow-debug-title">Dữ liệu đã thu</div>
                    <template x-for="[key, value] in Object.entries(preview.collected)" :key="key">
                        <div class="flow-debug-line"><code x-text="key"></code><span x-text="value"></span></div>
                    </template>
                    <div class="text-muted small" x-show="Object.keys(preview.collected).length === 0">Chưa có biến nào.</div>
                </div>
            </div>
        </aside>
    </div>

    <template x-if="deleteTarget">
        <div class="modal d-block" style="background: rgba(15,23,42,.45);" @click="deleteTarget = null">
            <div class="modal-dialog modal-dialog-centered" @click.stop>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Xoá kịch bản?</h5>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">Xoá flow <strong x-text="deleteTarget.name"></strong> khỏi hệ thống?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" @click="deleteTarget = null">Huỷ</button>
                        <button type="button" class="btn btn-danger" :disabled="saving" @click="confirmDelete()">
                            <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                            Xoá
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>
@endsection

@push('pre_alpine_scripts')
    <script src="{{ asset('js/ai-flows.js') }}?v={{ filemtime(public_path('js/ai-flows.js')) }}" defer></script>
@endpush