<template>
    <Teleport to="body">
        <div class="modal-overlay" :class="{ 'is-open': open }" @click.self="$emit('close')">
            <div class="modal" style="width:700px;max-width:96vw">
                <div class="modal-header">
                    <div>
                        <h3 class="modal-title">Add New List</h3>
                        <p class="modal-subtitle">Organise and segment your contacts into groups.</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 modal-body-gray">
                    <div class="modal-field-grid2">
                        <div>
                            <label class="form-label"><span style="color:#ef4444">*</span> Title</label>
                            <input type="text" class="form-input" v-model="form.title" placeholder="e.g. Newsletter Subscribers" @input="syncSlug">
                            <small v-if="submitted && !form.title" style="color:#ef4444;font-size:12px">Title is required.</small>
                        </div>
                        <div>
                            <label class="form-label"><span style="color:#ef4444">*</span> Slug <span style="font-size:11px;font-weight:400;color:#9ca3af">Auto-generated</span></label>
                            <input type="text" class="form-input" v-model="form.slug" placeholder="e.g. newsletter-subscribers" style="font-family:monospace;font-size:12px">
                            <small v-if="submitted && !form.slug" style="color:#ef4444;font-size:12px">Slug is required.</small>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Internal Subtitle <span style="color:#9ca3af;font-weight:400">(Optional)</span></label>
                        <input type="text" class="form-input" v-model="form.subtitle" placeholder="A short note visible only to your team">
                    </div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#6b7280;background:#EFF6FF;border:1px solid #C5D9FD;border-radius:8px;padding:10px 14px;line-height:1.5">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" style="width:14px;height:14px;color:#4285F4;flex-shrink:0;margin-top:1px"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
                        Contacts can belong to multiple lists. The slug is used in opt-out URLs.
                    </div>
                </div>

                <div class="modal-footer" style="justify-content:flex-end;gap:10px">
                    <button class="btn btn-outline" @click="$emit('close')">Cancel</button>
                    <button class="btn btn-primary" @click="submit">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:14px;height:14px"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                        Create List
                    </button>
                </div>
            </div>
        </div>
    </Teleport>
</template>

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

const props = defineProps({
    open: { type: Boolean, default: false },
});
const emit = defineEmits(['close', 'create']);

const submitted = ref(false);
const form = reactive({ title: '', slug: '', subtitle: '' });

watch(() => props.open, open => {
    if (!open) resetForm();
});

function syncSlug() {
    form.slug = form.title
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-|-$/g, '');
}

function submit() {
    submitted.value = true;
    if (!form.title || !form.slug) return;
    emit('create', { title: form.title, slug: form.slug, subtitle: form.subtitle });
    emit('close');
}

function resetForm() {
    submitted.value = false;
    form.title    = '';
    form.slug     = '';
    form.subtitle = '';
}
</script>

<style scoped>
.modal-body-gray { background: #f9fafb; }

.modal-field-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 480px) { .modal-field-grid2 { grid-template-columns: 1fr; } }
</style>
