<template>
    <Head :title="form.name" />
    <AppLayout>
        <!-- Back link + header -->
        <div class="fs-header">
            <Link :href="route('forms.index')" class="fs-back">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                </svg>
                Forms
            </Link>

            <div class="fs-title-row">
                <div class="fs-title-left">
                    <h1 class="fs-title">{{ form.name }}</h1>
                    <div class="fs-meta">
                        <span class="forms-type-badge" :class="form.type === 'popup' ? 'forms-type-badge--popup' : 'forms-type-badge--inline'">
                            {{ form.type === 'popup' ? 'Popup Form' : 'Inline / Embedded Form' }}
                        </span>
                        <span :class="['badge', statusBadgeClass]">{{ statusLabel }}</span>
                        <span class="fs-meta-sep">·</span>
                        <span class="fs-meta-id">#{{ form.id }}</span>
                        <span class="fs-meta-sep">·</span>
                        <span class="fs-meta-date">Created {{ formatDate(form.created_at) }}</span>
                    </div>
                </div>
                <div class="fs-title-actions">
                    <Link :href="route('forms.edit', form.id)" class="btn btn-outline btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="14" height="14">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
                        </svg>
                        Edit
                    </Link>
                    <button type="button" class="btn btn-outline btn-sm" @click="showEmbedModal = true">Embed</button>
                    <button type="button" class="btn btn-ghost btn-sm" @click="doDuplicate">Duplicate</button>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="fs-tabs-wrap">
            <div class="fs-tabs">
                <button
                    v-for="tab in tabs"
                    :key="tab.id"
                    class="fs-tab"
                    :class="{ 'is-active': activeTab === tab.id }"
                    @click="activeTab = tab.id"
                >{{ tab.label }}</button>
            </div>
        </div>

        <!-- Tab: Overview -->
        <div v-if="activeTab === 'overview'" class="fs-content">
            <div class="fs-stats-grid">
                <div class="fs-stat-card">
                    <div class="fs-stat-icon fs-stat-icon--blue">
                        <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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <div class="fs-stat-body">
                        <div class="fs-stat-val">{{ form.total_views.toLocaleString() }}</div>
                        <div class="fs-stat-label">Views</div>
                    </div>
                </div>
                <div class="fs-stat-card">
                    <div class="fs-stat-icon fs-stat-icon--green">
                        <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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div class="fs-stat-body">
                        <div class="fs-stat-val">{{ form.total_submissions.toLocaleString() }}</div>
                        <div class="fs-stat-label">Submissions</div>
                    </div>
                </div>
                <div class="fs-stat-card">
                    <div class="fs-stat-icon fs-stat-icon--purple">
                        <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="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
                    </div>
                    <div class="fs-stat-body">
                        <div class="fs-stat-val">{{ form.submission_rate }}%</div>
                        <div class="fs-stat-label">Conversion rate</div>
                    </div>
                </div>
            </div>

            <div class="fs-bottom-grid">
                <div class="fs-card">
                    <div class="fs-card-header">Audience targeting</div>
                    <div class="fs-card-body">
                        <div class="fs-audience-row">
                            <div class="fs-audience-label">Lists</div>
                            <div class="fs-audience-val">
                                <template v-if="form.lists?.length">{{ form.lists.map(l => l.title).join(', ') }}</template>
                                <span v-else class="fs-audience-muted">None</span>
                            </div>
                        </div>
                        <div class="fs-audience-row">
                            <div class="fs-audience-label">Tags</div>
                            <div class="fs-audience-val">
                                <template v-if="form.tags?.length">{{ form.tags.map(t => t.title).join(', ') }}</template>
                                <span v-else class="fs-audience-muted">None</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="fs-card">
                    <div class="fs-card-header">Timeline</div>
                    <div class="fs-card-body">
                        <div class="fs-timeline">
                            <div class="fs-tl-item">
                                <div class="fs-tl-dot fs-tl-dot--done"></div>
                                <div class="fs-tl-body">
                                    <div class="fs-tl-label">Form created</div>
                                    <div class="fs-tl-date">{{ formatDateTime(form.created_at) }}</div>
                                </div>
                            </div>
                            <div class="fs-tl-item">
                                <div class="fs-tl-dot" :class="form.status === 'active' ? 'fs-tl-dot--done' : 'fs-tl-dot--pending'"></div>
                                <div class="fs-tl-body">
                                    <div class="fs-tl-label">{{ form.status === 'active' ? 'Active - accepting submissions' : form.status === 'paused' ? 'Paused' : 'Draft - not yet published' }}</div>
                                    <div class="fs-tl-date">Last updated {{ formatDateTime(form.updated_at) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab: Submissions -->
        <div v-else class="fs-content">
            <div v-if="submissions.data.length" class="fs-deliveries">
                <div class="fs-deliveries-head">
                    <h3>Submissions</h3>
                    <span>{{ submissions.total }} total</span>
                </div>
                <div class="fs-table-scroll">
                    <table class="fs-table">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Name</th>
                                <th>Submitted at</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="s in submissions.data" :key="s.id">
                                <td>
                                    <Link v-if="s.contact_id" :href="route('contacts.show', s.contact_id)" class="fs-contact-link">{{ s.email }}</Link>
                                    <span v-else>{{ s.email }}</span>
                                </td>
                                <td>{{ s.name || '-' }}</td>
                                <td>{{ formatDateTime(s.created_at) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="fs-deliveries-footer">
                    <span class="fs-deliveries-range">{{ submissions.from }}–{{ submissions.to }} of {{ submissions.total }}</span>
                    <Pagination :paginator="submissions" page-name="submissions_page" preserve-state />
                </div>
            </div>
            <div v-else class="fs-placeholder">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="36" height="36"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                <p>No submissions yet. Once your form is active, submissions will appear here.</p>
            </div>
        </div>

        <EmbedCodeModal :open="showEmbedModal" :embed="form.embed" @close="showEmbedModal = false" @activate="activateAndReload" />
    </AppLayout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Head, Link, router } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import Pagination from '@/Components/Pagination.vue';
import EmbedCodeModal from '@/Components/Forms/EmbedCodeModal.vue';
import { useTenantTimezone } from '@/Composables/useTenantTimezone';

const { formatDate: formatDateTz, formatDateTime: formatDateTimeTz } = useTenantTimezone();

const props = defineProps({
    form:        Object,
    submissions: Object,
});

const activeTab = ref('overview');
const showEmbedModal = ref(false);

const tabs = [
    { id: 'overview',    label: 'Overview' },
    { id: 'submissions', label: 'Submissions' },
];

const statusLabel = computed(() => ({ draft: 'Draft', active: 'Active', paused: 'Paused' }[props.form.status] ?? props.form.status));
const statusBadgeClass = computed(() => ({ draft: 'badge--gray', active: 'badge--success', paused: 'badge--warning' }[props.form.status] ?? 'badge--gray'));

function formatDate(iso) {
    if (!iso) return '';
    return formatDateTz(iso);
}
function formatDateTime(iso) {
    if (!iso) return '';
    return formatDateTimeTz(iso);
}

function doDuplicate() {
    router.post(route('forms.duplicate', props.form.id));
}

function activateAndReload() {
    router.post(route('forms.bulk-toggle-status'), { ids: [props.form.id], status: 'active' }, {
        preserveScroll: true,
        onSuccess: () => { showEmbedModal.value = false; router.reload(); },
    });
}
</script>

<style scoped>
.fs-header {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.fs-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 14px;
}
.fs-back:hover { color: var(--text-primary); }

.fs-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
@media (max-width: 576px) {
    .fs-title-row { flex-direction: column; align-items: stretch; gap: 12px; }
}
.fs-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.fs-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-meta-sep { color: var(--border-color); }
.fs-meta-id { font-size: 12px; color: var(--text-muted); }
.fs-meta-date { font-size: 12px; color: var(--text-muted); }
.fs-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.forms-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 4px 9px;
    border-radius: 999px;
}
.forms-type-badge--popup { background: rgba(139, 92, 246, .12); color: #7c3aed; }
.forms-type-badge--inline { background: rgba(66, 133, 244, .12); color: #2563eb; }

/* ── Tabs ── */
.fs-tabs-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.fs-tabs { display: flex; padding: 0 8px; }
.fs-tab {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
}
.fs-tab:hover { color: var(--text-primary); }
.fs-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }

.fs-content { display: flex; flex-direction: column; gap: 20px; }

/* ── Stats ── */
.fs-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) { .fs-stats-grid { grid-template-columns: 1fr; } }
.fs-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fs-stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fs-stat-icon--blue   { background: var(--info-light); color: var(--info); }
.fs-stat-icon--green  { background: var(--success-light); color: var(--success); }
.fs-stat-icon--purple { background: rgba(124, 58, 237, 0.12); color: #a78bfa; }
.fs-stat-body { display: flex; flex-direction: column; gap: 2px; }
.fs-stat-val { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.fs-stat-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* ── Bottom grid ── */
.fs-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .fs-bottom-grid { grid-template-columns: 1fr; } }
.fs-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.fs-card-header { padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); background: var(--bg-page); }
.fs-card-body { padding: 16px 20px; }

.fs-audience-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.fs-audience-row:last-child { border-bottom: none; }
.fs-audience-label { color: var(--text-secondary); flex-shrink: 0; }
.fs-audience-val { font-weight: 600; color: var(--text-primary); text-align: right; }
.fs-audience-muted { font-weight: 400; color: var(--text-muted); }

/* ── Timeline ── */
.fs-timeline { display: flex; flex-direction: column; gap: 0; }
.fs-tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; position: relative; }
.fs-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px; top: 22px; bottom: -10px;
    width: 2px;
    background: var(--border-color);
}
.fs-tl-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.fs-tl-dot--done { background: var(--success); border: 2px solid var(--success-border); }
.fs-tl-dot--pending { background: var(--gray-100); border: 2px solid var(--border-color); }
.fs-tl-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.fs-tl-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Submissions table ── */
.fs-deliveries { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.fs-deliveries-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.fs-deliveries-head h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.fs-deliveries-head span { font-size: 13px; color: var(--text-secondary); }
.fs-table { width: 100%; border-collapse: collapse; }
.fs-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-page); padding: 10px 20px; border-bottom: 1px solid var(--border-color); }
.fs-table td { font-size: 13px; color: var(--text-secondary); padding: 12px 20px; border-bottom: 1px solid var(--border-color); }
.fs-table tbody tr:hover { background: var(--bg-hover); }
.fs-table-scroll { overflow-x: auto; }
.fs-contact-link { color: var(--active-text); text-decoration: none; font-weight: 500; }
.fs-contact-link:hover { text-decoration: underline; }
.fs-deliveries-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.fs-deliveries-range { font-size: 12px; color: var(--text-secondary); }

.fs-placeholder {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
</style>
