<template>
    <Teleport to="body">
        <div class="modal-overlay" :class="{ 'is-open': open }" @click.self="$emit('close')">
            <div class="modal" style="width:680px;max-width:96vw">

                <div class="modal-header">
                    <div>
                        <h3 class="modal-title">Contact Field Reference</h3>
                        <p class="modal-subtitle">Exact field names to use when configuring webhooks.</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="max-height:64vh;overflow-y:auto">
                    <p class="intro">
                        Name your external form's fields using the <strong>Field Name</strong> or any of the listed <strong>Accepted Variations</strong> - matching ignores case, spaces, and punctuation, so "Email Address" and "email_address" both work.
                    </p>

                    <div class="field-table">
                        <div class="field-table-row field-table-head">
                            <span>Label</span>
                            <span>Field Name</span>
                            <span>Accepted Variations</span>
                        </div>
                        <div v-for="(field, key) in fields" :key="key" class="field-table-row">
                            <span>{{ field.label }}</span>
                            <span>
                                <code class="field-code">{{ key }}</code>
                                <button class="copy-btn" :class="{ 'is-copied': copiedKey === key }" @click="copy(key)">
                                    {{ copiedKey === key ? '✓' : 'Copy' }}
                                </button>
                            </span>
                            <span class="aliases">{{ field.aliases.join(', ') }}</span>
                        </div>
                    </div>
                </div>

                <div class="modal-footer" style="justify-content:flex-end">
                    <button class="btn btn-primary" @click="$emit('close')">Done</button>
                </div>

            </div>
        </div>
    </Teleport>
</template>

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

defineProps({
    open:   { type: Boolean, default: false },
    fields: { type: Object,  default: () => ({}) },
});

defineEmits(['close']);

const copiedKey = ref(null);

async function copy(key) {
    await navigator.clipboard.writeText(key);
    copiedKey.value = key;
    setTimeout(() => { if (copiedKey.value === key) copiedKey.value = null; }, 1500);
}
</script>

<style scoped>
.intro {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

.field-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.field-table-row {
    display: grid;
    grid-template-columns: 130px 170px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}
.field-table-row:last-child { border-bottom: none; }
.field-table-row:not(.field-table-head):hover { background: #f9fafb; }

.field-table-head {
    background: #f9fafb;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: .02em;
}

.field-table-row:not(.field-table-head) > span:first-child {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.field-code {
    font-size: 12px;
    font-family: monospace;
    background: #f3f4f6;
    color: #374151;
    padding: 2px 6px;
    border-radius: 4px;
}

.copy-btn {
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
    background: none;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    padding: 1px 6px;
    margin-left: 6px;
    cursor: pointer;
}
.copy-btn.is-copied { color: #059669; border-color: #a7f3d0; }

.aliases { font-size: 12px; color: #6b7280; }
</style>
