<template>
    <Teleport to="body">
        <div class="modal-overlay" :class="{ 'is-open': open }" @click.self="$emit('close')">
            <div class="modal" style="width:640px;max-width:96vw">
                <div class="modal-header">
                    <div>
                        <h3 class="modal-title">Embed Code</h3>
                        <p class="modal-subtitle">
                            {{ embed?.type === 'popup'
                                ? 'Paste this script tag anywhere in your site\'s HTML (before </body> works best).'
                                : 'Paste this snippet where the form should appear on your page.' }}
                        </p>
                    </div>
                    <button class="modal-close" @click="$emit('close')" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>

                <div class="modal-body" style="padding:16px">
                    <div v-if="embed && embed.status !== 'active'" class="embed-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
                        <div>
                            <strong>This form is {{ embed.status === 'paused' ? 'paused' : 'a draft' }}.</strong>
                            It won't accept real submissions until it's set to <strong>Active</strong>. The code below is safe to install now - it'll start working as soon as you activate the form.
                        </div>
                        <button type="button" class="btn btn-primary btn-sm" @click="$emit('activate')">Activate Now</button>
                    </div>

                    <pre class="embed-code-box">{{ codeText }}</pre>
                    <p v-if="!codeText" class="embed-hint">Save the form to generate its embed code.</p>
                </div>

                <div class="modal-footer" style="justify-content:flex-end;gap:10px">
                    <button class="btn btn-outline" @click="$emit('close')">Close</button>
                    <button class="btn btn-primary" :disabled="!codeText" @click="copy">{{ copied ? 'Copied!' : 'Copy to Clipboard' }}</button>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
    open: { type: Boolean, default: false },
    embed: { type: Object, default: null },
});

defineEmits(['close', 'activate']);

const copied = ref(false);

const codeText = computed(() => props.embed?.snippet || '');

watch(() => props.open, (val) => { if (val) copied.value = false; });

function copy() {
    if (!codeText.value) return;
    navigator.clipboard.writeText(codeText.value).then(() => {
        copied.value = true;
        setTimeout(() => { copied.value = false; }, 2000);
    });
}
</script>

<style scoped>
.embed-code-box {
    max-height: 360px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    padding: 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin: 0;
}
.embed-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 10px 0 0;
}

.embed-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.embed-warning svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.embed-warning > div { flex: 1; }
</style>
