<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import CinematicStarLoader from '../CinematicStarLoader.vue'
import HomeCategoriesSection from './HomeCategoriesSection.vue'
import HomeHeroShell from './HomeHeroShell.vue'
import HomeExtrasSection from './HomeExtrasSection.vue'
import HomeLandingModals from './HomeLandingModals.vue'
import HomeParticipationSection from './HomeParticipationSection.vue'
import HomeStickyCountdownPill from './HomeStickyCountdownPill.vue'
import HomeSupportFooterSection from './HomeSupportFooterSection.vue'
import HomeTimelineSection from './HomeTimelineSection.vue'
import HomeWinnerShowcaseSection from './HomeWinnerShowcaseSection.vue'
import { useHomeLandingState } from './useHomeLandingState'
import { useHomeLandingViewEffects } from './useHomeLandingViewEffects'

const router = useRouter()
const showactModalOpen = ref(false)
const rootStyle ="font-family:'Outfit',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5;position:relative;background:#f4eefb;color:#3f3556;--bg:#f4eefb;--bg2:#ebe2f8;--surface:#ffffff;--card:#ffffff;--ink:#3f3556;--muted:#8a8398;--accent:#8b6cdb;--accent2:#b78bff;--gold:#d9942a;--line:rgba(124,86,196,0.16);--glow:rgba(139,108,219,0.3)"
const {
  store,
  authStore,
  role,
  isGuest,
  isUser,
  isAdmin,
  twitchUser,
  siteContent,
  hostSocialLinks,
  communitySocialLinks,
  footerLinks,
  faqItems,
  privacyContentHtml,
  publicStreamUrl,
  landingCategories,
  nominationPhase,
  votingPhase,
  preparationPhase,
  showPhase,
  completedPhase,
  showCountdown,
  streamLive,
  streamLocked,
  privacyModalOpen,
  accountModalOpen,
  archiveModalOpen,
  modalOpen,
  isShow,
  isVote,
  isPicker,
  isClip,
  notSubmitted,
  deleteNotConfirm,
  voteCount,
  totalCats,
  canSubmitVote,
  savedVoteActive,
  activeCatName,
  phaseCardTitle,
  phaseCardDescription,
  phaseCardRange,
  phaseStatusLabel,
  phaseStatusStyle,
  phasePrimaryLabel,
  phasePrimaryDisabled,
  phasePrimaryActionStyle,
  streamEyebrow,
  streamTitle,
  streamText,
  streamMeta,
  streamButtonLabel,
  streamButtonUrl,
  streamLockedTitle,
  statOneValue,
  statOneLabel,
  statTwoValue,
  statThreeValue,
  statThreeLabel,
  categoryIntroText,
  timelineLineStyle,
  sectionTitle,
  sectionText,
  sectionActionLabel,
  sectionActionHref,
  sectionActionDisabled,
  sectionActionStyle,
  previewPhase,
  pickerTitle,
  pickerSubtitle,
  successTitle,
  successText,
  clipNomOptions,
  catOptions,
  canSubmitClip,
  clipSubmitStyle,
  archiveYears,
  selectedArchive,
  winnerShowcaseYear,
  winnerShowcase,
  activeCat,
  submitted,
  submitting,
  formError,
  clipDsgvo,
  archiveYear,
  catList,
  noms,
  formatTimelineRange,
  formatShowDate,
  initialsFor,
  openVote,
  openNominate,
  onLogin,
  onOpenAccount,
  openAdminPanel,
  onPrimaryPhaseAction,
  isUploadedSocialIcon,
  socialSimpleIconPath,
  socialSimpleIconColor,
  platformKey,
  onSectionAction,
  closeModal,
  stop,
  submitReminder,
  submitVote,
  submitNomination,
  onClipCatChange,
  clipDsgvoChange,
  onOpenPrivacy,
  submitClip,
  onCloseArchive,
  archiveYearButtonStyle,
  winnerPlatformStyle,
  winnerPlatformLabel,
  privacyModalStop,
  accountModalStop,
  archiveModalStop,
  onClosePrivacy,
  onCloseAccount,
  deleteConfirm,
  accountActionError,
  onLogout,
  onRequestDelete,
  onCancelDelete,
  onConfirmDelete,
  onOpenArchive,
  setArchiveYear,
  onTimelineFinalAction,
  setPreviewPhase,
  initializeHomeInteractions,
} = useHomeLandingState()

