{% extends "base.html" %}

{% block title %}趣味指令剧本 - 机器人管理后台{% endblock %}

{% block content %}
<div class="page-shell">
    <div class="page-hero">
        <div class="page-hero-copy">
            <div class="page-eyebrow">Fun Script Rules</div>
            <h1>趣味指令剧本</h1>
            <p>把“文本关键词/拍一拍事件”映射成可编排的多媒体回应，持续沉淀你的机器人玩法库。</p>
        </div>
        <div class="page-hero-actions">
            <el-button type="success" @click="loadRows">刷新</el-button>
            <el-button type="primary" @click="openCreate">新增规则</el-button>
        </div>
    </div>

    <el-card shadow="hover" style="margin-bottom: 14px;">
        <el-form inline>
            <el-form-item label="作用域">
                <el-select v-model="filters.scope_type" clearable placeholder="全部" style="width:160px" @change="loadRows">
                    <el-option label="全局" value="global"></el-option>
                    <el-option label="群聊" value="group"></el-option>
                    <el-option label="私聊" value="private"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="启用状态">
                <el-select v-model="filters.enabled" clearable placeholder="全部" style="width:150px" @change="loadRows">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="作用域ID">
                <el-input v-model="filters.scope_id" placeholder="群ID/用户ID" style="width:260px" @keyup.enter.native="loadRows"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="loadRows">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="hover">
        <el-table :data="rows" style="width:100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="70"></el-table-column>
            <el-table-column prop="rule_name" label="规则名" min-width="150"></el-table-column>
            <el-table-column label="作用域" width="130">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.scope_type === 'global' ? 'info' : 'success'">{% raw %}{{ scopeLabel(scope.row.scope_type) }}{% endraw %}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="scope_id" label="作用域ID" min-width="180" show-overflow-tooltip></el-table-column>
            <el-table-column label="触发" min-width="210">
                <template slot-scope="scope">
                    <div class="trigger-box">
                        <div class="trigger-type">{% raw %}{{ scope.row.trigger_type }}{% endraw %}</div>
                        <div class="trigger-text">{% raw %}{{ scope.row.trigger_type === 'event' ? scope.row.event_key : scope.row.trigger_text }}{% endraw %}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="priority" label="优先级" width="90"></el-table-column>
            <el-table-column prop="cooldown_seconds" label="冷却(s)" width="90"></el-table-column>
            <el-table-column label="启用" width="90">
                <template slot-scope="scope">
                    <el-switch :value="!!scope.row.enabled" @change="toggleEnabled(scope.row, $event)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="响应数" width="90">
                <template slot-scope="scope">
                    {% raw %}{{ (scope.row.responses_json || []).length }}{% endraw %}
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" label="更新时间" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="openEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" plain @click="removeRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-card shadow="hover" style="margin-top:14px;">
        <div slot="header"><strong>规则测试</strong></div>
        <el-form inline>
            <el-form-item label="作用域">
                <el-select v-model="tester.scope_type" style="width:120px">
                    <el-option label="群聊" value="group"></el-option>
                    <el-option label="私聊" value="private"></el-option>
                    <el-option label="全局" value="global"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="作用域ID">
                <el-input v-model="tester.scope_id" placeholder="群ID/用户ID" style="width:220px"></el-input>
            </el-form-item>
            <el-form-item label="事件">
                <el-select v-model="tester.event_key" clearable placeholder="无" style="width:140px">
                    <el-option label="PAT(拍一拍)" value="PAT"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="tester.content" placeholder="测试文案" style="width:260px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="testMatch">测试命中</el-button>
            </el-form-item>
        </el-form>
        <el-alert
            v-if="testResult"
            :type="testResult.matched ? 'success' : 'info'"
            :title="testResult.matched ? ('命中规则：#' + testResult.data.id + ' ' + testResult.data.rule_name) : '未命中规则'"
            :closable="false">
        </el-alert>
    </el-card>

    <el-dialog :title="editing ? '编辑规则' : '新增规则'" :visible.sync="dialogVisible" width="860px">
        <el-form label-width="110px">
            <el-form-item label="规则名称">
                <el-input v-model="form.rule_name" placeholder="例如：开场梗回复"></el-input>
            </el-form-item>
            <el-form-item label="作用域类型">
                <el-select v-model="form.scope_type" style="width:180px">
                    <el-option label="全局" value="global"></el-option>
                    <el-option label="群聊" value="group"></el-option>
                    <el-option label="私聊" value="private"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="作用域ID" v-if="form.scope_type !== 'global'">
                <el-select v-if="form.scope_type === 'group'" v-model="form.scope_id" filterable placeholder="请选择群" style="width:100%">
                    <el-option v-for="item in groupOptions" :key="item.wxid" :label="item.name" :value="item.wxid"></el-option>
                </el-select>
                <el-input v-else v-model="form.scope_id" placeholder="私聊用户 wxid"></el-input>
            </el-form-item>
            <el-form-item label="触发类型">
                <el-select v-model="form.trigger_type" style="width:200px">
                    <el-option label="精确匹配" value="exact"></el-option>
                    <el-option label="前缀匹配" value="prefix"></el-option>
                    <el-option label="包含匹配" value="contains"></el-option>
                    <el-option label="正则匹配" value="regex"></el-option>
                    <el-option label="事件触发" value="event"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="触发文本" v-if="form.trigger_type !== 'event'">
                <el-input v-model="form.trigger_text" placeholder="例如：早安"></el-input>
            </el-form-item>
            <el-form-item label="事件键" v-else>
                <el-select v-model="form.event_key" style="width:200px">
                    <el-option label="PAT(拍一拍)" value="PAT"></el-option>
                </el-select>
            </el-form-item>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-form-item label="优先级">
                        <el-input-number v-model="form.priority" :min="1" :max="10000"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="冷却秒数">
                        <el-input-number v-model="form.cooldown_seconds" :min="0" :max="86400"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="启用">
                        <el-switch v-model="form.enabled"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="响应动作">
                <div class="action-toolbar">
                    <el-button size="mini" type="primary" plain @click="addAction">新增动作</el-button>
                    <el-button size="mini" @click="formatActionsJson">格式化JSON</el-button>
                </div>
                <el-table :data="form.responses_json" size="mini" border style="width:100%">
                    <el-table-column label="#" width="60">
                        <template slot-scope="scope">{% raw %}{{ scope.$index + 1 }}{% endraw %}</template>
                    </el-table-column>
                    <el-table-column label="类型" width="140">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.type" style="width:120px">
                                <el-option label="文本" value="text"></el-option>
                                <el-option label="图片" value="image"></el-option>
                                <el-option label="语音" value="voice"></el-option>
                                <el-option label="视频" value="video"></el-option>
                                <el-option label="卡片" value="link"></el-option>
                                <el-option label="App" value="app"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="延迟(ms)" width="120">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.delay_ms" :min="0" :max="60000" :step="100"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="动作内容(JSON)" min-width="360">
                        <template slot-scope="scope">
                            <el-input type="textarea" :rows="3" v-model="scope.row.payload_text" placeholder='示例: {"text":"你好"}'></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" plain @click="removeAction(scope.$index)">删</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="payload-tip">
                    支持占位符：<code>{sender}</code> <code>{roomid}</code> <code>{event}</code>。
                    常见示例：
                    <code>text -> {"text":"你拍了拍我，我就拍回去~"}</code>
                    <code>link -> {"title":"今日梗图","desc":"点开看","url":"https://example.com","thumb_url":""}</code>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="saveForm">保存</el-button>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
