<template>
    <Teleport to="body">
        <Transition name="wdm-fade">
            <div v-if="open" class="wdm-overlay" @click.self="$emit('close')">
                <Transition name="wdm-panel">
                    <div v-if="open" class="wdm-panel">

                        <!-- Header -->
                        <div class="wdm-header">
                            <div class="wdm-header-info">
                                <div class="wdm-icon-wrap">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="20" height="20">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
                                    </svg>
                                </div>
                                <div class="wdm-header-text">
                                    <h3 class="wdm-title">Webhook documentation</h3>
                                    <p class="wdm-subtitle">User guide for connecting forms & external automation tools</p>
                                </div>
                            </div>
                            <button class="wdm-close" @click="$emit('close')" aria-label="Close modal">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <!-- Body Content -->
                        <div class="wdm-body">
                            
                            <!-- Main Overview Card -->
                            <div class="wdm-card wdm-hero-card">
                                <div class="wdm-card-badge">Overview</div>
                                <h4 class="wdm-card-title">How incoming webhooks work</h4>
                                <p class="wdm-card-text">
                                    Each webhook has its own unique URL. Point any external form's submit action, or an automation tool like Zapier/Make.com, at that URL and every submission creates or updates a contact - automatically added to whatever lists/tags you picked when creating the webhook.
                                </p>
                            </div>

                            <!-- Feature Breakdown List -->
                            <div class="wdm-section-list">
                                
                                <div class="wdm-item">
                                    <div class="wdm-item-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3c0 4.97-4.03 9-9 9 4.97 0 9 4.03 9 9 0-4.97 4.03-9 9-9-4.97 0-9-4.03-9-9z"/></svg>
                                    </div>
                                    <div class="wdm-item-content">
                                        <h5>Field names are auto-detected</h5>
                                        <p>
                                            Common variants of email, first/last name, phone, and address fields are recognized regardless of exact casing or formatting (e.g. "Email Address", "email_address", and "EmailAddress" all work).
                                            <a href="#" class="wdm-link" @click.prevent="$emit('open-field-ref')">View Field Reference →</a>
                                        </p>
                                    </div>
                                </div>

                                <div class="wdm-item">
                                    <div class="wdm-item-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                                    </div>
                                    <div class="wdm-item-content">
                                        <h5>Duplicates matching</h5>
                                        <p>Duplicates are matched by email - choose whether a repeat submission updates the existing contact or is skipped.</p>
                                    </div>
                                </div>

                                <div class="wdm-item">
                                    <div class="wdm-item-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
                                    </div>
                                    <div class="wdm-item-content">
                                        <h5>Signing (optional)</h5>
                                        <p>
                                            If the tool sending data can compute a signature, enable it and send an <code>X-Webhook-Signature</code> header - <code>hash_hmac('sha256', rawRequestBody, secret)</code>. Plain HTML forms can't do this, so leave it off for those; the unguessable URL itself is the safeguard.
                                        </p>
                                    </div>
                                </div>

                                <div class="wdm-item">
                                    <div class="wdm-item-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
                                    </div>
                                    <div class="wdm-item-content">
                                        <h5>Success redirect</h5>
                                        <p>Sends the visitor's browser to a "thank you" page after a plain HTML form submit - JS/fetch-based submissions should read the JSON response instead.</p>
                                    </div>
                                </div>

                                <div class="wdm-item">
                                    <div class="wdm-item-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    </div>
                                    <div class="wdm-item-content">
                                        <h5>Every delivery recorded</h5>
                                        <p>Every delivery - successful, rejected, or failed - is recorded. Use "View delivery logs" on a webhook to debug a submission that didn't come through.</p>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <!-- Footer -->
                        <div class="wdm-footer">
                            <button class="btn btn-outline" @click="$emit('open-field-ref')">
                                View Field Reference
                            </button>
                            <button class="btn btn-primary" @click="$emit('close')">
                                Close Documentation
                            </button>
                        </div>

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

<script setup>
defineProps({
    open: { type: Boolean, default: false },
});

defineEmits(['close', 'open-field-ref']);
</script>

<style>
/* Overlay and Modal panel styles with Theme Variable Support */
.wdm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wdm-panel {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    width: 540px;
    max-width: 94vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary, #111827);
}

