/**
 * ContentTypeTab Component
 * Expandable Template | Field | Type table (system templates excluded)
 */
Vue.component('content-type-tab', {
    props: {
        contentTypes: {
            type: Array,
            default: () => []
        },
        connection: {
            type: Object,
            default: null
        }
    },
    data: function() {
        return {
            expanded: {}
        };
    },
    template: `
        <div class="content-type-tab fade-up">
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-label">Total 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">Custom Types</div>
                        <div class="stat-value" style="color: var(--orange);">{{ customCount }}</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(--text-muted);">{{ totalFields }}</div>
                    </div>
                </div>
            </div>
            <div class="section-card">
                <div class="section-card-header">
                    <h6>Templates with Fields</h6>
                </div>
                <div class="section-card-body" style="max-height: 500px;">
                    <table class="table-dark-custom">
                        <thead>
                            <tr>
                                <th style="width: 2rem;"></th>
                                <th>Template</th>
                                <th>Field</th>
                                <th>Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="t in contentTypes" :key="t.name">
                                <tr class="template-row" :class="{ expanded: expanded[t.name] }">
                                    <td>
                                        <button type="button" class="btn-expand" @click="toggle(t.name)" v-if="(t.fields || []).length > 0"
                                            :aria-expanded="!!expanded[t.name]">
                                            <span class="expand-icon">{{ expanded[t.name] ? '−' : '+' }}</span>
                                        </button>
                                    </td>
                                    <td style="color:var(--text-primary); font-weight: 500;">{{ t.name }}</td>
                                    <td colspan="2" class="mono" style="font-size:0.75rem; color: var(--text-muted);">{{ t.path }} · {{ t.itemCount }} items</td>
                                </tr>
                                <tr v-for="(f, idx) in (expanded[t.name] ? (t.fields || []) : [])" :key="t.name + '-' + (f.name || idx)" class="field-row">
                                    <td></td>
                                    <td></td>
                                    <td class="mono">{{ f.name }}</td>
                                    <td class="mono" style="color: var(--text-muted);">{{ f.type || '—' }}</td>
                                </tr>
                            </template>
                            <tr v-if="contentTypes.length === 0">
                                <td colspan="4" style="text-align: center; color: var(--text-muted); padding: 2rem;">No content types found</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `,
    computed: {
        customCount() {
            return this.contentTypes.filter(function(t) { return t.custom; }).length;
        },
        totalFields() {
            return this.contentTypes.reduce(function(sum, t) {
                return sum + (t.fields ? t.fields.length : 0);
            }, 0);
        }
    },
    methods: {
        toggle: function(name) {
            this.$set(this.expanded, name, !this.expanded[name]);
        }
    }
});
