/**
 * Constructor Component Types
 *
 * Shared types for constructor components.
 */

import type {
  CanvasElement,
  CanvasElementType,
  ConstructorAsset,
  AssetOption,
  GalleryCard,
  CarouselSlide,
  NavigationButtonKind,
} from '../../types/constructor';

/**
 * Constructor interaction mode
 */
export type ConstructorInteractionMode = 'edit' | 'interact';

/**
 * Editor menu item types
 */
export type EditorMenuItem =
  | 'none'
  | 'background_image'
  | 'background_video'
  | 'background_audio'
  | 'create_transition';

/**
 * Editor tab types
 */
export type ElementEditorTab = 'general' | 'css' | 'effects';

/**
 * Tour page type
 */
export interface TourPage {
  id: string;
  name?: string;
  slug?: string;
  sort_order?: number;
  environment?: string;
  source_key?: string;
  requires_auth?: boolean;
  ui_schema_json?: string;
  background_image_url?: string;
  background_video_url?: string;
  background_audio_url?: string;
  background_loop?: boolean;
}

/**
 * Navigation element type
 */
export type NavigationElementType = Extract<
  CanvasElementType,
  'navigation_next' | 'navigation_prev'
>;

/**
 * Position in pixels
 */
export interface Position {
  x: number;
  y: number;
}

/**
 * Page selector props
 */
export interface PageSelectorProps {
  pages: TourPage[];
  activePageId: string;
  onPageChange: (pageId: string) => void;
  disabled?: boolean;
}

/**
 * Interaction mode toggle props
 */
export interface InteractionModeToggleProps {
  mode: ConstructorInteractionMode;
  onModeChange: (mode: ConstructorInteractionMode) => void;
}

/**
 * Controls panel props
 */
export interface ConstructorControlsPanelProps {
  projectId: string;
  projectName: string;
  pages: TourPage[];
  activePageId: string;
  interactionMode: ConstructorInteractionMode;
  position: Position;
  onPositionChange: (position: Position) => void;
  onPageChange: (pageId: string) => void;
  onModeChange: (mode: ConstructorInteractionMode) => void;
  onDragStart: (event: React.MouseEvent) => void;
}

/**
 * Canvas element props
 */
export interface CanvasElementProps {
  element: CanvasElement;
  isSelected: boolean;
  isEditMode: boolean;
  isDisabled?: boolean;
  canvasElapsedSec: number;
  preloadedIconUrl: boolean;
  onClick: (element: CanvasElement) => void;
  onMouseDown?: (event: React.MouseEvent, elementId: string) => void;
}

/**
 * Canvas background props
 */
export interface CanvasBackgroundProps {
  backgroundImageUrl?: string;
  backgroundVideoUrl?: string;
  backgroundAudioUrl?: string;
  previousBgImageUrl?: string;
  isSwitching?: boolean;
  isNewBgReady?: boolean;
  onBackgroundReady?: () => void;
}

/**
 * Constructor canvas props
 */
export interface ConstructorCanvasProps {
  canvasRef: React.RefObject<HTMLDivElement>;
  elements: CanvasElement[];
  selectedElementId: string;
  isEditMode: boolean;
  isLoading: boolean;
  canvasElapsedSec: number;
  preloadedIconUrlMap: Record<string, boolean>;
  background: CanvasBackgroundProps;
  transitionPreview: boolean;
  isReverseBuffering: boolean;
  onElementClick: (element: CanvasElement) => void;
  onElementMouseDown: (event: React.MouseEvent, elementId: string) => void;
  onCreatePage: () => void;
  isCreatingPage: boolean;
}

/**
 * Element editor header props
 */
export interface ElementEditorHeaderProps {
  title: string;
  isCollapsed: boolean;
  showRemoveButton: boolean;
  onToggleCollapse: () => void;
  onRemove: () => void;
  onDragStart: (event: React.MouseEvent) => void;
}

/**
 * Background settings editor props
 */
export interface BackgroundSettingsEditorProps {
  type: 'image' | 'video' | 'audio';
  value: string;
  options: AssetOption[];
  durationNote?: string;
  onChange: (value: string) => void;
  onImageClear?: () => void;
}