/* Header */
.wdm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-surface, #ffffff);
    flex-shrink: 0;
    gap: 12px;
}

.wdm-header-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.wdm-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--active-bg, #eff6ff);
    color: var(--active-text, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 0;
}
.wdm-icon-wrap svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
    flex-shrink: 0;
}

.wdm-header-text {
    flex: 1;
    min-width: 0;
}

.wdm-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
}

.wdm-subtitle {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    margin: 3px 0 0;
    line-height: 1.4;
    word-break: break-word;
}

.wdm-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 0.15s, color 0.15s;
}
.wdm-close:hover {
    background: var(--bg-hover, #f3f4f6);
    color: var(--text-primary, #111827);
}
.wdm-close svg { width: 18px; height: 18px; }

/* Body Content */
.wdm-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;

    /* Custom Theme Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #cbd5e1) transparent;
}

.wdm-body::-webkit-scrollbar {
    width: 6px;
}
.wdm-body::-webkit-scrollbar-track {
    background: transparent;
}
.wdm-body::-webkit-scrollbar-thumb {
    background: var(--border-color, #cbd5e1);
    border-radius: 9999px;
}
.wdm-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #94a3b8);
}

/* Hero card */
.wdm-hero-card {
    position: relative;
    background: var(--bg-hover, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
}

.wdm-card-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--active-text, #2563eb);
    background: var(--active-bg, #eff6ff);
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.wdm-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 8px;
}

.wdm-card-text {
    font-size: 13px;
    color: var(--text-secondary, #334155);
    line-height: 1.6;
    margin: 0;
}

/* Feature Items List */
.wdm-section-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wdm-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wdm-item:hover {
    background: var(--bg-hover, #f8fafc);
    border-color: var(--border-color, #cbd5e1);
}

.wdm-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-hover-strong, #f1f5f9);
    color: var(--active-text, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.wdm-item-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    margin: auto;
    flex-shrink: 0;
}

.wdm-item-content {
    flex: 1;
    min-width: 0;
}

.wdm-item-content h5 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 4px;
}

.wdm-item-content p {
    font-size: 12.5px;
    color: var(--text-secondary, #475569);
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
}

.wdm-item-content code {
    font-family: monospace;
    font-size: 12px;
    background: var(--bg-hover-strong, #e2e8f0);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #cbd5e1);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-word;
}

.wdm-link {
    color: var(--active-text, #2563eb);
    font-weight: 600;
    margin-left: 4px;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}
.wdm-link:hover {
    text-decoration: underline;
}

/* Footer */
.wdm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-surface, #ffffff);
    flex-shrink: 0;
    gap: 12px;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .wdm-overlay {
        padding: 10px;
    }
    .wdm-panel {
        max-height: 92vh;
        border-radius: 12px;
        width: 100%;
    }
    .wdm-header {
        padding: 14px 14px;
        gap: 10px;
    }
    .wdm-header-info {
        gap: 10px;
    }
    .wdm-icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
    .wdm-icon-wrap svg {
        width: 17px;
        height: 17px;
    }
    .wdm-title {
        font-size: 14.5px;
    }
    .wdm-subtitle {
        font-size: 11.5px;
    }
    .wdm-body {
        padding: 12px;
        gap: 12px;
    }
    .wdm-hero-card {
        padding: 12px;
    }
    .wdm-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .wdm-item-icon {
        width: 28px;
        height: 28px;
    }
    .wdm-item-icon svg {
        width: 16px;
        height: 16px;
    }
    .wdm-footer {
        padding: 12px 14px;
        flex-direction: column-reverse;
    }
    .wdm-footer button {
        width: 100%;
        justify-content: center;
    }
}

/* Transitions */
.wdm-fade-enter-active { transition: opacity 0.22s ease; }
.wdm-fade-leave-active { transition: opacity 0.18s ease; }
.wdm-fade-enter-from,
.wdm-fade-leave-to     { opacity: 0; }

.wdm-panel-enter-active { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease; }
.wdm-panel-leave-active { transition: transform 0.18s ease, opacity 0.16s ease; }
.wdm-panel-enter-from   { transform: scale(0.94) translateY(12px); opacity: 0; }
.wdm-panel-leave-to     { transform: scale(0.96) translateY(6px); opacity: 0; }
</style>
