"use client"

import React, { createContext, useContext, useState, ReactNode } from 'react';
import { BuilderData, BuilderSection, BuilderElement } from './types';

interface BuilderContextType {
  data: BuilderData;
  setData: React.Dispatch<React.SetStateAction<BuilderData>>;
  selectedElementId: string | null;
  setSelectedElementId: (id: string | null) => void;
  selectedSectionId: string | null;
  setSelectedSectionId: (id: string | null) => void;
  updateElementProps: (elementId: string, newProps: any) => void;
  addSection: () => void;
  removeSection: (sectionId: string) => void;
  removeElement: (elementId: string) => void;
  leftSidebarOpen: boolean;
  setLeftSidebarOpen: (open: boolean) => void;
  rightSidebarOpen: boolean;
  setRightSidebarOpen: (open: boolean) => void;
}

const BuilderContext = createContext<BuilderContextType | undefined>(undefined);

export function BuilderProvider({ children, initialData }: { children: ReactNode, initialData?: BuilderData }) {
  const [data, setData] = useState<BuilderData>(initialData || { sections: [] });
  const [selectedElementId, setSelectedElementId] = useState<string | null>(null);
  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(null);
  const [leftSidebarOpen, setLeftSidebarOpen] = useState(true);
  const [rightSidebarOpen, setRightSidebarOpen] = useState(true);

  const updateElementProps = (elementId: string, newProps: any) => {
    setData(prev => {
      const newData = { ...prev };
      newData.sections = newData.sections.map(section => ({
        ...section,
        columns: section.columns.map(col => ({
          ...col,
          elements: col.elements.map(el => {
            if (el.id === elementId) {
              return { ...el, props: { ...el.props, ...newProps } };
            }
            return el;
          })
        }))
      }));
      return newData;
    });
  };

  const addSection = () => {
    setData(prev => ({
      ...prev,
      sections: [
        ...prev.sections,
        {
          id: `section_${Date.now()}`,
          settings: { padding: 'py-12' },
          columns: [
            { id: `col_${Date.now()}_1`, span: 'col-span-12', elements: [] }
          ]
        }
      ]
    }));
  };

  const removeSection = (sectionId: string) => {
    setData(prev => ({
      ...prev,
      sections: prev.sections.filter(s => s.id !== sectionId)
    }));
    if (selectedSectionId === sectionId) setSelectedSectionId(null);
  };

  const removeElement = (elementId: string) => {
    setData(prev => {
      const newData = JSON.parse(JSON.stringify(prev));
      for (const section of newData.sections) {
        for (const col of section.columns) {
          const index = col.elements.findIndex((e: any) => e.id === elementId);
          if (index > -1) {
            col.elements.splice(index, 1);
            break;
          }
        }
      }
      return newData;
    });
    if (selectedElementId === elementId) setSelectedElementId(null);
  };

  return (
    <BuilderContext.Provider value={{
      data, setData,
      selectedElementId, setSelectedElementId,
      selectedSectionId, setSelectedSectionId,
      updateElementProps, addSection, removeSection, removeElement,
      leftSidebarOpen, setLeftSidebarOpen,
      rightSidebarOpen, setRightSidebarOpen
    }}>
      {children}
    </BuilderContext.Provider>
  );
}

export const useBuilder = () => {
  const context = useContext(BuilderContext);
  if (!context) throw new Error('useBuilder must be used within BuilderProvider');
  return context;
};