/**
 * SitefinityContentTypesTab - Displays content types with fields (Sitefinity format)
 */
Vue.component('sitefinity-content-types-tab', {
    props: {
        contentTypes: { type: Array, default: () => [] },
        loading: { type: Boolean, default: false },
        isEmpty: { type: Boolean, default: false },
        emptyMessage: { type: String, default: 'Select a module or provider to view content types and fields' }
    },
    methods: {
        refresh() { this.$emit('refresh'); }
    },
    template: `
        <div class="sitefinity-content-types-tab fade-up" style="position:relative; min-height:120px;">
            <div v-if="loading" class="dashboard-loading-overlay modules-loading">
                <div class="spinner-ring"></div>
                <div class="dashboard-loading-text">Loading module schema...</div>
                <div class="dashboard-loading-sub">Fetching content types and fields</div>
            </div>
            <div v-else-if="isEmpty" class="empty-tab-placeholder" style="padding: 4rem 2rem;">
                <i class="bi bi-puzzle" style="font-size: 2rem; color: var(--text-muted);"></i>
                <p style="color: var(--text-secondary); margin-top: 1rem;">{{ emptyMessage }}</p>
            </div>
            <div v-else-if="!contentTypes.length" class="empty-tab-placeholder" style="padding: 4rem 2rem;">
                <p style="color: var(--text-secondary); margin-bottom: 1rem;">No content types found for this module</p>
                <button class="btn-outline-subtle" @click="refresh">
                    <i class="bi bi-arrow-clockwise"></i> Retry
                </button>
            </div>
            <div v-else>
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="stat-card">
                            <div class="stat-label">Content Types</div>
                            <div class="stat-value" style="color: var(--accent-bright);">{{ contentTypes.length }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="stat-card">
                            <div class="stat-label">Total Fields</div>
                            <div class="stat-value" style="color: var(--orange);">{{ totalFields }}</div>
                        </div>
                    </div>
                </div>
                <div v-for="ct in contentTypes" :key="ct.fullTypeName" class="section-card mb-4">
                    <div class="section-card-header">
                        <h6>{{ ct.name }}</h6>
                        <span class="chip chip-accent" style="font-size:0.75rem;">{{ ct.entitySet || ct.fullTypeName }}</span>
                    </div>
                    <div class="section-card-body" style="padding: 0;">
                        <table class="table-dark-custom">
                            <thead>
                                <tr>
                                    <th>Field</th>
                                    <th>Type</th>
                                    <th>DB Type</th>
                                    <th>Nullable</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="f in (ct.fields || [])" :key="f.name || f.title">
                                    <td style="color:var(--text-primary); font-weight:500;">{{ f.title || f.name }}</td>
                                    <td class="mono" style="font-size:0.85rem;">{{ f.typeName }}</td>
                                    <td class="mono" style="font-size:0.8rem;">{{ f.dbType || '—' }}</td>
                                    <td>{{ f.allowNulls ? 'Yes' : 'No' }}</td>
                                </tr>
                                <tr v-if="!ct.fields || !ct.fields.length">
                                    <td colspan="4" style="text-align:center; color: var(--text-muted); padding: 1rem;">No fields</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    `,
    computed: {
        totalFields() {
            return this.contentTypes.reduce(function (sum, ct) {
                return sum + (ct.fields ? ct.fields.length : 0);
            }, 0);
        }
    }
});