/**
 * Create transition form props
 */
export interface CreateTransitionFormProps {
  name: string;
  videoUrl: string;
  supportsReverse: boolean;
  videoOptions: AssetOption[];
  durationNote: string;
  isCreating: boolean;
  onNameChange: (name: string) => void;
  onVideoUrlChange: (url: string) => void;
  onSupportsReverseChange: (value: boolean) => void;
  onSubmit: () => void;
}

/**
 * Element editor panel props
 */
export interface ElementEditorPanelProps {
  position: Position;
  isCollapsed: boolean;
  activeTab: ElementEditorTab;
  selectedElement: CanvasElement | null;
  selectedMenuItem: EditorMenuItem;

  // Background settings
  backgroundImageUrl: string;
  backgroundVideoUrl: string;
  backgroundAudioUrl: string;
  backgroundImageOptions: AssetOption[];
  backgroundVideoOptions: AssetOption[];
  backgroundAudioOptions: AssetOption[];
  backgroundVideoDurationNote: string;
  backgroundAudioDurationNote: string;

  // Transition form
  newTransitionName: string;
  newTransitionVideoUrl: string;
  newTransitionSupportsReverse: boolean;
  transitionVideoOptions: AssetOption[];
  newTransitionDurationNote: string;
  isCreatingTransition: boolean;

  // Asset options for elements
  imageAssetOptions: AssetOption[];
  videoAssetOptions: AssetOption[];
  audioAssetOptions: AssetOption[];
  iconAssetOptions: AssetOption[];

  // Pages for navigation target selection
  pages: TourPage[];
  activePageId: string;

  // Duration notes
  selectedMediaDurationNote: string;
  selectedTransitionDurationNote: string;

  // Callbacks
  onPositionChange: (position: Position) => void;
  onDragStart: (event: React.MouseEvent) => void;
  onToggleCollapse: () => void;
  onTabChange: (tab: ElementEditorTab) => void;
  onRemoveElement: () => void;
  onUpdateElement: (patch: Partial<CanvasElement>) => void;
  onUpdateBackgroundImage: (url: string) => void;
  onUpdateBackgroundVideo: (url: string) => void;
  onUpdateBackgroundAudio: (url: string) => void;
  onUpdateTransitionName: (name: string) => void;
  onUpdateTransitionVideoUrl: (url: string) => void;
  onUpdateTransitionSupportsReverse: (value: boolean) => void;
  onCreateTransition: () => void;
  onPreviewTransition: (direction: 'forward' | 'back') => void;

  // Gallery operations
  onAddGalleryCard: () => void;
  onUpdateGalleryCard: (cardId: string, patch: Partial<GalleryCard>) => void;
  onRemoveGalleryCard: (cardId: string) => void;

  // Carousel operations
  onAddCarouselSlide: () => void;
  onUpdateCarouselSlide: (
    slideId: string,
    patch: Partial<CarouselSlide>,
  ) => void;
  onRemoveCarouselSlide: (slideId: string) => void;
}

/**
 * Constructor menu props
 */
export interface ConstructorMenuProps {
  position: Position;
  isOpen: boolean;
  allowedNavigationTypes: NavigationElementType[];
  isCreatingPage: boolean;
  onPositionChange: (position: Position) => void;
  onDragStart: (event: React.MouseEvent) => void;
  onToggleOpen: () => void;
  onSelectMenuItem: (item: EditorMenuItem) => void;
  onAddElement: (type: CanvasElementType) => void;
  onCreatePage: () => void;
  onSave: () => void;
  onSaveToStage: () => void;
  isSaving: boolean;
  isSavingToStage: boolean;
}

/**
 * Menu action button props
 */
export interface MenuActionButtonProps {
  icon: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

/**
 * Transition preview overlay props
 */
export interface TransitionPreviewOverlayProps {
  videoRef: React.RefObject<HTMLVideoElement>;
  isActive: boolean;
  title?: string;
}

// Re-export types from constructor.ts
export type {
  CanvasElement,
  CanvasElementType,
  ConstructorAsset,
  AssetOption,
  GalleryCard,
  CarouselSlide,
  NavigationButtonKind,
};
