<template>
    <div class="schedule-shell">
        <div class="schedule-static-chrome">
            <div class="schedule-page-header">
                <div class="schedule-page-title">
                    <h2>{{ resolvedTitle }}</h2>
                    <p>{{ resolvedSubtitle }}</p>
                </div>
                <div class="schedule-page-actions">
                    <SeasonSelector
                        v-if="showScheduleActions"
                        :model-value="selectedSeasonId"
                        :show-current-season="true"
                        @update:model-value="$emit('update:selected-season-id', $event)"
                        @season-change="$emit('season-change', $event)"
                    />
                    <button v-if="showScheduleActions" @click="$emit('open-import-modal')">{{ $t('schedule.importSchedule') }}</button>
                    <button v-if="showFriendlyActions" @click="$emit('open-friendly-match-modal')" class="btn-secondary">Freundschaftsspiel</button>
                    <button
                        v-if="showGalleryButton"
                        @click="$emit('open-gallery-dialog')"
                        class="btn-secondary"
                        :disabled="galleryLoading"
                    >
                        {{ galleryLoading ? $t('schedule.galleryLoading') : $t('schedule.gallery') }}
                    </button>
                </div>
            </div>

            <div class="schedule-summary-bar">
                <div class="schedule-summary-item">
                    <span class="schedule-summary-label">{{ $t('schedule.teams') }}</span>
                    <strong>{{ filteredScheduleTeamsCount }}/{{ teamsCount }}</strong>
                </div>
                <div class="schedule-summary-item">
                    <span class="schedule-summary-label">{{ $t('schedule.matches') }}</span>
                    <strong>{{ matchesCount }}</strong>
                </div>
                <div class="schedule-summary-item">
                    <span class="schedule-summary-label">{{ $t('schedule.completedShort') }}</span>
                    <strong>{{ completedMatchesCount }}</strong>
                </div>
                <div class="schedule-summary-item">
                    <span class="schedule-summary-label">{{ $t('schedule.pendingShort') }}</span>
                    <strong>{{ pendingMatchesCount }}</strong>
                </div>
                <div class="schedule-summary-item" v-if="nextScheduledMatchLabel">
                    <span class="schedule-summary-label">{{ $t('schedule.nextMatch') }}</span>
                    <strong>{{ nextScheduledMatchLabel }}</strong>
                </div>
            </div>
        </div>

        <div class="output schedule-layout">
            <aside v-if="showSidebar" class="schedule-sidebar">
                <div class="schedule-sidebar-card">
                    <div class="schedule-sidebar-header">
                        <h3>{{ $t('schedule.selection') }}</h3>
                        <span class="schedule-selection-count">{{ filteredScheduleTeamsCount }}/{{ teamsCount }}</span>
                    </div>
                    <input
                        :value="teamSearchQuery"
                        type="search"
                        class="schedule-team-search"
                        :placeholder="$t('schedule.searchTeams')"
                        @input="$emit('update:team-search-query', $event.target.value.trim())"
                    />
                    <div v-if="showScheduleActions" class="schedule-quick-links">
                        <button
                            type="button"
                            class="schedule-quick-link"
                            :class="{ active: selectedLeague === overallScheduleLabel }"
                            @click="$emit('load-all-matches')"
                        >
                            {{ overallScheduleLabel }}
                        </button>
                        <button
                            type="button"
                            class="schedule-quick-link"
                            :class="{ active: selectedLeague === adultScheduleLabel }"
                            @click="$emit('load-adult-matches')"
                        >
                            {{ adultScheduleLabel }}
                        </button>
                    </div>
                    <div class="schedule-sidebar-scroll">
                        <ul class="schedule-team-list">
                            <li
                                v-for="team in filteredScheduleTeams"
                                :key="team.id"
                                @click="$emit('load-team', team)"
                                :class="{ active: selectedTeam && selectedTeam.id === team.id }"
                            >
                                <span class="schedule-team-name">{{ team.name }}</span>
                                <span class="team-league" v-if="team.league && team.league.name">{{ team.league.name }}</span>
                            </li>
                            <li v-if="teamsCount === 0" class="no-leagues">{{ $t('schedule.noTeamsFound') }}</li>
                            <li v-else-if="filteredScheduleTeamsCount === 0" class="no-leagues">{{ $t('schedule.noMatchingTeams') }}</li>
                        </ul>
                    </div>
                </div>
            </aside>

            <div class="schedule-workspace">
                <div class="schedule-workspace-header">
                    <div>
                        <span class="workspace-eyebrow">{{ $t('schedule.activeSelection') }}</span>
                        <h3 v-if="selectedLeague">{{ selectedLeague }}</h3>
                        <h3 v-else>{{ $t('schedule.noSelectionTitle') }}</h3>
                        <p v-if="selectedLeague">{{ workspaceDescription }}</p>
                        <p v-else>{{ $t('schedule.noSelectionMessage') }}</p>
                    </div>
                    <div v-if="selectedLeague" class="schedule-workspace-actions">
                        <button
                            v-if="activeTab === 'schedule' && selectedTeam"
                            type="button"
                            class="btn-secondary"
                            @click="$emit('fetch-team-data-manually')"
                            :disabled="fetchingTeamData"
                        >
                            {{ fetchingTeamData ? $t('schedule.fetchingTeamData') : $t('schedule.fetchTeamData') }}
                        </button>
                        <button v-if="activeTab === 'schedule'" @click="$emit('generate-pdf')">{{ $t('schedule.downloadPDF') }}</button>
                        <button
                            v-if="activeTab === 'table' && selectedTeam"
                            type="button"
                            class="btn-secondary"
                            @click="$emit('fetch-table')"
                            :disabled="fetchingTable"
                        >
                            {{ fetchingTable ? $t('schedule.tableLoading') : $t('schedule.refreshTable') }}
                        </button>
                    </div>
                </div>

                <div v-if="selectedLeague && selectedLeague !== '' && showTableTab" class="tab-navigation">
                    <button :class="['tab-button', { active: activeTab === 'schedule' }]" @click="$emit('update:active-tab', 'schedule')">
                        📅 {{ $t('schedule.scheduleTab') }} <span class="tab-count">{{ matchesCount }}</span>
                    </button>
                    <button :class="['tab-button', { active: activeTab === 'table' }]" @click="$emit('update:active-tab', 'table')">
                        📊 {{ $t('schedule.tableTab') }} <span class="tab-count">{{ tableCount }}</span>
                    </button>
                </div>

                <div v-if="selectedLeague && selectedLeague !== ''" class="tab-content active">
                    <div v-show="activeTab === 'schedule'" class="tab-panel">
                        <div class="tab-panel-scroll">
                            <slot name="schedule-panel" />
                        </div>
                    </div>
                    <div v-show="activeTab === 'table'" class="tab-panel">
                        <div class="tab-panel-scroll">
                            <slot name="table-panel" />
                        </div>
                    </div>
                </div>
                <div v-else class="schedule-empty-state">
                    <h3>{{ $t('schedule.noSelectionTitle') }}</h3>
                    <p>{{ $t('schedule.noSelectionMessage') }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SeasonSelector from '../SeasonSelector.vue';

export default {
    name: 'ScheduleLayoutShell',
    components: { SeasonSelector },
    props: {
        selectedSeasonId: { type: [Number, String, null], default: null },
        title: { type: String, default: '' },
        subtitle: { type: String, default: '' },
        showGalleryButton: { type: Boolean, required: true },
        galleryLoading: { type: Boolean, required: true },
        filteredScheduleTeamsCount: { type: Number, required: true },
        teamsCount: { type: Number, required: true },
        matchesCount: { type: Number, required: true },
        completedMatchesCount: { type: Number, required: true },
        pendingMatchesCount: { type: Number, required: true },
        nextScheduledMatchLabel: { type: String, default: '' },
        teamSearchQuery: { type: String, required: true },
        overallScheduleLabel: { type: String, required: true },
        adultScheduleLabel: { type: String, required: true },
        selectedLeague: { type: String, default: '' },
        filteredScheduleTeams: { type: Array, required: true },
        selectedTeam: { type: Object, default: null },
        workspaceDescription: { type: String, default: '' },
        activeTab: { type: String, required: true },
        tableCount: { type: Number, required: true },
        fetchingTeamData: { type: Boolean, required: true },
        fetchingTable: { type: Boolean, required: true },
        showFriendlyActions: { type: Boolean, default: false },
        showScheduleActions: { type: Boolean, default: true },
        showSidebar: { type: Boolean, default: true },
        showTableTab: { type: Boolean, default: true }
    },
    emits: [
        'update:selected-season-id',
        'season-change',
        'open-import-modal',
        'open-friendly-match-modal',
        'open-gallery-dialog',
        'update:team-search-query',
        'load-all-matches',
        'load-adult-matches',
        'load-team',
        'fetch-team-data-manually',
        'generate-pdf',
        'fetch-table',
        'update:active-tab'
    ],
    computed: {
        resolvedTitle() {
            return this.title || this.$t('schedule.title');
        },
        resolvedSubtitle() {
            return this.subtitle || this.$t('schedule.subtitle');
        }
    }
};
</script>

<style scoped>
.schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    height: 100%;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-static-chrome {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 0 0 auto;
}

.schedule-page-header,
.schedule-summary-bar,
.schedule-sidebar-card,
.schedule-workspace-header {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-light);
    padding: 0.9rem;
}

