<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import JsonEditorVue from 'json-editor-vue';
import { computed, ref } from 'vue';
import MarkdownViewer from './MarkdownViewer.vue';

const props = defineProps({
    scenario: {
        type: Object,
        required: true
    },
    execScenario: {
        type: Object,
        required: true
    },
    scenarioOutput: {
        type: String,
        default: ''
    },
    executionId: {
        type: [String, Number],
        default: null
    },
    isLoading: {
        type: Boolean,
        default: false
    },
    fileType: {
        type: String,
        default: ''
    },
    fileContent: {
        type: String,
        default: ''
    },
    rating: {
        type: Number,
        default: 0
    },
    canUpdateRating: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['download-file']);

const debug_modal = ref(false);
const localExecScenario = ref({});
const localScenarioOutput = computed(() => props.scenarioOutput);

const openDebug = () => {
    localExecScenario.value = props.execScenario;
    debug_modal.value = true;
};

const handleDownload = () => {
    emit('download-file', props.scenarioOutput);
};
</script>

<template>
    <Panel class="mt-6">
        <template #header>
            <div class="flex items-center gap-2">
                <span class="font-bold">Workflow response</span>
            </div>
        </template>
        <template #icons>
            <div class="flex justify-end">
                <Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
                    <i class="pi pi-code"></i>
                </Button>
            </div>
        </template>

        <div v-if="execScenario.latestStepStatus == 'ERROR'" class="card flex flex-col gap-4 w-full">
            <div v-if="execScenario.latestStepOutput">
                <p class="text-red-500 font-bold">Error: {{ execScenario.latestStepOutput }}</p>
            </div>
            <div v-else>
                <p class="text-red-500 font-bold">Error: Execution failed.</p>
            </div>
        </div>

        <div v-if="execScenario.latestStepStatus != 'ERROR'" class="card flex flex-col gap-4 w-full">
            <div v-if="scenario.outputType == 'ciaOutput'">
                <ChangeImpactOutputViewer :scenario_output="scenarioOutput" />
            </div>
            <div v-else-if="isLoading">
                <div class="flex justify-center mt-4">
                    <jellyfish-loader :loading="isLoading" scale="1" color="#A100FF" />
                </div>
            </div>
            <div v-else>
                <div v-if="fileType == 'FILE' && execScenario.execSharedMap.status != null && execScenario.execSharedMap.status === 'DONE'">
                    <ul class="file-list">
                        <li class="file-item">
                            sf_document-{{ executionId }}
                            <Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="handleDownload" />
                        </li>
                    </ul>
                </div>
                <div v-else-if="fileType == 'MARKDOWN'">
                    <div v-html="fileContent" class="markdown-content"></div>
                </div>
                <div v-else-if="fileType == 'JSON'">
                    <pre>{{ fileContent }}</pre>
                </div>
                <div v-else>
                    <MarkdownViewer class="editor" :modelValue="localScenarioOutput" background-color="transparent" padding="20px" />
                </div>
            </div>
        </div>
    </Panel>

    <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
        <div class="flex">
            <div class="card flex flex-col gap-4 w-full">
                <JsonEditorVue v-model="localExecScenario" />
            </div>
        </div>
    </Dialog>
</template>

<style scoped>
.editor ol {
    list-style-type: decimal !important;
}

.editor ul {
    list-style-type: disc !important;
}

/* Removed pre and .markdown-content styles - handled by MarkdownViewer component */

.file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
</style>
