'use client';

import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { readStoredFamilyGroupId, writeStoredFamilyGroupId } from '@/lib/selected-family-storage';

type FamilyOverlayContextValue = {
  openMiniChat: () => void;
  openChatRoom: (roomId: string) => void;
  openChatWithMember: (memberUserId: string, memberName: string, options?: { isBot?: boolean; botUsername?: string }) => void;
  closeMiniChat: () => void;
  miniChatOpen: boolean;
  pendingRoomId: string | null;
  pendingMember: { userId: string; name: string; isBot?: boolean; botUsername?: string } | null;
  clearPending: () => void;
  selectedGroupId: string | null;
  isSelectionHydrated: boolean;
  setSelectedGroupId: (groupId: string | null) => void;
};

const FamilyOverlayContext = createContext<FamilyOverlayContextValue | null>(null);

export function FamilyOverlayProvider({ children }: { children: React.ReactNode }) {
  const [miniChatOpen, setMiniChatOpen] = useState(false);
  const [pendingRoomId, setPendingRoomId] = useState<string | null>(null);
  const [pendingMember, setPendingMember] = useState<{ userId: string; name: string; isBot?: boolean; botUsername?: string } | null>(null);
  const [selectedGroupId, setSelectedGroupIdState] = useState<string | null>(null);
  const [isSelectionHydrated, setIsSelectionHydrated] = useState(false);
  const pendingMemberRef = useRef<{ userId: string; name: string; isBot?: boolean; botUsername?: string } | null>(null);

  useEffect(() => {
    const stored = readStoredFamilyGroupId();
    if (stored) {
      setSelectedGroupIdState(stored);
    }
    setIsSelectionHydrated(true);
  }, []);

  const setSelectedGroupId = useCallback((groupId: string | null) => {
    setSelectedGroupIdState(groupId);
    writeStoredFamilyGroupId(groupId);
  }, []);

  const openMiniChat = useCallback(() => {
    setMiniChatOpen(true);
  }, []);

  const closeMiniChat = useCallback(() => {
    setMiniChatOpen(false);
  }, []);

  const openChatRoom = useCallback((roomId: string) => {
    setPendingRoomId(roomId);
    setPendingMember(null);
    pendingMemberRef.current = null;
    setMiniChatOpen(true);
  }, []);

  const openChatWithMember = useCallback(
    (memberUserId: string, memberName: string, options?: { isBot?: boolean; botUsername?: string }) => {
      const payload = { userId: memberUserId, name: memberName, ...options };
      setPendingMember(payload);
      pendingMemberRef.current = payload;
      setPendingRoomId(null);
      setMiniChatOpen(true);
    },
    []
  );

  const clearPending = useCallback(() => {
    setPendingRoomId(null);
    setPendingMember(null);
    pendingMemberRef.current = null;
  }, []);

  const value = useMemo(
    () => ({
      openMiniChat,
      openChatRoom,
      openChatWithMember,
      closeMiniChat,
      miniChatOpen,
      pendingRoomId,
      pendingMember,
      clearPending,
      selectedGroupId,
      isSelectionHydrated,
      setSelectedGroupId
    }),
    [
      clearPending,
      closeMiniChat,
      isSelectionHydrated,
      miniChatOpen,
      openChatRoom,
      openChatWithMember,
      openMiniChat,
      pendingMember,
      pendingRoomId,
      selectedGroupId,
      setSelectedGroupId
    ]
  );

  return <FamilyOverlayContext.Provider value={value}>{children}</FamilyOverlayContext.Provider>;
}

export function useFamilyOverlay() {
  const context = useContext(FamilyOverlayContext);
  if (!context) {
    throw new Error('useFamilyOverlay must be used within FamilyOverlayProvider');
  }
  return context;
}