'use client';

import React, { createContext, useContext, useState, useCallback } from 'react';
import { Slide, SliderContent, FormState, createDefaultSliderContent } from '@/types/slider';
import { v4 as uuidv4 } from 'uuid';

interface SliderEditorContextType {
  sliderContent: SliderContent;
  formState: FormState;

  // Slide operations
  addSlide: () => void;
  deleteSlide: (slideIndex: number) => void;
  updateSlide: (slideIndex: number, updates: Partial<Slide>) => void;
  selectSlide: (slideIndex: number) => void;

  // Form state
  toggleCarouselCollapse: () => void;
  setHasUnsavedChanges: (has: boolean) => void;

  // Publish
  saveAndPublish: () => Promise<void>;
  discardChanges: () => void;

  // Reset to default AMSOIL slider
  resetToDefault: () => void;
}

const SliderEditorContext = createContext<SliderEditorContextType | undefined>(undefined);

interface SliderEditorProviderProps {
  initialSliderContent?: SliderContent;
  children: React.ReactNode;
}

export function SliderEditorProvider({
  initialSliderContent,
  children,
}: SliderEditorProviderProps) {
  const [sliderContent, setSliderContent] = useState<SliderContent>(
    initialSliderContent || {
      id: uuidv4(),
      slides: [createEmptySlide(0)],
      updatedAt: new Date(),
    }
  );

  const [formState, setFormState] = useState<FormState>({
    currentSlideIndex: 0,
    isCarouselCollapsed: false,
    hasUnsavedChanges: false,
  });

  const addSlide = useCallback(() => {
    setSliderContent((prev) => {
      const newSlide = createEmptySlide(prev.slides.length);
      return {
        ...prev,
        slides: [...prev.slides, newSlide],
      };
    });
    setFormState((prev) => ({
      ...prev,
      currentSlideIndex: sliderContent.slides.length,
      hasUnsavedChanges: true,
    }));
  }, [sliderContent.slides.length]);

  const deleteSlide = useCallback(
    (slideIndex: number) => {
      if (sliderContent.slides.length <= 1) return; // Prevent deleting last slide

      setSliderContent((prev) => ({
        ...prev,
        slides: prev.slides.filter((_, i) => i !== slideIndex),
      }));

      setFormState((prev) => ({
        ...prev,
        currentSlideIndex: Math.min(slideIndex, sliderContent.slides.length - 2),
        hasUnsavedChanges: true,
      }));
    },
    [sliderContent.slides.length]
  );

  const updateSlide = useCallback((slideIndex: number, updates: Partial<Slide>) => {
    setSliderContent((prev) => {
      const updatedSlides = [...prev.slides];
      updatedSlides[slideIndex] = { ...updatedSlides[slideIndex], ...updates };
      return {
        ...prev,
        slides: updatedSlides,
        updatedAt: new Date(),
      };
    });
    setFormState((prev) => ({
      ...prev,
      hasUnsavedChanges: true,
    }));
  }, []);

  const selectSlide = useCallback((slideIndex: number) => {
    setFormState((prev) => ({
      ...prev,
      currentSlideIndex: slideIndex,
    }));
  }, []);

  const toggleCarouselCollapse = useCallback(() => {
    setFormState((prev) => ({
      ...prev,
      isCarouselCollapsed: !prev.isCarouselCollapsed,
    }));
  }, []);

  const setHasUnsavedChanges = useCallback((has: boolean) => {
    setFormState((prev) => ({
      ...prev,
      hasUnsavedChanges: has,
    }));
  }, []);

  const saveAndPublish = useCallback(async () => {
    try {
      // 1. Mark as published
      const contentToSave = {
        ...sliderContent,
        publishedAt: new Date(),
      };

      // 2. Call Server Action (dynamically imported to avoid test dependency issues)
      const { saveHeroSlider } = await import('@/app/actions/slider');
      await saveHeroSlider(contentToSave);

      // 3. Update local state
      setSliderContent(contentToSave);
      setFormState((prev) => ({
        ...prev,
        hasUnsavedChanges: false,
      }));
    } catch (error) {
      console.error('Failed to save slider:', error);
      // TODO: Show error toast notification
      throw error; // Re-throw for modal to handle
    }
  }, [sliderContent]);

  const discardChanges = useCallback(() => {
    // Reset to initial state (this will be called from modal close)
    setFormState((prev) => ({
      ...prev,
      hasUnsavedChanges: false,
    }));
  }, []);

  const resetToDefault = useCallback(() => {
    // Replace current slider with default AMSOIL-branded slider
    setSliderContent(createDefaultSliderContent());
    setFormState((prev) => ({
      ...prev,
      currentSlideIndex: 0,
      hasUnsavedChanges: true,
    }));
  }, []);

  return (
    <SliderEditorContext.Provider
      value={{
        sliderContent,
        formState,
        addSlide,
        deleteSlide,
        updateSlide,
        selectSlide,
        toggleCarouselCollapse,
        setHasUnsavedChanges,
        saveAndPublish,
        discardChanges,
        resetToDefault,
      }}
    >
      {children}
    </SliderEditorContext.Provider>
  );
}

export function useSliderEditor() {
  const context = useContext(SliderEditorContext);
  if (!context) {
    throw new Error('useSliderEditor must be used within SliderEditorProvider');
  }
  return context;
}

// Helper function to create empty slide
function createEmptySlide(order: number): Slide {
  return {
    id: uuidv4(),
    order,
    active: true,
    image: {
      url: '',
      source: 'library',
    },
    headline: '',
    headlineFormatting: {},
    subheading: '',
    subheadingFormatting: {},
    button: {
      text: '',
      url: '',
    },
  };
}