new Vue({
    el: '#app',
    mixins: [baseApp],
    data() {
        return {
            loading: false,
            rows: [],
            groupOptions: [],
            filters: { scope_type: '', scope_id: '', enabled: '' },
            dialogVisible: false,
            editing: false,
            editingRuleId: 0,
            testResult: null,
            tester: {
                scope_type: 'group',
                scope_id: '',
                event_key: '',
                content: ''
            },
            form: {
                rule_name: '',
                scope_type: 'global',
                scope_id: '',
                trigger_type: 'exact',
                trigger_text: '',
                event_key: '',
                priority: 100,
                cooldown_seconds: 0,
                enabled: true,
                responses_json: []
            }
        }
    },
    mounted() {
        this.loadGroups()
        this.loadRows()
    },
    methods: {
        scopeLabel(scopeType) {
            const map = { global: '全局', group: '群聊', private: '私聊' }
            return map[scopeType] || scopeType
        },
        defaultPayloadTextByType(type) {
            const table = {
                text: '{"text":""}',
                image: '{"path":"D:/learn/abot/static/uploads/demo.jpg"}',
                voice: '{"path":"D:/learn/abot/static/uploads/demo.mp3","format":"mp3"}',
                video: '{"path":"D:/learn/abot/static/uploads/demo.mp4"}',
                link: '{"title":"","desc":"","url":"https://example.com","thumb_url":""}',
                app: '{"xml":"<appmsg></appmsg>","app_type":0}'
            }
            return table[type] || '{"text":""}'
        },
        addAction() {
            this.form.responses_json.push({
                type: 'text',
                delay_ms: 0,
                payload_text: this.defaultPayloadTextByType('text')
            })
        },
        removeAction(index) {
            this.form.responses_json.splice(index, 1)
        },
        formatActionsJson() {
            this.form.responses_json = (this.form.responses_json || []).map(item => {
                let payloadObj = {}
                try {
                    payloadObj = JSON.parse(item.payload_text || '{}')
                } catch (e) {
                    payloadObj = {}
                }
                return {
                    ...item,
                    payload_text: JSON.stringify(payloadObj, null, 2)
                }
            })
            this.$message.success('动作 JSON 已格式化')
        },
        normalizeActionsForSubmit() {
            const actions = []
            for (const item of (this.form.responses_json || [])) {
                if (!item || !item.type) continue
                let payloadObj = {}
                try {
                    payloadObj = JSON.parse(item.payload_text || '{}')
                } catch (e) {
                    throw new Error(`动作 payload JSON 格式错误: ${item.payload_text || ''}`)
                }

                const action = {
                    type: String(item.type || '').toLowerCase(),
                    delay_ms: Number(item.delay_ms || 0)
                }
                Object.assign(action, payloadObj)
                actions.push(action)
            }
            if (!actions.length) {
                throw new Error('至少配置一条响应动作')
            }
            return actions
        },
        mapActionsForEdit(actions) {
            return (actions || []).map(action => {
                const item = { ...action }
                const type = String(item.type || 'text').toLowerCase()
                const delayMs = Number(item.delay_ms || 0)
                delete item.type
                delete item.delay_ms
                return {
                    type,
                    delay_ms: delayMs,
                    payload_text: JSON.stringify(item, null, 2)
                }
            })
        },
        async loadGroups() {
            const resp = await axios.get('/contacts/api/groups')
            const groups = (resp.data && resp.data.data && resp.data.data.groups) || {}
            this.groupOptions = Object.entries(groups).map(([wxid, name]) => ({ wxid, name: String(name || wxid) }))
        },
        async loadRows() {
            this.loading = true
            try {
                const resp = await axios.get('/fun_command_rules/api/list', { params: this.filters })
                if (resp.data && resp.data.success) {
                    this.rows = resp.data.data || []
                }
            } finally {
                this.loading = false
            }
        },
        openCreate() {
            this.editing = false
            this.editingRuleId = 0
            this.form = {
                rule_name: '',
                scope_type: 'global',
                scope_id: '',
                trigger_type: 'exact',
                trigger_text: '',
                event_key: '',
                priority: 100,
                cooldown_seconds: 0,
                enabled: true,
                responses_json: []
            }
            this.addAction()
            this.dialogVisible = true
        },
        openEdit(row) {
            this.editing = true
            this.editingRuleId = row.id
            this.form = {
                rule_name: row.rule_name || '',
                scope_type: row.scope_type || 'global',
                scope_id: row.scope_id || '',
                trigger_type: row.trigger_type || 'exact',
                trigger_text: row.trigger_text || '',
                event_key: row.event_key || '',
                priority: Number(row.priority || 100),
                cooldown_seconds: Number(row.cooldown_seconds || 0),
                enabled: !!row.enabled,
                responses_json: this.mapActionsForEdit(row.responses_json || [])
            }
            if (!this.form.responses_json.length) {
                this.addAction()
            }
            this.dialogVisible = true
        },
        async saveForm() {
            let actions = []
            try {
                actions = this.normalizeActionsForSubmit()
            } catch (e) {
                this.$message.error(e.message || '响应动作格式错误')
                return
            }

            const payload = {
                ...this.form,
                responses_json: actions,
                updated_by: 'dashboard'
            }

            if (payload.trigger_type === 'event') {
                payload.trigger_text = ''
            } else {
                payload.event_key = ''
            }

            const url = this.editing
                ? `/fun_command_rules/api/update/${this.editingRuleId}`
                : '/fun_command_rules/api/create'
            try {
                const resp = await axios.post(url, payload)
                if (resp.data && resp.data.success) {
                    this.$message.success(resp.data.message || '保存成功')
                    this.dialogVisible = false
                    await this.loadRows()
                    return
                }
                this.$message.error((resp.data && resp.data.message) || '保存失败')
            } catch (error) {
                const msg = (error.response && error.response.data && error.response.data.message) || '保存失败'
                this.$message.error(msg)
            }
        },
        async removeRow(row) {
            try {
                await this.$confirm('确认删除该规则吗？', '提示', { type: 'warning' })
            } catch (e) {
                return
            }
            try {
                const resp = await axios.post(`/fun_command_rules/api/delete/${row.id}`)
                if (resp.data && resp.data.success) {
                    this.$message.success(resp.data.message || '删除成功')
                    await this.loadRows()
                    return
                }
                this.$message.error((resp.data && resp.data.message) || '删除失败')
            } catch (error) {
                const msg = (error.response && error.response.data && error.response.data.message) || '删除失败'
                this.$message.error(msg)
            }
        },
        async toggleEnabled(row, enabled) {
            try {
                const resp = await axios.post(`/fun_command_rules/api/toggle/${row.id}`, {
                    enabled: !!enabled,
                    updated_by: 'dashboard'
                })
                if (resp.data && resp.data.success) {
                    this.$message.success('状态已更新')
                    row.enabled = !!enabled
                    return
                }
                this.$message.error((resp.data && resp.data.message) || '状态更新失败')
            } catch (error) {
                const msg = (error.response && error.response.data && error.response.data.message) || '状态更新失败'
                this.$message.error(msg)
            }
            row.enabled = !enabled
        },
        async testMatch() {
            try {
                const resp = await axios.post('/fun_command_rules/api/test_match', this.tester)
                if (resp.data && resp.data.success) {
                    this.testResult = {
                        matched: !!resp.data.matched,
                        data: resp.data.data || null
                    }
                    return
                }
                this.$message.error((resp.data && resp.data.message) || '测试失败')
            } catch (error) {
                const msg = (error.response && error.response.data && error.response.data.message) || '测试失败'
                this.$message.error(msg)
            }
        }
    }
})
</script>
{% endblock %}

{% block styles %}
<style>
.page-shell{display:flex;flex-direction:column;gap:16px}
.page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg, rgba(12,148,93,.10), rgba(45,212,191,.08), rgba(255,255,255,.9));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(15,23,42,.06)}
.page-hero-actions{display:flex;align-items:center;gap:12px}
.page-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0f766e;font-weight:700;margin-bottom:8px}
.page-hero-copy h1{font-size:30px;line-height:1.1;margin-bottom:10px;color:#0f172a}
.page-hero-copy p{color:#64748b;font-size:14px}
.trigger-box{display:flex;flex-direction:column;gap:4px}
.trigger-type{font-size:12px;color:#0f766e;font-weight:600}
.trigger-text{font-size:13px;color:#334155;word-break:break-all}
.action-toolbar{display:flex;gap:8px;margin-bottom:8px}
.payload-tip{margin-top:8px;color:#64748b;font-size:12px;line-height:1.7}
.payload-tip code{background:#f1f5f9;border:1px solid #dbe3ee;padding:1px 6px;border-radius:6px;margin-right:6px}
</style>
{% endblock %}