import { create } from "zustand"
import { persist } from "zustand/middleware"
import { ParsedWireframe } from "./wireframe-converter"

export interface ComponentInstance {
  id: string
  type: string
  props: Record<string, any>
  position: { x: number; y: number }
  size?: { width: number; height: number }
}

export interface WireframeData {
  id: string
  name: string
  deviceType: 'desktop' | 'tablet' | 'mobile'
  data: ParsedWireframe
  createdAt: Date
  updatedAt: Date
}

interface EditorState {
  components: ComponentInstance[]
  selectedComponent: ComponentInstance | null
  wireframes: WireframeData[]
  currentWireframe: WireframeData | null
  showWireframes: boolean
  wireframeRenderMode: 'svg' | 'editable'
  addComponent: (component: ComponentInstance) => void
  updateComponent: (id: string, updates: Partial<ComponentInstance>) => void
  removeComponent: (id: string) => void
  selectComponent: (component: ComponentInstance | null) => void
  moveComponent: (id: string, position: { x: number; y: number }) => void
  setComponents: (components: ComponentInstance[]) => void
  clearAll: () => void
  addWireframe: (wireframe: WireframeData) => void
  updateWireframe: (id: string, updates: Partial<WireframeData>) => void
  removeWireframe: (id: string) => void
  setCurrentWireframe: (wireframe: WireframeData | null) => void
  setShowWireframes: (show: boolean) => void
  setWireframeRenderMode: (mode: 'svg' | 'editable') => void
  clearWireframes: () => void
  clearWireframeComponents: () => void
}

export const useEditorStore = create<EditorState>()(
  persist(
    (set, get) => ({
      components: [],
      selectedComponent: null,
      wireframes: [],
      currentWireframe: null,
      showWireframes: false,
      wireframeRenderMode: 'svg',

      addComponent: (component) =>
        set((state) => ({
          components: [...state.components, component],
        })),

      updateComponent: (id, updates) =>
        set((state) => ({
          components: state.components.map((comp) =>
            comp.id === id
              ? {
                  ...comp,
                  ...updates,
                  props: updates.props ? { ...comp.props, ...updates.props } : comp.props,
                }
              : comp,
          ),
          selectedComponent:
            state.selectedComponent?.id === id
              ? {
                  ...state.selectedComponent,
                  ...updates,
                  props: updates.props
                    ? { ...state.selectedComponent.props, ...updates.props }
                    : state.selectedComponent.props,
                }
              : state.selectedComponent,
        })),

      removeComponent: (id) =>
        set((state) => ({
          components: state.components.filter((comp) => comp.id !== id),
          selectedComponent: state.selectedComponent?.id === id ? null : state.selectedComponent,
        })),

      selectComponent: (component) => set({ selectedComponent: component }),

      moveComponent: (id, position) =>
        set((state) => ({
          components: state.components.map((comp) => (comp.id === id ? { ...comp, position } : comp)),
        })),

      setComponents: (components) => set({ components }),

      clearAll: () =>
        set({
          components: [],
          selectedComponent: null,
        }),

      addWireframe: (wireframe) =>
        set((state) => ({
          wireframes: [...state.wireframes, wireframe],
        })),

      updateWireframe: (id, updates) =>
        set((state) => ({
          wireframes: state.wireframes.map((wireframe) =>
            wireframe.id === id
              ? {
                  ...wireframe,
                  ...updates,
                  updatedAt: new Date(),
                }
              : wireframe,
          ),
        })),

      removeWireframe: (id) =>
        set((state) => ({
          wireframes: state.wireframes.filter((wireframe) => wireframe.id !== id),
          currentWireframe: state.currentWireframe?.id === id ? null : state.currentWireframe,
        })),

      setCurrentWireframe: (wireframe) => set({ currentWireframe: wireframe }),

      setShowWireframes: (show) => set({ showWireframes: show }),

      setWireframeRenderMode: (mode) => set({ wireframeRenderMode: mode }),

      clearWireframes: () =>
        set({
          wireframes: [],
          currentWireframe: null,
        }),

      clearWireframeComponents: () =>
        set((state) => ({
          components: state.components.filter(comp => !comp.type.startsWith('wireframe-')),
        })),
    }),
    {
      name: "editor-storage",
    },
  ),
)