/**
 * SitesTab Component
 * Matches design.html Sites tab - displays detected Sitecore sites
 */
Vue.component('sites-tab', {
    props: {
        sites: {
            type: Array,
            default: () => []
        },
        platformType: {
            type: String,
            default: 'Sitecore'
        }
    },
    computed: {
        sitesHeader() {
            if (this.platformType === 'SharePoint') return 'SharePoint Sites & Webs';
            if (this.platformType === 'Umbraco') return 'Umbraco Domains';
            if (this.platformType === 'Sitefinity') return 'Sitefinity Sites';
            return 'Detected Sitecore Sites';
        },
        isSitefinity() {
            return this.platformType === 'Sitefinity';
        }
    },
    template: `
        <div class="sites-tab fade-up">
            <div v-if="platformType === 'Sitecore'" class="sites-caution mb-3">
                <i class="bi bi-exclamation-triangle"></i>
                Caution: Websites were identified by using heuristics and may differ based on your installation.
            </div>
            <div class="section-card">
                <div class="section-card-header">
                    <h6>{{ sitesHeader }}</h6>
                </div>
                <div class="section-card-body" style="max-height: 500px;">
                    <table class="table-dark-custom" v-if="isSitefinity">
                        <thead>
                            <tr>
                                <th>Site</th>
                                <th>ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="s in sites" :key="s.id != null ? s.id : s.name">
                                <td style="color:var(--text-primary); font-weight: 600;">{{ s.name }}</td>
                                <td class="mono" style="font-size:0.8rem;">{{ s.id || '—' }}</td>
                            </tr>
                            <tr v-if="sites.length === 0">
                                <td colspan="2" style="text-align: center; color: var(--text-muted); padding: 2rem;">No sites detected</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table-dark-custom" v-else>
                        <thead>
                            <tr>
                                <th>Site</th>
                                <th>Hostname</th>
                                <th>Start Path</th>
                                <th>Language</th>
                                <th>Database</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="s in sites" :key="s.id != null ? s.id : s.host || s.name">
                                <td style="color:var(--text-primary); font-weight: 600;">{{ s.name }}</td>
                                <td class="mono">{{ s.host }}</td>
                                <td class="mono" style="font-size:0.78rem;">{{ s.startPath }}</td>
                                <td><span class="chip chip-cyan">{{ s.language }}</span></td>
                                <td><span class="chip chip-accent">{{ s.database }}</span></td>
                            </tr>
                            <tr v-if="sites.length === 0">
                                <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 2rem;">No sites detected</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `
});
