import { createStore } from 'zustand/vanilla'

export type HeroSection = { type: 'hero'; props: { heading?: string; subheading?: string } }
export type FaqSection = { type: 'faq'; props: { items: Array<{ q: string; a: string }> } }
export type CtaSection = { type: 'cta'; props: { text: string; href?: string } }
export type FeaturesSection = { type: 'features'; props: { items: string[] } }
export type TestimonialsSection = { type: 'testimonials'; props: { items: Array<{ author: string; quote: string }> } }

export type Section = HeroSection | FaqSection | CtaSection | FeaturesSection | TestimonialsSection

export type BuilderState = {
  locale: string
  sections: Section[]
  addSection: (s: Section) => void
  moveSection: (from: number, to: number) => void
  removeSection: (index: number) => void
  setLocale: (loc: string) => void
}

export function createBuilderStore() {
  return createStore<BuilderState>((set, get) => ({
    locale: 'en',
    sections: [],
    addSection: (s) => set((st) => ({ sections: [...st.sections, s] })),
    moveSection: (from, to) =>
      set((st) => {
        const arr = [...st.sections]
        if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) return st
        const [spliced] = arr.splice(from, 1)
        arr.splice(to, 0, spliced)
        return { sections: arr }
      }),
    removeSection: (index) =>
      set((st) => {
        if (index < 0 || index >= st.sections.length) return st
        const arr = st.sections.slice()
        arr.splice(index, 1)
        return { sections: arr }
      }),
    setLocale: (loc) => set({ locale: loc }),
  }))
}