import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';

export interface VideoData {
  id: number;
  filename: string;
  title: string | null;
  category: string | null;
  durationSeconds: number | null;
  quality: string | null;
  orientation: string | null;
  thumbnailPath: string | null;
  viewCount: number;
  upvoteCount: number;
  commentCount: number;
  isLocked: boolean;
  createdAt: string;
}

export type ExpandedMediaType = 'video' | 'photo' | 'album';

interface ExpandedVideoState {
  videoId: number | null;
  video: VideoData | null;
  mediaType: ExpandedMediaType;
  mediaData: any; // For photo/album expansion
}

interface ExpandedVideoContextValue {
  state: ExpandedVideoState;
  expandVideo: (id: number, video: VideoData) => void;
  expandMedia: (id: number, type: ExpandedMediaType, data: any) => void;
  collapseVideo: () => void;
}

const ExpandedVideoContext = createContext<ExpandedVideoContextValue | undefined>(undefined);

export function useExpandedVideo() {
  const context = useContext(ExpandedVideoContext);
  if (!context) {
    throw new Error('useExpandedVideo must be used within ExpandedVideoProvider');
  }
  return context;
}

interface ExpandedVideoProviderProps {
  children: ReactNode;
}

export function ExpandedVideoProvider({ children }: ExpandedVideoProviderProps) {
  const navigate = useNavigate();

  const [state, setState] = useState<ExpandedVideoState>({
    videoId: null,
    video: null,
    mediaType: 'video',
    mediaData: null,
  });

  const expandVideo = useCallback((id: number, video: VideoData) => {
    setState({ videoId: id, video, mediaType: 'video', mediaData: video });

    // Update URL with ?expanded=id (read current params at call time)
    const newParams = new URLSearchParams(window.location.search);
    newParams.set('expanded', id.toString());
    navigate({ search: newParams.toString() }, { replace: true });
  }, [navigate]);

  const expandMedia = useCallback((id: number, type: ExpandedMediaType, data: any) => {
    setState({
      videoId: type === 'video' ? id : null,
      video: type === 'video' ? data : null,
      mediaType: type,
      mediaData: data,
    });

    const newParams = new URLSearchParams(window.location.search);
    newParams.set('expanded', `${type}-${id}`);
    navigate({ search: newParams.toString() }, { replace: true });
  }, [navigate]);

  const collapseVideo = useCallback(() => {
    setState({ videoId: null, video: null, mediaType: 'video', mediaData: null });

    // Remove URL param (read current params at call time)
    const newParams = new URLSearchParams(window.location.search);
    newParams.delete('expanded');
    navigate({ search: newParams.toString() }, { replace: true });
  }, [navigate]);

  const value: ExpandedVideoContextValue = {
    state,
    expandVideo,
    expandMedia,
    collapseVideo,
  };

  return (
    <ExpandedVideoContext.Provider value={value}>
      {children}
    </ExpandedVideoContext.Provider>
  );
}