const previewPhaseButtons = [
  { key: 'nomination', label: 'Nominierung', hint: 'Links einreichen' },
  { key: 'voting', label: 'Voting', hint: 'Community stimmt ab' },
  { key: 'preparation', label: 'Aufbereitung', hint: 'Pause vor Show' },
  { key: 'show', label: 'Show', hint: 'Live-Finale' },
] as const

const { setRootEl, landingLoaderVisible, stickyCountdownVisible, handleClipSubmit } = useHomeLandingViewEffects({
  router,
  store,
  authStore,
  modalOpen,
  accountModalOpen,
  privacyModalOpen,
  archiveModalOpen,
  submitted,
  streamLive,
  archiveYear,
  nominationPhase,
  votingPhase,
  preparationPhase,
  completedPhase,
  initializeHomeInteractions,
  submitClip,
})
</script>

<template>
  <div :ref="setRootEl">
    <transition name="cinematic-loader">
      <div
        v-if="landingLoaderVisible"
        style="position:fixed;inset:0;z-index:1200;"
      >
        <CinematicStarLoader
          eyebrow="VTuber Star Award"
          title="Suche nach Sternen im Himmel"
          outro-text="Sterne am Himmel gefunden und Erfolgreich verknüpft."
        />
      </div>
    </transition>