.schedule-page-header,
.schedule-page-actions,
.schedule-summary-bar,
.schedule-sidebar-header,
.schedule-workspace-header,
.schedule-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.schedule-page-header,
.schedule-workspace-header,
.schedule-sidebar-header {
    justify-content: space-between;
    align-items: flex-start;
}

.schedule-page-title h2,
.schedule-workspace-header h3 {
    margin: 0;
}

.schedule-page-title p,
.schedule-workspace-header p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
}

.schedule-summary-item {
    min-width: 120px;
}

.schedule-summary-label,
.workspace-eyebrow {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.schedule-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-sidebar {
    width: 280px;
    flex: 0 0 280px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-sidebar-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0.75rem;
    padding-right: 0.25rem;
    max-height: calc(100vh - 300px);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-team-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.schedule-team-list li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: white;
    cursor: pointer;
}

.schedule-team-list li.active {
    border-color: var(--primary-color);
    background: var(--primary-soft);
}

.schedule-team-search {
    width: 100%;
}

.schedule-quick-link {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: white;
    color: var(--text-color, #333);
    padding: 0.4rem 0.75rem;
    box-shadow: none;
    text-shadow: none;
}

.schedule-quick-link::before {
    display: none;
}

.schedule-quick-link.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.schedule-workspace {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.tab-navigation {
    flex: 0 0 auto;
}

.tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.tab-panel {
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.tab-panel-scroll {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 0.25rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    box-sizing: border-box;
}

@media (max-width: 960px) {
    .schedule-layout {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .schedule-sidebar {
        width: 100%;
        flex-basis: auto;
    }

    .schedule-shell {
        min-height: auto;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .schedule-sidebar-card,
    .schedule-workspace,
    .schedule-sidebar-scroll {
        min-height: auto;
        height: auto;
        overflow: visible;
        max-height: none;
    }

    .tab-content,
    .tab-panel,
    .schedule-workspace {
        width: 100%;
        min-width: 0;
    }

    .tab-panel {
        overflow: hidden;
    }

    .tab-panel-scroll {
        min-height: auto;
        height: auto;
        max-height: none;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}

@media (max-width: 640px) {
    .schedule-page-header,
    .schedule-workspace-header,
    .schedule-sidebar-header {
        flex-direction: column;
        align-items: stretch;
    }

    .schedule-page-actions,
    .schedule-workspace-actions,
    .schedule-quick-links {
        width: 100%;
    }

    .schedule-page-actions > *,
    .schedule-workspace-actions > *,
    .schedule-quick-link {
        width: 100%;
    }

    .schedule-summary-item {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tab-navigation {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
</style>
