<template>
    <div class="schedule-shell">
        <div class="schedule-page-header">
            <div class="schedule-page-title">
                <h2>{{ $t('schedule.title') }}</h2>
                <p>{{ $t('schedule.subtitle') }}</p>
            </div>
            <div class="schedule-page-actions">
                <SeasonSelector
                    :model-value="selectedSeasonId"
                    :show-current-season="true"
                    @update:model-value="$emit('update:selected-season-id', $event)"
                    @season-change="$emit('season-change', $event)"
                />
                <button @click="$emit('open-import-modal')">{{ $t('schedule.importSchedule') }}</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 v-if="hoveredMatch && hoveredMatch.location" class="hover-info">
            <p><strong>{{ hoveredMatch.location.name || 'N/A' }}</strong></p>
            <p>{{ hoveredMatch.location.address || 'N/A' }}</p>
            <p>{{ hoveredMatch.location.zip || '' }} {{ hoveredMatch.location.city || 'N/A' }}</p>
        </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 class="output schedule-layout">
            <aside 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 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>
                    <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>
            </aside>

            <div class="flex-item">
                <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 !== ''" 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">
                        <slot name="schedule-panel" />
                    </div>
                    <div v-show="activeTab === 'table'" class="tab-panel">
                        <slot name="table-panel" />
                    </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 },
        showGalleryButton: { type: Boolean, required: true },
        galleryLoading: { type: Boolean, required: true },
        hoveredMatch: { type: Object, default: null },
        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 }
    },
    emits: [
        'update:selected-season-id',
        'season-change',
        'open-import-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'
    ]
};
</script>

<style scoped>
.schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.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: flex-start;
}

.schedule-sidebar {
    width: 280px;
    flex: 0 0 280px;
}

.schedule-team-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 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;
    padding: 0.4rem 0.75rem;
}

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

.flex-item {
    flex: 1;
    min-width: 0;
}

@media (max-width: 960px) {
    .schedule-layout {
        flex-direction: column;
    }

    .schedule-sidebar {
        width: 100%;
        flex-basis: auto;
    }
}
</style>