<div :style="rootStyle" class="home-landing">
  <HomeStickyCountdownPill
    :show-countdown="showCountdown"
    :visible="stickyCountdownVisible"
    :show-phase="showPhase"
    :public-stream-url="publicStreamUrl"
  />

  <div v-if="isAdmin" class="home-demo-preview" aria-label="Demo Phasen-Vorschau">
    <div class="home-demo-preview__label">
      <span>✦</span>
      <strong>Vorschau</strong>
    </div>
    <div class="home-demo-preview__buttons">
      <button
        v-for="phaseButton in previewPhaseButtons"
        :key="phaseButton.key"
        type="button"
        class="home-demo-preview__button"
        :class="{ 'home-demo-preview__button--active': previewPhase === phaseButton.key }"
        @click="setPreviewPhase(phaseButton.key)"
      >
        <span>{{ phaseButton.label }}</span>
        <small>{{ phaseButton.hint }}</small>
      </button>
    </div>
  </div>

  <HomeHeroShell
    :is-guest="isGuest"
    :is-user="isUser"
    :is-admin="isAdmin"
    :twitch-user="twitchUser"
    :site-content="siteContent"
    :host-social-links="hostSocialLinks"
    :category-intro-text="categoryIntroText"
    :phase-card-title="phaseCardTitle"
    :phase-status-style="phaseStatusStyle"
    :phase-status-label="phaseStatusLabel"
    :phase-card-description="phaseCardDescription"
    :phase-card-range="phaseCardRange"
    :show-countdown="showCountdown"
    :public-stream-url="publicStreamUrl"
    :show-phase="showPhase"
    :phase-primary-label="phasePrimaryLabel"
    :phase-primary-disabled="phasePrimaryDisabled"
    :phase-primary-action-style="phasePrimaryActionStyle"
    :stream-eyebrow="streamEyebrow"
    :stream-title="streamTitle"
    :stream-text="streamText"
    :stream-meta="streamMeta"
    :stream-live="streamLive"
    :stream-locked="streamLocked"
    :stream-button-label="streamButtonLabel"
    :stream-button-url="streamButtonUrl"
    :stream-locked-title="streamLockedTitle"
    :stat-one-value="statOneValue"
    :stat-one-label="statOneLabel"
    :stat-two-value="statTwoValue"
    :stat-three-value="statThreeValue"
    :stat-three-label="statThreeLabel"
    :on-login="onLogin"
    :on-open-account="onOpenAccount"
    :open-admin-panel="openAdminPanel"
    :on-primary-phase-action="onPrimaryPhaseAction"
    :is-uploaded-social-icon="isUploadedSocialIcon"
    :social-simple-icon-path="socialSimpleIconPath"
    :social-simple-icon-color="socialSimpleIconColor"
    :platform-key="platformKey"
  />

  <HomeTimelineSection
    :nomination-phase="nominationPhase"
    :voting-phase="votingPhase"
    :preparation-phase="preparationPhase"
    :show-phase="showPhase"
    :completed-phase="completedPhase"
    :timeline-line-style="timelineLineStyle"
    :public-stream-url="publicStreamUrl"
    :format-timeline-range="formatTimelineRange"
    :open-nominate="openNominate"
    :open-vote="openVote"
    :on-timeline-final-action="onTimelineFinalAction"
  />

  <HomeCategoriesSection :site-content="siteContent" :landing-categories="landingCategories" />

  <HomeWinnerShowcaseSection
    :winner-showcase-year="winnerShowcaseYear"
    :winner-showcase="winnerShowcase"
    :initials-for="initialsFor"
    :on-open-archive="onOpenArchive"
  />

  <HomeParticipationSection
    :section-title="sectionTitle"
    :section-text="sectionText"
    :section-action-label="sectionActionLabel"
    :section-action-href="sectionActionHref"
    :section-action-disabled="sectionActionDisabled"
    :section-action-style="sectionActionStyle"
    :nomination-phase="nominationPhase"
    :preparation-phase="preparationPhase"
    :on-section-action="onSectionAction"
  />

  <HomeExtrasSection v-model:modal-open="showactModalOpen" />

  <HomeSupportFooterSection
    :community-social-links="communitySocialLinks"
    :site-content="siteContent"
    :faq-items="faqItems"
    :footer-links="footerLinks"
    :on-open-privacy="onOpenPrivacy"
    :on-showact-apply="() => { showactModalOpen = true }"
    :is-uploaded-social-icon="isUploadedSocialIcon"
    :social-simple-icon-path="socialSimpleIconPath"
    :social-simple-icon-color="socialSimpleIconColor"
    :platform-key="platformKey"
  />

  <HomeLandingModals
    :modal-open="modalOpen"
    :submitted="submitted"
    :not-submitted="notSubmitted"
    :form-error="formError"
    :success-title="successTitle"
    :success-text="successText"
    :close-modal="closeModal"
    :stop="stop"
    :is-show="isShow"
    :is-picker="isPicker"
    :is-vote="isVote"
    :is-clip="isClip"
    :nomination-phase="nominationPhase"
    :public-stream-url="publicStreamUrl"
    :format-show-date="formatShowDate"
    :submit-reminder="submitReminder"
    :picker-title="pickerTitle"
    :picker-subtitle="pickerSubtitle"
    :cat-list="catList"
    :active-cat-index="activeCat"
    :active-cat-name="activeCatName"
    :noms="noms"
    :vote-count="voteCount"
    :total-cats="totalCats"
    :can-submit-vote="canSubmitVote"
    :saved-vote-active="savedVoteActive"
    :submit-vote="submitVote"
    :submit-nomination="submitNomination"
    :submitting="submitting"
    :on-clip-cat-change="onClipCatChange"
    :cat-options="catOptions"
    :clip-nom-options="clipNomOptions"
    :clip-dsgvo="clipDsgvo"
    :clip-dsgvo-change="clipDsgvoChange"
    :on-open-privacy="onOpenPrivacy"
    :can-submit-clip="canSubmitClip"
    :clip-submit-style="clipSubmitStyle"
    :submit-clip="handleClipSubmit"
    :archive-modal-open="archiveModalOpen"
    :archive-years="archiveYears"
    :selected-archive="selectedArchive"
    :on-close-archive="onCloseArchive"
    :archive-modal-stop="archiveModalStop"
    :set-archive-year="setArchiveYear"
    :archive-year-button-style="archiveYearButtonStyle"
    :winner-platform-style="winnerPlatformStyle"
    :winner-platform-label="winnerPlatformLabel"
    :privacy-modal-open="privacyModalOpen"
    :privacy-content-html="privacyContentHtml"
    :on-close-privacy="onClosePrivacy"
    :privacy-modal-stop="privacyModalStop"
    :account-modal-open="accountModalOpen"
    :session="authStore.session"
    :twitch-user="twitchUser"
    :role="role"
    :delete-not-confirm="deleteNotConfirm"
    :delete-confirm="deleteConfirm"
    :account-action-error="accountActionError"
    :auth-loading="authStore.loading"
    :on-close-account="onCloseAccount"
    :account-modal-stop="accountModalStop"
    :on-logout="onLogout"
    :on-request-delete="onRequestDelete"
    :on-cancel-delete="onCancelDelete"
    :on-confirm-delete="onConfirmDelete"
  />
</div>

  </div>
</template>

<style>
@import './homeLandingExperience.css';
</style>
