import { defineStore } from 'pinia'

interface CompanyLogo {
  url: string
  alternativeText?: string
}

interface CompanyInfo {
  company: string
  street: string
  postalcode: string
  city: string
  phone: string
  email: string
  contact: string
  district?: string
  latitude?: number
  longitude?: number
  web: string
  invertlogo?: {
    data?: {
      attributes?: CompanyLogo
    }
  }
}

interface Page {
  id: number
  pageName: string
  pageLink: string
  header_image?: {
    url: string
    alternativeText?: string
  } | null
  SEO?: {
    pageTitle: string
    seoDescription: string
    seoKeywords: string
    type: string
    seoImage?: {
      url: string
      alternativeText?: string
    } | null
  } | null
  faqs: Array<{
    question: string
    answer: string
  }>
  pageSections: Array<{
    id: number
    sectionText: string
    sectionImage?: {
      url: string
      alternativeText?: string
    } | null
  }>
}

export const useMainStore = defineStore('main', {
  state: () => ({
    menuOpen: false,
    contactBoxOpen: false,
    scrollPosition: 0,
    screenWidth: 1440,
    companyinfo: null as CompanyInfo | null,
    pages: [] as Page[],
    dataFetched: false,
    loading: false,
    error: null as { message: string, stack?: string } | null,
  }),

  getters: {
    invertLogoUrl: (state) => {
      const runtimeConfig = useRuntimeConfig()
      const logoUrl = state.companyinfo?.invertlogo?.data?.attributes?.url
      return logoUrl 
        ? `${runtimeConfig.public.cmsBaseUrl}${logoUrl}`
        : '/uploads/dummy_Image_4abc3f04dd.webp'
    },
    isMobile: (state) => state.screenWidth < 768,

    /** Neuer Getter: Seite anhand pageLink finden */
    getPageByLink: (state) => {
      return (link: string) => state.pages.find(p => p.pageLink === link)
    }
  },

  actions: {
    toggleMenu() {
      this.menuOpen = !this.menuOpen
    },
    
    closeMenu() {
      this.menuOpen = false
    },
    
    toggleContactBubble() {
      this.contactBoxOpen = !this.contactBoxOpen
    },
    
    setScrollPosition(pos: number) {
      this.scrollPosition = pos
    },
    
    setScreenWidth(width: number) {
      this.screenWidth = width
    },
    
    async fetchInitialData() {
      if (this.dataFetched) return
    
      this.loading = true
      try {
        const runtimeConfig = useRuntimeConfig()
        const cmsUrl = runtimeConfig.public.cmsBaseUrl

        const companyRes = await $fetch(`${cmsUrl}/api/companyinfo?populate=*`, {
          headers: { 'Authorization': `Bearer ${runtimeConfig.public.cmsToken}` }
        })
        this.companyinfo = companyRes.data?.attributes || companyRes

        const pagesRes = await $fetch(`${cmsUrl}/api/pages?populate=*`, {
          headers: { 'Authorization': `Bearer ${runtimeConfig.public.cmsToken}` }
        })

        this.pages = pagesRes.data.map((item: any) => ({
          id: item.id,
          pageName: item.attributes.pageName,
          pageLink: item.attributes.pageLink,
          header_image: item.attributes.header_image ? {
            url: item.attributes.header_image.data.attributes.url,
            alternativeText: item.attributes.header_image.data.attributes.alternativeText
          } : null,
          SEO: item.attributes.SEO ? {
            pageTitle: item.attributes.SEO.pageTitle,
            seoDescription: item.attributes.SEO.seoDesicription,
            seoKeywords: item.attributes.SEO.seoKeywords,
            type: item.attributes.SEO.type,
            seoImage: item.attributes.SEO.seoImage ? {
              url: item.attributes.SEO.seoImage.data.attributes.url,
              alternativeText: item.attributes.SEO.seoImage.data.attributes.alternativeText
            } : null
          } : null,
          faqs: item.attributes.faqs ? item.attributes.faqs.data.map((faq: any) => ({
            question: faq.attributes.question,
            answer: faq.attributes.answer
          })) : [],
          pageSections: item.attributes.pageSections ? item.attributes.pageSections.map((section: any) => ({
            id: section.id,
            sectionText: section.sectionText,
            sectionImage: section.sectionImage ? {
              url: section.sectionImage.data.attributes.url,
              alternativeText: section.sectionImage.data.attributes.alternativeText
            } : null
          })) : []
        }))

        this.dataFetched = true
      } catch (err) {
        const errorObj = err as Error
        this.error = {
          message: errorObj.message,
          stack: errorObj.stack
        }
        console.error('Fehler beim Laden der Daten:', errorObj)
      } finally {
        this.loading = false
      }
    }
  }
})