/**
 * RenderingsTab Component
 * Matches design.html Renderings tab - displays Sitecore renderings
 */
Vue.component('renderings-tab', {
    props: {
        renderings: {
            type: Array,
            default: () => []
        },
        platformType: {
            type: String,
            default: 'Sitecore'
        }
    },
    template: `
        <div class="renderings-tab fade-up">
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-label">{{ usesTemplateLabels ? 'Total Templates' : 'Total Renderings' }}</div>
                        <div class="stat-value" style="color: var(--orange);">{{ renderings.length }}</div>
                    </div>
                </div>
                <div v-if="!usesTemplateLabels" class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-label">View Renderings</div>
                        <div class="stat-value" style="color: var(--accent-bright);">{{ viewRenderingsCount }}</div>
                    </div>
                </div>
                <div v-if="!usesTemplateLabels" class="col-md-4">
                    <div class="stat-card">
                        <div class="stat-label">Controller Renderings</div>
                        <div class="stat-value" style="color: var(--warning);">{{ controllerRenderingsCount }}</div>
                    </div>
                </div>
            </div>
            <div class="section-card">
                <div class="section-card-header">
                    <h6>{{ usesTemplateLabels ? 'All Templates' : 'All Renderings' }}</h6>
                </div>
                <div class="section-card-body" style="max-height: 500px;">
                    <table class="table-dark-custom">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>{{ usesTemplateLabels ? 'Node ID' : 'Path / Controller' }}</th>
                                <th>Usage Count</th>
                                <th v-if="!usesTemplateLabels">Datasource</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="r in renderings" :key="r.name">
                                <td style="color:var(--text-primary); font-weight: 500;">{{ r.name }}</td>
                                <td><span class="chip" :class="r.type === 'View' ? 'chip-accent' : r.type === 'Template' ? 'chip-cyan' : 'chip-warning'">{{ r.type }}</span></td>
                                <td class="mono" style="font-size: 0.75rem;">{{ r.path }}</td>
                                <td class="mono">{{ r.usageCount }}</td>
                                <td v-if="!usesTemplateLabels"><span class="chip chip-success" v-if="r.datasource">{{ r.datasource }}</span><span v-else style="color:var(--text-muted)">—</span></td>
                            </tr>
                            <tr v-if="renderings.length === 0">
                                <td :colspan="usesTemplateLabels ? 4 : 5" style="text-align: center; color: var(--text-muted); padding: 2rem;">{{ usesTemplateLabels ? 'No templates found' : 'No renderings found' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `,
    computed: {
        usesTemplateLabels() {
            return this.platformType === 'Umbraco' || this.platformType === 'Custom';
        },
        viewRenderingsCount() {
            return this.renderings.filter(r => r.type === 'View').length;
        },
        controllerRenderingsCount() {
            return this.renderings.filter(r => r.type === 'Controller').length;
        }
    }
});
